Merge pull request #880 from bolt/fix/slug-prefix-on-new-content

Show correct Slug prefix when creating new content
bolt · Jan 15, 2020 · 9a25d43 · 9a25d43
2 parents 60a3fa9 + 98ea749
commit 9a25d43
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 42 deletions.
diff --git a/assets/js/app/editor/Components/Slug.vue b/assets/js/app/editor/Components/Slug.vue
@@ -25,14 +25,16 @@
           <i class="fas fa-fw" :class="`fa-${icon}`"></i> {{ buttonText }}
         </button>
         <div class="dropdown-menu">
-          <a class="dropdown-item" @click="editSlug">
-            <template v-if="!edit">
+          <template v-if="!edit">
+            <a class="dropdown-item" @click="editSlug">
               <i class="fas fa-pencil-alt fa-fw"></i> {{ labels.button_edit }}
-            </template>
-            <template v-else>
+            </a>
+          </template>
+          <template v-if="!locked">
+            <a class="dropdown-item" @click="lockSlug">
               <i class="fas fa-lock fa-fw"></i> {{ labels.button_locked }}
-            </template>
-          </a>
+            </a>
+          </template>
           <a class="dropdown-item" @click="generateSlug()">
             <i class="fas fa-link fa-fw"></i> {{ labels.generate_from }}
             {{ generate }}
@@ -61,48 +63,62 @@ export default {
   data: () => {
     return {
       edit: false,
+      locked: false,
       buttonText: 'Locked',
       icon: 'lock',
     };
   },
   mounted() {
     setTimeout(() => {
-      const title = document.querySelector(
-        `input[name='fields[${this.generate}]']`,
-      ).value;
+      console.log('time, time, time');
+      let title = '';
+      this.generate.split(',').forEach(element => {
+        title =
+          title +
+          document.querySelector(`input[name='fields[${element}]']`).value;
+      });
       if (title.length <= 0) {
+        this.icon = 'unlock';
+        this.buttonText = this.$props.labels.button_unlocked;
         this.$root.$emit('generate-from-title', true);
       }
     }, 0);
     this.$root.$on('slugify-from-title', () => this.generateSlug());
-    this.buttonText = this.$props.labels.button_locked;
   },
   methods: {
     editSlug() {
       this.$root.$emit('generate-from-title', false);
-      if (!this.edit) {
-        this.edit = true;
-        this.buttonText = this.$props.labels.button_edit;
-        this.icon = 'pencil-alt';
-      } else {
-        const slug = this.$options.filters.slugify(this.val);
-        this.val = slug;
-        this.edit = false;
-        this.buttonText = this.$props.labels.button_locked;
-        this.icon = 'lock';
-      }
+      this.edit = true;
+      this.locked = false;
+      this.buttonText = this.$props.labels.button_edit;
+      this.icon = 'pencil-alt';
+    },
+    lockSlug() {
+      this.$root.$emit('generate-from-title', false);
+      const slug = this.$options.filters.slugify(this.val);
+      this.val = slug;
+      this.edit = false;
+      this.locked = true;
+      this.buttonText = this.$props.labels.button_locked;
+      this.icon = 'lock';
     },
     generateSlug() {
-      const title = document.querySelector(
-        `input[name='fields[${this.generate}]']`,
-      ).value;
+      let title = '';
+      this.generate.split(',').forEach(element => {
+        title =
+          title +
+          ' ' +
+          document.querySelector(`input[name='fields[${element}]']`).value;
+      });
+
       const slug = this.$options.filters.slugify(title);
       this.val = slug;
       this.$root.$emit('generate-from-title', true);
 
       this.edit = false;
-      this.buttonText = this.$props.labels.button_locked;
-      this.icon = 'lock';
+      this.locked = false;
+      this.buttonText = this.$props.labels.button_unlocked;
+      this.icon = 'unlock';
     },
   },
 };

diff --git a/config/bolt/contenttypes.yaml b/config/bolt/contenttypes.yaml
@@ -71,7 +71,7 @@ pages:
             class: large
         slug:
             type: slug
-            uses: header
+            uses: [ heading, subheading ]
         photo:
             type: image
             label: "Eén plaatje"

diff --git a/src/Entity/Field/SlugField.php b/src/Entity/Field/SlugField.php
@@ -31,19 +31,6 @@ public function setValue($value): parent
         return $this;
     }
 
-    public function getSlugPrefix(): string
-    {
-        // @todo https://github.com/bolt/four/issues/188 allow empty slug prefix
-        $content = $this->getContent();
-
-        if (! $content) {
-            //@todo remove this
-            return '/foobar/';
-        }
-
-        return sprintf('/%s/', $content->getDefinition()->get('singular_slug'));
-    }
-
     public function getSlugUseFields(): array
     {
         return Collection::wrap($this->getDefinition()->get('uses'))->toArray();

diff --git a/templates/_partials/fields/slug.html.twig b/templates/_partials/fields/slug.html.twig
@@ -1,13 +1,15 @@
 {% extends '@bolt/_partials/fields/_base.html.twig' %}
 
 {% block field %}
+{% set prefix = '/' ~ record.definition.singular_slug ~ '/' %}
     <editor-slug
         :value='{{ value|json_encode }}'
         :name='{{ name|json_encode }}'
-        :prefix='{{ field.slugPrefix|json_encode }}'
+        :prefix='{{ prefix|json_encode }}'
         :field-class='{{ class|json_encode }}'
-        :generate='{{ field.slugUseFields|join(', ')|json_encode }}'
+        :generate='{{ field.slugUseFields|join(',')|json_encode }}'
         :labels='{{ {
+            'button_unlocked': 'slug.button_unlocked'|trans,
             'button_locked': 'slug.button_locked'|trans,
             'button_edit': 'slug.button_edit'|trans,
             'generate_from': 'slug.generate_from'|trans,

diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
@@ -2163,5 +2163,11 @@
         <target>Disabled</target>
       </segment>
     </unit>
+    <unit id="XQ2U6fN" name="slug.button_unlocked">
+      <segment>
+        <source>slug.button_unlocked</source>
+        <target>Unlocked</target>
+      </segment>
+    </unit>
   </file>
 </xliff>