fixes to image show

src/components/MagicoSection.vue

@@ -59,15 +59,15 @@
         <draggable v-model="fields.sections" handle=".handle">
           <template #item="{ element: field, index }">
             <div>
-              <div class="row section_header">
-                <div class="col-lg-6">
+              <div class="d-flex section_header justify-content-between">
+                <div class="">
                   <h3>
                     Sekcja
                     {{ index + 1 }} {{ field.label != '' ? '- ' + field.label : '' }}
                   </h3>
                   <small v-html="field.description"></small>
                 </div>
-                <div class="col-lg-6 text-end">
+                <div class="text-end">
                   <button v-if="editMode" class="btn btn-icon-sm btn-outline-secondary handle me-2">
                     <i class="bi bi-grip-horizontal"></i>
                   </button>
@@ -188,13 +188,13 @@ import SectionRow from './SectionRow.vue'
 export default {
   components: { SectionGridChoose, MagicoModal, draggable, SectionRow },
   name: 'MagicoSection',
-  props: ['modelValue'],
+  props: ['modelValue', 'edit'],
   data() {
     return {
       val: '',
       section_id: 0,
       loading: false,
-      editMode: true,
+      editMode: false,
       showSettings: true,
       jsonModal: false,
       schemaJSONText: '',
@@ -314,7 +314,12 @@ export default {
     }
   },
   created() {
-    this.val = this.modelValue
+    if (this.modelValue) {
+      this.fields = this.modelValue
+      if (!this.fields.sections) {
+        this.fields.sections = []
+      }
+    }
   },
   mounted() {
     window.addEventListener('scroll', function () {

src/components/PagebuilderSectionPlugin.vue

@@ -2,7 +2,7 @@
   <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>
+      ><span class="font-weight-bold text-primary">{{ langs.label }} {{ title }}</span>
     </div>
 
     <div class="col-sm-12 col-md-6 p-0 text-end">
@@ -10,9 +10,9 @@
         ><i class="material-icons-outlined">create</i></a
       >
       <magico-modal
-        class_other="modal-xl"
+        class_other="modal-xxl"
         v-model="modalBox"
-        :title="langs.label"
+        :title="langs.label + ' ' + title"
         v-on:hide="onCloseModal"
       >
         <div class="mb-4">
@@ -20,20 +20,23 @@
             <textarea rows="40" class="form-control" v-model="text"></textarea>
           </div> -->
         </div>
-        <div class="d-flex">
+
+        <div class="p-2 px-4">
+          <MagicoSection v-model="data.data" v-if="data.data"></MagicoSection>
+        </div>
+        <div class="d-flex mb-3">
           <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>
       </magico-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>
+    <img :src="image" style="max-width:200px">
+
   </div>
 </template>
 <script>
@@ -51,14 +54,39 @@ export default {
     }
   },
   mounted: function () {
-    console.log('TUTUAUTUAUTAUTAUTUAUTUAUTUAUT',this);
+    let vm = this
+    if (this.$pagebuilder.axios && !this.data.data && this.modelValue.section_id) {
+      this.$pagebuilder.axios
+        .get('https://cms.magico.pro/api/v1/section/' + this.modelValue.section_id)
+        .then(
+          (response) => {
+            vm.data.data = response.data.data.body
+            vm.title = response.data.data.title
+            vm.image = response.data.data.image
+            if (!vm.data.data) {
+              vm.data.data = {}
+            }
+            vm.$emit('update:modelValue', {
+              name: this.name,
+              title: this.title,
+              id: this.id,
+              data: this.data,
+              type: this.type
+            })
+          },
+          () => {
+            this.data.data = {}
+          }
+        )
+    }
+
     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.image = this.modelValue && this.modelValue.image ? this.modelValue.image : this.image
     this.data = this.modelValue && this.modelValue.data ? this.modelValue.data : this.data
     this.type = this.modelValue && this.modelValue.data ? this.modelValue.type : this.type
     if (this.modelValue && this.modelValue.open) this.modalBox = true
-    console.log('mounted html')
     this.$emit('update:modelValue', this.modelValue)
   },
   data: function () {
@@ -72,16 +100,19 @@ export default {
       modalBox: false,
       type: 'section',
       text: '',
+      image: '',
       data: {
         header: '',
-        data: {}
+        data: null
       },
       name: 'core_section'
     }
   },
   computed: {
     ctext: function () {
-      return this.modelValue && this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
+      return this.modelValue && this.modelValue.text
+        ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '')
+        : ''
     }
   },
   methods: {
@@ -92,6 +123,7 @@ export default {
       this.modalBox = false
       this.$emit('update:modelValue', {
         name: this.name,
+        image: this.image,
         title: this.title,
         id: this.id,
         data: this.data,