From 3aa0b7669895dcda4f33c55972bff8f5297aaac3 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Fri, 11 Aug 2023 13:25:47 +0200
Subject: [PATCH] develop sections

---
 src/App.vue                                 |   8 +-
 src/components/FileChooserInput.vue         |  48 +++
 src/components/MagicoSection.vue            |  56 ++--
 src/components/PagebuilderSectionPlugin.vue |  97 ++++++
 src/components/SectionElement.vue           | 320 ++++++++++++++++++++
 src/components/SectionRow.vue               | 296 +++++++++---------
 6 files changed, 655 insertions(+), 170 deletions(-)
 create mode 100644 src/components/FileChooserInput.vue
 create mode 100644 src/components/PagebuilderSectionPlugin.vue

diff --git a/src/App.vue b/src/App.vue
index 328d828..8201a99 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <script setup>
+import { ref } from 'vue'
 import MagicoSection from './components/MagicoSection.vue'
+const json = ref({})
 </script>
 
 <template>
@@ -10,7 +12,11 @@ import MagicoSection from './components/MagicoSection.vue'
   </header>
 
   <main>
-    <MagicoSection></MagicoSection>
+    <MagicoSection v-model="json"></MagicoSection>
+
+    <div class="my-5 bg-dark text-white p-3">
+      {{ json }}
+    </div>
   </main>
 </template>
 
diff --git a/src/components/FileChooserInput.vue b/src/components/FileChooserInput.vue
new file mode 100644
index 0000000..3b2eeeb
--- /dev/null
+++ b/src/components/FileChooserInput.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="form-group w-100">
+    <div class="input-group">
+      <input v-model="file_path" class="form-control" type="text" />
+      <div class="input-group-append">
+        <button class="btn btn-outline-secondary" @click="choose">Wybierz</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'FileChooserInput',
+  components: {},
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
+  data: function () {
+    return {
+      file_path: '',
+      modal: false,
+    }
+  },
+  watch: {
+    value: function () {
+      this.file_path = this.modelValue
+    }
+  },
+  created: function () {
+    this.file_path = this.modelValue
+  },
+  methods: {
+    choose: function () {
+      let vm = this
+      if (this.$filechooser) {
+        this.$filechooser.open({
+          chooseCallback: vm.choosed
+        })
+      } else {
+        alert('No FileChooser implemented')
+      }
+    },
+    choosed: function (ev) {
+      this.file_path = ev.publicUrl
+      this.$emit('update:modelValue', this.file_path)
+    }
+  }
+}
+</script>
diff --git a/src/components/MagicoSection.vue b/src/components/MagicoSection.vue
index 6cd9680..3a766ed 100644
--- a/src/components/MagicoSection.vue
+++ b/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() {
diff --git a/src/components/PagebuilderSectionPlugin.vue b/src/components/PagebuilderSectionPlugin.vue
new file mode 100644
index 0000000..2f00ded
--- /dev/null
+++ b/src/components/PagebuilderSectionPlugin.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0">
+      <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
+      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
+    </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
+        ><i class="material-icons-outlined">create</i></a
+      >
+      <b-modal
+        no-enforce-focus
+        class_other="modal-xl"
+        v-model="modalBox"
+        :title="langs.label"
+        v-on:hide="onCloseModal"
+      >
+        <div class="mb-4">
+          <div class="form-group">
+            <textarea rows="40" class="form-control" v-model="text"></textarea>
+          </div>
+        </div>
+        <div class="d-flex">
+          <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
+            {{ langs.saveclose }}
+          </button>
+        </div>
+        <div class="p-2">
+          <!-- <MagicoSection v-model="data.data"></MagicoSection> -->
+        </div>
+      </b-modal>
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
+    </div>
+    <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
+  </div>
+</template>
+<script>
+import MagicoModal from './MagicoModal.vue'
+// import MagicoSection from './MagicoSection.vue'
+export default {
+  components: {
+    'b-modal': MagicoModal,
+    // MagicoSection
+  },
+  props: {
+    modelValue: Object
+  },
+  mounted: function () {
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.$options.name
+    this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
+    this.id = this.modelValue && this.modelValue.id ? this.modelValue.id : this.id
+    this.data = this.modelValue && this.modelValue.data ? this.modelValue.data : this.data
+    this.type = this.type && this.modelValue.data ? this.modelValue.type : this.type
+    if (this.modelValue.open) this.modalBox = true
+    console.log('mounted html')
+    this.$emit('update:modelValue', this.modelValue)
+  },
+  data: function () {
+    return {
+      langs: {
+        saveclose: 'Zapisz',
+        label: 'Sekcja',
+        close: 'Zamknij'
+      },
+      height: window.innerHeight - window.innerHeight / 4,
+      modalBox: false,
+      type: 'section',
+      text: '',
+      data: {
+        header: '',
+        data: {}
+      },
+      name: 'core_section'
+    }
+  },
+  computed: {
+    ctext: function () {
+      return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
+    }
+  },
+  methods: {
+    removeItem: function () {
+      this.$emit('itemRemoved', this.modelValue)
+    },
+    onCloseModal: function () {
+      this.modalBox = false
+      this.$emit('update:modelValue', {
+        name: this.name,
+        text: this.text
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/SectionElement.vue b/src/components/SectionElement.vue
index e69de29..2cc7f1f 100644
--- a/src/components/SectionElement.vue
+++ b/src/components/SectionElement.vue
@@ -0,0 +1,320 @@
+<template>
+  <div v-if="element">
+    <div v-if="editMode && element.type != 'variable'" class="mb-2">
+      <label>Nazwa:</label>
+      <div v-if="!element.name" style="cursor: pointer" class="mb-2">
+        <span
+          v-for="(template, key) in name_templates"
+          :key="key"
+          class="badge badge-secondary mr-1"
+          @click="
+            saveElement(element, true)
+          "
+          >{{ template }}</span
+        >
+      </div>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.name"
+        name="name"
+      />
+      <label>Klucz zmiennej:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-1"
+        name="key"
+        type="text"
+        v-model="element.key"
+      />
+      <div v-if="!element.key" style="cursor: pointer" class="mb-2">
+        <span
+          v-for="(template, key) in key_templates"
+          :key="key"
+          class="badge badge-secondary mr-1"
+          @click="
+            saveElement(element, true)
+          "
+          >{{ template }}</span
+        >
+      </div>
+    </div>
+    <div v-if="element.type == 'text'">
+      <input
+        type="text"
+        @change="saveElement(element, true)"
+        class="form-control"
+        placeholder="Tekst"
+        v-model="element.text"
+      />
+    </div>
+    <div v-else-if="element.type == 'textarea'">
+      <textarea
+        @change="saveElement(element, true)"
+        placeholder="Wpisz tekst tutaj"
+        class="form-control"
+        v-model="element.text"
+      ></textarea>
+    </div>
+    <div v-else-if="element.type == 'wysiwyg'">
+      <Editor
+        @change="saveElement(element, true)"
+        :class="'item' + id"
+        v-if="vtinymce"
+        :init="vtinymce"
+        placeholder="Wpisz tekst tutaj"
+        v-model="element.text"
+      ></Editor>
+    </div>
+    <div v-else-if="element.type == 'html'">
+      <textarea
+        @change="saveElement(element, true)"
+        placeholder="Wpisz tekst tutaj"
+        class="form-control"
+        v-model="element.text"
+      ></textarea>
+    </div>
+    <div v-else-if="element.type == 'url'">
+      <label>Tytuł linku:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.name"
+      />
+      <label>URL:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="text"
+        v-model="element.url"
+      />
+    </div>
+
+    <div v-else-if="element.type == 'button'">
+      <label>Tytuł przycisku:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.name"
+      />
+      <label>URL:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="text"
+        v-model="element.url"
+      />
+    </div>
+    <div v-else-if="element.type == 'image'">
+      <FileChooserInput
+        v-model="element.text"
+        @input="saveElement(element, true)"
+      ></FileChooserInput>
+      <img :src="element.text" v-if="element.text" style="width:100px">
+    </div>
+    <div v-else-if="element.type == 'variable' && editMode">
+      <label>Label zmiennej:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-1"
+        name="name"
+        type="text"
+        v-model="element.name"
+      />
+      <div
+        v-if="!element.name || element.name == 'Zmienna POST'"
+        style="cursor: pointer"
+        class="mb-2"
+      >
+        <span
+          v-for="(template, key) in name_templates"
+          :key="key"
+          class="badge badge-secondary mr-1"
+          @click="
+            saveElement(element, true)
+          "
+          >{{ template }}</span
+        >
+      </div>
+      <label>Wybierz zmienną systemową:</label>
+      <select
+        @change="saveElement(element, true)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.url"
+      >
+        <!-- <option v-for="it,key in posts_names" :value="it">{{ it }}</option> -->
+      </select>
+      <label>lub wpisz jej wartość:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="text"
+        v-model="element.url"
+      />
+      <b-form-checkbox v-model="element.image_upload" class="mt-2">Upload obrazka</b-form-checkbox>
+      <b-form-checkbox v-model="element.image_core_files" class="mt-2"
+        >Wybór obrazka z pliki i multimedia</b-form-checkbox
+      >
+    </div>
+    <div v-else-if="element.type == 'variable' && !editMode">
+      <!-- <fileupload
+        v-if="element.image_upload"
+        class="mb-3"
+        :target="
+          '/mpanel/post/image/' +
+          element.url +
+          '?lang_id=' +
+          ($route.params.lang_id ? $route.params.lang_id : 1)
+        "
+        action="POST"
+        v-on:finish="finishUpload"
+        v-on:progress="progressUpload"
+        v-on:start="startUpload"
+      ></fileupload> -->
+      <img
+        style="max-width: 100px"
+        v-if="element.var_text && element.image_upload"
+        :src="'/public/images/post/' + element.var_text"
+        :alt="element.var_text"
+      />
+
+      <!-- <core_files_input
+        v-if="element.image_core_files"
+        v-model="element.var_text"
+        @input="savePost(element.url, element.var_text)"
+      ></core_files_input> -->
+      <textarea
+        v-show="!element.image_upload && !element.image_core_files"
+        rows="1"
+        @change="savePost(element.url, element.var_text)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.var_text"
+      ></textarea>
+    </div>
+    <div v-else-if="element.type == 'widgetlist' && editMode">
+      <label>Nazwa:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.name"
+        name="name"
+      />
+      <label>ID Listy:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="number"
+        v-model="element.url"
+      />
+    </div>
+    <div v-else-if="element.type == 'widgetlist' && !editMode">
+      <widgetlist_modal :listid="element.url"></widgetlist_modal>
+    </div>
+    <div v-else-if="element.type == 'heading'">
+      <label>Nagłowek:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="text"
+        v-model="element.text"
+      />
+    </div>
+    <div v-else-if="element.type == 'boolean'">
+      <input
+        type="checkbox"
+        @change="saveElement(element, true)"
+        class="form-control"
+        v-model="element.text"
+      />
+    </div>
+    <div v-else-if="element.type == 'cms'">
+      <label>Tytuł:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control mb-2"
+        type="text"
+        v-model="element.name"
+        disabled
+      />
+      <label>Link:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="text"
+        v-model="element.url"
+        disabled
+      />
+    </div>
+    <div v-show="editMode">
+      <label class="mt-2">Klasa CSS:</label>
+      <input
+        @change="saveElement(element, true)"
+        class="form-control"
+        type="text"
+        v-model="element.css"
+      />
+    </div>
+    <div class="mt-3" v-if="editMode"></div>
+    <button
+      v-show="editMode"
+      style="margin-top: 10px"
+      @click="saveElement(element)"
+      class="btn btn-block btn-primary"
+    >
+      Zapisz
+    </button>
+  </div>
+</template>
+
+<script>
+import FileChooserInput from './FileChooserInput.vue'
+import { randId } from './helper'
+import draggable from 'vuedraggable'
+export default {
+  components: { draggable, FileChooserInput },
+  props: ['modelValue', 'indexes', 'editMode'],
+  methods: {
+    saveElement: function (el, mode = false) {
+      if (mode == false) {
+        el.edited = false
+      }
+      this.$emit('input')
+    }
+  },
+  data() {
+    return {
+      minimodal: false,
+      value: '',
+      id: randId('post'),
+      vtinymce: {},
+      element: {},
+      name_templates: ['Nagłowek', 'Podnagłówek', 'Opis', 'Tekst', 'Obrazek', 'Ikona'],
+      key_templates: ['head', 'text', 'image', 'icon'],
+
+      components: {}
+    }
+  },
+  created() {
+    this.element = this.modelValue
+    // let vm = this
+    // this.vtinymce = Object.assign(vtinymce, {
+    //   toolbar1:
+    //     'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link  | forecolor backcolor',
+    //   toolbar2: '',
+    //   selector: 'textarea.item' + this.id,
+    //   setup: function (editor) {
+    //     editor.on('Blur', function (e) {
+    //       vm.saveElement(this.element, true)
+    //     })
+    //   }
+    // })
+    //    console.log(this.components);
+  }
+}
+</script>
diff --git a/src/components/SectionRow.vue b/src/components/SectionRow.vue
index 61671c9..18ddf37 100644
--- a/src/components/SectionRow.vue
+++ b/src/components/SectionRow.vue
@@ -13,39 +13,40 @@
             <div class="card-body p-2">
               <h5 class="card-title d-flex justify-content-start align-items-center">
                 <span v-if="editMode" class="d-inline-flex box-settings-icon box-settings handle"
-                  ><i class="bi bi-data"></i></span
-                ><span class="ml-2 flex-fill">
+                  ><i class="bi bi-grip-vertical"></i></span
+                ><span class="ms-2 flex-fill">
                   Kolumna {{ index + 1 }}
                   {{ column.label ? '- ' + column.label : '' }}
                   <span v-if="column.type == 'collection'" :title="column.key">
-                    KOLEKCJA</span
+                    [KOLEKCJA]</span
                   ></span
                 >
-
-                <button v-if="editMode" @click="editSection(column)" class="btn btn-icon-sm">
-                  <i class="bi bi-">edit</i>
-                </button>
-                <button
-                  title="Wklej zawartość"
-                  v-if="editMode"
-                  @click="pasteSection(column, [$props.section_index, $props.mykey, index])"
-                  class="btn btn-icon-sm"
-                >
-                  <i class="bi bi-">paste</i>
-                </button>
-                <button
-                  title="Kopiuj zawartość"
-                  v-if="editMode"
-                  @click="copySection(column)"
-                  class="btn btn-icon-sm"
-                >
-                  <i class="bi bi-">copy</i>
-                </button>
-                <small
-                  class="ml-4 mt-1"
-                  style="font-size: 12px; font-weight: 300; display: block"
-                  v-html="column.description"
-                ></small>
+                <div>
+                  <button v-if="editMode" @click="editSection(column)" class="btn btn-icon-sm">
+                    <i class="bi bi-pencil"></i>
+                  </button>
+                  <button
+                    title="Wklej zawartość"
+                    v-if="editMode"
+                    @click="pasteSection(column, [$props.section_index, $props.mykey, index])"
+                    class="btn btn-icon-sm"
+                  >
+                    <i class="bi bi-clipboard-check"></i>
+                  </button>
+                  <button
+                    title="Kopiuj zawartość"
+                    v-if="editMode"
+                    @click="copySection(column)"
+                    class="btn btn-icon-sm"
+                  >
+                    <i class="bi bi-clipboard"></i>
+                  </button>
+                  <small
+                    class="ms-4 mt-1"
+                    style="font-size: 12px; font-weight: 300; display: block"
+                    v-html="column.description"
+                  ></small>
+                </div>
               </h5>
               <draggable
                 v-if="column.type != 'collection' || editMode"
@@ -55,13 +56,13 @@
                 v-model="column.items"
                 group="people"
               >
-                <template #item="{ element }">
+                <template #item="{ element, index }">
                   <div class="list-group mb-2">
                     <div
-                      class="list-group-item pl-2 pr-1"
+                      class="list-group-item ps-2 pe-1"
                       @click="handleElementClick($event, element, column)"
                     >
-                      <b v-if="!editMode">{{ element.name }}</b
+                      <label class="mb-1" v-if="!editMode">{{ element.name }}</label
                       ><input
                         @change="saveSection(column)"
                         v-model="element.name"
@@ -70,41 +71,41 @@
                         style="border: none; background-color: transparent"
                       />
                       {{ element.type == 'heading' ? '- ' + element.text : '' }}
-                      <button
+                      <a
                         v-if="editMode"
-                        class="btn btn-icon-sm btn-outline-secondary handle float-right"
+                        class="text-dark handle float-end"
                       >
-                        <i class="bi bi-open"></i>
-                      </button>
-                      <button
+                        <i class="bi bi-grip-vertical"></i>
+                      </a>
+                      <a
                         v-if="editMode"
                         @click.prevent="removeEl(column.items, index2)"
-                        class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
+                        class="text-dark me-1 off_tooltip_off float-end"
                       >
-                        <i class="bi bi-pen"></i>
-                      </button>
-                      <button
+                        <i class="bi bi-trash"></i>
+                      </a>
+                      <a
                         v-if="editMode"
                         @click.prevent="element.edited = !element.edited"
-                        class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
+                        class="text-dark me-1 off_tooltip_off float-end"
                       >
-                        <i class="bi bi-open"></i>
-                      </button>
-                      <button
+                        <i class="bi bi-pencil"></i>
+                      </a>
+                      <a
                         title="Skopiuj ID zmiennej"
                         @click.prevent="copyClickboard(element.key)"
-                        class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
+                        class="text-dark me-1 off_tooltip_off float-end"
                       >
-                        <i class="bi bi-copy"></i>
-                      </button>
-                      <!-- 
-                      <panel_section_element_edit
+                        <i class="bi bi-clipboard"></i>
+                      </a>
+
+                      <section-element
                         :edit-mode="editMode"
                         @change="saveSection(column)"
                         :indexes="[$props.section_index, $props.mykey, index, index2]"
                         v-if="element.edited == true || !editMode"
-                        :element="element"
-                      ></panel_section_element_edit> -->
+                        :modelValue="element"
+                      ></section-element>
                     </div>
                   </div>
                 </template>
@@ -122,88 +123,69 @@
                   v-model="column.collection"
                   group="people2"
                 >
-                  <div class="card mb-1" v v-for="(colItem, ck) in column.collection" :key="ck">
-                    <div
-                      class="card-header p-2 pl-3 align-items-center d-flex justify-content-between"
-                      id="headingOne"
-                      data-toggle="collapse"
-                      :data-target="
-                        '#collapseOne' + $props.section_index + $props.mykey + ck + index
-                      "
-                      aria-expanded="true"
-                      :aria-controls="'collapseOne' + ck + index"
-                    >
-                      Element #{{ ck + 1 }}
-                      <div>
-                        <button
-                          @click="deleteCollectionItem(column, ck)"
-                          class="btn btn-icon-sm btn-outline-secondary"
-                        >
-                          <span class="material-icons-outlined">delete</span>
-                        </button>
-
-                        <button class="btn handle2 btn-icon-sm btn-outline-secondary">
-                          <span class="material-icons-outlined">open_with</span>
-                        </button>
-                      </div>
-                    </div>
-                    <div
-                      :id="'collapseOne' + $props.section_index + $props.mykey + ck + index"
-                      class="collapse"
-                      aria-labelledby="headingOne"
-                      :data-parent="'#accordion' + $props.section_index + $props.mykey"
-                    >
-                      <div class="card-body p-1">
-                        <div
-                          class="list-group mb-2"
-                          v-for="(element, index2) in colItem"
-                          :key="element.id"
-                        >
-                          <div
-                            class="list-group-item pl-2 pr-1"
-                            @click="handleElementClick($event, element, column)"
+                  <template #item="{ element: colItem, index: ck }">
+                    <div class="card mb-1">
+                      <div
+                        class="card-header p-2 ps-3 align-items-center d-flex justify-content-between"
+                        @click="
+                          expanded[
+                            'collapseOne' + $props.section_index + $props.mykey + ck + index
+                          ] = expanded[
+                            'collapseOne' + $props.section_index + $props.mykey + ck + index
+                          ]
+                            ? false
+                            : true
+                        "
+                      >
+                        Element #{{ ck + 1 }}
+                        <div>
+                          <button
+                            @click="deleteCollectionItem(column, ck)"
+                            class="btn btn-icon-sm btn-outline-secondary me-1"
                           >
-                            <b>{{ element.name }}</b>
-                            {{ element.type == 'heading' ? '- ' + element.text : '' }}
-                            <button
-                              v-if="editMode"
-                              class="btn btn-icon-sm btn-outline-secondary handle float-right"
+                            <span class="bi bi-trash"></span>
+                          </button>
+
+                          <button class="btn handle2 btn-icon-sm btn-outline-secondary">
+                            <span class="bi bi-grip-vertical"></span>
+                          </button>
+                        </div>
+                      </div>
+                      <div
+                        v-if="
+                          expanded['collapseOne' + $props.section_index + $props.mykey + ck + index]
+                        "
+                      >
+                        <div class="card-body p-1">
+                          <div class="mt-2" v-for="(element, index2) in colItem" :key="index2">
+                            <div
+                              class="ps-2 pe-1 mb-3"
+                              @click="handleElementClick($event, element, column)"
                             >
-                              <i class="material-icons-outlined">open_with</i>
-                            </button>
-                            <button
-                              v-if="editMode"
-                              @click.prevent="removeEl(column.items, index2)"
-                              class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
-                            >
-                              <i class="material-icons-outlined">delete</i>
-                            </button>
-                            <button
-                              v-if="editMode"
-                              @click.prevent="element.edited = !element.edited"
-                              class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
-                            >
-                              <i class="material-icons-outlined">create</i>
-                            </button>
-                            <button
-                              title="Skopiuj ID zmiennej"
-                              @click.prevent="copyClickboard(element.key)"
-                              class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
-                            >
-                              <i class="material-icons-outlined">copy</i>
-                            </button>
-                            <panel_section_element_edit
-                              @change="saveCollectionElement(column)"
-                              :edit-mode="editMode"
-                              :indexes="[$props.section_index, $props.mykey, index, index2]"
-                              v-if="element.edited == true || !editMode"
-                              :element="element"
-                            ></panel_section_element_edit>
+                              <label class="mb-1">{{ element.name }}</label>
+                              {{ element.type == 'heading' ? '- ' + element.text : '' }}
+
+                              <a
+                                title="Skopiuj ID zmiennej"
+                                @click.prevent="copyClickboard(element.key)"
+                                class="me-1 text-dark off_tooltip_off float-end"
+                              >
+                                <i class="bi bi-clipboard"></i>
+                              </a>
+                              <section-element
+                                @change="saveCollectionElement(column)"
+                                :edit-mode="editMode"
+                                :indexes="[$props.section_index, $props.mykey, index, index2]"
+                                v-if="element.edited == true || !editMode"
+                                :modelValue="element"
+                                :key="ck + '_it' + index2"
+                              ></section-element>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
+                  </template>
                 </draggable>
               </div>
               <button
@@ -224,31 +206,40 @@
       v-model="cssmodal.modal"
       class="MagicoModal-top"
     >
-      <div>
+      <div class="p-3">
         <label>Nazwa kolumny:</label>
         <input
-          class="form-control"
+          class="form-control mb-3"
           type="text"
           v-model="cssmodal.column.label"
           :disabled="!editMode"
         />
         <label>Klasa CSS:</label>
-        <input class="form-control" type="text" v-model="cssmodal.column.css" />
+        <input class="form-control mb-3" type="text" v-model="cssmodal.column.css" />
         <label>Klucz kolumny:</label>
-        <input class="form-control" type="text" v-model="cssmodal.column.key" />
+        <input class="form-control mb-3" type="text" v-model="cssmodal.column.key" />
         <label>Opis HTML:</label>
-        <input class="form-control" type="text" v-model="cssmodal.column.description" />
-        <b-form-checkbox
-          class="mt-2"
-          value="collection"
-          unchecked-value="default"
-          v-model="cssmodal.column.type"
-          >Kolekcja</b-form-checkbox
-        >
+        <input class="form-control mb-3" type="text" v-model="cssmodal.column.description" />
+        <label>Typ kolumny</label>
+        <div>
+          <button
+            class="btn btn-outline-secondary my-2"
+            @click="
+              cssmodal.column.type =
+                cssmodal.column.type == 'default' || !cssmodal.column.type
+                  ? 'collection'
+                  : 'default'
+            "
+          >
+            {{ cssmodal.column.type == 'default' || !cssmodal.column.type ? 'Zwykła' : 'Kolekcja' }}
+          </button>
+        </div>
       </div>
-      <div>
-        <div class="text-right">
-          <button @click="cssmodal.modal = false" class="btn btn-outline-secondary">Anuluj</button>
+      <div class="p-3">
+        <div class="text-end">
+          <button @click="cssmodal.modal = false" class="btn btn-outline-secondary me-2">
+            Anuluj
+          </button>
           <button class="btn btn-primary" @click="saveSection">Zapisz</button>
         </div>
       </div>
@@ -258,8 +249,9 @@
 <script>
 import MagicoModal from './MagicoModal.vue'
 import draggable from 'vuedraggable'
+import SectionElement from './SectionElement.vue'
 export default {
-  components: { MagicoModal, draggable },
+  components: { MagicoModal, draggable, SectionElement },
   props: ['section', 'group', 'mykey', 'section_index', 'editMode'],
   template: '#panel_section_row-template',
   methods: {
@@ -275,9 +267,12 @@ export default {
           '_' +
           (Math.random() + 1).toString(36).substring(7)
       }
+
+      this.$emit('input')
     },
 
     newItemAdded(newIndex, element) {
+      this.$emit('input')
       console.log('here')
       console.log(newIndex, element)
     },
@@ -290,8 +285,11 @@ export default {
       navigator.clipboard.writeText(text)
     },
     // Alert the copied text
-    deleteSection: function (key) {},
+    deleteSection: function (key) {
+      this.$emit('input')
+    },
     editSection: function (column) {
+      this.$emit('input')
       this.cssmodal.column = column
       this.cssmodal.modal = true
     },
@@ -301,6 +299,7 @@ export default {
       if (this.editMode && col.collection.length > 0) {
         col.collection = this.updateCollectionWithScheme(col.items, col.collection)
       }
+      this.$emit('input')
     },
 
     updateCollectionWithScheme: function (scheme, items) {
@@ -313,26 +312,32 @@ export default {
         })
         newItems.push(newEntry)
       })
+      this.$emit('input')
 
       return newItems
     },
 
-    saveCollectionElement: function () {},
+    saveCollectionElement: function () {
+      this.$emit('input')
+    },
 
     handleElementClick(event, item, column) {
       console.log(event)
       if (event.ctrlKey && this.editMode) {
         column.items.push(JSON.parse(JSON.stringify(item)))
       }
+      this.$emit('input')
     },
     addItemToCollection: function (column) {
       if (!column.collection) {
         column.collection = []
       }
       column.collection.push(JSON.parse(JSON.stringify(column.items)))
+      this.$emit('input')
     },
     deleteCollectionItem: function (column, index) {
       column.collection.splice(index, 1)
+      this.$emit('input')
     },
     pasteSection: function (column, indexes) {
       let item = localStorage.getItem('sectionscopy')
@@ -364,6 +369,7 @@ export default {
     return {
       value: '',
       components: {},
+      expanded: {},
       cssmodal: {
         modal: false,
         column: {}