Remove content list in wagtail, add content list in frontend

client/src/components/ContentBlock.vue

@@ -16,7 +16,7 @@
       <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
       <h4 class="content-block__title" v-if="!contentBlock.indent">{{contentBlock.title}}</h4>
 
-      <component v-for="component in contentBlock.contents"
+      <component v-for="component in contentBlocksWithContentLists.contents"
                  :key="component.id"
                  :is="component.type"
                  v-bind="component">
@@ -100,6 +100,44 @@
       },
       canEditContentBlock() {
         return this.contentBlock.mine && !this.contentBlock.indent;
+      },
+      contentBlocksWithContentLists() {
+        /* collects all conent_list_items in content_lists
+        {
+          text_block,
+          content_list_item,
+          contentlist_item,
+          text_block
+        } becomes
+        {
+          text_block,
+          content_list: [content_list_item, content_list_item],
+          text_block
+        }
+        */
+        let contentList = [];
+        let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
+          // collect content_list_items
+          if (content.type === 'content_list_item') {
+            contentList = [...contentList, content]
+            if (index === this.contentBlock.contents.length - 1) {
+              return [...newContents, this.createContentList(contentList)];
+            }
+            return newContents
+          } else {
+            // handle all other items and reset current content_list if necessary
+            if (contentList.length !== 0) {
+              newContents = [...newContents, this.createContentList(contentList), content];
+              contentList = [];
+              return newContents;
+            } else {
+              return [...newContents, content]
+            }
+          }
+        }, [])
+        return Object.assign({}, this.contentBlock, {
+          contents: newContent
+        });
       }
     },
 
@@ -132,9 +170,15 @@
             }
           }
         });
-      }
+      },
+      createContentList(contentList) {
+        return {
+          type: 'content_list',
+          contents: contentList,
+          id: contentList[0].id
+        };
+      },
     },
-
     data() {
       return {
         showVisibility: false

client/src/components/content-blocks/ContentListBlock.vue

@@ -15,7 +15,7 @@
   // import ContentBlock from '@/components/ContentBlock';
 
   export default {
-    props: ['value', 'parent'],
+    props: ['contents', 'parent'],
     name: 'content-block-list',
 
     components: {
@@ -25,10 +25,11 @@
 
     computed: {
       contentBlocks() {
-        return this.value.map(contentBlock => {
+        const indent = this.contents.length > 1;
+        return this.contents.map(contentBlock => {
           return Object.assign({}, contentBlock, {
-            contents: {...contentBlock.value},
-            indent: true
+            contents: [...contentBlock.value],
+            indent
           })
         });
       }

server/books/models/contentblock.py

@@ -51,10 +51,7 @@ class ContentBlock(StrictHierarchyPage):
     ]
 
     content_list_item = StreamBlock(content_blocks)
-    content_list = StreamBlock(
-        [('content_list_item', StreamBlock(content_blocks))]
-    )
-    contents = StreamField(content_blocks + [('content_list', content_list)], null=True, blank=True)
+    contents = StreamField(content_blocks + [('content_list_item', content_list_item)], null=True, blank=True)
 
     type = models.CharField(
         max_length=100,