MagicoPagebuilder/src/components/PagebuilderContent.vue

<template>
  <div style="min-height: 100px" class="pagebuilder-column" :class="value.name">
    <h6 v-if="value.user_label">{{ value.user_label }}</h6>
    <b-modal
      v-model.value="modalAddBox"
      class_other="modal-xl"
      v-on:onClose="modalAddBox = false"
      title="Dodaj widżet"
    >
      <div>
        <DropdownSectionSection v-if="modalAddBox" @choose="clickAdd"> </DropdownSectionSection>
      </div>
    </b-modal>

    <b-modal
      v-model="modalColumnsSettings"
      title="Ustawienia kolumny"
      size="sm"
      v-on:onClose="modalColumnsSettings = false"
    >
      <div>
        <div class="from-group">
          <label>Nazwa kolumny</label>
          <input @input="onChange" v-model="value.user_label" type="text" class="form-control" />
        </div>
        <div class="from-group">
          <label>Klasa kolumny</label>
          <input @input="onChange" v-model="value.class" type="text" class="form-control" />
        </div>
      </div>
      <div class="mt-4">
        <button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">
          Zapisz i zamknij
        </button>
      </div>
    </b-modal>
    <draggable
      :options="{ handle: '.box-move' }"
      v-model="value.items"
      @start="drag = true"
      @end="
        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="contentId+'_'+index"
            :id="contentId+'_'+index"
            v-bind:is="element.name"
            v-bind:value="element"
            v-model="value.items[index]"
            @update:model-value="onChange"
            @change="onChange"
          ></component>
        </div>
      </template>
    </draggable>
    <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
    <div
      class="posistion-relative"
      :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
    >
      <div class="flex-fill mr-0 pr-0">
        <button
          class="w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
          @click.prevent="modalAddBox = !modalAddBox"
          title="Dodaj widget"
        >
          <i class="material-icons-outlined">add_circle_outline</i>
        </button>
      </div>
      <div class="ml-0 pl-0">
        <a
          title="Ustawienia kolumny"
          class="btn-icon-sm"
          @click.prevent="modalColumnsSettings = !modalColumnsSettings"
          ><i
            style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
            class="material-icons-outlined"
            >create</i
          ></a
        >
      </div>
    </div>
  </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 DropdownSectionSection from './DropdownSectionSection.vue'

export default {
  data: function () {
    return {
      opcja: '',
      modalAddBox: false,
      drag: false,
      modalColumnsSettings: false,
      contentId: 'content' + Math.round(Math.random() * 1000)
    }
  },
  props: { value: Object },
  emits: ['update:modelValue'],
  components: {
    draggable,
    'b-modal': MagicoModal,
    core_section_textarea: SectionTextarea,
    core_section_text: SectionText,
    core_section_html: SectionHtml,
    core_section_image: SectionImage,

    DropdownSectionSection
  },
  methods: {
    onChange: function () {
      this.$emit('change')
    },
    rand: function () {
      return 'component' + Math.random() * 100
    },
    removeItem(item) {
      this.value.items.indexOf(item)
      this.value.items.splice(this.value.items.indexOf(item), 1)

      this.onChange()
    },
    clickAdd: function (item) {
      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 {
  display: none;
}

.pagebuilder-column-hover-padding {
  padding: 17px;
}

.pagebuilder-column:hover .pagebuilder-column-hover {
  display: flex;
}

.pagebuilder-column:hover .pagebuilder-column-hover-padding {
  padding: 0px;
}
</style>