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

Enable removal of inner blocks

This commit is contained in:
Ramon Wenger 2022-01-20 16:27:02 +01:00
parent dfb1a3ac5a
commit 7eab58ab88
1 changed files with 58 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
client/src/pages/createContentBlock.vue
View File

@ -20,84 +20,51 @@
@input="title=$event"
/>
</content-form-section>
<!-- <div-->
<!-- :key="content.id"-->
<!-- v-for="content in contents"/>-->
<!-- <div>-->
<!-- <add-content-link @click="addBlock"/>-->
<!-- </div>-->
<!-- <p>blocks</p>-->
<!-- <pre>{{ blocks }}</pre>-->
<!-- <p>end blocks</p>-->
<add-content-link
class="create-content-block__segment"
@click="addBlock(0)"
/>
<div
class="content-list content-list--creator create-content-block__segment"
v-for="(block, outer) in blocks"
:key="block.id"
>
<!-- <pre>{{ // block }}</pre>-->
<!-- <h3>begin {{ block.type }}</h3>-->
<ol
class="content-list__item"
class="content-list__item create-content-block__segment"
v-if="block.type === 'content_list_item'"
>
<li
class="create-content-block__segment"
v-for="(content, index) in block.contents"
:key="content.id"
>
<content-form-section title="Text">
<content-element
:element="content"
@update="update(index, $event, outer)"
/>
</content-form-section>
<content-element
:element="content"
class="create-content-block__segment"
@update="update(index, $event, outer)"
@remove="remove(outer, index)"
/>
<add-content-link @click="addBlock(outer, index)" />
<add-content-link
class="create-content-block__add-button"
@click="addBlock(outer, index)"
/>
</li>
</ol>
<!-- <content-list-->
<!-- :items="[block]"-->
<!-- v-slot="{item, index}"-->
<!-- &lt;!&ndash;-->
<!-- <pre>{{ item }}</pre>&ndash;&gt;-->
<!-- <template>-->
<!-- <content-element-->
<!-- :element="innerItem"-->
<!-- :key="innerItem.id"-->
<!-- v-for="(innerItem, innerIndex) in item.items"-->
<!-- @update="update(innerIndex, $event, outer)"-->
<!-- @remove="remove(index)"-->
<!-- />-->
<!-- <add-content-link @click="addBlock(outer, index)"/>-->
<!-- </template>-->
<!-- </content-list>-->
<content-element
:element="block"
class="create-content-block__segment"
v-else
@update="update(outer, $event)"
@remove="remove(outer)"
/>
<add-content-link
class=""
class="create-content-block__segment"
@click="addBlock(outer)"
/>
<!-- <h3>end {{ block.type }}</h3>-->
</div>
<!-- <content-list :items="items">-->
<!-- <template v-slot="{item, index}">-->
<!-- {{ item }}-->
<!-- <content-element-->
<!-- :element="item"-->
<!-- @update="update(index, $event)"-->
<!-- @remove="remove(index)"-->
<!-- />-->
<!-- </template>-->
<!-- </content-list>-->
<!-- <content-list-->
<!-- :items="items"-->
<!-- :starting-inde="3">-->
<!-- <content-block-element-chooser-widget/>-->
<!-- </content-list>-->
<!-- </div>-->
<footer class="create-content-block__footer">
<a class="button button--primary">Speichern</a>
<a class="button">Abbrechen</a>
@ -107,13 +74,14 @@
</template>
<script>
import Vue from 'vue';
import Toggle from '@/components/ui/Toggle';
import ContentFormSection from '@/components/content-block-form/ContentFormSection';
import InputWithLabel from '@/components/ui/InputWithLabel';
import AddContentLink from '@/components/content-block-form/AddContentLink';
import ContentElement from '@/components/content-block-form/ContentElement';
export default {
export default Vue.extend({
components: {
ContentElement,
AddContentLink,
@ -125,11 +93,24 @@
data: () => ({
title: '',
blocks: [
{
id: 23,
type: 'content_list_item',
contents: [
{
id: 2,
}
]
}
],
}),
mounted() {
// this.addBlock(0);
},
methods: {
update(index, element, parent) {
update(index, element, parent) {
console.log(index, element, parent);
if (parent === undefined) {
console.log('parent undefined');
this.blocks = [
@ -154,7 +135,7 @@
];
}
console.log('updating', index, element);
// this.items.splice(index, 1, element);
// this.blocks.splice(index, 1, element);
},
addBlock(outerIndex, innerIndex) {
console.log('add block', outerIndex, innerIndex);
@ -190,8 +171,26 @@
];
}
},
remove(index) {
this.items.splice(index, 1);
remove(outer, inner) {
if (inner === undefined) {
this.blocks = [
...this.blocks.slice(0, outer),
...this.blocks.slice(outer + 1)
];
} else {
this.blocks = [
...this.blocks.slice(0, outer),
{
...this.blocks[outer],
contents: [
...this.blocks[outer].contents.slice(0, inner),
...this.blocks[outer].contents.slice(inner+1),
]
},
...this.blocks.slice(outer + 1)
];
}
},
},
});