Add dynamic components

client/src/components/Chapter.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="chapter">
     <h3>{{chapter.title}}</h3>
-    <content-block></content-block>
+    <content-block :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks">
-    <content-block></content-block>
+    </content-block>
-    <content-block></content-block>
 
   </div>
 </template>

client/src/components/ContentBlock.vue

@@ -1,40 +1,25 @@
 <template>
   <div class="content-block">
-    <h4>{{title}}</h4>
+    <h4>{{contentBlock.title}}</h4>
 
-    <component v-for="component in contents" :key="component.id" :is="component.type"
+    <component v-for="component in contentBlock.contents" :key="component.id" :is="component.type"
-               v-bind:data="component"></component>
+               v-bind="component"></component>
 
   </div>
 </template>
 
 <script>
   import TextBlock from '@/components/TextBlock.vue';
+  import Task from '@/components/Task.vue';
+  import ImageBlock from '@/components/ImageBlock.vue';
 
   export default {
-    components: {
+    props: ['contentBlock'],
-      TextBlock
-    },
 
-    data() {
+    components: {
-      return {
+      'text_block': TextBlock,
-        title: 'Auftrag 1',
+      Task,
-        contents: [
+      'image_block': ImageBlock
-          {
-            type: 'text-block',
-            id: 1,
-            content: `
-              <p>
-      Sie haben diesen Sommer Ihre Lehre begonnen. Was bedeutet dieser neue Abschnitt für Sie?
-    </p>
-    <p>
-      Halten Sie Ihre Erfahrungen im Bereich <a href alt>«Zusammenarbeit»</a>
-      fest und stellen Sie diese anschliessend der Klasse vor.
-    </p>
-`
-          }
-        ]
-      }
     }
   }
 </script>

client/src/components/ImageBlock.vue

@@ -0,0 +1,10 @@
+<template>
+    <img src="https://picsum.photos/400" alt="" class="image-block">
+</template>
+
+<style scoped lang="scss">
+  .image-block {
+    width: 100%;
+    max-width: 100%;
+  }
+</style>

client/src/components/Module.vue

@@ -10,7 +10,7 @@
     <h3>Lernziele</h3>
     <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
 
-    <chapter :chapter="chapter"></chapter>
+    <chapter :chapter="chapter" v-for="chapter in module.chapters" :key="chapter.id"></chapter>
     <h3>1.1 Lehrbeginn</h3>
     <h4>Das Interview</h4>
     <h4>Tipp</h4>

client/src/components/Task.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="task" v-html="value.text"></div>
+</template>
+
+<script>
+  export default {
+    props: ['value']
+  }
+</script>
+
+<style scoped lang="scss">
+  .task {
+    padding-left: 30px;
+  }
+</style>

client/src/components/TextBlock.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-html="data.content"></div>
+  <div v-html="value.text"></div>
 </template>
 
 <script>
   export default {
-    props: ['data']
+    props: ['value']
   }
 </script>

client/src/graphql/gql/moduleDetailsQuery.gql

@@ -28,6 +28,7 @@ query ModulesQuery($slug: String!) {
           edges {
             node {
               id
+              title
               contentBlocks {
                 edges {
                   node {

client/src/pages/module.vue

@@ -29,6 +29,12 @@
                   ...node,
                   objectives: mapNodes(node.objectiveSet, node => node)
                 };
+              }),
+              chapters: mapNodes(node.chapters, node => {
+                return {
+                  ...node,
+                  contentBlocks: mapNodes(node.contentBlocks, node => node)
+                }
               })
             };
           }

client/src/styles/_typography.scss

@@ -9,7 +9,7 @@ h1, h2, h3, h4, h5 {
   font-weight: 600;
 }
 
-p, a {
+p, a, li {
   font-family: $serif-font-family;
   font-weight: 300;
 }

client/src/styles/main.scss

@@ -12,7 +12,7 @@
 .container {
   margin: 0 auto;
   width: 100%;
-  max-width: 1440px;
+  //max-width: 1440px;
   display: grid;
   grid-template-rows: 72px auto 50px;
   grid-row-gap: 32px;