Form editor v2 (#579)

* Form editor v2

* fix template test

* setFormDefaults when save

* fix form cleaning dark mode

* improvements on open sidebar

* UI polish

* Fix change type button

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/stores/working_form.js

@@ -1,33 +1,14 @@
 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",
-  matrix: "Matrix",
-  "nf-text": "Text Block",
-  "nf-page-break": "Page Break",
-  "nf-divider": "Divider",
-  "nf-image": "Image",
-  "nf-code": "Code Block",
-}
+import blocksTypes from "~/data/blocks_types.json"
+import { useAlert } from '~/composables/useAlert'
 
 export const useWorkingFormStore = defineStore("working_form", {
   state: () => ({
     content: null,
+    activeTab: 0,
+    formPageIndex: 0,
 
     // Field being edited
     selectedFieldIndex: null,
@@ -43,14 +24,19 @@ export const useWorkingFormStore = defineStore("working_form", {
     setProperties(properties) {
       this.content.properties = [...properties]
     },
-    openSettingsForField(index) {
-      // If field is passed, compute index
-      if (typeof index === "object") {
-        index = this.content.properties.findIndex(
-          (prop) => prop.id === index.id,
+    objectToIndex(field) {
+      if (typeof field === 'object') {
+        return this.content.properties.findIndex(
+          prop => prop.id === field.id
         )
       }
-      this.selectedFieldIndex = index
+      return field
+    },
+    setEditingField(field) {
+      this.selectedFieldIndex = this.objectToIndex(field)
+    },
+    openSettingsForField(field) {
+      this.setEditingField(field)
       this.showEditFieldSidebar = true
       this.showAddFieldSidebar = false
     },
@@ -59,14 +45,10 @@ export const useWorkingFormStore = defineStore("working_form", {
       this.showEditFieldSidebar = false
       this.showAddFieldSidebar = false
     },
-    openAddFieldSidebar(index) {
-      // If field is passed, compute index
-      if (index !== null && typeof index === "object") {
-        index = this.content.properties.findIndex(
-          (prop) => prop.id === index.id,
-        )
+    openAddFieldSidebar(field) {
+      if (field !== null) {
+        this.setEditingField(field)
       }
-      this.selectedFieldIndex = index
       this.showAddFieldSidebar = true
       this.showEditFieldSidebar = false
     },
@@ -107,7 +89,7 @@ export const useWorkingFormStore = defineStore("working_form", {
 
     addBlock(type, index = null) {
       this.blockForm.type = type
-      this.blockForm.name = defaultBlockNames[type]
+      this.blockForm.name = blocksTypes[type].default_block_name
       const newBlock = this.prefillDefault(this.blockForm.data())
       newBlock.id = generateUUID()
       newBlock.hidden = false
@@ -146,6 +128,26 @@ export const useWorkingFormStore = defineStore("working_form", {
         this.openSettingsForField(fieldIndex)
       }
     },
+    removeField(field) {
+      this.internalRemoveField(field)
+    },
+    internalRemoveField(field) {
+      const index = this.objectToIndex(field)
+
+      if (index !== -1) {
+        useAlert().success('Ctrl + Z to undo',10000,{
+          title: 'Field removed',
+          actions: [{
+            label: 'Undo',
+            icon:"i-material-symbols-undo",
+            click: () => {
+              this.undo()
+            }
+          }]
+        })
+        this.content.properties.splice(index, 1)
+      }
+    },
 
     moveField(oldIndex, newIndex) {
       const newFields = clonedeep(this.content.properties)