ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new element and change type at correct position

This commit is contained in:
Ramon Wenger 2018-09-06 14:27:33 +02:00
parent c07ec49d14
commit 596364b6a4
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/AddContentElement.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="add-content-element" v-on:click="$emit('add-element')"> <div class="add-content-element" v-on:click="$emit('add-element', index)">
<add-icon class="add-content-element__icon"></add-icon> <add-icon class="add-content-element__icon"></add-icon>
</div> </div>
</template> </template>
@ -8,6 +8,8 @@
import AddIcon from '@/components/icons/AddIcon'; import AddIcon from '@/components/icons/AddIcon';
export default { export default {
props: ['index'],
components: { components: {
AddIcon AddIcon
} }

17
client/src/components/NewContentBlockWizard.vue
View File

@ -1,18 +1,21 @@
<template> <template>
<modal> <modal>
<content-block-title-input slot="header"></content-block-title-input> <content-block-title-input slot="header"></content-block-title-input>
<div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element"> <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
<component :is="type(element)" <component :is="type(element)"
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}" :element="element" :index="index" :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
v-on:change-type="changeType" :element="element" :index="index"
v-on:change-type="changeType"
></component> ></component>
<a class="new-content-block-wizard__remove" v-on:click="removeElement(index)"> <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
<trash-icon v-if="type(element) !== 'content-block-chooser-widget'" <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
class="new-content-block-wizard__trash-icon"></trash-icon> class="new-content-block-wizard__trash-icon"></trash-icon>
</a> </a>
<add-content-element class="new-content-block-wizard__add" v-on:add-element="addElement"></add-content-element> <add-content-element class="new-content-block-wizard__add"
v-on:add-element="addElement"
:index="index"
></add-content-element>
</div> </div>
</modal> </modal>
</template> </template>
@ -46,10 +49,8 @@
removeElement(index) { removeElement(index) {
this.elements.splice(index, 1); this.elements.splice(index, 1);
}, },
addElement() { addElement(index) {
this.elements.push({ this.elements.splice(index + 1, 0, {})
id: 5
})
}, },
changeType(index) { changeType(index) {
this.elements.splice(index, 1, {type: 'link'}); this.elements.splice(index, 1, {type: 'link'});