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/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
+    }
   },
 })