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

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

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