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

load and save templates

Browse Source
This commit is contained in:
Szymon Haczyk
2022-07-04 09:51:40 +02:00
parent a2e74d2c85
commit 95465a5b7d
4 changed files with 138 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/MagicoPagebuilder.vue
View File

@@ -1,13 +1,13 @@
<template>
<section class="content card-body table-bordered" id="pagebuilder">
<section class="content card-body " id="pagebuilder">
<div class="d-flex justify-content-end">
<!-- <button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">save</span></button>
<button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
<button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
<button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
<!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
układ z innej strony</button> -->
</div>
@@ -18,20 +18,21 @@
</div>
</draggable>
<b-modal class_other="modal-xl" v-model="modalSave" v-on:onClose="modalSave = false">
<div slot="modal-title"><span>Zapisz szablon do schowka</span></div>
<b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
v-on:onClose="modalSave = false">
<div slot="modal-title"><span></span></div>
<div>
<!-- <core_tempaltes_select_pagebuilder_save v-model="pageType" :szablon="value">
</core_tempaltes_select_pagebuilder_save> -->
<PagebuilderTemplateSave v-model="pageType" :szablon="value">
</PagebuilderTemplateSave>
</div>
<div slot="modal-footer"><button @click.prevent="modalSaveSave" class="btn btn-success mr-1"
<div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
:disabled="!pageType.name">Zapisz do schowka </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalLoad" v-on:onClose="modalLoad = false">
<div slot="modal-title"><span>Wczytaj szablon ze schowka</span></div>
<b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
v-on:onClose="modalLoad = false">
<div>
<!-- <core_tempaltes_select_pagebuilder v-model="pageType"></core_tempaltes_select_pagebuilder> -->
<PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
</div>
<div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
@click.prevent="modalLoadClick">Wczytaj ze schowka</button></div>
@@ -40,7 +41,7 @@
<b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
<div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
<div>
<!-- <cms_pages_select_page v-model="pageType"></cms_pages_select_page> -->
<PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
</div>
<div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
@click.prevent="changeBody">Skopiuj układ i treść </button></div>
@@ -72,6 +73,8 @@ 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: 'HelloWorld',
@@ -79,7 +82,9 @@ export default {
'b-modal': MagicoModal,
PagebuilderSection,
draggable,
DropdownSectionGrid
DropdownSectionGrid,
PagebuilderTemplateSave,
PagebuilderTemplateLoad
},
data: function () {
return {
@@ -139,16 +144,20 @@ export default {
},
modalSaveSave: function () {
console.log(this.pageType);
// var data = {
// id: this.pageType.id,
// name: this.pageType.name,
// source: this.value,
// description: this.pageType.description,
// }
// axios.post(BASE_URL + 'api/pagebuilder/index', data).then(response => {
// this.pageType = {};
// this.modalSave = false;
// });
var data = {
id: this.pageType.id,
name: this.pageType.name,
source: this.value,
description: this.pageType.description,
}
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.post('api/v1/pagebuilder/template', data).then(() => {
this.pageType = {};
this.modalSave = false;
});
} else {
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
}
},
modalLoadClick: function () {
this.pageType.body = this.pageType.source;

1
src/components/MagicoPagebuilderPlugin.js
View File

@@ -20,6 +20,7 @@ export default {
svg: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M467,0H45C20.187,0,0,20.187,0,45v422c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V45C512,20.187,491.813,0,467,0z M482,467c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15V150h452V467z M482,120H30V45c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V120z"/></g></g><g><g><path d="M127.213,316l49.393-49.393c5.858-5.858,5.858-15.356,0-21.214c-5.857-5.858-15.355-5.858-21.213,0l-60,60c-5.858,5.858-5.858,15.355,0,21.213l60,60c5.857,5.857,15.355,5.858,21.213,0c5.858-5.858,5.858-15.355,0-21.213L127.213,316z"/></g></g><g><g><path d="M416.607,305.393l-60.001-60c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L384.787,316l-49.393,49.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l60-60C422.465,320.748,422.465,311.251,416.607,305.393z"/></g></g><g><g><path d="M290.744,211.77c-7.862-2.621-16.354,1.628-18.974,9.487l-60,180c-2.62,7.859,1.628,16.354,9.487,18.974c7.861,2.62,16.355-1.629,18.974-9.487l60-180C302.85,222.884,298.603,214.389,290.744,211.77z"/></g></g><g><g><path d="M106,60H76c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S114.284,60,106,60z"/></g></g><g><g><path d="M196,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S204.284,60,196,60z"/></g></g><g><g><path d="M286,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S294.284,60,286,60z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
}
},
axios: null,
registerPlugin(name, item, component) {
this.items[name] = item;
app.component(name, component);

38
src/components/PagebuilderTemplateLoad.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="form form-group">
<div>
<div v-for="item, ii in items" :key="ii" :value="item">{{ item.name }} <button
class="btn btn-outline-primary" @click="itemselected = item; changeSelect()">Wczytaj</button>
</div>
</div>
<div v-show="items.length == 0"><i>Brak zapisanych szablonów</i></div>
</div>
</template>
<script>
export default {
created() {
this.getPost();
},
data: function () {
return {
items: [],
itemselected: {},
}
},
methods: {
changeSelect() {
this.$emit('input', this.itemselected);
},
getPost() {
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
this.items = response.data.data;
});
} else {
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
}
}
}
}
</script>

66
src/components/PagebuilderTemplateSave.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div>
<div class="form-group mb-3 ">
<label v-if="id < 1" class="col-4">Tworzysz nowy szablon</label>
<label v-if="id > 0" class="col-4">Nadpiszesz istniejacy szablon</label>
<div class="col-8"><b v-if="id > 0" class="">{{ name2 }}</b></div>
</div>
<div class="form form-group mb-3">
<label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
<select v-model="itemselected" @change="changeSelect" class="form-control">
<option :value="{ 'new': 1 }">Stwórz nowy szablon</option>
<option :key="ii" v-for="item, ii in items" :value="item">Nadpisz: {{ item.name }}</option>
</select>
</div>
<div v-show="itemselected.new == 1">
<div class="form form-group mb-3"><label class="w-100">Nazwa szablonu</label><input @change="change"
class="form-control" type="text" v-model="name"></div>
<div class="form form-group mb-3"><label class="w-100">Opis</label><input @change="change"
class="form-control" type="text" v-model="description"></div>
</div>
</div>
</template>
<script>
export default {
created() {
this.getPost();
},
data: function () {
return {
items: [],
itemselected: {new:1},
name: '',
description: '',
id: 0,
}
},
methods: {
change() {
this.$emit('input', {
id: this.id,
name: this.name,
description: this.description,
});
},
changeSelect() {
this.id = this.itemselected.id;
this.name = this.itemselected.name;
this.name2 = this.itemselected.naem;
this.description = this.itemselected.description;
this.change();
},
getPost() {
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
this.items = response.data.data;
});
} else {
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
}
}
}
}
</script>