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.
84 lines
3.1 KiB
84 lines
3.1 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__row">
|
|
<lil-image :image-id.sync="lesson.coverImageId" :image-url.sync="lesson.coverImage"
|
|
v-on:update:imageUrl="onUpdateCoverUrl" v-on:update:imageId="onUpdateCoverId" :access-token="accessToken"/>
|
|
<div class="kit__fieldset">
|
|
<div class="kit__field field"
|
|
v-bind:class="{ error: $v.currentLesson.title.$invalid }">
|
|
<div class="field__wrap">
|
|
<input type="text" name="course-lesson-title" 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" name="course-lesson-text-wrap">
|
|
<vue-redactor :value="lesson.short_description"
|
|
v-on:update:value="(value) => { this.lesson.short_description = value; }" placeholder="Описание урока"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<block-content name="course-lesson-content" :content.sync="lesson.content"></block-content>
|
|
|
|
<div class="kit__foot">
|
|
<button class="kit__submit btn btn_md" v-bind:class="{ loading: saving }" name="course-lesson-save">Сохранить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BlockContent from './blocks/BlockContent'
|
|
import LilImage from "./blocks/Image"
|
|
import VueRedactor from './redactor/VueRedactor';
|
|
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');
|
|
},
|
|
onUpdateCoverUrl(newValue) {
|
|
this.lesson.coverImage = newValue;
|
|
},
|
|
onUpdateCoverId(newValue) {
|
|
this.lesson.coverImageId = newValue;
|
|
},
|
|
},
|
|
computed: {
|
|
title() {
|
|
return this.lesson && this.lesson.id ? 'Редактирование урока' : 'Создать урок';
|
|
}
|
|
},
|
|
components: {
|
|
BlockContent,
|
|
'lil-image': LilImage,
|
|
'vue-redactor': VueRedactor,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|