remotes/origin/hotfix/LIL-691
gzbender
7 years ago
parent
85e08aa8a4
commit
490987e210
14 changed files with 162 additions and 511 deletions
@ -0,0 +1,87 @@ |
||||
<template> |
||||
<div> |
||||
<vue-draggable :list="content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }"> |
||||
<div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid"> |
||||
<block-text v-if="block.type === 'text'" |
||||
:index="index" |
||||
:title.sync="block.title" |
||||
:text.sync="block.text" |
||||
v-on:remove="onBlockRemoved"/> |
||||
<block-image-text v-if="block.type === 'image-text'" |
||||
:index="index" |
||||
:title.sync="block.title" |
||||
:text.sync="block.text" |
||||
:image-id.sync="block.img.id" |
||||
:image-url.sync="block.img.image_thumbnail" |
||||
v-on:remove="onBlockRemoved" |
||||
:access-token="$root.store.accessToken"/> |
||||
<block-image v-if="block.type === 'image'" |
||||
:index="index" |
||||
:title.sync="block.title" |
||||
:image-id.sync="block.img.id" |
||||
:image-url.sync="block.img.image_thumbnail" |
||||
v-on:remove="onBlockRemoved" |
||||
:access-token="$root.store.accessToken"/> |
||||
<block-images v-if="block.type === 'images'" |
||||
:index="index" |
||||
:title.sync="block.title" |
||||
:text.sync="block.text" |
||||
:images.sync="block.gallery_images" |
||||
v-on:remove="onBlockRemoved" |
||||
:access-token="$root.store.accessToken"/> |
||||
<block-video v-if="block.type === 'video'" |
||||
:index="index" |
||||
:title.sync="block.title" |
||||
v-on:remove="onBlockRemoved" |
||||
:video-url.sync="block.video_url"/> |
||||
</div> |
||||
</vue-draggable> |
||||
|
||||
<block-add v-on:added="onBlockAdded"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {api} from "../../js/modules/api"; |
||||
import Draggable from 'vuedraggable'; |
||||
import BlockText from './BlockText' |
||||
import BlockImage from './BlockImage' |
||||
import BlockImages from './BlockImages' |
||||
import BlockImageText from './BlockImageText' |
||||
import BlockVideo from './BlockVideo' |
||||
import BlockAdd from "./BlockAdd" |
||||
|
||||
export default { |
||||
name: 'block-content', |
||||
props: ['content'], |
||||
methods: { |
||||
onBlockRemoved(blockIndex) { |
||||
const content = this.content; |
||||
const blockToRemove = this.content[blockIndex]; |
||||
// Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД |
||||
if (blockToRemove.data.id) { |
||||
api.removeContentBlock(blockToRemove, this.$root.store.accessToken).then(response => { |
||||
// Удаляем блок из Vue |
||||
content.splice(blockIndex, 1); |
||||
this.$emit('update:content', content); |
||||
}); |
||||
} |
||||
}, |
||||
onBlockAdded(blockData) { |
||||
const content = this.content; |
||||
content.push(blockData); |
||||
this.$emit('update:content', content); |
||||
}, |
||||
}, |
||||
|
||||
components: { |
||||
BlockAdd, |
||||
'block-text': BlockText, |
||||
'block-image': BlockImage, |
||||
'block-image-text': BlockImageText, |
||||
'block-images': BlockImages, |
||||
'block-video': BlockVideo, |
||||
'vue-draggable': Draggable, |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue