develop sections

src/components/MagicoSection.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div :class="component_mode ? 'position-relative' : 'card mb-2'">
-      <div :class="component_mode ? '' : 'card-header'">
+      <div :class="component_mode ? '' : 'card-header '" class="d-flex justify-content-between">
         <h5 class="d-flex align-items-center" v-if="!component_mode">
           {{ name }}
           <div v-if="loading" class="spinner-border spinner-border-sm ml-2" role="status">
@@ -9,13 +9,14 @@
           </div>
         </h5>
         <div class="card-header-end">
-          <button class="btn btn-outline-danger" @click="openJSONModal" v-if="showSettings">
-            Pokaż JSONa
-          </button>
+          <a class=" fs-4 text-dark me-3" @click.prevent="openJSONModal" v-if="showSettings">
+            <i class="bi bi-filetype-json"></i>
+          </a>
 
-          <button class="btn btn-outline-danger" @click="editMode = !editMode" v-if="showSettings">
-            {{ editMode ? 'Zmień na tryb edycji treści' : 'Zmień na tryb edycji struktury' }}
-          </button>
+          <a class=" fs-4 text-dark" @click.prevent="editMode = !editMode" v-if="showSettings">
+            <i v-if="editMode" class="bi bi-binoculars"></i>
+            <i v-else class="bi bi-pencil-square"></i>
+          </a>
         </div>
       </div>
       <a
@@ -40,7 +41,9 @@
           <draggable
             class="components_list"
             :list="available_components"
-            :group="{ name: 'people', pull: 'clone', put: false }"
+            :group="{ name: 'people', pull: 'clone', put: false, revertClone: true }"
+            :clone="clone"
+            :item-key="type"
           >
             <template #item="element">
               <div class="d-flex align-items-center py-1 border-bottom p-3">
@@ -80,23 +83,24 @@
                     @click="editSection(field)"
                     class="btn btn-icon-sm btn-outline-secondary"
                   >
-                    <i class="bi bi-pen"></i>
+                    <i class="bi bi-pencil"></i>
                   </button>
                 </div>
               </div>
               <div v-for="(row, row_index) in field.rows" :key="row_index" class="col-sm-12 p-0">
                 <div
-                  :class="editMode ? 'pr-5' : ''"
+                  :class="editMode ? 'pe-5' : ''"
                   class="row mb-1 position-relative pb_outer_section pb-3"
                 >
                   <section-row
-                  class="col-12"
-                  :edit-mode="editMode"
-                  :section_index="index"
-                  :mykey="row_index"
-                  :section="row"
-                >
-                </section-row>
+                    class="col-12"
+                    :edit-mode="editMode"
+                    :section_index="index"
+                    :mykey="row_index"
+                    :section="row"
+                    @input="update"
+                  >
+                  </section-row>
                   <div
                     v-if="editMode"
                     class="pb_section_options position-absolute"
@@ -161,11 +165,11 @@
       scrollable
       v-model="jsonModal"
       title="Dane w JSON"
-      size="lg"
+      class_other="modal-lg"
       hide-footer
       class="MagicoModal-top"
     >
-      <div>
+      <div class="p-3">
         <textarea class="form-control" rows="30" v-model="schemaJSONText"></textarea>
         <div class="text-center mt-3">
           <button class="btn btn-danger" @click="loadFromTextarea">Załaduj JSONa</button>
@@ -191,7 +195,7 @@ export default {
       section_id: 0,
       loading: false,
       editMode: true,
-      showSettings: false,
+      showSettings: true,
       jsonModal: false,
       schemaJSONText: '',
       component_mode: false,
@@ -255,7 +259,7 @@ export default {
       })
       this.activeAddedSection.rows.push(newIt)
       this.next_group++
-      this.schamaSave()
+      this.update()
     },
     addRowButton: function (section) {
       this.addSectionGrid = true
@@ -268,6 +272,7 @@ export default {
         css: '',
         key: ''
       })
+      this.update()
     },
     deleteRow(field, index) {
       field.rows.splice(index, 1)
@@ -278,8 +283,8 @@ export default {
         return
       }
     },
-    schamaSave: function () {
-      this.$emit('input', this.fields)
+    update: function () {
+      this.$emit('update:modelValue', this.fields)
     },
     toggleOpen(event, group_item) {
       event.stopPropagation()
@@ -302,7 +307,10 @@ export default {
     },
     editSectionSave: function () {
       this.section_edit.modal = false
-      this.schamaSave()
+      this.update()
+    },
+    clone: function (orignal) {
+      return JSON.parse(JSON.stringify(orignal))
     }
   },
   created() {