New Feature: Duplicate block (#8)

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -11,11 +11,13 @@
                                 :show="!isNotAFormField(formFields[selectedFieldIndex]) && showEditFieldModal"
                                 :form="form" @close="closeInputOptionModal"
                                 @remove-block="removeBlock(selectedFieldIndex)"
+                                @duplicate-block="duplicateBlock(selectedFieldIndex)"
       />
       <form-block-options-modal :field="formFields[selectedFieldIndex]"
                                 :show="isNotAFormField(formFields[selectedFieldIndex]) && showEditFieldModal"
                                 :form="form"
-                                @remove-block="removeBlock(selectedFieldIndex)" @close="closeInputOptionModal"
+                                @remove-block="removeBlock(selectedFieldIndex)" 
+                                @duplicate-block="duplicateBlock(selectedFieldIndex)" @close="closeInputOptionModal"
       />
     </template>
 
@@ -281,6 +283,13 @@ export default {
       newFields.splice(blockIndex, 1)
       this.$set(this, 'formFields', newFields)
     },
+    duplicateBlock(blockIndex) {
+      this.closeInputOptionModal()
+      this.selectedFieldIndex = null
+      const newField = clonedeep(this.formFields[blockIndex])
+      newField.id = this.generateUUID()
+      this.formFields.push(newField)
+    },
     closeInputOptionModal() {
       this.showEditFieldModal = false
     }

resources/js/components/open/forms/fields/FormBlockOptionsModal.vue

@@ -7,7 +7,10 @@
         </h2>
         <div>
           <v-button color="red" size="small" @click="removeBlock">
-            Remove Block
+            Remove
+          </v-button>
+          <v-button  size="small" @click="duplicateBlock">
+            Duplicate
           </v-button>
         </div>
       </div>
@@ -161,6 +164,10 @@ export default {
       this.close()
       this.$emit('remove-block', this.field)
     },
+    duplicateBlock(){
+      this.close()
+      this.$emit('duplicate-block', this.field)
+    },
     onFieldRequiredChange(val) {
       this.$set(this.field, 'required', val)
       if (this.field.required) {

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -7,7 +7,10 @@
         </h2>
         <div>
           <v-button color="red" size="small" @click="removeBlock">
-            Remove Block
+            Remove
+          </v-button>
+          <v-button  size="small" @click="duplicateBlock">
+            Duplicate
           </v-button>
         </div>
       </div>
@@ -290,9 +293,6 @@
       <form-block-logic-editor v-model="form" :form="form" :field="field" />
 
       <div class="pt-5 text-right">
-        <v-button color="red" @click="removeBlock">
-          Remove Field
-        </v-button>
         <v-button color="gray" shade="light" @click="close">
           Close
         </v-button>
@@ -388,6 +388,10 @@ export default {
       this.close()
       this.$emit('remove-block', this.field)
     },
+    duplicateBlock(){
+      this.close()
+      this.$emit('duplicate-block', this.field)
+    },
     onFieldRequiredChange (val) {
       this.$set(this.field, 'required', val)
       if (this.field.required) {