Add block shortcut (#200)

* Add block shortcut * Add block shortcut * Add block modal as sidebar * add block sidebar UI changes * Clean spacing add form block sidebar --------- Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Sep 18, 2023 · 52c9f05 · 52c9f05
1 parent 402e74e
commit 52c9f05
Show file tree

Hide file tree

Showing 6 changed files with 344 additions and 380 deletions.
diff --git a/resources/js/components/open/forms/OpenFormField.vue b/resources/js/components/open/forms/OpenFormField.vue
@@ -6,8 +6,18 @@
       <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"
+        <div class="flex flex-col bg-white rounded-md" :class="{'lg:flex-row':!fieldSideBarOpened, 'xl:flex-row':fieldSideBarOpened}">
+          <div class="p-2 -mr-3 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer hidden xl:block" role="button"
+               :class="{'lg:block':!fieldSideBarOpened, 'xl:block':fieldSideBarOpened}"
+               @click.prevent="openAddFieldSidebar"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                 stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+            </svg>
+          </div>
+          <div class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
+               :class="{'lg:-mr-2':!fieldSideBarOpened, 'xl:-mr-2':fieldSideBarOpened}"
                @click.prevent="editFieldOptions"
           >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
@@ -20,7 +30,8 @@
             </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"
+            class="px-2 xl:pl-0 lg:pr-1 lg:pt-2 pb-2 bg-white rounded-md text-gray-300 hover:text-gray-500 cursor-grab draggable"
+            :class="{'lg:pr-1 lg:pl-0':!fieldSideBarOpened, 'xl:-mr-2':fieldSideBarOpened}"
             role="button"
           >
             <svg
@@ -38,23 +49,23 @@
         </div>
       </div>
       <component :is="getFieldComponents" v-if="getFieldComponents"
-                  v-bind="inputProperties(field)" :required="isFieldRequired"
-                  :disabled="isFieldDisabled"
+                 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"
+             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"
+             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"
+             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)]"
+             :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.
@@ -100,9 +111,9 @@ export default {
       type: Object,
       required: true
     },
-    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+    adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
   },
-  data () {
+  data() {
     return {}
   },
 
@@ -128,7 +139,7 @@ export default {
     /**
      * Get the right input component for the field/options combination
      */
-     getFieldComponents() {
+    getFieldComponents() {
       const field = this.field
       if (field.type === 'text' && field.multi_lines) {
         return 'TextAreaInput'
@@ -150,27 +161,27 @@ export default {
       }
       return this.fieldComponents[field.type]
     },
-    isPublicFormPage () {
+    isPublicFormPage() {
       return this.$route.name === 'forms.show_public'
     },
-    isFieldHidden () {
+    isFieldHidden() {
       return !this.showHidden && this.shouldBeHidden
     },
-    shouldBeHidden () {
+    shouldBeHidden() {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isHidden()
     },
-    isFieldRequired () {
+    isFieldRequired() {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isRequired()
     },
-    isFieldDisabled () {
+    isFieldDisabled() {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
     },
     beingEdited() {
-      return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item)=>{
+      return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item) => {
         return item.id === this.field.id
       }) === this.selectedFieldIndex
     },
-    selectionFieldsOptions () {
+    selectionFieldsOptions() {
       // For auto update hidden options
       let fieldsOptions = []
 
@@ -184,21 +195,28 @@ export default {
       }
 
       return fieldsOptions
+    },
+    fieldSideBarOpened() {
+      return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
     }
   },
 
   watch: {},
 
-  mounted () {},
+  mounted() {
+  },
 
   methods: {
-    editFieldOptions () {
+    editFieldOptions() {
       this.$store.commit('open/working_form/openSettingsForField', this.field)
     },
+    openAddFieldSidebar() {
+      this.$store.commit('open/working_form/openAddFieldSidebar', this.field)
+    },
     /**
      * Get the right input component for the field/options combination
      */
-    getFieldClasses () {
+    getFieldClasses() {
       let classes = ''
       if (this.adminPreview) {
         classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative transition-colors'
@@ -209,7 +227,7 @@ export default {
       }
       return classes
     },
-    getFieldWidthClasses (field) {
+    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'
@@ -223,7 +241,7 @@ export default {
         return 'w-full sm:w-3/4 px-2'
       }
     },
-    getFieldAlignClasses (field) {
+    getFieldAlignClasses(field) {
       if (!field.align || field.align === 'left') return 'text-left'
       else if (field.align === 'right') {
         return 'text-right'

diff --git a/resources/js/components/open/forms/components/FormEditor.vue b/resources/js/components/open/forms/components/FormEditor.vue
@@ -69,6 +69,7 @@
       <form-editor-preview/>
 
       <form-field-edit-sidebar/>
+      <add-form-block-sidebar/>
 
       <!-- Form Error Modal -->
       <form-error-modal
@@ -85,6 +86,7 @@
 
 <script>
 import {mapGetters} from 'vuex'
+import AddFormBlockSidebar from './form-components/AddFormBlockSidebar.vue'
 import FormFieldEditSidebar from '../fields/FormFieldEditSidebar.vue'
 import FormErrorModal from './form-components/FormErrorModal.vue'
 import FormInformation from './form-components/FormInformation.vue'
@@ -103,6 +105,7 @@ import fieldsLogic from '../../../../mixins/forms/fieldsLogic.js'
 export default {
   name: 'FormEditor',
   components: {
+    AddFormBlockSidebar,
     FormFieldEditSidebar,
     FormEditorPreview,
     FormIntegrations,

diff --git a/resources/js/components/open/forms/components/FormFieldsEditor.vue b/resources/js/components/open/forms/components/FormFieldsEditor.vue
@@ -1,8 +1,15 @@
 <template>
   <div>
-    <add-form-block-modal :form-blocks="formFields" :show="showAddBlock" @block-added="blockAdded"
-                          @close="showAddBlock=false"
-    />
+    <v-button v-if="formFields && formFields.length > 8"
+      class="w-full mb-3" color="light-gray"
+      @click="openAddFieldSidebar">
+      <svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
+           xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
+              stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      Add block
+    </v-button>
 
     <draggable v-model="formFields"
                class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
@@ -124,8 +131,8 @@
     </draggable>
 
     <v-button
-      class="w-full mt-4" color="light-gray"
-      @click="showAddBlock=true">
+      class="w-full mt-3" color="light-gray"
+      @click="openAddFieldSidebar">
       <svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
            xmlns="http://www.w3.org/2000/svg">
         <path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
@@ -139,7 +146,6 @@
 
 <script>
 import draggable from 'vuedraggable'
-import AddFormBlockModal from './form-components/AddFormBlockModal.vue'
 import ProTag from '../../../common/ProTag.vue'
 import clonedeep from 'clone-deep'
 import EditableDiv from '../../../common/EditableDiv.vue'
@@ -150,15 +156,13 @@ export default {
   components: {
     VButton,
     ProTag,
-    AddFormBlockModal,
     draggable,
     EditableDiv
   },
 
   data() {
     return {
       formFields: [],
-      showAddBlock: false,
       removing: null
     }
   },
@@ -172,7 +176,7 @@ export default {
       set(value) {
         this.$store.commit('open/working_form/set', value)
       }
-    },
+    }
   },
 
   watch: {
@@ -289,10 +293,6 @@ export default {
     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) {
       const newFields = clonedeep(this.formFields)
       newFields.splice(blockIndex, 1)
@@ -301,6 +301,9 @@ export default {
     },
     closeSidebar() {
       this.$store.commit('open/working_form/closeEditFieldSidebar')
+    },
+    openAddFieldSidebar() {
+      this.$store.commit('open/working_form/openAddFieldSidebar', null)
     }
   }
 }