Edit field options as sidebar (#190)

* Edit field options as sidebar * WIP * Finish dynamic positioning of sidebar * Open block on addition, fix pro tag, add visual clue field open * fix typo * remove extra code * remove extra code --------- Co-authored-by: Julien Nahum <julien@nahum.net>
2023-09-08 16:19:13 +05:30
parent d9c71f5cee
commit d93eca7410
14 changed files with 945 additions and 106 deletions
--- a/resources/js/components/open/forms/components/FormEditor.vue
+++ b/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,
--- a/resources/js/components/open/forms/components/FormFieldsEditor.vue
+++ b/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')
    }
  }
 }
--- a/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -3,28 +3,7 @@
  <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"
@@ -32,7 +11,7 @@
                  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
    }
  },

--- a/resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
@@ -1,9 +1,11 @@
 <template>
-  <div v-if="logic" :key="resetKey" class="-mx-4 sm:-mx-6 p-5 border-b">
-    <h3 class="font-semibold block text-lg">
-      Logic
-    </h3>
-    <p class="text-gray-400 text-xs mb-5">
+  <collapse v-if="logic" :key="resetKey" :default-value="isCollapseOpen" @click="onClickCollapse">
+    <template #title>
+      <h3 class="font-semibold block text-lg">
+        Logic
+      </h3>
+    </template>
+    <p class="text-gray-400 text-xs mb-3">
      Add some logic to this block. Start by adding some conditions, and then add some actions.
    </p>
    <div class="relative flex">
@@ -26,16 +28,16 @@
      </div>
    </div>

-    <h5 class="font-semibold mt-4">
+    <h5 class="font-semibold mt-3">
      1. Conditions
    </h5>
-    <condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-4 border-t border" :form="form"/>
+    <condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-1 border-t border rounded-md" :form="form"/>

-    <h5 class="font-semibold mt-4">
+    <h5 class="font-semibold mt-3">
      2. Actions
    </h5>
    <select-input :key="resetKey" v-model="logic.actions" name="actions"
-                  :multiple="true" class="mt-4" placeholder="Actions..."
+                  :multiple="true" class="mt-1" placeholder="Actions..."
                  help="Action(s) triggerred when above conditions are true"
                  :options="actionOptions"
                  @input="onActionInput"
@@ -63,7 +65,7 @@
        </div>
      </div>
    </modal>
-  </div>
+  </collapse>
 </template>

 <script>
@@ -72,10 +74,11 @@ import ConditionEditor from './ConditionEditor.vue'
 import Modal from '../../../../Modal.vue'
 import SelectInput from '../../../../forms/SelectInput.vue'
 import clonedeep from 'clone-deep'
+import Collapse from "../../../../common/Collapse.vue";

 export default {
  name: 'FormBlockLogicEditor',
-  components: {SelectInput, Modal, ProTag, ConditionEditor},
+  components: {Collapse, SelectInput, Modal, ProTag, ConditionEditor},
  props: {
    field: {
      type: Object,
@@ -89,13 +92,14 @@ export default {

  data() {
    return {
+      isCollapseOpen: false,
      resetKey: 0,
      logic: this.field.logic || {
        conditions: null,
        actions: []
      },
      showCopyFormModal: false,
-      copyFrom: null
+      copyFrom: null,
    }
  },

@@ -199,6 +203,9 @@ export default {
        }
      }
      this.showCopyFormModal = false
+    },
+    onClickCollapse (e) {
+      this.isCollapseOpen = e
    }
  }
 }