LilSchool/web/src/components/LessonRedactor.vue

<template>
  <div class="section">
    <div class="section__center center" v-if="lesson">
      <div class="kit">
        <div class="kit__go go">
          <a href="#" class="go__item" @click.prevent="goBack">
            <div class="go__arrow">
              <svg class="icon icon-arrow-left">
                <use xlink:href="/static/img/sprite.svg#icon-arrow-left"></use>
              </svg>
            </div>
            <div class="go__title">К списку уроков</div>
          </a>
        </div>
        <div class="kit__title title">{{ title }}</div>
        <div class="kit__section">
          <div class="kit__field field"
               v-bind:class="{ error: $v.currentLesson.title.$invalid }">
            <div class="field__wrap">
              <input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
            </div>
          </div>
          <div class="kit__field field"
               v-bind:class="{ error: $v.currentLesson.short_description.$invalid }">
            <div class="field__wrap">
              <textarea class="field__input" v-autosize="lesson.short_description" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
            </div>
          </div>
        </div>
        <vue-draggable v-model="lesson.content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
          <div v-for="(block, index) in lesson.content">
            <block-text v-if="block.type === 'text'"
                        :index="index"
                        :title.sync="block.data.title"
                        :text.sync="block.data.text"
                        v-on:remove="onBlockRemoved"
                        :access-token="accessToken"/>
            <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_url"
                              v-on:remove="onBlockRemoved"
                              :access-token="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_url"
                         v-on:remove="onBlockRemoved"
                         :access-token="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="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 class="kit__foot">
          <button class="kit__submit btn btn_md" v-bind:class="{ loading: saving }">Сохранить</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

    export default {
        name: "lesson-redactor",
        props: ["lesson", "saving", "accessToken", "$v"],
        methods: {
            goBack() {
                this.$emit('back');
            },
            onBlockAdded(blockData) {
                this.lesson.content.push(blockData);
                this.$emit('update:lesson', this.lesson);
            },
            onBlockRemoved(blockIndex) {
                const blockToRemove = this.lesson.content[blockIndex];
                // Удаляем блок из Vue
                this.lesson.content.splice(blockIndex, 1);
                this.$emit('update:lesson', this.lesson);
                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
                if (blockToRemove.data.id) {
                    api.removeContentBlock(blockToRemove, this.accessToken);
                }
            }
        },
        computed: {
            title() {
                return this.lesson && this.lesson.id ? 'Редактирование урока' : 'Создать урок';
            }
        },
        components: {
            BlockAdd,
            'block-text': BlockText,
            'block-image': BlockImage,
            'block-image-text': BlockImageText,
            'block-images': BlockImages,
            'block-video': BlockVideo,
            'vue-draggable': Draggable,
        }
    }
</script>

<style scoped>

</style>