From 2b82c78cc2511caad043a8cf889ab5eb58dd0838 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 19 Jan 2022 11:29:21 +0100
Subject: [PATCH] Add option to convert new element to nested list

---
 .../content-block-form/ContentElement.vue     | 11 ++-
 client/src/pages/createContentBlock.vue       | 94 +++++++++++++------
 2 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index e2607729..3217a916 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -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) {
diff --git a/client/src/pages/createContentBlock.vue b/client/src/pages/createContentBlock.vue
index 74354f35..b6139b22 100644
--- a/client/src/pages/createContentBlock.vue
+++ b/client/src/pages/createContentBlock.vue
@@ -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,35 +29,57 @@
       <!--      <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>-->
-            <content-element
-              :element="i"
-              :key="i.id"
-              v-for="(i, j) in item.items"
-              @update="update(j, $event, outer)"
-              @remove="remove(index)"
-            />
+        <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="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)"/>
-          <!--        <h3>end {{ block.type }}</h3>-->
+          @click="addBlock(outer)"
+        />
+        <!--        <h3>end {{ block.type }}</h3>-->
       </div>
       <!--      <content-list :items="items">-->
       <!--        <template v-slot="{item, index}">-->
@@ -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;