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

Update create content block page

This commit is contained in:
Ramon Wenger 2022-01-17 09:05:41 +01:00
parent bc0918876b
commit 196fd5da4a
2 changed files with 136 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/content-block-form/AddContentLink.vue
View File

@ -1,5 +1,7 @@
<template>
<a class="add-content-link"><plus-icon class="add-content-link__icon"/> <span class="add-content-link__text">Neuer Inhalt</span></a>
<a
class="add-content-link"
@click="$emit('click')"><plus-icon class="add-content-link__icon"/> <span class="add-content-link__text">Neuer Inhalt</span></a>
</template>
<script>

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

@ -1,7 +1,6 @@
<template>
<div class="create-content-block">
<div class="create-content-block__content">
<h1 class="heading-1 create-content-block__heading">Inhaltsblock erfassen</h1>
<toggle
@ -15,35 +14,68 @@
placeholder="z.B. Auftrag 3"
@input="val=$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>-->
<div
:key="content.id"
v-for="content in contents"/>
<div>
<add-content-link/>
</div>
<content-list :items="items">
:key="block.id"
v-for="(block, outer) in blocks">
<!-- <pre>{{ // block }}</pre>-->
<!-- <h3>begin {{ block.type }}</h3>-->
<content-list
:items="[block]"
v-if="block.type === 'content_list'" >
<template v-slot="{item, index}">
{{ item }}
<!-- <pre>{{ item }}</pre>-->
<content-element
:element="item"
@update="update(index, $event)"
:element="i"
:key="i.id"
v-for="(i, j) in item.items"
@update="update(j, $event, outer)"
@remove="remove(index)"
/>
<add-content-link @click="addBlock(outer, index)"/>
</template>
</content-list>
<p>hello</p>
<content-list
:items="items"
:starting-index="2"/>
<content-block-element-chooser-widget />
<content-element
:element="block"
v-else
@update="update(outer, $event)"
@remove="remove(outer)"/>
<add-content-link
class=""
@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>
</footer>
</div>
</template>
</div></template>
<script>
import Toggle from '@/components/ui/Toggle';
@ -53,7 +85,6 @@
import AddContentLink from '@/components/content-block-form/AddContentLink';
import ContentList from '@/components/content-blocks/ContentList';
import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
import test from '@/helpers/content-form/type';
import ContentElement from '@/components/content-block-form/ContentElement';
export default {
@ -65,34 +96,93 @@
InputWithLabel,
TextForm,
ContentFormSection,
Toggle
Toggle,
},
data: () => ({
val: '',
items: [{
id: 123,
}, {
id: 134
}],
contents: [
blocks: [
{
id: 1,
type: 'text_block'
type: 'content-block-element-chooser-widget',
},
{
id: 2,
type: 'content_list',
items: [
{
type: 'content-block-element-chooser-widget',
}
]
},
],
}),
mounted() { test(); },
methods: {
update(index, element) {
update(index, element, parent) {
if (parent === undefined) {
console.log('parent undefined');
this.blocks = [
...this.blocks.slice(0, index),
element,
...this.blocks.slice(index + 1)
];
} else {
console.log('parent yes');
const parentBlock = this.blocks[parent];
this.blocks = [
...this.blocks.slice(0, parent),
{
...parentBlock,
items: [
...parentBlock.items.slice(0, index),
element,
...parentBlock.items.slice(index + 1),
]
},
...this.blocks.slice(parent + 1)
];
}
console.log('updating', index, element);
this.items.splice(index, 1, element);
// this.items.splice(index, 1, element);
},
addBlock(outerIndex, innerIndex) {
console.log('add block', outerIndex, innerIndex);
// this.blocks.splice(outerIndex, 0, {});
if (innerIndex !== undefined) {
console.log('inner');
const block = this.blocks[outerIndex];
this.blocks = [
...this.blocks.slice(0, outerIndex),
{
...block,
items: [
...block.items.slice(0, innerIndex + 1),
{
id: -1,
type: 'content-block-element-chooser-widget',
},
...block.items.slice(innerIndex + 1)
]
},
...this.blocks.slice(outerIndex + 1)
];
} else {
console.log('outer');
this.blocks = [
...this.blocks.slice(0, outerIndex + 1),
{
id: -1,
type: 'content-block-element-chooser-widget',
},
...this.blocks.slice(outerIndex + 1)
];
}
},
remove(index) {
this.items.splice(index, 1);
}
}
},
},
};
</script>