From b5abc3c3a506ab8f399bdd38ea1d512cf4e2bdc7 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 3 Oct 2018 10:30:48 +0200
Subject: [PATCH] Add submission list page

---
 client/src/components/StudentSubmission.vue   | 40 ++++++++++++
 .../components/modules/ModuleNavigation.vue   | 29 ++++++++-
 client/src/pages/module-base.vue              | 41 +++++++++++++
 client/src/pages/module.vue                   | 34 +----------
 client/src/pages/submissions.vue              | 61 +++++++++++++++++++
 client/src/router/index.js                    | 19 +++++-
 6 files changed, 190 insertions(+), 34 deletions(-)
 create mode 100644 client/src/components/StudentSubmission.vue
 create mode 100644 client/src/pages/module-base.vue
 create mode 100644 client/src/pages/submissions.vue

diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
new file mode 100644
index 00000000..92ac8acf
--- /dev/null
+++ b/client/src/components/StudentSubmission.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="student-submission">
+    <div class="student-submission__student-name">
+      {{submission.name}}
+    </div>
+    <div class="student-submission__entry">
+      {{submission.text}}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['submission']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .student-submission {
+    display: grid;
+    grid-template-columns: 170px 1fr;
+    grid-column-gap: 80px;
+    align-items: center;
+    border-bottom: 1px solid $color-grey;
+    padding: 15px 0;
+
+    &__student-name {
+      font-size: toRem(17px);
+      font-weight: 800;
+      font-family: $sans-serif-font-family;
+    }
+    &__entry {
+      font-size: toRem(14px);
+      font-family: $sans-serif-font-family;
+    }
+  }
+</style>
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index e63e27db..b27bed92 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -9,12 +9,39 @@
         <a href="#" class="module-navigation__anchor">1.2 Die drei Lernorte</a>
         <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
       </div>
-      <h3 class="module-navigation__heading">Ergebnisse: Modul 1</h3>
+      <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/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/submissions" class="module-navigation__anchor">Aufgaben von Geld</router-link>
+        <router-link to="/module/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/submissions" class="module-navigation__anchor">Welche Geldanlage ist sinnvoll?
+        </router-link>
+        
+      </div>
     </nav>
   </div>
 
 </template>
 
+<script>
+  import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
+
+  export default {
+    apollo: {
+      assignments: {
+        query: ASSIGNMENTS_QUERY
+      }
+    }
+  }
+</script>
+
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
diff --git a/client/src/pages/module-base.vue b/client/src/pages/module-base.vue
new file mode 100644
index 00000000..5ad13f6b
--- /dev/null
+++ b/client/src/pages/module-base.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="module-page">
+    <module-navigation></module-navigation>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
+
+  export default {
+    components: {
+      ModuleNavigation
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .module-page {
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+    justify-items: center;
+    grid-template-columns: 2fr 6fr 2fr;
+
+    /*
+     * For IE10+
+     */
+    -ms-grid-columns: 2fr 6fr 2fr;
+
+    & > :nth-child(1) {
+      -ms-grid-column: 1;
+      -ms-grid-column-align: center;
+    }
+    & > :nth-child(2) {
+      -ms-grid-column: 2;
+      -ms-grid-column-align: center;
+    }
+  }
+</style>
diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue
index 7ee4d9a1..f9d06e27 100644
--- a/client/src/pages/module.vue
+++ b/client/src/pages/module.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="module-page">
-    <module-navigation></module-navigation>
-    <module :module="module"></module>
-  </div>
+  <module :module="module"></module>
 </template>
 
 <script>
@@ -12,12 +9,10 @@
   import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
 
   import Module from '@/components/modules/Module.vue';
-  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
 
   export default {
     components: {
-      Module,
-      ModuleNavigation
+      Module
     },
 
     apollo: {
@@ -44,28 +39,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  .module-page {
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
-    }
-    justify-items: center;
-    grid-template-columns: 2fr 6fr 2fr;
-
-    /*
-     * For IE10+
-     */
-    -ms-grid-columns: 2fr 6fr 2fr;
-
-    & > :nth-child(1) {
-      -ms-grid-column: 1;
-      -ms-grid-column-align: center;
-    }
-    & > :nth-child(2) {
-      -ms-grid-column: 2;
-      -ms-grid-column-align: center;
-    }
-  }
-</style>
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
new file mode 100644
index 00000000..d2391ac1
--- /dev/null
+++ b/client/src/pages/submissions.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="submissions-page">
+    <h1 class="submissions-page__title">Auftrag 2 - Aufgabe Interview</h1>
+
+    <student-submission class="submissions-page__submission"
+                        v-for="(submission, index) in submissions"
+                        :key="index"
+                        :submission="submission"
+    >
+    </student-submission>
+  </div>
+
+</template>
+
+<script>
+  import StudentSubmission from '@/components/StudentSubmission';
+
+  export default {
+    components: {
+      StudentSubmission
+    },
+
+    data() {
+      return {
+        submissions: [
+          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
+          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
+          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
+          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
+          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
+          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
+          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
+          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
+          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
+          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
+          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
+          {name: 'Corinne Stalder', text: 'interview-LG.pdf'}
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .submissions-page {
+    /*grid-column: span 2;*/
+    width: 800px;
+    /*padding-left: 150px;*/
+
+    &__title {
+      font-size: toRem(35px);
+    }
+
+    &__submission:first-of-type {
+      border-top: 1px solid $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 9bf0a510..20d4b907 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -3,6 +3,7 @@ import Router from 'vue-router'
 // import index from '@/pages/index'
 import topic from '@/pages/topic'
 import book from '@/pages/book'
+import moduleBase from '@/pages/module-base'
 import module from '@/pages/module'
 import rooms from '@/pages/rooms'
 import room from '@/pages/room'
@@ -10,11 +11,27 @@ import newRoom from '@/pages/newRoom'
 import editRoom from '@/pages/editRoom'
 import article from '@/pages/article'
 import basicknowledge from '@/pages/basicknowledge'
+import submissions from '@/pages/submissions'
 import p404 from '@/pages/p404'
 
 const routes = [
   {path: '/', name: 'module', component: module, meta: {filter: true}},
-  {path: '/module', name: 'module', component: module, meta: {filter: true}},
+  {
+    path: '/module',
+    name: 'moduleBase',
+    component: moduleBase,
+    meta: {filter: true},
+    children: [
+      {
+        path: '',
+        name: 'module',
+        component: module
+      },
+      {path: 'submissions', name: 'submissions', component: submissions},
+
+    ]
+
+  },
   {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true}},
   {path: '/new-room/', name: 'new-room', component: newRoom},
   {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},