LilSchool/web/src/components/blocks/BlockContent.vue

<template>
  <div>
  <vue-draggable :list="content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
    <div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid" class="kit__section kit__section--block"
      name="block-content-block">
      <div class="kit__section-remove">
        <button if="index != 0" type="button" @click="moveUp(index)" name="block-content-move-up">
          <svg class="icon icon-arrow-up">
            <use xlink:href="/static/img/sprite.svg#icon-arrow-down"></use>
          </svg>
        </button>
        <button if="index < (content.length - 1)" type="button" @click="moveDown(index)" name="block-content-move-down">
          <svg class="icon icon-arrow-down">
            <use xlink:href="/static/img/sprite.svg#icon-arrow-down"></use>
          </svg>
        </button>
        <button class="sortable__handle" type="button">
          <svg class="icon icon-hamburger">
            <use xlink:href="/static/img/sprite.svg#icon-hamburger"></use>
          </svg>
        </button>
        <button type="button" @click="onBlockRemoved(index)" name="block-content-delete">
          <svg class="icon icon-delete">
            <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
          </svg>
        </button>
      </div>
      <block-text v-if="block.type === 'text'"
                  :index="index"
                  :title.sync="block.data.title"
                  :text.sync="block.data.text"
                  v-on:remove="onBlockRemoved"/>
      <block-image-text v-if="block.type === 'image-text'"
                        :index="index"
                        :title.sync="block.data.title"
                        :text.sync="block.data.text"
                        :image-id.sync="block.data.image_id"
                        :image-url.sync="block.data.image_thumbnail_url"
                        v-on:remove="onBlockRemoved"
                        :access-token="$root.store.accessToken"/>
      <block-image v-if="block.type === 'image'"
                   :index="index"
                   :title.sync="block.data.title"
                   :image-id.sync="block.data.image_id"
                   :image-url.sync="block.data.image_thumbnail_url"
                   v-on:remove="onBlockRemoved"
                   :access-token="$root.store.accessToken"/>
      <block-images v-if="block.type === 'images'"
                    :index="index"
                    :title.sync="block.data.title"
                    :text.sync="block.data.text"
                    :images.sync="block.data.images"
                    v-on:remove="onBlockRemoved"
                    :access-token="$root.store.accessToken"/>
      <block-video v-if="block.type === 'video'"
                   :index="index"
                   :title.sync="block.data.title"
                   v-on:remove="onBlockRemoved"
                   :video-url.sync="block.data.video_url"/>
    </div>
  </vue-draggable>

  <block-add v-on:added="onBlockAdded"/>
  </div>
</template>

<script>
    import {api} from "../../js/modules/api";
    import Draggable from 'vuedraggable';
    import BlockText from './BlockText'
    import BlockImage from './BlockImage'
    import BlockImages from './BlockImages'
    import BlockImageText from './BlockImageText'
    import BlockVideo from './BlockVideo'
    import BlockAdd from "./BlockAdd"

    export default {
        name: 'block-content',
        props: ['content'],
        methods: {
            moveUp(blockIndex) {
                if(blockIndex <= 0){
                    return;
                }
                const block = this.content[blockIndex];
                const prevBlock = this.content[blockIndex - 1];
                this.content.splice(blockIndex - 1, 2, block, prevBlock);
            },
            moveDown(blockIndex) {
                if(blockIndex >= this.content.length - 1){
                    return;
                }
                const block = this.content[blockIndex];
                const nextBlock = this.content[blockIndex + 1];
                this.content.splice(blockIndex, 2, nextBlock, block);
            },
            onBlockRemoved(blockIndex) {
                const remove = () => {
                    // Удаляем блок из Vue
                    content.splice(blockIndex, 1);
                    this.$emit('update:content', content);
                }
                const content = this.content;
                const blockToRemove = this.content[blockIndex];
                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
                if (blockToRemove.data.id) {
                    api.removeContentBlock(blockToRemove, this.$root.store.accessToken).then(response => {
                        remove();
                    });
                }
                else {
                    remove();
                }
            },
            onBlockAdded(blockData) {
              const content = this.content;
              content.push(blockData);
              this.$emit('update:content', content);
            },
        },

        components: {
            BlockAdd,
            'block-text': BlockText,
            'block-image': BlockImage,
            'block-image-text': BlockImageText,
            'block-images': BlockImages,
            'block-video': BlockVideo,
            'vue-draggable': Draggable,
        }
    }
</script>