add index to cgroup

This commit is contained in:
2024-01-11 07:53:04 +01:00
parent c5b4c18d2f
commit 5ba7df5b62
2 changed files with 80 additions and 88 deletions

View File

@@ -17,7 +17,7 @@
<button
@click.prevent="
modalLoad = !modalLoad;
pageType = { name: null };
pageType = { name: null }
"
title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"
@@ -27,7 +27,7 @@
<button
@click.prevent="
modalSave = !modalSave;
pageType = { name: null };
pageType = { name: null }
"
title="Zapisz szablon do schowka"
class="btn btn-outline-success btn-icon-sm"
@@ -47,12 +47,15 @@
item-key="d"
@end="
drag = false;
onChange();
onChange()
"
>
<template #item="{ element }">
<template #item="{ element, index }">
<PagebuilderSection
:value="element"
:key="'g' + index"
:id="'g' + index"
:keyIndex="'g' + index"
v-on:deleteSection="deleteSection"
v-on:copy="copySection"
@change="onChange"
@@ -67,10 +70,7 @@
title="Zapisz szablon do schowka"
v-on:onClose="modalSave = false"
>
<PagebuilderTemplateSave
v-model.value="pageType"
:szablon="value"
>
<PagebuilderTemplateSave v-model.value="pageType" :szablon="value">
</PagebuilderTemplateSave>
<div>
<button
@@ -99,18 +99,10 @@
</div>
</b-modal>
<b-modal
class_other="modal-xl"
v-model.value="modalCopy"
v-on:onClose="modalCopy = false"
>
<b-modal class_other="modal-xl" v-model.value="modalCopy" v-on:onClose="modalCopy = false">
<PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
<div>
<button
class="btn btn-primary mr-1"
:disabled="!pageType.id"
@click.prevent="changeBody"
>
<button class="btn btn-primary mr-1" :disabled="!pageType.id" @click.prevent="changeBody">
Skopiuj układ i treść
</button>
</div>
@@ -133,7 +125,7 @@
class="btn btn-block btn-primary mt-4"
@click.prevent="
modalAddSection = !modalAddSection;
optionx = false;
optionx = false
"
>
Dodaj sekcję
@@ -144,136 +136,136 @@
</template>
<script>
import draggable from "vuedraggable";
import grid from "./grid.js";
import MagicoModal from "./MagicoModal.vue";
import PagebuilderSection from "./PagebuilderSection.vue";
import DropdownSectionGrid from "./DropdownSectionGrid.vue";
import PagebuilderTemplateSave from "./PagebuilderTemplateSave.vue";
import PagebuilderTemplateLoad from "./PagebuilderTemplateLoad.vue";
import draggable from 'vuedraggable'
import grid from './grid.js'
import MagicoModal from './MagicoModal.vue'
import PagebuilderSection from './PagebuilderSection.vue'
import DropdownSectionGrid from './DropdownSectionGrid.vue'
import PagebuilderTemplateSave from './PagebuilderTemplateSave.vue'
import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
export default {
name: "MagicoPagebuilder",
emits: ["update:modelValue"],
name: 'MagicoPagebuilder',
emits: ['update:modelValue'],
components: {
"b-modal": MagicoModal,
'b-modal': MagicoModal,
PagebuilderSection,
draggable,
DropdownSectionGrid,
PagebuilderTemplateSave,
PagebuilderTemplateLoad,
PagebuilderTemplateLoad
},
data: function () {
return {
fullscreen: false,
grid: grid,
namex: "body", //podmieniane przez name
namex: 'body', //podmieniane przez name
drag: false,
optionx: "",
optionx: '',
comps: [],
modalAddSection: false,
modalCopy: false,
pageType: { id: false },
modalSave: false,
modalLoad: false,
};
modalLoad: false
}
},
props: ["name", "modelValue", "showcopy", "lang"],
props: ['name', 'modelValue', 'showcopy', 'lang'],
mounted: function () {
//var trimmed = $("#body_pagebuilder").val().replace((/ |\r\n|\n|\r/gm),"");
var trimmed = this.modelValue; //.replace((/{2} |\r\n|\n|\r/gm), "");
var trimmed = this.modelValue //.replace((/{2} |\r\n|\n|\r/gm), "");
try {
this.comps = JSON.parse(trimmed);
this.comps = JSON.parse(trimmed)
} catch (e) {
console.warn(e);
console.warn(e)
this.comps = [
{
label: "1 kolumna ",
name: "col_1",
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
},
];
label: '1 kolumna ',
name: 'col_1',
columns: [{ name: 'col-md-12', items: [{ name: 'core_section_textarea' }] }]
}
]
}
},
created: function () {
if (this.name) this.namex = this.name;
else this.namxe = "body";
if (this.name) this.namex = this.name
else this.namxe = 'body'
},
watch: {
// whenever question changes, this function will run
comps: function (newQuestion) {
console.log("nq", newQuestion);
},
console.log('nq', newQuestion)
}
},
methods: {
onChange: function () {
this.$emit("update:modelValue", JSON.stringify(this.comps));
this.$emit("change");
this.$emit('update:modelValue', JSON.stringify(this.comps))
this.$emit('change')
},
copySection: function (item) {
this.comps.push(JSON.parse(JSON.stringify(item)));
this.onChange();
this.comps.push(JSON.parse(JSON.stringify(item)))
this.onChange()
},
deleteSection: function (item) {
this.comps.splice(this.comps.indexOf(item), 1);
this.onChange();
this.comps.splice(this.comps.indexOf(item), 1)
this.onChange()
},
addSection: function (it) {
this.modalAddSection = false;
this.comps.push(JSON.parse(JSON.stringify(it)));
this.onChange();
this.modalAddSection = false
this.comps.push(JSON.parse(JSON.stringify(it)))
this.onChange()
},
modalSaveSave: function () {
console.log(this.pageType);
console.log(this.pageType)
var data = {
id: this.pageType.id,
name: this.pageType.name,
source: this.modelValue,
description: this.pageType.description,
};
description: this.pageType.description
}
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.post("api/v1/pagebuilder/template", data).then(() => {
this.pageType = {};
this.modalSave = false;
});
this.$pagebuilder.axios.post('api/v1/pagebuilder/template', data).then(() => {
this.pageType = {}
this.modalSave = false
})
} else {
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER')
}
},
modalLoadClick: function () {
this.pageType.body = this.pageType.source;
this.changeBody();
this.pageType.body = this.pageType.source
this.changeBody()
},
changeBody() {
var t = this;
var value = this.pageType.body;
var trimmed = value;
var t = this
var value = this.pageType.body
var trimmed = value
try {
//this.comps.forEach((item)=>{
// this.deleteSection(item);
//})
this.comps = [];
this.comps = []
setTimeout(function () {
t.comps = JSON.parse(trimmed);
t.onChange();
}, 300);
t.comps = JSON.parse(trimmed)
t.onChange()
}, 300)
//this.comps =JSON.parse(trimmed);
} catch (e) {
this.comps = [
{
label: "1 kolumna ",
name: "col_1",
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
},
];
label: '1 kolumna ',
name: 'col_1',
columns: [{ name: 'col-md-12', items: [{ name: 'core_section_textarea' }] }]
}
]
}
this.modalCopy = false;
this.modalSave = false;
this.modalLoad = false;
},
},
};
this.modalCopy = false
this.modalSave = false
this.modalLoad = false
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->