From 95465a5b7d8887ab883c92883a070d98969d9165 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Mon, 4 Jul 2022 09:51:40 +0200
Subject: [PATCH] load and save templates

---
 src/components/MagicoPagebuilder.vue       | 57 +++++++++++--------
 src/components/MagicoPagebuilderPlugin.js  |  1 +
 src/components/PagebuilderTemplateLoad.vue | 38 +++++++++++++
 src/components/PagebuilderTemplateSave.vue | 66 ++++++++++++++++++++++
 4 files changed, 138 insertions(+), 24 deletions(-)
 create mode 100644 src/components/PagebuilderTemplateLoad.vue
 create mode 100644 src/components/PagebuilderTemplateSave.vue

diff --git a/src/components/MagicoPagebuilder.vue b/src/components/MagicoPagebuilder.vue
index 9475a3e..78cb70a 100644
--- a/src/components/MagicoPagebuilder.vue
+++ b/src/components/MagicoPagebuilder.vue
@@ -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;
diff --git a/src/components/MagicoPagebuilderPlugin.js b/src/components/MagicoPagebuilderPlugin.js
index a4a095c..da49a15 100644
--- a/src/components/MagicoPagebuilderPlugin.js
+++ b/src/components/MagicoPagebuilderPlugin.js
@@ -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);
diff --git a/src/components/PagebuilderTemplateLoad.vue b/src/components/PagebuilderTemplateLoad.vue
new file mode 100644
index 0000000..0c4086b
--- /dev/null
+++ b/src/components/PagebuilderTemplateLoad.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/PagebuilderTemplateSave.vue b/src/components/PagebuilderTemplateSave.vue
new file mode 100644
index 0000000..e10c25e
--- /dev/null
+++ b/src/components/PagebuilderTemplateSave.vue
@@ -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>
\ No newline at end of file