Vitaly Baev
8 years ago
parent
f897296374
commit
8d69cfa7de
17 changed files with 889 additions and 350 deletions
@ -0,0 +1,122 @@ |
||||
<template> |
||||
<div class="section"> |
||||
<div class="section__center center"> |
||||
<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> |
||||
@ -0,0 +1,121 @@ |
||||
<template> |
||||
<div class="kit__section"> |
||||
<div v-if="!isOpen" class="kit__add add"> |
||||
<button type="button" class="add__toggle" @click="isOpen = true"> |
||||
<span class="add__circle"> |
||||
<svg class="icon icon-add-plus"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-add-plus"></use> |
||||
</svg> |
||||
</span> |
||||
<span class="add__title">Добавить блок</span> |
||||
</button> |
||||
</div> |
||||
<div v-if="isOpen" class="kit__add add open"> |
||||
<button type="button" class="add__toggle" @click="isOpen = false"> |
||||
<span class="add__circle"> |
||||
<svg class="icon icon-add-plus"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-add-plus"></use> |
||||
</svg> |
||||
</span> |
||||
<span class="add__title">Добавить блок</span> |
||||
</button> |
||||
<div class="add__list"> |
||||
<button class="add__btn" type="button" @click="addBlockText"> |
||||
<svg class="icon icon-text"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-text"></use> |
||||
</svg> |
||||
</button> |
||||
<button class="add__btn" type="button" @click="addBlockImage"> |
||||
<svg class="icon icon-image"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-image"></use> |
||||
</svg> |
||||
</button> |
||||
<button type="button" class="add__btn" @click="addBlockImageText"> |
||||
<svg class="icon icon-image-text"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-image-text"></use> |
||||
</svg> |
||||
</button> |
||||
<button type="button" class="add__btn" @click="addBlockImages"> |
||||
<svg class="icon icon-images"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-images"></use> |
||||
</svg> |
||||
</button> |
||||
<button type="button" class="add__btn" @click="addBlockVideo"> |
||||
<svg class="icon icon-video-stroke"> |
||||
<use xlink:href="/static/img/sprite.svg#icon-video-stroke"></use> |
||||
</svg> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "block-add", |
||||
data() { |
||||
return { |
||||
isOpen: false |
||||
} |
||||
}, |
||||
methods: { |
||||
add(blockData) { |
||||
this.isOpen = false; |
||||
this.$emit('added', blockData) |
||||
}, |
||||
addBlockText() { |
||||
this.add({ |
||||
type: 'text', |
||||
data: { |
||||
title: 'тест заголовок', |
||||
text: 'текст', |
||||
} |
||||
}) |
||||
}, |
||||
addBlockImage() { |
||||
this.add({ |
||||
type: 'image', |
||||
data: { |
||||
title: 'тест картинка', |
||||
image_id: null, |
||||
image_url: null, |
||||
} |
||||
}) |
||||
}, |
||||
addBlockImageText() { |
||||
this.add({ |
||||
type: 'image-text', |
||||
data: { |
||||
title: 'тест картинка-текст', |
||||
text: 'текст какой-то', |
||||
image_id: null, |
||||
image_url: null, |
||||
} |
||||
}) |
||||
}, |
||||
addBlockImages() { |
||||
this.add({ |
||||
type: 'images', |
||||
data: { |
||||
title: 'тест заголовок картинок', |
||||
text: 'описание блока галереи', |
||||
images: [], |
||||
} |
||||
}) |
||||
}, |
||||
addBlockVideo() { |
||||
this.add({ |
||||
type: 'video', |
||||
data: { |
||||
title: 'тест видео', |
||||
video_url: 'http://vimeo.com/safmklsamfk', |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,5 @@ |
||||
export var lessonObject = { |
||||
title: '', |
||||
short_description: '', |
||||
course_id: 0 |
||||
}; |
||||
@ -1,5 +1,4 @@ |
||||
// done by arturmoroz.com |
||||
@import helpers/all |
||||
@import generated/sprite-svg |
||||
// @import lib/owl.carousel |
||||
@import common |
||||
|
||||
Loading…
Reference in new issue