On Form Preview field's modal & drag (#159)

* On Form Preview field's modal & drag

* fix typo

* remove extra code

* fix page break

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

@@ -156,6 +156,7 @@ import ProTag from '../../../common/ProTag.vue'
 import clonedeep from 'clone-deep'
 import EditableDiv from '../../../common/EditableDiv.vue'
 import VButton from "../../../common/Button.vue";
+import { mapState } from 'vuex'
 
 export default {
   name: 'FormFieldsEditor',
@@ -172,14 +173,16 @@ export default {
   data() {
     return {
       formFields: [],
-      selectedFieldIndex: null,
-      showEditFieldModal: false,
       showAddBlock: false,
       removing: null
     }
   },
 
   computed: {
+    ...mapState({
+      selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
+      showEditFieldModal: state => state['open/working_form'].showEditFieldModal
+    }),
     form: {
       get() {
         return this.$store.state['open/working_form'].content
@@ -306,28 +309,25 @@ export default {
       return block && block.type.startsWith('nf')
     },
     editOptions(index) {
-      this.selectedFieldIndex = index
-      this.showEditFieldModal = true
+      this.$store.commit('open/working_form/openSettingsForField', index)
     },
     blockAdded(block) {
       this.formFields.push(block)
     },
     removeBlock(blockIndex) {
       this.closeInputOptionModal()
-      this.selectedFieldIndex = null
       const newFields = clonedeep(this.formFields)
       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
+      this.$store.commit('open/working_form/closeEditFieldModal')
     }
   }
 }

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -32,7 +32,7 @@
     <flat-select-input :form="submissionOptions" name="databaseAction" label="Database Submission Action"
                   :options="[
                     {name:'Create new record (default)', value:'create'},
-                    {name:'Update Record (if any)', value:'update'}
+                    {name:'Update Record (or create if no match)', value:'update'}
                   ]" :required="true" help="Create a new record or update an existing one"
     >
       <template #selected="{option,optionName}">

resources/js/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -53,6 +53,7 @@
       <open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
                             :creating="creating"
                             :form="form"
+                            :admin-preview="true"
                             @restarted="previewFormSubmitted=false"
                             @submitted="previewFormSubmitted=true"
       />