From 1ae0420656a776de163a5c292e9ac062bd4b6496 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Mon, 13 May 2024 13:47:59 +0100
Subject: [PATCH] drag and drop to add  block (#404)

* drag and drop to add  block

* Change styling for drag & drop

* Improve dragging/reordering fields

* fix drag dropped bug

* Fix spacing between form elements

* fix sorting bug

* fix: move field

* fix page break bugs

* fix move and add logic implementation

* Changed cursor to grab

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/open/forms/OpenForm.vue     | 105 ++++----
 .../components/open/forms/OpenFormField.vue   | 116 +++------
 .../form-components/AddFormBlock.vue          | 243 ++++++------------
 client/stores/working_form.js                 |  98 +++++++
 4 files changed, 280 insertions(+), 282 deletions(-)

diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index c2692c07..9e5372a7 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -43,15 +43,16 @@
         class="form-group flex flex-wrap w-full"
       >
         <draggable
-          v-model="currentFields"
+          :list="currentFields"
+          group="form-elements"
           item-key="id"
-          class="flex flex-wrap transition-all w-full"
-          :class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
+          class="grid grid-cols-12 gap-x-3 relative transition-all w-full"
+          :class="{'rounded-md bg-blue-50':draggingNewBlock}"
           ghost-class="ghost-item"
-          handle=".draggable"
           :animation="200"
-          @start="onDragStart"
-          @end="onDragEnd"
+          :disabled="!adminPreview"
+          handle=".handle"
+          @change="handleDragDropped"
         >
           <template #item="{element}">
             <open-form-field
@@ -127,10 +128,11 @@ import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"
 import OpenFormField from './OpenFormField.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
+import {computed} from "vue"
 
 export default {
   name: 'OpenForm',
-  components: { draggable, OpenFormField, OpenFormButton, VueHcaptcha },
+  components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha},
   props: {
     form: {
       type: Object,
@@ -152,15 +154,15 @@ export default {
       type: Array,
       required: true
     },
-    defaultDataForm:{},
-    adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
+    defaultDataForm: {},
+    adminPreview: {type: Boolean, default: false}, // If used in FormEditorPreview
     darkMode: {
       type: Boolean,
       default: false
     }
   },
 
-  setup (props) {
+  setup(props) {
     const recordsStore = useRecordsStore()
     const workingFormStore = useWorkingFormStore()
     const dataForm = ref(useForm())
@@ -169,32 +171,29 @@ export default {
       dataForm,
       recordsStore,
       workingFormStore,
+      draggingNewBlock: computed(() => workingFormStore.draggingNewBlock),
       pendingSubmission: pendingSubmission(props.form)
     }
   },
 
-  data () {
+  data() {
     return {
       currentFieldGroupIndex: 0,
       /**
        * Used to force refresh components by changing their keys
        */
       isAutoSubmit: false,
-      /**
-       * If currently dragging a field
-       */
-      dragging: false
     }
   },
 
   computed: {
-    hCaptchaSiteKey () {
+    hCaptchaSiteKey() {
       return useRuntimeConfig().public.hCaptchaSiteKey
     },
     /**
      * Create field groups (or Page) using page breaks if any
      */
-    fieldGroups () {
+    fieldGroups() {
       if (!this.fields) return []
       const groups = []
       let currentGroup = []
@@ -209,7 +208,7 @@ export default {
       groups.push(currentGroup)
       return groups
     },
-    formProgress () {
+    formProgress() {
       const requiredFields = this.fields.filter(field => field.required)
       if (requiredFields.length === 0) {
         return 100
@@ -219,10 +218,10 @@ export default {
       return Math.round(progress)
     },
     currentFields: {
-      get () {
+      get() {
         return this.fieldGroups[this.currentFieldGroupIndex]
       },
-      set (val) {
+      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 = []
@@ -242,14 +241,14 @@ export default {
     /**
      * Returns the page break block for the current group of fields
      */
-    currentFieldsPageBreak () {
+    currentFieldsPageBreak() {
       // Last block from current group
       if (!this.currentFields?.length) return null
       const block = this.currentFields[this.currentFields.length - 1]
       if (block && block.type === 'nf-page-break') return block
       return null
     },
-    previousFieldsPageBreak () {
+    previousFieldsPageBreak() {
       if (this.currentFieldGroupIndex === 0) return null
       const previousFields = this.fieldGroups[this.currentFieldGroupIndex - 1]
       const block = previousFields[previousFields.length - 1]
@@ -260,13 +259,13 @@ export default {
      * Returns true if we're on the last page
      * @returns {boolean}xs
      */
-    isLastPage () {
+    isLastPage() {
       return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
     },
-    isPublicFormPage () {
+    isPublicFormPage() {
       return this.$route.name === 'forms-slug'
     },
-    dataFormValue () {
+    dataFormValue() {
       // For get values instead of Id for select/multi select options
       const data = this.dataForm.data()
       const selectionFields = this.fields.filter((field) => {
@@ -289,19 +288,19 @@ export default {
   watch: {
     form: {
       deep: true,
-      handler () {
+      handler() {
         this.initForm()
       }
     },
     fields: {
       deep: true,
-      handler () {
+      handler() {
         this.initForm()
       }
     },
     dataFormValue: {
       deep: true,
-      handler () {
+      handler() {
         if (this.isPublicFormPage && this.form && this.form.auto_save) {
           this.pendingSubmission.set(this.dataFormValue)
         }
@@ -309,7 +308,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     this.initForm()
     if (import.meta.client && window.location.href.includes('auto_submit=true')) {
       this.isAutoSubmit = true
@@ -318,7 +317,7 @@ export default {
   },
 
   methods: {
-    submitForm () {
+    submitForm() {
       if (this.currentFieldGroupIndex !== this.fieldGroups.length - 1) {
         return
       }
@@ -337,7 +336,7 @@ export default {
     /**
      * If more than one page, show first page with error
      */
-    onSubmissionFailure () {
+    onSubmissionFailure() {
       this.isAutoSubmit = false
       if (this.fieldGroups.length > 1) {
         // Find first mistake and show page
@@ -364,19 +363,19 @@ export default {
         })
       }
     },
-    async getSubmissionData () {
+    async getSubmissionData() {
       if (!this.form || !this.form.editable_submissions || !this.form.submission_id) {
         return null
       }
       await this.recordsStore.loadRecord(
         opnFetch('/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((data) => {
-          return { submission_id: this.form.submission_id, id: this.form.submission_id,...data.data }
+          return {submission_id: this.form.submission_id, id: this.form.submission_id, ...data.data}
         })
       )
       return this.recordsStore.getByKey(this.form.submission_id)
     },
-    async initForm () {
-      if(this.defaultDataForm){
+    async initForm() {
+      if (this.defaultDataForm) {
         this.dataForm = useForm(this.defaultDataForm)
         return
       }
@@ -437,24 +436,42 @@ export default {
       })
       this.dataForm = useForm(formData)
     },
-    previousPage () {
+    previousPage() {
       this.currentFieldGroupIndex -= 1
-      window.scrollTo({ top: 0, behavior: 'smooth' })
+      window.scrollTo({top: 0, behavior: 'smooth'})
       return false
     },
-    nextPage () {
+    nextPage() {
       this.currentFieldGroupIndex += 1
-      window.scrollTo({ top: 0, behavior: 'smooth' })
+      window.scrollTo({top: 0, behavior: 'smooth'})
       return false
     },
-    isFieldHidden (field) {
+    isFieldHidden(field) {
       return (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
     },
-    onDragStart () {
-      this.dragging = true
+    getTargetFieldIndex(currentFieldPageIndex){
+      let targetIndex = 0;
+        if (this.currentFieldGroupIndex > 0) {
+          for (let i = 0; i < this.currentFieldGroupIndex; i++) {
+            targetIndex += this.fieldGroups[i].length;
+          }
+          targetIndex += currentFieldPageIndex;
+        } else {
+          targetIndex = currentFieldPageIndex
+        }
+        return targetIndex
     },
-    onDragEnd () {
-      this.dragging = false
+    handleDragDropped(data) {
+      if (data.added) {
+        const targetIndex = this.getTargetFieldIndex(data.added.newIndex)
+        this.workingFormStore.addBlock(data.added.element, targetIndex)
+      }
+
+      if (data.moved) {
+        const oldTargetIndex = this.getTargetFieldIndex(data.moved.oldIndex)
+        const newTargetIndex = this.getTargetFieldIndex(data.moved.newIndex)
+        this.workingFormStore.moveField(oldTargetIndex, newTargetIndex)
+      }
     }
   }
 }
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index cc1e9708..f43bad64 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -2,76 +2,44 @@
   <div
     v-if="!isFieldHidden"
     :id="'block-' + field.id"
-    :class="getFieldWidthClasses(field)"
+    :class="[
+      getFieldWidthClasses(field),
+      {
+        'group/nffield hover:bg-gray-100/50 relative hover:z-10 w-[calc(100%+30px)] mx-[-15px] px-[15px] transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview,
+        'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited
+      }]"
   >
-    <div :class="getFieldClasses(field)">
+    <div
+      class="-m-[1px] w-full max-w-full mx-auto"
+      :class="{'relative transition-colors':adminPreview}"
+    >
       <div
         v-if="adminPreview"
-        class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4"
+        class="absolute -translate-x-full -left-1 top-1 bottom-0 hidden group-hover/nffield:block"
       >
         <div
-          class="flex flex-col bg-white rounded-md"
-          :class="{ 'lg:flex-row': !fieldSideBarOpened, 'xl:flex-row': fieldSideBarOpened }"
+          class="flex flex-col -space-1 bg-white rounded-md shadow -mt-1"
+          :class="{ 'lg:flex-row lg:-space-x-2': !fieldSideBarOpened, 'xl:flex-row xl:-space-x-1': fieldSideBarOpened }"
         >
           <div
-            class="p-2 -mr-3 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer hidden xl:block"
+            class="p-1 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer"
             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>
+            <Icon
+              name="heroicons:plus-16-solid"
+              class="w-6 h-6"
+            />
           </div>
           <div
-            class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer"
+            class="p-1 text-gray-300 hover:text-blue-500 cursor-pointer text-center"
             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"
+            <Icon
+              name="heroicons:cog-8-tooth-20-solid"
               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 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
-              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>
@@ -125,14 +93,22 @@
           >
         </div>
       </template>
+      <div class="hidden group-hover/nffield:flex translate-x-full absolute right-0 top-0 h-full w-5 flex-col justify-center pl-1 pt-3">
+        <div class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle">
+          <Icon
+            name="clarity:drag-handle-line"
+            class="h-6 w-6 -ml-1 block shrink-0"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
+import {computed} from 'vue'
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
-import { default as _has } from 'lodash/has'
+import {default as _has} from 'lodash/has'
 
 export default {
   name: 'OpenFormField',
@@ -166,7 +142,7 @@ export default {
       type: Object,
       required: true
     },
-    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+    adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
   },
 
   setup(props) {
@@ -271,32 +247,18 @@ export default {
     openAddFieldSidebar() {
       this.workingFormStore.openAddFieldSidebar(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 transition-colors'
-
-        if (this.beingEdited) {
-          classes += ' bg-blue-50 dark:bg-gray-800 rounded-md'
-        }
-      }
-      return classes
-    },
     getFieldWidthClasses(field) {
-      if (!field.width || field.width === 'full') return 'w-full px-2'
+      if (!field.width || field.width === 'full') return 'col-span-full'
       else if (field.width === '1/2') {
-        return 'w-full sm:w-1/2 px-2'
+        return 'w-full sm:col-span-6 col-span-full'
       } else if (field.width === '1/3') {
-        return 'w-full sm:w-1/3 px-2'
+        return 'w-full sm:col-span-4 col-span-full'
       } else if (field.width === '2/3') {
-        return 'w-full sm:w-2/3 px-2'
+        return 'w-full sm:col-span-8 col-span-full'
       } else if (field.width === '1/4') {
-        return 'w-full sm:w-1/4 px-2'
+        return 'w-full sm:col-span-3 col-span-full'
       } else if (field.width === '3/4') {
-        return 'w-full sm:w-3/4 px-2'
+        return 'w-full sm:col-span-9 col-span-full'
       }
     },
     getFieldAlignClasses(field) {
diff --git a/client/components/open/forms/components/form-components/AddFormBlock.vue b/client/components/open/forms/components/form-components/AddFormBlock.vue
index 20403bef..562269e3 100644
--- a/client/components/open/forms/components/form-components/AddFormBlock.vue
+++ b/client/components/open/forms/components/form-components/AddFormBlock.vue
@@ -21,7 +21,7 @@
             />
           </svg>
         </button>
-        <div class="font-semibold inline ml-2 truncate flex-grow truncate">
+        <div class="font-semibold inline ml-2 flex-grow truncate">
           Add Block
         </div>
       </div>
@@ -32,75 +32,93 @@
         <p class="text-gray-500 uppercase text-xs font-semibold mb-2">
           Input Blocks
         </p>
-        <div class="grid grid-cols-2 gap-2">
-          <div
-            v-for="(block) in inputBlocks"
-            :key="block.name"
-            class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-            role="button"
-            @click.prevent="addBlock(block.name)"
-          >
-            <div class="mx-auto">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6 text-gray-500"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                v-html="block.icon"
-              />
-            </div>
-            <p
-              class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1"
+        <draggable
+          :list="inputBlocks"
+          :group="{ name: 'form-elements', pull: 'clone', put: false }"
+          class="grid grid-cols-2 gap-2"
+          :sort="false"
+          :clone="handleInputClone"
+          ghost-class="ghost-item"
+          item-key="id"
+          @start="workingFormStore.draggingNewBlock=true"
+          @end="workingFormStore.draggingNewBlock=false"
+        >
+          <template #item="{element}">
+            <div
+              class="bg-gray-50 border cursor-grab hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
+              role="button"
+              @click.prevent="addBlock(element.name)"
             >
-              {{ block.title }}
-            </p>
-          </div>
-        </div>
+              <div class="mx-auto">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-6 w-6 text-gray-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  v-html="element.icon"
+                />
+              </div>
+              <p
+                class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1"
+              >
+                {{ element.title }}
+              </p>
+            </div>
+          </template>
+        </draggable>
       </div>
       <div class="border-t mt-6">
         <p class="text-gray-500 uppercase text-xs font-semibold mb-2 mt-6">
           Layout Blocks
         </p>
-        <div class="grid grid-cols-2 gap-2">
-          <div
-            v-for="(block) in layoutBlocks"
-            :key="block.name"
-            class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-            role="button"
-            @click.prevent="addBlock(block.name)"
-          >
-            <div class="mx-auto">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6 text-gray-500"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                v-html="block.icon"
-              />
-            </div>
-            <p
-              class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1"
+        <draggable
+          :list="layoutBlocks"
+          :group="{ name: 'form-elements', pull: 'clone', put: false }"
+          class="grid grid-cols-2 gap-2"
+          :sort="false"
+          :clone="handleInputClone"
+          ghost-class="ghost-item"
+          item-key="id"
+        >
+          <template #item="{element}">
+            <div
+              class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
+              role="button"
+              @click.prevent="addBlock(element.name)"
             >
-              {{ block.title }}
-            </p>
-          </div>
-        </div>
+              <div class="mx-auto">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-6 w-6 text-gray-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  v-html="element.icon"
+                />
+              </div>
+              <p
+                class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1"
+              >
+                {{ element.title }}
+              </p>
+            </div>
+          </template>
+        </draggable>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import clonedeep from "clone-deep"
+import draggable from 'vuedraggable'
 import { computed } from "vue"
 
 export default {
   name: "AddFormBlock",
-  components: {},
+  components: {draggable},
   props: {},
 
   setup() {
@@ -115,7 +133,6 @@ export default {
 
   data() {
     return {
-      blockForm: null,
       inputBlocks: [
         {
           name: "text",
@@ -219,126 +236,30 @@ export default {
   },
 
   computed: {
-    defaultBlockNames() {
-      return {
-        text: "Your name",
-        date: "Date",
-        url: "Link",
-        phone_number: "Phone Number",
-        number: "Number",
-        rating: "Rating",
-        scale: "Scale",
-        slider: "Slider",
-        email: "Email",
-        checkbox: "Checkbox",
-        select: "Select",
-        multi_select: "Multi Select",
-        files: "Files",
-        signature: "Signature",
-        "nf-text": "Text Block",
-        "nf-page-break": "Page Break",
-        "nf-divider": "Divider",
-        "nf-image": "Image",
-        "nf-code": "Code Block",
-      }
-    },
   },
 
   watch: {},
 
   mounted() {
-    this.reset()
+    this.workingFormStore.resetBlockForm()
   },
 
   methods: {
     closeSidebar() {
       this.workingFormStore.closeAddFieldSidebar()
     },
-    reset() {
-      this.blockForm = useForm({
-        type: null,
-        name: null,
-      })
-    },
     addBlock(type) {
-      this.blockForm.type = type
-      this.blockForm.name = this.defaultBlockNames[type]
-      const newBlock = this.prefillDefault(this.blockForm.data())
-      newBlock.id = this.generateUUID()
-      newBlock.hidden = false
-      if (["select", "multi_select"].includes(this.blockForm.type)) {
-        newBlock[this.blockForm.type] = { options: [] }
-      }
-      if (this.blockForm.type === "rating") {
-        newBlock.rating_max_value = 5
-      }
-      if (this.blockForm.type === "scale") {
-        newBlock.scale_min_value = 1
-        newBlock.scale_max_value = 5
-        newBlock.scale_step_value = 1
-      }
-      if (this.blockForm.type === "slider") {
-        newBlock.slider_min_value = 0
-        newBlock.slider_max_value = 50
-        newBlock.slider_step_value = 1
-      }
-      newBlock.help_position = "below_input"
-      if (
-        this.selectedFieldIndex === null ||
-        this.selectedFieldIndex === undefined
-      ) {
-        const newFields = clonedeep(this.form.properties)
-        newFields.push(newBlock)
-        this.form.properties = newFields
-        this.workingFormStore.openSettingsForField(
-          this.form.properties.length - 1,
-        )
-      } else {
-        const newFields = clonedeep(this.form.properties)
-        newFields.splice(this.selectedFieldIndex + 1, 0, newBlock)
-        this.form.properties = newFields
-        this.workingFormStore.openSettingsForField(this.selectedFieldIndex + 1)
-      }
-      this.reset()
-    },
-    generateUUID() {
-      let d = new Date().getTime() // Timestamp
-      let d2 =
-        (typeof performance !== "undefined" &&
-          performance.now &&
-          performance.now() * 1000) ||
-        0 // Time in microseconds since page-load or 0 if unsupported
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
-        /[xy]/g,
-        function (c) {
-          let r = Math.random() * 16 // random number between 0 and 16
-          if (d > 0) {
-            // Use timestamp until depleted
-            r = (d + r) % 16 | 0
-            d = Math.floor(d / 16)
-          } else {
-            // Use microseconds since page-load if supported
-            r = (d2 + r) % 16 | 0
-            d2 = Math.floor(d2 / 16)
-          }
-          return (c === "x" ? r : (r & 0x3) | 0x8).toString(16)
-        },
-      )
-    },
-    prefillDefault(data) {
-      if (data.type === "nf-text") {
-        data.content = "<p>This is a text block.</p>"
-      } else if (data.type === "nf-page-break") {
-        data.next_btn_text = "Next"
-        data.previous_btn_text = "Previous"
-      } else if (data.type === "nf-code") {
-        data.content =
-          '<div class="text-blue-500 italic">This is a code block.</div>'
-      } else if (data.type === "signature") {
-        data.help = "Draw your signature above"
-      }
-      return data
+      this.workingFormStore.addBlock(type)
     },
+    handleInputClone(item) {
+      return item.name
+    }
   },
 }
 </script>
+
+<style lang='scss' scoped>
+.ghost-item {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-md w-full col-span-full;
+}
+</style>
diff --git a/client/stores/working_form.js b/client/stores/working_form.js
index 496cdfdc..eab5c4d6 100644
--- a/client/stores/working_form.js
+++ b/client/stores/working_form.js
@@ -1,4 +1,28 @@
 import { defineStore } from "pinia"
+import clonedeep from "clone-deep"
+import { generateUUID } from "~/lib/utils.js"
+
+const defaultBlockNames = {
+  text: "Your name",
+  date: "Date",
+  url: "Link",
+  phone_number: "Phone Number",
+  number: "Number",
+  rating: "Rating",
+  scale: "Scale",
+  slider: "Slider",
+  email: "Email",
+  checkbox: "Checkbox",
+  select: "Select",
+  multi_select: "Multi Select",
+  files: "Files",
+  signature: "Signature",
+  "nf-text": "Text Block",
+  "nf-page-break": "Page Break",
+  "nf-divider": "Divider",
+  "nf-image": "Image",
+  "nf-code": "Code Block",
+}
 
 export const useWorkingFormStore = defineStore("working_form", {
   state: () => ({
@@ -8,6 +32,8 @@ export const useWorkingFormStore = defineStore("working_form", {
     selectedFieldIndex: null,
     showEditFieldSidebar: null,
     showAddFieldSidebar: null,
+    blockForm: null,
+    draggingNewBlock: false,
   }),
   actions: {
     set(form) {
@@ -54,5 +80,77 @@ export const useWorkingFormStore = defineStore("working_form", {
       this.showEditFieldSidebar = null
       this.showAddFieldSidebar = null
     },
+
+    resetBlockForm() {
+      this.blockForm = useForm({
+        type: null,
+        name: null,
+      })
+
+    },
+
+    prefillDefault(data) {
+      if (data.type === "nf-text") {
+        data.content = "<p>This is a text block.</p>"
+      } else if (data.type === "nf-page-break") {
+        data.next_btn_text = "Next"
+        data.previous_btn_text = "Previous"
+      } else if (data.type === "nf-code") {
+        data.content =
+          '<div class="text-blue-500 italic">This is a code block.</div>'
+      } else if (data.type === "signature") {
+        data.help = "Draw your signature above"
+      }
+      return data
+    },
+
+    addBlock(type, index = null) {
+      this.blockForm.type = type
+      this.blockForm.name = defaultBlockNames[type]
+      const newBlock = this.prefillDefault(this.blockForm.data())
+      newBlock.id = generateUUID()
+      newBlock.hidden = false
+      if (["select", "multi_select"].includes(this.blockForm.type)) {
+        newBlock[this.blockForm.type] = { options: [] }
+      }
+      if (this.blockForm.type === "rating") {
+        newBlock.rating_max_value = 5
+      }
+      if (this.blockForm.type === "scale") {
+        newBlock.scale_min_value = 1
+        newBlock.scale_max_value = 5
+        newBlock.scale_step_value = 1
+      }
+      if (this.blockForm.type === "slider") {
+        newBlock.slider_min_value = 0
+        newBlock.slider_max_value = 50
+        newBlock.slider_step_value = 1
+      }
+      newBlock.help_position = "below_input"
+      if (
+        this.selectedFieldIndex === null ||
+        this.selectedFieldIndex === undefined
+      ) {
+        const newFields = clonedeep(this.content.properties)
+        newFields.push(newBlock)
+        this.content.properties = newFields
+        this.openSettingsForField(
+          this.form.properties.length - 1,
+        )
+      } else {
+        const fieldIndex = typeof index === "number" ? index : this.selectedFieldIndex + 1
+        const newFields = clonedeep(this.content.properties)
+        newFields.splice(fieldIndex, 0, newBlock)
+        this.content.properties = newFields
+        this.openSettingsForField(fieldIndex)
+      }
+    },
+
+    moveField(oldIndex, newIndex) {
+      const newFields = clonedeep(this.content.properties)
+      const field = newFields.splice(oldIndex, 1)[0];
+      newFields.splice(newIndex, 0, field);
+      this.content.properties = newFields
+    }
   },
 })