use sections plugin

package.json

@@ -15,7 +15,7 @@
     "bootstrap": "^5.3.1",
     "bootstrap-icons": "^1.10.5",
     "core-js": "^3.6.5",
-    "magico-section": "../magico-section",
+    "magico-section": "https://serwer.magico.pl/gitrepos/public/magico-section.git",
     "tinymce": "^6.0.3",
     "vue": "^3.3.4",
     "vuedraggable": "^4.1.0"

src/App.vue

@@ -1,24 +1,34 @@
 <template>
   <div id="app" class="container">
-    <img alt="Vue logo" style="width:100px" src="./assets/logo.png">
+    <img alt="Vue logo" style="width: 100px" src="./assets/logo.png" />
     <h2>Pagebuilder Magico</h2>
     <MagicoPagebuilder v-model="data" />
 
-    <div class="bg-dark text-light mt-4 p-2">{{data}}</div>
+    <div class="bg-dark text-light mt-4 p-2">{{ data }}</div>
   </div>
 </template>
 
 <script>
-
+import { useSections } from './components/registerSections'
+import axios from 'axios'
 export default {
   name: 'App',
-  components: {
-    
-  },
-  data: function(){
+  components: {},
+  data: function () {
     return {
-      data:'[{"label":"1 kolumna  ","name":"col_1","columns":[{"name":"col-md-12","items":[{"name":"core_section_textarea","text":""},{"name":"core_section_text","text":""}]}]}]'
+      data: '[{"label":"1 kolumna  ","name":"col_1","columns":[{"name":"col-md-12","items":[{"name":"core_section_textarea","text":""},{"name":"core_section_text","text":""}]}]}]'
     }
+  },
+  mounted() {
+    const { register: sectionRegister } = useSections()
+    let vm = this
+    this.$pagebuilder.axios = axios.create({
+      headers: { Authorization: 'Bearer ffe788a01ac6c7461c2159d76271485130994e02' }
+    })
+
+    this.$pagebuilder.axios.get('https://cms.magico.pro/api/v1/section').then((response) => {
+      sectionRegister(vm.$pagebuilder, response.data.data)
+    })
   }
 }
 </script>
@@ -31,4 +41,4 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-</style>
+</style>

src/components/DropdownSectionSection.vue

@@ -17,6 +17,12 @@
                 v-if="item.svg"
                 v-html="item.svg"
               ></div>
+
+              <img
+                style="width: 100%"
+                v-else-if="item.image"
+                :src="item.image"
+              >
               <img
                 v-else
                 style="width: 100%"
@@ -69,7 +75,6 @@ export default {
         }
     },
     mounted() {
-
     }
 }
 </script>

src/components/PagebuilderContent.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    style="min-height: 100px"
-    class="pagebuilder-column"
-    :class="value.name"
-  >
+  <div style="min-height: 100px" class="pagebuilder-column" :class="value.name">
     <b-modal
       v-model.value="modalAddBox"
       class_other="modal-xl"
@@ -11,7 +7,7 @@
       title="Dodaj widżet"
     >
       <div>
-        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
+        <DropdownSectionSection v-if="modalAddBox" @choose="clickAdd"> </DropdownSectionSection>
       </div>
     </b-modal>
 
@@ -24,19 +20,11 @@
       <div>
         <div class="from-group">
           <label>Klasa kolumny</label>
-          <input
-            @input="onChange"
-            v-model="value.class"
-            type="text"
-            class="form-control"
-          />
+          <input @input="onChange" v-model="value.class" type="text" class="form-control" />
         </div>
       </div>
       <div>
-        <button
-          @click="modalColumnsSettings = false"
-          class="btn btn-outline-secondary"
-        >
+        <button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">
           Zapisz i zamknij
         </button>
       </div>
@@ -47,7 +35,7 @@
       @start="drag = true"
       @end="
         drag = false;
-        onChange();
+        onChange()
       "
       group="people"
     >
@@ -95,53 +83,58 @@
   </div>
 </template>
 <script>
-import draggable from "vuedraggable";
-import MagicoModal from "./MagicoModal.vue";
-import SectionText from "./plugin/SectionText.vue";
-import SectionTextarea from "./plugin/SectionTextarea.vue";
-import SectionHtml from "./plugin/SectionHtml.vue";
-import SectionImage from "./plugin/SectionImage.vue";
+import draggable from 'vuedraggable'
+import MagicoModal from './MagicoModal.vue'
+import SectionText from './plugin/SectionText.vue'
+import SectionTextarea from './plugin/SectionTextarea.vue'
+import SectionHtml from './plugin/SectionHtml.vue'
+import SectionImage from './plugin/SectionImage.vue'
 
-import DropdownSectionSection from "./DropdownSectionSection.vue";
+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 }
   },
   props: { value: Object },
-  emits: ["update:modelValue"],
+  emits: ['update:modelValue'],
   components: {
     draggable,
-    "b-modal": MagicoModal,
+    'b-modal': MagicoModal,
     core_section_textarea: SectionTextarea,
     core_section_text: SectionText,
     core_section_html: SectionHtml,
     core_section_image: SectionImage,
 
-    DropdownSectionSection,
+    DropdownSectionSection
   },
   methods: {
     onChange: function () {
-      this.$emit("change");
+      this.$emit('change')
     },
     rand: function () {
-      return "component" + Math.random() * 100;
+      return 'component' + Math.random() * 100
     },
     removeItem(item) {
-      this.value.items.indexOf(item);
-      this.value.items.splice(this.value.items.indexOf(item), 1);
+      this.value.items.indexOf(item)
+      this.value.items.splice(this.value.items.indexOf(item), 1)
 
-      this.onChange();
+      this.onChange()
     },
     clickAdd: function (item) {
-      console.log(item);
-      this.modalAddBox = false;
-      var a = { name: item, open: true };
-      this.value.items.push(a);
-      this.onChange();
-    },
-  },
-};
+      console.log(item)
+      const sectionobj = this.$pagebuilder.items[item]
+      console.log('addedd', sectionobj)
+      this.modalAddBox = false
+      var a = { name: item, open: true }
+      if (sectionobj.section_id) {
+        a.section_id = sectionobj.section_id;
+      }
+      this.value.items.push(a)
+      this.onChange()
+    }
+  }
+}
 </script>
 <style>
 .pagebuilder-column-hover {

src/components/registerSections.js

@@ -1,16 +1,20 @@
-import PagebuilderSectionPlugin from "../../../magico-section/src/components/PagebuilderSectionPlugin.vue";
+import PagebuilderSectionPlugin from 'magico-section/src/components/PagebuilderSectionPlugin.vue'
 
 export function useSections() {
-  console.log('DUPA',PagebuilderSectionPlugin);
-  function register(vm) {
-    vm.registerPlugin(
-      "SectionX1",
-      {
-        label: "Sekcja 1",
-        svg_off: ``,
-      },
-      PagebuilderSectionPlugin
-    );
+  function register(vm, sections) {
+    console.log('sections', sections, vm)
+    sections.forEach((item) => {
+      vm.registerPlugin(
+        'section_' + item.section_id,
+        {
+          label: item.title,
+          svg_off: ``,
+          section_id: item.section_id,
+          image: item.image
+        },
+        PagebuilderSectionPlugin
+      )
+    })
   }
-  return { register };
+  return { register }
 }

src/main.js

@@ -2,16 +2,11 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import axios from 'axios'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js'
 
-
-import { useSections } from "./components/registerSections";
-const app = createApp(App).use(MagicoPagebuilder).mount("#app");
+const app = createApp(App).use(MagicoPagebuilder).mount('#app')
 
 
 
-
-const { register: sectionRegister } = useSections();
-sectionRegister(app.$pagebuilder);

yarn.lock

@@ -1030,8 +1030,9 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
-magico-section@../magico-section:
+"magico-section@https://serwer.magico.pl/gitrepos/public/magico-section.git":
   version "0.1.0"
+  resolved "https://serwer.magico.pl/gitrepos/public/magico-section.git#913d62c6aac1c0ce60c3c17c8d64b029b7c43df2"
   dependencies:
     "@popperjs/core" "^2.11.8"
     axios "^1.4.0"