From 5ba7df5b6268b355af996b46a7b74aa175ba1b59 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Thu, 11 Jan 2024 07:53:04 +0100
Subject: [PATCH] add index to cgroup

---
 src/components/MagicoPagebuilder.vue  | 160 ++++++++++++--------------
 src/components/PagebuilderSection.vue |   8 +-
 2 files changed, 80 insertions(+), 88 deletions(-)

diff --git a/src/components/MagicoPagebuilder.vue b/src/components/MagicoPagebuilder.vue
index 3b1fb60..fd3d40f 100644
--- a/src/components/MagicoPagebuilder.vue
+++ b/src/components/MagicoPagebuilder.vue
@@ -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 -->
diff --git a/src/components/PagebuilderSection.vue b/src/components/PagebuilderSection.vue
index ff538ee..1be9cdb 100644
--- a/src/components/PagebuilderSection.vue
+++ b/src/components/PagebuilderSection.vue
@@ -7,9 +7,9 @@
           class="col-sm-12"
           v-for="(column, index) in value.columns"
           :value="column"
-          :key="'section_' + index"
-          :id="'section_' + index"
-          :keyIndex="'section_' + index"
+          :key="keyIndex+'s' + index"
+          :id="keyIndex+'s' + index"
+          :keyIndex="keyIndex+'s' + index"
           @change="onChange"
         ></PagebuilderContent>
       </div>
@@ -83,7 +83,7 @@ import grid from './grid.js'
 import MagicoModal from './MagicoModal.vue'
 import PagebuilderContent from './PagebuilderContent.vue'
 export default {
-  props: { value: Object },
+  props: { value: Object, keyIndex:String },
   emits: ['update:modelValue', 'copy', 'deleteSection'],
   components: {
     'b-modal': MagicoModal,