Add submissions query to submissions page

client/src/components/StudentSubmission.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="student-submission">
     <div class="student-submission__student-name">
-      {{submission.name}}
+      {{name}}
     </div>
     <div class="student-submission__entry">
       {{submission.text}}
@@ -11,7 +11,14 @@
 
 <script>
   export default {
-    props: ['submission']
+    props: ['submission'],
+
+    computed: {
+      name() {
+        return this.submission && this.submission.student
+          ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
+      }
+    }
   }
 </script>
 

client/src/components/modules/ModuleNavigation.vue

@@ -2,7 +2,7 @@
   <div>
     <nav class="module-navigation">
       <h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3>
-      <div class="module-navigation__anchors">
+      <div class="module-navigation__anchors" v-if="onModulePage">
         <a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
         <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
 
@@ -16,7 +16,7 @@
       </router-link>
       <div class="module-navigation__anchors">
         <router-link
-          to="/module/geld/submissions"
+          :to="submissionsLink(assignment)"
           v-for="assignment in module.assignments"
           :key="assignment.id"
           class="module-navigation__anchor"
@@ -37,6 +37,12 @@
       module: moduleQuery
     },
 
+    computed: {
+      onModulePage() {
+        return this.$route.name === 'module';
+      }
+    },
+
     data() {
       return {
         module: {}
@@ -46,6 +52,9 @@
     methods: {
       chapterId(index) {
         return `#chapter-${index}`
+      },
+      submissionsLink(assignment) {
+        return `/module/${this.module.slug}/submissions/${assignment.id}`;
       }
     }
   }

client/src/graphql/gql/submissionsQuery.gql

@@ -0,0 +1,13 @@
+query Submissions($id: ID!) {
+  assignment(id: $id) {
+    submissions {
+      id
+      text
+      document
+      student {
+        firstName
+        lastName
+      }
+    }
+  }
+}

client/src/pages/submissions.vue

@@ -15,11 +15,28 @@
 <script>
   import StudentSubmission from '@/components/StudentSubmission';
 
+  import SUBMISSIONS_QUERY from '@/graphql/gql/submissionsQuery.gql';
+
   export default {
     components: {
       StudentSubmission
     },
 
+    apollo: {
+      submissions() {
+        return {
+          query: SUBMISSIONS_QUERY,
+          variables: {
+            id: this.$route.params.id
+          },
+          update(result) {
+            return result.assignment.submissions;
+          }
+        }
+      },
+
+    },
+
     data() {
       return {
         submissions: [

client/src/router/index.js

@@ -27,7 +27,7 @@ const routes = [
         meta: {filter: true}
       },
       {
-        path: 'submissions',
+        path: 'submissions/:id',
         name: 'submissions',
         component: submissions,
         meta: {filter: true}