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