You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
4.9 KiB
122 lines
4.9 KiB
<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">
|
|
<div class="field__wrap">
|
|
<input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
|
|
</div>
|
|
</div>
|
|
<div class="kit__field field">
|
|
<div class="field__wrap">
|
|
<textarea class="field__input" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<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";
|
|
|
|
export default {
|
|
name: "lesson-redactor",
|
|
props: ["lesson", "saving", "accessToken"],
|
|
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,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |