Ability to duplicate fields in blueprint/fieldset builders

statamic · Nov 1, 2023 · e8f0d8f · e8f0d8f
1 parent c26ee82
commit e8f0d8f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
@@ -21,6 +21,7 @@
                 @updated="$emit('field-updated', i, $event)"
                 @deleted="$emit('field-deleted', i)"
                 @editor-closed="$emit('editor-closed')"
+                @duplicate="duplicateField(field)"
             />
         </div>
 
@@ -140,7 +141,30 @@ export default {
 
             this.$toast.success(__('Field added'));
             this.pendingCreatedField = null;
-        }
+        },
+
+        duplicateField(field) {
+            let handle = `${field.handle}-duplicate`;
+            let counter = 0;
+
+            do {
+                counter++;
+                handle = `${field.handle}_duplicate${counter > 1 ? `_${counter}` : ''}`;
+            } while (this.suggestableConditionFields.includes(handle));
+
+            let duplicate = {
+                ...field,
+                _id: uniqid(),
+                handle: handle,
+                config: {
+                    ...field.config,
+                    display: field.config.display ? `${field.config.display} (Duplicate)` : `${field.handle} (Duplicate)`,
+                }
+            };
+
+            this.$emit('field-created', duplicate);
+            this.$toast.success(__('Field duplicated'));
+        },
 
     }
 

diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
@@ -24,6 +24,9 @@
                     >
                         <svg-icon name="light/earth" class="h-4 w-4" />
                     </button>
+                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 hover:text-gray-950 flex items-center mr-2">
+                        Duplicate
+                    </button>
                     <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950 flex items-center">
                         <svg-icon name="micro/trash" class="h-4 w-4" />
                     </button>