From d52d08a9c05234a5eb71f0000b109295e9c62834 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 7 Jan 2021 16:48:34 -0500
Subject: [PATCH] Add a separate handle field. Closes #1667

---
 resources/js/components/blueprints/Section.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index ac17ba7eb3..2f950ec8d5 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -14,6 +14,9 @@
                     <span class="font-medium mr-1">
                         <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" />
                     </span>
+                    <span class="font-mono text-xs text-grey-70 mr-1">
+                        <input type="text" v-model="section.handle" @input="handleSyncedWithDisplay = false" class="bg-transparent w-full outline-none" />
+                    </span>
                 </div>
                 <div class="flex items-center px-1.5">
                     <button @click.prevent="toggleEditing" class="text-grey-60 hover:text-grey-100 mr-1">
@@ -84,6 +87,7 @@ export default {
         return {
             isEditing: false,
             editingField: null,
+            handleSyncedWithDisplay: false
         }
     },
 
@@ -103,11 +107,21 @@ export default {
         },
 
         'section.display': function(display) {
-            this.section.handle = this.$slugify(display, '_');
+            if (this.handleSyncedWithDisplay) {
+                this.section.handle = this.$slugify(display, '_');
+            }
         }
 
     },
 
+    created() {
+        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
+        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
+        if (!this.section.handle || this.section.handle == 'new_section' || this.section.handle == 'new_set') {
+            this.handleSyncedWithDisplay = true;
+        }
+    },
+
     methods: {
 
         fieldLinked(field) {