village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New Feature: Duplicate block (#8)

This commit is contained in:
Chirag 2022-10-03 00:29:30 +05:30 committed by GitHub
parent 610c71cb69
commit 5b92ac2633
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/open/forms/components/FormFieldsEditor.vue
View File

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

9
resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
View File

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

12
resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
View File

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