From 7e31c9d34e2fac9a3c31e49a9c0f473d25954b19 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Thu, 11 Jan 2024 07:25:04 +0100
Subject: [PATCH] add unique keys for content

---
 src/components/PagebuilderContent.vue | 15 ++--
 src/components/PagebuilderSection.vue | 98 ++++++++-------------------
 2 files changed, 41 insertions(+), 72 deletions(-)

diff --git a/src/components/PagebuilderContent.vue b/src/components/PagebuilderContent.vue
index 4361ace..f187f98 100644
--- a/src/components/PagebuilderContent.vue
+++ b/src/components/PagebuilderContent.vue
@@ -39,16 +39,17 @@
       v-model="value.items"
       @start="drag = true"
       @end="
-        drag = false; onChange()
+        drag = false;
+        onChange()
       "
       group="people"
     >
       <template #item="{ element, index }">
         <div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
-
           <component
             @itemRemoved="removeItem"
-            :key="index"
+            :key="contentId+'_'+index"
+            :id="contentId+'_'+index"
             v-bind:is="element.name"
             v-bind:value="element"
             v-model="value.items[index]"
@@ -99,7 +100,13 @@ import DropdownSectionSection from './DropdownSectionSection.vue'
 
 export default {
   data: function () {
-    return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false }
+    return {
+      opcja: '',
+      modalAddBox: false,
+      drag: false,
+      modalColumnsSettings: false,
+      contentId: 'content' + Math.round(Math.random() * 1000)
+    }
   },
   props: { value: Object },
   emits: ['update:modelValue'],
diff --git a/src/components/PagebuilderSection.vue b/src/components/PagebuilderSection.vue
index 69b329a..5d6c47c 100644
--- a/src/components/PagebuilderSection.vue
+++ b/src/components/PagebuilderSection.vue
@@ -7,20 +7,15 @@
           class="col-sm-12"
           v-for="(column, index) in value.columns"
           :value="column"
-          :key="index"
+          :key="'section_' + index"
+          :id="'section_' + index"
           @change="onChange"
         ></PagebuilderContent>
       </div>
     </div>
 
-    <div
-      class="pb_section_options position-absolute"
-      style="top: 12px; right: 14px; width: 20px"
-    >
-      <a
-        href="#"
-        title="Przenieś sekcje"
-        class="box-settings-icon box-move"
+    <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px">
+      <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"
         ><i class="material-icons-outlined">sort</i></a
       >
       <a
@@ -44,43 +39,23 @@
         class="box-settings-icon box-delete text-danger"
         ><i class="material-icons-outlined">delete</i></a
       >
-      <b-modal
-        v-model="show_settings"
-        title="Ustawienia sekcji"
-        @onClose="ustawieniaSave()"
-      >
+      <b-modal v-model="show_settings" title="Ustawienia sekcji" @onClose="ustawieniaSave()">
         <div>
           <div>
             <div class="form-group mb-2">
               <label class="w-100 col-form-label"> Nazwa sekcji </label>
-              <input
-                type="text"
-                class="form-control"
-                v-model="value.user_label"
-              />
+              <input type="text" class="form-control" v-model="value.user_label" />
             </div>
             <div class="form-group mb-2">
               <label class="w-100 col-form-label"> Klasa sekcji </label>
-              <input
-                type="text"
-                class="form-control"
-                v-model="value.class"
-              />
+              <input type="text" class="form-control" v-model="value.class" />
             </div>
             <div class="form-group mb-2">
               <label>Margines górny</label>
               <div class="input-group mb-3">
-                <input
-                  type="number"
-                  class="form-control"
-                  v-model="value.margin_top"
-                />
+                <input type="number" class="form-control" v-model="value.margin_top" />
                 <div class="input-group-append">
-                  <span
-                    class="input-group-text"
-                    id="basic-addon1"
-                    >px</span
-                  >
+                  <span class="input-group-text" id="basic-addon1">px</span>
                 </div>
               </div>
             </div>
@@ -88,73 +63,60 @@
           <div class="form-group mb-2">
             <label>Margines dolny</label>
             <div class="input-group mb-3">
-              <input
-                type="number"
-                class="form-control"
-                v-model="value.margin_bottom"
-              />
+              <input type="number" class="form-control" v-model="value.margin_bottom" />
               <div class="input-group-append">
-                <span
-                  class="input-group-text"
-                  id="basic-addon1"
-                  >px</span
-                >
+                <span class="input-group-text" id="basic-addon1">px</span>
               </div>
             </div>
           </div>
         </div>
         <div>
-          <button
-            class="btn btn-outline-secondary"
-            @click.prevent="ustawieniaSave"
-          >
-            Zapisz
-          </button>
+          <button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">Zapisz</button>
         </div>
       </b-modal>
     </div>
   </div>
 </template>
 <script>
-import grid from "./grid.js";
-import MagicoModal from "./MagicoModal.vue";
-import PagebuilderContent from "./PagebuilderContent.vue";
+import grid from './grid.js'
+import MagicoModal from './MagicoModal.vue'
+import PagebuilderContent from './PagebuilderContent.vue'
 export default {
   props: { value: Object },
-  emits: ["update:modelValue", "copy", "deleteSection"],
+  emits: ['update:modelValue', 'copy', 'deleteSection'],
   components: {
-    "b-modal": MagicoModal,
-    PagebuilderContent,
+    'b-modal': MagicoModal,
+    PagebuilderContent
   },
   data: function () {
-    return { items: grid, value2: "", show_settings: false };
+    return { items: grid, value2: '', show_settings: false }
   },
   methods: {
     changeSelect: function () {
-      this.onChange();
+      this.onChange()
     },
     onChange: function () {
-      this.$emit("change");
+      this.$emit('change')
     },
     deleteSection: function () {
-      this.$emit("deleteSection", this.value);
+      this.$emit('deleteSection', this.value)
     },
     copySection: function () {
-      this.$emit("copy", this.value);
+      this.$emit('copy', this.value)
     },
     toggleSettings: function () {
-      this.show_settings = !this.show_settings;
+      this.show_settings = !this.show_settings
     },
     ustawieniaSave: function () {
-      this.show_settings = false;
-      this.onChange();
+      this.show_settings = false
+      this.onChange()
     },
     rand: function (index) {
-      return "column" + index + Math.random() * 100;
-    },
+      return 'column' + index + Math.random() * 100
+    }
   },
-  mounted: function () {},
-};
+  mounted: function () {}
+}
 </script>
 <style>
 #pagebuilder {