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

Add option to convert new element to nested list

This commit is contained in:
Ramon Wenger 2022-01-19 11:29:21 +01:00
parent 50cb811f05
commit 2b82c78cc2
2 changed files with 73 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/content-block-form/ContentElement.vue
View File

@ -99,7 +99,8 @@
changeAssignmentAssignment(value) {
this._updateProperty(value, 'assignment');
},
changeType(type, value) {
changeType({type, convertToList}, value) {
console.log(type, value, convertToList);
let el = {
type: type,
value: Object.assign({}, value),
@ -148,6 +149,14 @@
break;
}
if (convertToList) {
console.log(el);
el = {
type: 'content_list_item',
contents: [el]
};
console.log(el);
}
this.update(el);
},
update(element) {

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

@ -1,18 +1,23 @@
<template>
<div class="create-content-block content-list__parent">
<div class="create-content-block__content">
<h1 class="heading-1 create-content-block__heading">Inhaltsblock erfassen</h1>
<h1 class="heading-1 create-content-block__heading">
Inhaltsblock erfassen
</h1>
<toggle
:bordered="false"
:checked="true"
label="Inhaltsblock als Auftrag formatieren"/>
class="create-content-block__task-toggle"
label="Inhaltsblock als Auftrag formatieren"
/>
<content-form-section title="Titel">
<input-with-label
:value="val"
:value="title"
label="Name"
placeholder="z.B. Auftrag 3"
@input="val=$event"/>
@input="title=$event"
/>
</content-form-section>
<!-- <div-->
<!-- :key="content.id"-->
@ -24,34 +29,56 @@
<!-- <pre>{{ blocks }}</pre>-->
<!-- <p>end blocks</p>-->
<div
v-for="(block, outer) in blocks"
: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}">
<!-- <pre>{{ item }}</pre>-->
<ol
class="content-list__item"
v-if="block.type === 'content_list_item'"
>
<li
v-for="(content, index) in block.contents"
:key="content.id"
>
<content-form-section title="Text">
<content-element
:element="i"
:key="i.id"
v-for="(i, j) in item.items"
@update="update(j, $event, outer)"
@remove="remove(index)"
:element="content"
@update="update(index, $event, outer)"
/>
</content-form-section>
<add-content-link @click="addBlock(outer, index)"/>
</template>
</content-list>
<add-content-link @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"
v-else
@update="update(outer, $event)"
@remove="remove(outer)"/>
@remove="remove(outer)"
/>
<add-content-link
class=""
@click="addBlock(outer)"/>
@click="addBlock(outer)"
/>
<!-- <h3>end {{ block.type }}</h3>-->
</div>
<!-- <content-list :items="items">-->
@ -132,10 +159,10 @@
...this.blocks.slice(0, parent),
{
...parentBlock,
items: [
...parentBlock.items.slice(0, index),
contents: [
...parentBlock.contents.slice(0, index),
element,
...parentBlock.items.slice(index + 1),
...parentBlock.contents.slice(index + 1),
]
},
...this.blocks.slice(parent + 1)
@ -154,13 +181,13 @@
...this.blocks.slice(0, outerIndex),
{
...block,
items: [
...block.items.slice(0, innerIndex + 1),
contents: [
...block.contents.slice(0, innerIndex + 1),
{
id: -1,
type: 'content-block-element-chooser-widget',
},
...block.items.slice(innerIndex + 1)
...block.contents.slice(innerIndex + 1)
]
},
...this.blocks.slice(outerIndex + 1)
@ -172,6 +199,7 @@
{
id: -1,
type: 'content-block-element-chooser-widget',
includeListOption: true
},
...this.blocks.slice(outerIndex + 1)
];
@ -181,7 +209,7 @@
this.items.splice(index, 1);
},
},
};
});
</script>
<style scoped lang="scss">
@ -201,6 +229,10 @@
@include heading-1;
}
&__task-toggle {
margin-bottom: $large-spacing;
}
&__content {
grid-area: content;
overflow-x: visible;