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/OpenCompleteForm.vue

@@ -87,6 +87,7 @@
                      :loading="loading"
                      :fields="form.properties"
                      :theme="theme"
+                     :admin-preview="adminPreview"
                      @submit="submitForm"
         >
           <template #submit-btn="{submitForm}">
@@ -136,7 +137,8 @@ export default {
 
   props: {
     form: { type: Object, required: true },
-    creating: { type: Boolean, default: false } // If true, fake form submit
+    creating: { type: Boolean, default: false }, // If true, fake form submit
+    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
   },
 
   mixins: [FormPendingSubmissionKey],

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

@@ -7,35 +7,28 @@
   <form v-else-if="dataForm" @submit.prevent="">
     <transition name="fade" mode="out-in" appear>
       <template v-for="group, groupIndex in fieldGroups">
-        <div v-if="currentFieldGroupIndex===groupIndex" :key="groupIndex" class="form-group flex flex-wrap w-full">
+        <div v-if="currentFieldGroupIndex===groupIndex" 
-          <template v-for="field in group">
+              :key="groupIndex" 
-            <component :is="getFieldComponents(field)" v-if="getFieldComponents(field)"
+              class="form-group flex flex-wrap w-full">
-                       :key="field.id + formVersionId" :class="getFieldClasses(field)"
+
-                       v-bind="inputProperties(field)" :required="isFieldRequired[field.id]"
+          <draggable v-model="currentFields"
-                       :disabled="isFieldDisabled[field.id]"
+                     class="flex flex-wrap transition-all"
-            />
+                     :class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
-            <template v-else>
+                     ghost-class="ghost-item"
-              <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
+                     handle=".draggable" :animation="200"
-                   class="nf-text w-full px-2 mb-3" :class="[getFieldClasses(field), getFieldAlignClasses(field)]"
+                     @start="onDragStart" @end="onDragEnd"
-                   v-html="field.content"
-              />
-              <div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
-                   class="nf-code w-full px-2 mb-3" :class="getFieldClasses(field)"
-                   v-html="field.content"
-              />
-              <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" 
-                  class="border-b my-4 w-full mx-2" :class="getFieldClasses(field)"
-              />
-              <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
-                   :key="field.id" class="my-4 w-full px-2" :class="[getFieldClasses(field), getFieldAlignClasses(field)]"
           >
-                <div v-if="!field.image_block" class="p-4 border border-dashed">
+            <open-form-field v-for="field in group"
-                  Open <b>{{ field.name }}'s</b> block settings to upload image.
+                              :key="field.id + formVersionId"
-                </div>
+                              :field="field"
-                <img v-else :alt="field.name" :src="field.image_block" class="max-w-full">
+                              :show-hidden="showHidden"
-              </div>
+                              :form="form"
-            </template>
+                              :data-form="dataForm"
-          </template>
+                              :data-form-value="dataFormValue"
+                              :theme="theme"
+                              :admin-preview="adminPreview"
+            />
+          </draggable>
         </div>
       </template>
     </transition>
@@ -75,13 +68,14 @@ import Form from 'vform'
 import OpenFormButton from './OpenFormButton.vue'
 import clonedeep from 'clone-deep'
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
-
+import OpenFormField from './OpenFormField.vue'
+import draggable from 'vuedraggable'
 const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
 
 export default {
   name: 'OpenForm',
-  components: {OpenFormButton, VueHcaptcha},
+  components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha},
   mixins: [FormPendingSubmissionKey],
   props: {
     form: {
@@ -103,37 +97,37 @@ export default {
     fields: {
       type: Array,
       required: true
-    }
+    },
+    adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
   },
   data() {
     return {
       dataForm: null,
       currentFieldGroupIndex: 0,
-
       /**
        * Used to force refresh components by changing their keys
        */
       formVersionId: 1,
       darkModeEnabled: document.body.classList.contains('dark'),
-      isAutoSubmit: false
+      isAutoSubmit: false,
+      /**
+       * If currently dragging a field
+       */
+      dragging: false
     }
   },
 
   computed: {
     hCaptchaSiteKey: () => window.config.hCaptchaSiteKey,
-    actualFields() {
-      return this.fields.filter((field) => {
-        return this.showHidden || !this.isFieldHidden[field.id]
-      })
-    },
     /**
      * Create field groups (or Page) using page breaks if any
      */
     fieldGroups() {
-      if (!this.actualFields) return []
+      if (!this.fields) return []
       const groups = []
       let currentGroup = []
-      this.actualFields.forEach((field) => {
+      this.fields.forEach((field) => {
+        if (field.type === 'nf-page-break' && this.isFieldHidden(field)) return
         currentGroup.push(field)
         if (field.type === 'nf-page-break') {
           groups.push(currentGroup)
@@ -143,9 +137,27 @@ export default {
       groups.push(currentGroup)
       return groups
     },
-    currentFields() {
+    currentFields: {
+      get () {
         return this.fieldGroups[this.currentFieldGroupIndex]
       },
+      set (val) {
+        // On re-order from the form, set the new order
+        // Add the previous groups and next to val, and set the properties on working form
+        const newFields = []
+        this.fieldGroups.forEach((group, index) => {
+          if (index < this.currentFieldGroupIndex) {
+            newFields.push(...group)
+          } else if (index === this.currentFieldGroupIndex) {
+            newFields.push(...val)
+          } else {
+            newFields.push(...group)
+          }
+        })
+        // set the properties on working_form vuex
+        this.$store.commit('open/working_form/setProperties', newFields)
+      }
+    },
     /**
      * Returns the page break block for the current group of fields
      */
@@ -168,20 +180,6 @@ export default {
     isLastPage() {
       return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
     },
-    fieldComponents() {
-      return {
-        text: 'TextInput',
-        number: 'TextInput',
-        select: 'SelectInput',
-        multi_select: 'SelectInput',
-        date: 'DateInput',
-        files: 'FileInput',
-        checkbox: 'CheckboxInput',
-        url: 'TextInput',
-        email: 'TextInput',
-        phone_number: 'TextInput',
-      }
-    },
     isPublicFormPage() {
       return this.$route.name === 'forms.show_public'
     },
@@ -202,28 +200,7 @@ export default {
         }
       })
       return data
-    },
+    }
-    isFieldHidden() {
-      const fieldsHidden = {}
-      this.fields.forEach((field) => {
-        fieldsHidden[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
-      })
-      return fieldsHidden
-    },
-    isFieldRequired() {
-      const fieldsRequired = {}
-      this.fields.forEach((field) => {
-        fieldsRequired[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isRequired()
-      })
-      return fieldsRequired
-    },
-    isFieldDisabled () {
-      const fieldsDisabled = {}
-      this.fields.forEach((field) => {
-        fieldsDisabled[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isDisabled()
-      })
-      return fieldsDisabled
-    },
   },
 
   watch: {
@@ -402,108 +379,6 @@ export default {
       })
       this.dataForm = new Form(formData)
     },
-    /**
-     * Get the right input component for the field/options combination
-     */
-    getFieldComponents(field) {
-      if (field.type === 'text' && field.multi_lines) {
-        return 'TextAreaInput'
-      }
-      if (field.type === 'url' && field.file_upload) {
-        return 'FileInput'
-      }
-      if (field.type === 'number' && field.is_rating && field.rating_max_value) {
-        return 'RatingInput'
-      }
-      if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
-        return 'FlatSelectInput'
-      }
-      if (field.type === 'checkbox' && field.use_toggle_switch) {
-        return 'ToggleSwitchInput'
-      }
-      if (field.type === 'signature') {
-        return 'SignatureInput'
-      }
-      return this.fieldComponents[field.type]
-    },
-    getFieldClasses(field) {
-      if (!field.width || field.width === 'full') return 'w-full px-2'
-      else if (field.width === '1/2') {
-        return 'w-full sm:w-1/2 px-2'
-      } else if (field.width === '1/3') {
-        return 'w-full sm:w-1/3 px-2'
-      } else if (field.width === '2/3') {
-        return 'w-full sm:w-2/3 px-2'
-      } else if (field.width === '1/4') {
-        return 'w-full sm:w-1/4 px-2'
-      } else if (field.width === '3/4') {
-        return 'w-full sm:w-3/4 px-2'
-      }
-    },
-    getFieldAlignClasses (field) {
-      if (!field.align || field.align === 'left') return 'text-left'
-      else if (field.align === 'right') {
-        return 'text-right'
-      } else if (field.align === 'center') {
-        return 'text-center'
-      } else if (field.align === 'justify') {
-        return 'text-justify'
-      }
-    },
-    /**
-     * Get the right input component options for the field/options
-     */
-    inputProperties(field) {
-      const inputProperties = {
-        key: field.id,
-        name: field.id,
-        form: this.dataForm,
-        label: (field.hide_field_name) ? null : field.name + (this.isFieldHidden[field.id] ? ' (Hidden Field)' : ''),
-        color: this.form.color,
-        placeholder: field.placeholder,
-        help: field.help,
-        helpPosition: (field.help_position) ? field.help_position : 'below_input',
-        uppercaseLabels: this.form.uppercase_labels,
-        theme: this.theme,
-        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
-        showCharLimit: field.show_char_limit || false
-      }
-
-      if (['select', 'multi_select'].includes(field.type)) {
-        inputProperties.options = (field.hasOwnProperty(field.type))
-          ? field[field.type].options.map(option => {
-            return {
-              name: option.name,
-              value: option.name
-            }
-          })
-          : []
-        inputProperties.multiple = (field.type === 'multi_select')
-        inputProperties.allowCreation = (field.allow_creation === true)
-        inputProperties.searchable = (inputProperties.options.length > 4)
-      } else if (field.type === 'date') {
-        if (field.with_time) {
-          inputProperties.withTime = true
-        } else if (field.date_range) {
-          inputProperties.dateRange = true
-        }
-        if (field.disable_past_dates) {
-          inputProperties.disablePastDates = true
-        } else if (field.disable_future_dates) {
-          inputProperties.disableFutureDates = true
-        }
-      } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
-        inputProperties.multiple = (field.multiple !== undefined && field.multiple)
-        inputProperties.mbLimit = 5
-        inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
-      } else if (field.type === 'number' && field.is_rating) {
-        inputProperties.numberOfStars = parseInt(field.rating_max_value)
-      } else if (['number', 'phone_number'].includes(field.type)) {
-        inputProperties.pattern = "/\d*"
-      }
-
-      return inputProperties
-    },
     previousPage() {
       this.currentFieldGroupIndex -= 1
       window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -513,19 +388,22 @@ export default {
       this.currentFieldGroupIndex += 1
       window.scrollTo({ top: 0, behavior: 'smooth' })
       return false
+    },
+    isFieldHidden (field) {
+      return (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
+    },
+    onDragStart () {
+      this.dragging = true
+    },
+    onDragEnd () {
+      this.dragging = false
     }
   }
 }
 </script>
 
-<style lang='scss'>
+<style lang='scss' scoped>
-.nf-text {
+.ghost-item {
-  ol {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-md;
-    @apply list-decimal list-inside;
-  }
-
-  ul {
-    @apply list-disc list-inside;
-  }
 }
 </style>

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

@@ -0,0 +1,290 @@
+<template>
+  <div v-if="!isFieldHidden"
+       :id="'block-'+field.id" :class="getFieldWidthClasses(field)"
+  >
+    <div :class="getFieldClasses(field)">
+      <div v-if="adminPreview"
+           class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4"
+      >
+        <div class="flex flex-col lg:flex-row bg-white rounded-md">
+          <div class="p-2 lg:pr-1 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
+               @click.prevent="editFieldOptions"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                 class="w-5 h-5"
+            >
+              <path fill-rule="evenodd"
+                    d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
+                    clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div
+            class="px-2 lg:pl-0 lg:pr-1 lg:pt-2 pb-2 bg-white rounded-md text-gray-300 hover:text-gray-500 cursor-grab draggable"
+            role="button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
+              fill="none" viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round" stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <component :is="getFieldComponents" v-if="getFieldComponents"
+                  v-bind="inputProperties(field)" :required="isFieldRequired"
+                  :disabled="isFieldDisabled"
+      />
+      <template v-else>
+        <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
+              class="nf-text w-full px-2 mb-3" :class="[getFieldAlignClasses(field)]"
+              v-html="field.content"
+        />
+        <div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
+              class="nf-code w-full px-2 mb-3"
+              v-html="field.content"
+        />
+        <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" 
+            class="border-b my-4 w-full mx-2"
+        />
+        <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
+              :key="field.id" class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]"
+        >
+          <div v-if="!field.image_block" class="p-4 border border-dashed">
+            Open <b>{{ field.name }}'s</b> block settings to upload image.
+          </div>
+          <img v-else :alt="field.name" :src="field.image_block" class="max-w-full">
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
+
+export default {
+  name: 'OpenFormField',
+  components: { },
+  mixins: [FormPendingSubmissionKey],
+  props: {
+    form: {
+      type: Object,
+      required: true
+    },
+    dataForm: {
+      type: Object,
+      required: true
+    },
+    dataFormValue: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: Object,
+      required: true
+    },
+    showHidden: {
+      type: Boolean,
+      default: false
+    },
+    field: {
+      type: Object,
+      required: true
+    },
+    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+  },
+  data () {
+    return {}
+  },
+
+  computed: {
+    fieldComponents() {
+      return {
+        text: 'TextInput',
+        number: 'TextInput',
+        select: 'SelectInput',
+        multi_select: 'SelectInput',
+        date: 'DateInput',
+        files: 'FileInput',
+        checkbox: 'CheckboxInput',
+        url: 'TextInput',
+        email: 'TextInput',
+        phone_number: 'TextInput',
+      }
+    },
+    /**
+     * Get the right input component for the field/options combination
+     */
+     getFieldComponents() {
+      const field = this.field
+      if (field.type === 'text' && field.multi_lines) {
+        return 'TextAreaInput'
+      }
+      if (field.type === 'url' && field.file_upload) {
+        return 'FileInput'
+      }
+      if (field.type === 'number' && field.is_rating && field.rating_max_value) {
+        return 'RatingInput'
+      }
+      if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
+        return 'FlatSelectInput'
+      }
+      if (field.type === 'checkbox' && field.use_toggle_switch) {
+        return 'ToggleSwitchInput'
+      }
+      if (field.type === 'signature') {
+        return 'SignatureInput'
+      }
+      return this.fieldComponents[field.type]
+    },
+    isPublicFormPage () {
+      return this.$route.name === 'forms.show_public'
+    },
+    isFieldHidden () {
+      return !this.showHidden && this.shouldBeHidden
+    },
+    shouldBeHidden () {
+      return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isHidden()
+    },
+    isFieldRequired () {
+      return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isRequired()
+    },
+    isFieldDisabled () {
+      return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
+    },
+    selectionFieldsOptions () {
+      // For auto update hidden options
+      let fieldsOptions = []
+
+      if (['select', 'multi_select', 'status'].includes(this.field.type)) {
+        fieldsOptions = [...this.field[this.field.type].options]
+        if (this.field.hidden_options && this.field.hidden_options.length > 0) {
+          fieldsOptions = fieldsOptions.filter((option) => {
+            return this.field.hidden_options.indexOf(option.id) < 0
+          })
+        }
+      }
+
+      return fieldsOptions
+    }
+  },
+
+  watch: {},
+
+  mounted () {},
+
+  methods: {
+    editFieldOptions () {
+      this.$store.commit('open/working_form/openSettingsForField', this.field)
+    },
+    /**
+     * Get the right input component for the field/options combination
+     */
+    getFieldClasses () {
+      let classes = ''
+      if (this.adminPreview) {
+        classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative'
+      }
+      return classes
+    },
+    getFieldWidthClasses (field) {
+      if (!field.width || field.width === 'full') return 'w-full px-2'
+      else if (field.width === '1/2') {
+        return 'w-full sm:w-1/2 px-2'
+      } else if (field.width === '1/3') {
+        return 'w-full sm:w-1/3 px-2'
+      } else if (field.width === '2/3') {
+        return 'w-full sm:w-2/3 px-2'
+      } else if (field.width === '1/4') {
+        return 'w-full sm:w-1/4 px-2'
+      } else if (field.width === '3/4') {
+        return 'w-full sm:w-3/4 px-2'
+      }
+    },
+    getFieldAlignClasses (field) {
+      if (!field.align || field.align === 'left') return 'text-left'
+      else if (field.align === 'right') {
+        return 'text-right'
+      } else if (field.align === 'center') {
+        return 'text-center'
+      } else if (field.align === 'justify') {
+        return 'text-justify'
+      }
+    },
+    /**
+     * Get the right input component options for the field/options
+     */
+    inputProperties(field) {
+      const inputProperties = {
+        key: field.id,
+        name: field.id,
+        form: this.dataForm,
+        label: (field.hide_field_name) ? null : field.name + ((this.shouldBeHidden) ? ' (Hidden Field)' : ''),
+        color: this.form.color,
+        placeholder: field.placeholder,
+        help: field.help,
+        helpPosition: (field.help_position) ? field.help_position : 'below_input',
+        uppercaseLabels: this.form.uppercase_labels,
+        theme: this.theme,
+        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
+        showCharLimit: field.show_char_limit || false
+      }
+
+      if (['select', 'multi_select'].includes(field.type)) {
+        inputProperties.options = (field.hasOwnProperty(field.type))
+          ? field[field.type].options.map(option => {
+            return {
+              name: option.name,
+              value: option.name
+            }
+          })
+          : []
+        inputProperties.multiple = (field.type === 'multi_select')
+        inputProperties.allowCreation = (field.allow_creation === true)
+        inputProperties.searchable = (inputProperties.options.length > 4)
+      } else if (field.type === 'date') {
+        if (field.with_time) {
+          inputProperties.withTime = true
+        } else if (field.date_range) {
+          inputProperties.dateRange = true
+        }
+        if (field.disable_past_dates) {
+          inputProperties.disablePastDates = true
+        } else if (field.disable_future_dates) {
+          inputProperties.disableFutureDates = true
+        }
+      } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
+        inputProperties.multiple = (field.multiple !== undefined && field.multiple)
+        inputProperties.mbLimit = 5
+        inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
+      } else if (field.type === 'number' && field.is_rating) {
+        inputProperties.numberOfStars = parseInt(field.rating_max_value)
+      } else if (['number', 'phone_number'].includes(field.type)) {
+        inputProperties.pattern = "/\d*"
+      }
+
+      return inputProperties
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.nf-text {
+  ol {
+    @apply list-decimal list-inside;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+  }
+}
+</style>

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.$store.commit('open/working_form/openSettingsForField', index)
-      this.showEditFieldModal = true
     },
     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"
       />

resources/js/store/modules/open/working_form.js

@@ -2,12 +2,37 @@ export const namespaced = true
 
 // state
 export const state = {
-  content: null
+  content: null,
+
+  // Field being edited
+  selectedFieldIndex: null,
+  showEditFieldModal: null
 }
 
 // mutations
 export const mutations = {
   set (state, form) {
     state.content = form
+  },
+  setProperties (state, properties) {
+    state.content.properties = properties
+  },
+  openSettingsForField (state, index) {
+    // If field is passed, compute index
+    if (typeof index === 'object') {
+      index = state.content.properties.findIndex(prop => prop.id === index.id)
+    }
+    state.selectedFieldIndex = index
+    state.showEditFieldModal = true
+  },
+  setSelectedFieldIndex (state, index) {
+    state.selectedFieldIndex = index
+  },
+  openEditFieldModal (state) {
+    state.showEditFieldModal = true
+  },
+  closeEditFieldModal (state) {
+    state.showEditFieldModal = false
+    this.selectedFieldIndex = null
   }
 }