Update create content block page

client/src/components/content-block-form/AddContentLink.vue

@@ -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>

client/src/pages/createContentBlock.vue

@@ -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"
+        :key="block.id"
-        v-for="content in contents"/>
+        v-for="(block, outer) in blocks">
-      <div>
+        <!--        <pre>{{ // block }}</pre>-->
-        <add-content-link/>
+        <!--        <h3>begin {{ block.type }}</h3>-->
-      </div>
+        <content-list
-
+          :items="[block]"
-      <content-list :items="items">
+          v-if="block.type === 'content_list'" >
           <template v-slot="{item, index}">
-          {{ item }}
+            <!--            <pre>{{ item }}</pre>-->
             <content-element
-            :element="item"
+              :element="i"
-            @update="update(index, $event)"
+              :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-element
-      <content-list
+          :element="block"
-        :items="items"
+          v-else
-        :starting-index="2"/>
+          @update="update(outer, $event)"
-      <content-block-element-chooser-widget />
+          @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: [{
+      blocks: [
-        id: 123,
-      }, {
-        id: 134
-      }],
-      contents: [
         {
           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>