Edit field options as sidebar

resources/js/components/common/Button.vue

@@ -71,7 +71,7 @@ export default {
     btnClasses() {
       const sizes = this.sizes
       const colorShades = this.colorShades
-      return `${sizes['p-y']} ${sizes['p-x']}
+      return `v-btn ${sizes['p-y']} ${sizes['p-x']}
         ${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades['ring-offset']}
         ${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
         focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`

resources/js/components/common/Dropdown.vue

@@ -1,28 +1,26 @@
 <template>
   <div class="relative">
-    <div>
-      <slot name="trigger"
-            :toggle="toggle"
-            :open="open"
-            :close="close"
-      />
-    </div>
+    <slot name="trigger"
+          :toggle="toggle"
+          :open="open"
+          :close="close"
+    />
     <transition name="fade">
       <div
         v-if="isOpen"
         v-on-clickaway="close"
         :class="dropdownClass"
       >
         <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-          <slot />
+          <slot/>
         </div>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-import { directive as onClickaway } from 'vue-clickaway'
+import {directive as onClickaway} from 'vue-clickaway'
 
 export default {
   name: 'Dropdown',
@@ -31,21 +29,24 @@ export default {
   },
 
   props: {
-    dropdownClass: { type: String, default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20' }
+    dropdownClass: {
+      type: String,
+      default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
+    }
   },
-  data () {
+  data() {
     return {
       isOpen: false
     }
   },
   methods: {
-    open () {
+    open() {
       this.isOpen = true
     },
-    close () {
+    close() {
       this.isOpen = false
     },
-    toggle () {
+    toggle() {
       this.isOpen = !this.isOpen
     }
   }

resources/js/components/common/ProTag.vue

@@ -9,18 +9,18 @@
       <h2 class="text-nt-blue">
         OpnForm PRO
       </h2>
-      <h4 v-if="user.is_subscribed && !user.has_enterprise_subscription" class="text-center mt-5">
+      <h4 v-if="user &&user.is_subscribed && !user.has_enterprise_subscription" class="text-center mt-5">
         We're happy to have you as a Pro customer. If you're having any issue with OpnForm, or if you have a
         feature request, please <a href="mailto:[email protected]">contact us</a>.
         <br><br>
         If you need to collaborate, or to work with multiple workspaces, or just larger file uploads, you can
         also upgrade our subscription to get an Enterprise subscription.
       </h4>
-      <h4 v-if="user.is_subscribed && user.has_enterprise_subscription" class="text-center mt-5">
+      <h4 v-if="user && user.is_subscribed && user.has_enterprise_subscription" class="text-center mt-5">
         We're happy to have you as an Enterprise customer. If you're having any issue with OpnForm, or if you have a
         feature request, please <a href="mailto:[email protected]">contact us</a>.
       </h4>
-      <p v-if="!user.is_subscribed" class="mt-4">
+      <p v-if="user && !user.is_subscribed" class="mt-4">
         All the features with a<span
           class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold mx-1"
         >

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

@@ -50,7 +50,7 @@
               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" 
+        <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"
@@ -69,6 +69,7 @@
 <script>
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
+import {mapState} from "vuex";
 
 export default {
   name: 'OpenFormField',
@@ -106,6 +107,10 @@ export default {
   },
 
   computed: {
+    ...mapState({
+      selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
+      showEditFieldSidebar: state => state['open/working_form'].showEditFieldSidebar
+    }),
     fieldComponents() {
       return {
         text: 'TextInput',
@@ -160,6 +165,11 @@ export default {
     isFieldDisabled () {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
     },
+    beingEdited() {
+      return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item)=>{
+        return item.id === this.field.id
+      }) === this.selectedFieldIndex
+    },
     selectionFieldsOptions () {
       // For auto update hidden options
       let fieldsOptions = []
@@ -191,7 +201,11 @@ export default {
     getFieldClasses () {
       let classes = ''
       if (this.adminPreview) {
-        classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative'
+        classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative transition-colors'
+
+        if (this.beingEdited) {
+          classes += ' bg-blue-50 rounded-md'
+        }
       }
       return classes
     },

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

@@ -49,7 +49,7 @@
       </div>
     </div>
 
-    <div class="w-full flex grow overflow-y-scroll">
+    <div class="w-full flex grow overflow-y-scroll relative">
       <div class="relative w-full shrink-0 overflow-y-scroll border-r md:w-1/2 md:max-w-sm lg:w-2/5">
         <div class="border-b bg-blue-50 p-5 text-nt-blue-dark md:hidden">
           Please create this form on a device with a larger screen. That will allow you to preview your form changes.
@@ -68,8 +68,10 @@
 
       <form-editor-preview/>
 
+      <form-field-edit-sidebar/>
+
       <!-- Form Error Modal -->
-      <form-error-modal 
+      <form-error-modal
         :show="showFormErrorModal"
         :validation-error-response="validationErrorResponse"
         @close="showFormErrorModal=false"
@@ -83,6 +85,7 @@
 
 <script>
 import {mapGetters} from 'vuex'
+import FormFieldEditSidebar from '../fields/FormFieldEditSidebar.vue'
 import FormErrorModal from './form-components/FormErrorModal.vue'
 import FormInformation from './form-components/FormInformation.vue'
 import FormStructure from './form-components/FormStructure.vue'
@@ -100,6 +103,7 @@ import fieldsLogic from '../../../../mixins/forms/fieldsLogic.js'
 export default {
   name: 'FormEditor',
   components: {
+    FormFieldEditSidebar,
     FormEditorPreview,
     FormIntegrations,
     FormNotifications,

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

@@ -3,20 +3,6 @@
     <add-form-block-modal :form-blocks="formFields" :show="showAddBlock" @block-added="blockAdded"
                           @close="showAddBlock=false"
     />
-    <template v-if="selectedFieldIndex !== null">
-      <form-field-options-modal :field="formFields[selectedFieldIndex]"
-                                :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)"
-                                @duplicate-block="duplicateBlock(selectedFieldIndex)" @close="closeInputOptionModal"
-      />
-    </template>
 
     <draggable v-model="formFields"
                class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
@@ -61,6 +47,15 @@
             </div>
           </template>
           <template v-else>
+            <button class="hover:bg-red-50 text-gray-500 hover:text-red-600 rounded transition-colors cursor-pointer p-2 hidden md:group-hover:block"
+                    @click="removing=field.id"
+            >
+              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
             <button class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
                     :class="{'text-blue-500': !field.hidden, 'text-gray-500': field.hidden, 'group-hover:md:block': !field.hidden, 'md:block':field.hidden}"
                     @click="toggleHidden(field)"
@@ -144,23 +139,18 @@
 
 <script>
 import draggable from 'vuedraggable'
-import FormFieldOptionsModal from '../fields/FormFieldOptionsModal.vue'
 import AddFormBlockModal from './form-components/AddFormBlockModal.vue'
-import FormBlockOptionsModal from '../fields/FormBlockOptionsModal.vue'
 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',
   components: {
     VButton,
     ProTag,
-    FormBlockOptionsModal,
     AddFormBlockModal,
-    FormFieldOptionsModal,
     draggable,
     EditableDiv
   },
@@ -174,10 +164,6 @@ export default {
   },
 
   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
@@ -300,29 +286,21 @@ export default {
       }
       return type
     },
-    isNotAFormField(block) {
-      return block && block.type.startsWith('nf')
-    },
     editOptions(index) {
       this.$store.commit('open/working_form/openSettingsForField', index)
     },
     blockAdded(block) {
       this.formFields.push(block)
+      this.$store.commit('open/working_form/openSettingsForField', this.formFields.length-1)
     },
     removeBlock(blockIndex) {
-      this.closeInputOptionModal()
+      this.closeSidebar()
       const newFields = clonedeep(this.formFields)
       newFields.splice(blockIndex, 1)
       this.$set(this, 'formFields', newFields)
     },
-    duplicateBlock(blockIndex) {
-      this.closeInputOptionModal()
-      const newField = clonedeep(this.formFields[blockIndex])
-      newField.id = this.generateUUID()
-      this.formFields.push(newField)
-    },
-    closeInputOptionModal() {
-      this.$store.commit('open/working_form/closeEditFieldModal')
+    closeSidebar() {
+      this.$store.commit('open/working_form/closeEditFieldSidebar')
     }
   }
 }

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

@@ -3,36 +3,15 @@
   <div
     class="bg-gray-50 dark:bg-notion-dark-light hidden md:flex flex-grow p-5 flex-col items-center overflow-y-scroll"
   >
-    <p class="mb-2 text-center text-gray-700">
-      Preview Full Page
-      <v-switch v-model="previewEmbed" class="inline px-2" />
-      Preview Embed
-    </p>
-    <p class="font-semibold">
-      <span v-if="previewFormSubmitted && !form.re_fillable">
-        <a href="#" @click.prevent="$refs['form-preview'].restart()">Restart Form
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-nt-blue inline" viewBox="0 0 20 20"
-               fill="currentColor"
-          >
-            <path fill-rule="evenodd"
-                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                  clip-rule="evenodd"
-            />
-          </svg>
-        </a>
-      </span>
-    </p>
-    <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all"
-         :class="{'max-w-lg':previewEmbed,'max-w-5xl':!previewEmbed}"
-    >
+    <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all max-w-5xl">
       <transition enter-active-class="linear duration-100 overflow-hidden"
                   enter-class="max-h-0"
                   enter-to-class="max-h-56"
                   leave-active-class="linear duration-100 overflow-hidden"
                   leave-class="max-h-56"
                   leave-to-class="max-h-0"
       >
-        <div v-if="!previewEmbed && (form.logo_picture || form.cover_picture)">
+        <div v-if="(form.logo_picture || form.cover_picture)">
           <div v-if="form.cover_picture">
             <div id="cover-picture"
                  class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center"
@@ -58,7 +37,24 @@
                             @submitted="previewFormSubmitted=true"
       />
     </div>
-    <p v-if="creating" class=" w-full mt-2 font-normal text-center text-gray-400">Answers won't really be saved</p>
+    <p class="text-center text-xs text-gray-400 dark:text-gray-600 mt-1">
+      Form Preview <span v-if="creating"
+                         class="font-normal text-gray-400 dark:text-gray-600 text-xs"
+      >- Answers won't be saved</span>
+      <br>
+      <span v-if="previewFormSubmitted && !form.re_fillable">
+        <a href="#" @click.prevent="$refs['form-preview'].restart()">Restart Form
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-nt-blue inline" viewBox="0 0 20 20"
+               fill="currentColor"
+          >
+            <path fill-rule="evenodd"
+                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                  clip-rule="evenodd"
+            />
+          </svg>
+        </a>
+      </span>
+    </p>
   </div>
 </template>
 
@@ -73,7 +69,6 @@ export default {
   data () {
     return {
       previewFormSubmitted: false,
-      previewEmbed: false
     }
   },