Add content list block component

client/src/components/ContentBlock.vue

@@ -3,11 +3,12 @@
     <div class="content-block" :class="specialClass">
       <div class="content-block__actions">
         <visibility-action
+          v-if="!contentBlock.indent"
           :block="contentBlock"></visibility-action>
-        <a @click="editContentBlock()" v-if="contentBlock.mine" class="content-block__action-button">
+        <a @click="editContentBlock()" v-if="canEditContentBlock" class="content-block__action-button">
           <pen-icon class="content-block__action-icon action-icon"></pen-icon>
         </a>
-        <a @click="deleteContentBlock(contentBlock.id)" v-if="contentBlock.mine" class="content-block__action-button">
+        <a @click="deleteContentBlock(contentBlock.id)" v-if="canEditContentBlock" class="content-block__action-button">
           <trash-icon class="content-block__action-icon action-icon"></trash-icon>
         </a>
       </div>
@@ -23,7 +24,7 @@
 
     </div>
 
-    <add-content-block-button :after="contentBlock.id"></add-content-block-button>
+    <add-content-block-button :after="contentBlock.id" v-if="!contentBlock.indent"></add-content-block-button>
 
   </div>
 
@@ -41,6 +42,7 @@
   import InfogramBlock from '@/components/content-blocks/InfogramBlock';
   import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
   import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
+  import ContentListBlock from '@/components/content-blocks/ContentListBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
@@ -59,6 +61,7 @@
 
   export default {
     props: ['contentBlock', 'parent'],
+    name: 'content-block',
 
     components: {
       'text_block': TextBlock,
@@ -72,6 +75,7 @@
       'infogram_block': InfogramBlock,
       'genially_block': GeniallyBlock,
       'subtitle': SubtitleBlock,
+      'content_list': ContentListBlock,
       Solution,
       Assignment,
       Task,
@@ -93,6 +97,9 @@
         }
 
         return `Instrument - ${instruments[contentType]}`
+      },
+      canEditContentBlock() {
+        return this.contentBlock.mine && !this.contentBlock.indent;
       }
     },
 

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="content-list-block__container">
+    <div class="content-list-wrapper">
+      <ol class="content-list">
+        <li class="content-list__item contentlist-item" :key="contentBlock.id" v-for="contentBlock in contentBlocks">
+          <content-block :contentBlock="contentBlock"></content-block>
+        </li>
+      </ol>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  // import ContentBlock from '@/components/ContentBlock';
+
+  export default {
+    props: ['value', 'parent'],
+    name: 'content-block-list',
+
+    components: {
+      // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+      ContentBlock: () => import('@/components/ContentBlock')
+    },
+
+    computed: {
+      contentBlocks() {
+        let some = this.value.map(contentBlock => {
+          console.log(Object.assign({}, contentBlock, {
+            contentBlock: {
+              contents: {...contentBlock.value}
+            }
+          }))
+          return Object.assign({}, contentBlock, {
+            contents: {...contentBlock.value},
+            indent: true
+          })
+        })
+        console.warn(some);
+        return some;
+      }
+    },
+    mounted () {
+      console.log('list', this.value)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .content-list-wrapper {
+    .content-list {
+      /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
+      counter-reset: list;
+
+      &__item {
+        list-style: none;
+        position: relative;
+        padding: 0 2*15px;
+
+        &::before {
+          position: absolute;
+          font-weight: 600;
+          left: 0;
+          color: $color-brand;
+          content: counter(list, lower-alpha) ") ";
+          counter-increment: list;
+        }
+      }
+    }
+  }
+
+</style>