nubium-artifex/webapp/components/TemplateEditor/TemplateEditor.vue

<template>
  <v-container fluid>
    <draggable :list="template">
      <transition-group>
        <div v-for="section in template" :key="section.uid" :style="section.sectionStyle" style="position: relative">
          <v-layout column class="text-xs-center te-section--menu">
            <v-flex class="te-section--btn" elevation-4>
              <v-icon dark>
                mdi-cursor-move
              </v-icon>
            </v-flex>
            <v-flex class="te-section--btn" elevation-4 @click.stop="editSection(section)">
              <v-icon dark>
                mdi-pencil
              </v-icon>
            </v-flex>
            <v-flex class="te-section--btn" elevation-4 @click.stop="removeSection(section)">
              <v-icon dark>
                mdi-delete
              </v-icon>
            </v-flex>
          </v-layout>
          <te-section :colls="section.colls" :style="section.containerStyle" />
        </div>
      </transition-group>
    </draggable>
    <v-layout
      text-xs-center
      align-center
      justify-center
      row
      fill-height
      @click="openAddSection()"
    >
      <v-flex class="lp-add-row">
        <v-card>
          <v-card-text>ADD SECTION</v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    <te-add-section @newsection="addSection" />
    <v-navigation-drawer
      v-model="rightDrawer"
      temporary
      right
      fixed
      :width="500"
    >
      <h1 />
      <v-tabs fixed-tabs>
        <v-tab key="setting">
          Settings
        </v-tab>

        <v-tab-item key="settings" />
      </v-tabs>
    </v-navigation-drawer>
  </v-container>
</template>

<script>
import draggable from 'vuedraggable'
import TeSection from './widgets/TeSection.vue'
import TeAddSection from './modals/TeAddSection.vue'

export default {
  components: { draggable, TeSection, TeAddSection },
  model: { prop: 'src', event: 'change' },
  props: {
    src: { type: Array, default: () => [] }
  },
  data: () => ({
    template: [],
    rightDrawer: false
  }),
  mounted () {
    this.addSection([4, 4, 4])
    this.addSection([6, 6])
    // console.log(this.template)
    // setInterval(() => {
    //   console.log(JSON.stringify(this.myArray))
    // }, 3000)
  },
  methods: {
    openAddSection () {
      this.$emit('section:add')
    },
    editSection (section) {
      this.rightDrawer = true
    },
    removeSection (section) {
      this.$confirm('Do you really want to remove this section?', { title: 'Remove Section' })
        .then((res) => {
          if (res) { this.template = this.template.filter(sec => sec.name !== section.name) }
        })
    },
    addSection (pTemplate) {
      const uid = Math.random().toString(36).slice(2, 10)
      const section = {
        name: `Section ${uid}`,
        sectionStyle: {
          backgroundColor: 'red',
          margin: '1em 0'
        },
        containerStyle: {
          color: 'blue'
        },
        uid,
        colls: []
      }
      pTemplate.forEach((size, idx) => {
        section.colls.push({
          size,
          style: {},
          uid: `${uid}-${idx}`,
          list: [
            {
              type: 'TeImg',
              uid: '123456700' + uid + idx,
              data: {
                src: 'https://picsum.photos/id/370/200/200'
              }
            },
            {
              type: 'TeText',
              uid: '1234567' + uid + idx,
              data: {
                text: size === '2' ? 'Cupidatat enim id consequat deserunt elit eiusmod ullamco ipsum irure ullamco proident. Enim consectetur commodo incididunt in ad esse. Voluptate proident et aliquip est tempor est duis reprehenderit consequat. Ad cupidatat nisi sit incididunt tempor amet laborum adipisicing incididunt nostrud minim.' : 'Sunt mollit ut quis adipisicing consectetur pariatur laboris Lorem sunt quis deserunt id.'
              }
            },
            {
              type: 'TeText',
              uid: '12345678' + uid + idx,
              data: {
                text: size === '2' ? 'Cupidatat enim id consequat deserunt elit eiusmod ullamco ipsum irure ullamco proident. Enim consectetur commodo incididunt in ad esse. Voluptate proident et aliquip est tempor est duis reprehenderit consequat. Ad cupidatat nisi sit incididunt tempor amet laborum adipisicing incididunt nostrud minim.' : 'Sunt mollit ut quis adipisicing consectetur pariatur laboris Lorem sunt quis deserunt id.'
              }
            }
          ]
        })
      })
      this.template.push(section)
    }
  }
}
</script>

<style scoped>
.lp-add-row {
  margin: 10px;
  cursor: pointer;
}
.te-section--menu {
  position: absolute;
  width:30px;
  left:-30px;
}
.te-section--btn {
  background: #888;
  margin: 2px 0;
  height: 30px;
  cursor: pointer;
}
.te-section--btn:hover {
  background: #555;
}
</style>