From fc1b0519c4ad74f4338302f8e5985e84e21bb4af Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 14 Aug 2018 15:10:37 +0200
Subject: [PATCH] Parametrize module component

---
 client/src/App.vue               |   2 +-
 client/src/components/Module.vue |  70 ++++++++++++++
 client/src/pages/module.vue      | 155 +++++++++++--------------------
 3 files changed, 126 insertions(+), 101 deletions(-)
 create mode 100644 client/src/components/Module.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 45e33b47..8e7d66e8 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <header class="header">
-      <router-link to="/" class="header__logo">skillBox</router-link>
+      <router-link to="/" class="header__logo">skillBOX</router-link>
     </header>
     <router-view></router-view>
     <footer>Footer</footer>
diff --git a/client/src/components/Module.vue b/client/src/components/Module.vue
new file mode 100644
index 00000000..12cac3a6
--- /dev/null
+++ b/client/src/components/Module.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="module">
+    <h2 class="module__meta-title">{{module.metaTitle}}</h2>
+    <h1 class="module__title">{{module.title}}</h1>
+    <img src="https://picsum.photos/640/320" alt="" class="module__hero">
+    <div class="module__intro" v-html="module.intro">
+
+    </div>
+
+    <h3>Lernziele</h3>
+    <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
+
+    <h3>1.1 Lehrbeginn</h3>
+    <h4>Auftrag 1</h4>
+    <h4>Das Interview</h4>
+    <h4>Tipp</h4>
+    <h3>1.2  Die drei Lernorte</h3>
+    <h4>Unser Berufsbildungssystem</h4>
+    <h5>Die Berufsfachschule</h5>
+
+  </div>
+</template>
+
+<script>
+  import ObjectiveGroup from '@/components/ObjectiveGroup.vue';
+
+  export default {
+    components: {
+      ObjectiveGroup
+    },
+
+    props: ['module']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .module {
+    display: flex;
+    justify-self: center;
+    width: 640px;
+    flex-direction: column;
+    padding: 0 15px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    &__hero {
+      margin-bottom: 35px;
+      border-radius: 12px;
+    }
+
+    &__meta-title {
+      font-size: 2.6rem;
+      font-weight: 300;
+      font-family: $serif-font-family;
+    }
+
+    &__intro {
+      font-size: 1.5625rem;
+      line-height: 1.5;
+      margin-bottom: 1em;
+
+      > /deep/ p {
+        margin-bottom: 1.5em;
+      }
+    }
+  }
+</style>
diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue
index bb2fdc4c..839598ce 100644
--- a/client/src/pages/module.vue
+++ b/client/src/pages/module.vue
@@ -1,110 +1,65 @@
 <template>
-  <div class="module">
-    <h2 class="module__meta-title">Modul 1</h2>
-    <h1 class="module__title">Mein neues Umfeld</h1>
-    <img src="https://picsum.photos/640/320" alt="" class="module__hero">
-    <div class="module__intro">
-      <p>
+  <module v-bind:module="module"></module>
+</template>
+
+<script>
+  import Module from '@/components/Module.vue';
+
+  export default {
+    components: {
+      Module
+    },
+
+    data: () => {
+      return {
+        module: {
+          title: 'Mein neues Umfeld',
+          metaTitle: 'Modul 1',
+          intro: `
+          <p>
         Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
       </p>
       <p>
         Wie erging es Ihnen am ersten Arbeits- und Schultag?
       </p>
-    </div>
-
-    <h3>Lernziele</h3>
-    <objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
-
-    <h3>1.1 Lehrbeginn</h3>
-    <h4>Auftrag 1</h4>
-    <h4>Das Interview</h4>
-    <h4>Tipp</h4>
-    <h3>1.2  Die drei Lernorte</h3>
-    <h4>Unser Berufsbildungssystem</h4>
-    <h5>Die Berufsfachschule</h5>
-
-  </div>
-</template>
-
-<script>
-  import ObjectiveGroup from '@/components/ObjectiveGroup.vue';
-
-  export default {
-    components: {
-      ObjectiveGroup
-    },
-
-    data: () => {
-      return {
-        objectiveGroups: [
-          {
-            id: 1,
-            title: 'Gesellschaft',
-            objectives: [
-              {
-                id: 1,
-                text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
-              },
-              {id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
-              {
-                id: 3,
-                text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
-                'allgemeinbildenden Unterrichts ABU beschreiben.'
-              },
-              {id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
-            ]
-          }, {
-            id: 2,
-            title: 'Sprache und Kommunikation',
-            objectives: [
-              {
-                id: 1,
-                text: 'Ich kenne verschiedene Arten von Fragen.'
-              },
-              {id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
-              {
-                id: 3,
-                text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
-              },
-              {id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
-              {id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
-            ]
-          }
-        ]
+`,
+          objectiveGroups: [
+            {
+              id: 1,
+              title: 'Gesellschaft',
+              objectives: [
+                {
+                  id: 1,
+                  text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
+                },
+                {id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
+                {
+                  id: 3,
+                  text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
+                  'allgemeinbildenden Unterrichts ABU beschreiben.'
+                },
+                {id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
+              ]
+            }, {
+              id: 2,
+              title: 'Sprache und Kommunikation',
+              objectives: [
+                {
+                  id: 1,
+                  text: 'Ich kenne verschiedene Arten von Fragen.'
+                },
+                {id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
+                {
+                  id: 3,
+                  text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
+                },
+                {id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
+                {id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
+              ]
+            }
+          ]
+        }
       }
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .module {
-    display: flex;
-    justify-self: center;
-    width: 640px;
-    flex-direction: column;
-
-    &__hero {
-      margin-bottom: 35px;
-      border-radius: 12px;
-    }
-
-    &__meta-title {
-      font-size: 2.6rem;
-      font-weight: 300;
-      font-family: $serif-font-family;
-    }
-
-    &__intro {
-      font-size: 1.5625rem;
-      line-height: 1.5;
-      margin-bottom: 1em;
-
-      &> p {
-       margin-bottom: 1.5em;
-      }
-    }
-  }
-
-</style>