From 7eab58ab889bca1ed94baf952f128e23de6a939e Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 20 Jan 2022 16:27:02 +0100
Subject: [PATCH] Enable removal of inner blocks

---
 client/src/pages/createContentBlock.vue | 117 ++++++++++++------------
 1 file changed, 58 insertions(+), 59 deletions(-)

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