7953e better form editor (#580)

* Form editor v2

* fix template test

* setFormDefaults when save

* fix form cleaning dark mode

* improvements on open sidebar

* UI polish

* Fix change type button

* Ability to drag & add multiple form blocks

---------

Co-authored-by: Chirag Chhatrala <chirag.chhatrala@gmail.com>

client/components/open/forms/OpenForm.vue

@@ -551,7 +551,7 @@ export default {
     handleDragDropped(data) {
       if (data.added) {
         const targetIndex = this.getTargetFieldIndex(data.added.newIndex)
-        this.workingFormStore.addBlock(data.added.element, targetIndex)
+        this.workingFormStore.addBlock(data.added.element, targetIndex, false)
       }
       if (data.moved) {
         const oldTargetIndex = this.getTargetFieldIndex(data.moved.oldIndex)

client/stores/working_form.js

@@ -87,7 +87,7 @@ export const useWorkingFormStore = defineStore("working_form", {
       return data
     },
 
-    addBlock(type, index = null) {
+    addBlock(type, index = null, openSettings = true) {
       this.blockForm.type = type
       this.blockForm.name = blocksTypes[type].default_block_name
       const newBlock = this.prefillDefault(this.blockForm.data())
@@ -117,15 +117,39 @@ export const useWorkingFormStore = defineStore("working_form", {
         const newFields = clonedeep(this.content.properties)
         newFields.push(newBlock)
         this.content.properties = newFields
-        this.openSettingsForField(
-          this.content.properties.length - 1,
-        )
+        if (openSettings) {
+          this.openSettingsForField(
+            this.content.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)
+        if (openSettings) {
+          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)
       }
     },
     removeField(field) {