Add dynamic slug to module route

client/src/components/modules/ModuleNavigation.vue

@@ -12,16 +12,16 @@
       <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: Modul 1
       </router-link>
       <div class="module-navigation__anchors">
-        <router-link to="/module/submissions" class="module-navigation__anchor">Tauschvorgänge</router-link>
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Tauschvorgänge</router-link>
-        <router-link to="/module/submissions" class="module-navigation__anchor">Schwierigkeiten von Tauschvorgängen
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Schwierigkeiten von Tauschvorgängen
         </router-link>
-        <router-link to="/module/submissions" class="module-navigation__anchor">Vorteile von Geld</router-link>
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Vorteile von Geld</router-link>
-        <router-link to="/module/submissions" class="module-navigation__anchor">Aufgaben von Geld</router-link>
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Aufgaben von Geld</router-link>
-        <router-link to="/module/submissions" class="module-navigation__anchor">Notizen zum Video «Funktionen der
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Notizen zum Video «Funktionen der
           Bank»
         </router-link>
-        <router-link to="/module/submissions" class="module-navigation__anchor">Anlageberatung</router-link>
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Anlageberatung</router-link>
-        <router-link to="/module/submissions" class="module-navigation__anchor">Welche Geldanlage ist sinnvoll?
+        <router-link to="/module/geld/submissions" class="module-navigation__anchor">Welche Geldanlage ist sinnvoll?
         </router-link>
       </div>
     </nav>

client/src/components/modules/ModuleTeaser.vue

@@ -1,17 +1,28 @@
 <template>
-  <router-link to="/module" tag="div" class="module-teaser">
+  <router-link :to="moduleLink" tag="div" class="module-teaser">
     <img :src="'https://picsum.photos/300/150?random='+id" alt="" class="module-teaser__image">
     <div class="module-teaser__body">
       <h3 class="module-teaser__meta-title">{{metaTitle}}</h3>
       <h3 class="module-teaser__title">{{title}}</h3>
-      <p class="module-teaser__description">{{description}}</p>
+      <p class="module-teaser__description">{{teaser}}</p>
     </div>
   </router-link>
 </template>
 
 <script>
   export default {
-    props: ['metaTitle', 'title', 'description', 'id']
+    props: ['metaTitle', 'title', 'teaser', 'id', 'slug'],
+
+    computed: {
+      moduleLink() {
+        return {
+          name: 'module',
+          params: {
+            slug: this.slug
+          }
+        }
+      }
+    }
   }
 </script>
 

client/src/graphql/gql/allModules.gql

@@ -4,6 +4,8 @@ query ModulesQuery {
       node {
         id
         title
+        metaTitle
+        teaser
         slug
       }
     }

client/src/pages/module.vue

@@ -16,14 +16,16 @@
     },
 
     apollo: {
-      module: {
+      module() {
-        query: MODULE_DETAILS_QUERY,
+        return {
-        variables: {
+          query: MODULE_DETAILS_QUERY,
-          slug: store.state.moduleSlug
+          variables: {
-        },
+            slug: this.$route.params.slug
-        update(data) {
+          },
-          const cleanedData = this.$getRidOfEdges(data);
+          update(data) {
-          return cleanedData.module || {};
+            const cleanedData = this.$getRidOfEdges(data);
+            return cleanedData.module || {};
+          }
         }
       },
       assignments: {

client/src/pages/topic.vue

@@ -15,12 +15,22 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
+  import MODULES_QUERY from '@/graphql/gql/allModules.gql';
 
   export default {
     components: {
       ModuleTeaser
     },
 
+    apollo: {
+      modules: {
+        query: MODULES_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).modules || {};
+        }
+      }
+    },
+
     data() {
       return {
         modules: [

client/src/router/index.js

@@ -15,9 +15,9 @@ import submissions from '@/pages/submissions'
 import p404 from '@/pages/p404'
 
 const routes = [
-  {path: '/', redirect: '/module'},
+  {path: '/', redirect: '/book/topic'},
   {
-    path: '/module',
+    path: '/module/:slug',
     name: 'moduleBase',
     component: moduleBase,
     children: [