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 |
// done by arturmoroz.com |
||||||
@import helpers/all |
@import helpers/all |
||||||
@import generated/sprite-svg |
@import generated/sprite-svg |
||||||
// @import lib/owl.carousel |
|
||||||
@import common |
@import common |
||||||
|
|||||||
Loading…
Reference in new issue