diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index a2a4343..34745ec 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -777,7 +777,6 @@ label.required::after {
.block-header-item {
font-size: 12px;
display: inline-block;
- margin-bottom: 10px;
padding: 2px 6px;
border-radius: 4px;
margin-right: 2px;
@@ -812,15 +811,18 @@ label.required::after {
padding: 3px 5px;
}
- .block-settings-inverse {
- background: none;
- border: 1px solid map-get($theme-colors, 'dark-blue');
- color: map-get($theme-colors, 'dark-blue');
- }
-
.block-settings {
padding: 4px;
+ margin-top: 10px;
margin-bottom: 5px;
+
+ .form-control {
+ margin-top: 0.5rem !important;
+ }
+ }
+
+ .block[class*="block-depth"] .block {
+ margin-top: 10px;
}
.block-id {
@@ -833,4 +835,10 @@ label.required::after {
min-height: 40px;
}
}
+
+ dialog {
+ border: 0;
+ padding: 0;
+ background: none;
+ }
}
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
index d424f95..c863947 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@@ -1,6 +1,6 @@
+
@@ -63,7 +115,8 @@ export default {
},
data() {
return {
- value: this.initialValue,
+ value: null,
+ nextValue: null,
widgets: {},
openedBlocks: {},
blockKey: 0,
@@ -77,6 +130,72 @@ export default {
triggerBuilderBlockEvent() {
document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
},
+ openCodeEditor() {
+ this.nextValue = this.toJson(this.value)
+ this.$refs.dialog.showModal()
+ },
+ closeCodeEditor() {
+ this.$refs.dialog.close()
+ },
+ isNextValueItemValueValid(item) {
+ const hasId = typeof item.id === 'string'
+ const hasWidget = typeof item.widget === 'string' && this.widgets[item.widget]
+ const hasSettings = typeof item.settings === 'object'
+ const hasChildren = Array.isArray(item.children)
+
+ if (!hasId || !hasWidget || !hasSettings || !hasChildren) {
+ return false
+ }
+
+ for (let child of item.children) {
+ if (!this.isNextValueItemValueValid(child)) {
+ return false
+ }
+ }
+
+ return true
+ },
+ updateNextValueRecursiveIds(data) {
+ if (Array.isArray(data)) {
+ data.forEach((value, key) => {
+ data[key] = this.updateNextValueRecursiveIds(value)
+ })
+ } else {
+ data.id = this.makeId()
+ data.children = this.updateNextValueRecursiveIds(data.children)
+ }
+
+ return data
+ },
+ checkAndSaveNextValue() {
+ this.$refs.codeEditor.classList.toggle('is-invalid', false)
+ let hasError = false
+
+ try {
+ let data = JSON.parse(this.nextValue)
+
+ if (!Array.isArray(data)) {
+ hasError = true
+ } else {
+ for (let item of data) {
+ if (!this.isNextValueItemValueValid(item)) {
+ hasError = true
+ }
+ }
+ }
+
+ if (!hasError) {
+ this.value = this.updateNextValueRecursiveIds(data)
+ ++this.blockKey
+ }
+
+ } catch (e) {
+ console.log(e)
+ hasError = true
+ }
+
+ return this.$refs.codeEditor.classList.toggle('is-invalid', hasError)
+ },
removeBlock(key) {
let newValue = []
@@ -98,6 +217,45 @@ export default {
++this.blockKey
},
+ fixSettings(data) {
+ if (Array.isArray(data)) {
+ data.forEach((value, key) => {
+ data[key] = this.fixSettings(value)
+ })
+ } else {
+ const widget = this.widgets[data.widget]
+
+ if (!widget) {
+ return data
+ }
+
+ const nextSettings = {}
+
+ for (let setting in widget.settings) {
+ if (data.settings.hasOwnProperty(setting)) {
+ nextSettings[setting] = data.settings[setting]
+ } else {
+ nextSettings[setting] = widget.settings[setting].default
+ }
+ }
+
+ data.settings = nextSettings
+ data.children = this.fixSettings(data.children)
+ }
+
+ return data
+ },
+ makeId() {
+ let result = ''
+ const characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
+ const charactersLength = characters.length
+
+ for (let i = 0; i < 7; i++) {
+ result += characters.charAt(Math.floor(Math.random() * charactersLength))
+ }
+
+ return `block-${result}`
+ },
},
components: {
BuilderBlockItem,
@@ -105,12 +263,12 @@ export default {
Draggable,
},
mounted() {
- this.triggerBuilderBlockEvent()
const that = this
axios.get(Routing.generate('admin_editor_builder_block_widgets'))
.then((response) => {
that.widgets = response.data
+ that.value = that.fixSettings(that.initialValue)
})
},
created() {
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
index 319e0ee..7c7fc40 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
@@ -43,9 +43,9 @@