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>
This commit is contained in:
Julien Nahum 2024-09-23 20:15:41 +02:00 committed by GitHub
parent d6181cd249
commit 5dcd4ff8cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 6 deletions

View File

@ -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)

View File

@ -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) {