public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add index to cgroup

Browse Source
This commit is contained in:
Szymon Haczyk
2024-01-11 07:53:04 +01:00
parent c5b4c18d2f
commit 5ba7df5b62
2 changed files with 80 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/MagicoPagebuilder.vue
View File

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

8
src/components/PagebuilderSection.vue
View File

@@ -7,9 +7,9 @@
class="col-sm-12" class="col-sm-12"
v-for="(column, index) in value.columns" v-for="(column, index) in value.columns"
:value="column" :value="column"
:key="'section_' + index" :key="keyIndex+'s' + index"
:id="'section_' + index" :id="keyIndex+'s' + index"
:keyIndex="'section_' + index" :keyIndex="keyIndex+'s' + index"
@change="onChange" @change="onChange"
></PagebuilderContent> ></PagebuilderContent>
</div> </div>
@@ -83,7 +83,7 @@ import grid from './grid.js'
import MagicoModal from './MagicoModal.vue' import MagicoModal from './MagicoModal.vue'
import PagebuilderContent from './PagebuilderContent.vue' import PagebuilderContent from './PagebuilderContent.vue'
export default { export default {
props: { value: Object }, props: { value: Object, keyIndex:String },
emits: ['update:modelValue', 'copy', 'deleteSection'], emits: ['update:modelValue', 'copy', 'deleteSection'],
components: { components: {
'b-modal': MagicoModal, 'b-modal': MagicoModal,