From 3be07c471cef84222e128051d20214c722a8a7bc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 8 Oct 2018 15:05:59 +0200
Subject: [PATCH 1/5] Add submissions query to submissions page

---
 client/src/components/StudentSubmission.vue     | 11 +++++++++--
 .../src/components/modules/ModuleNavigation.vue | 13 +++++++++++--
 client/src/graphql/gql/submissionsQuery.gql     | 13 +++++++++++++
 client/src/pages/submissions.vue                | 17 +++++++++++++++++
 client/src/router/index.js                      |  2 +-
 5 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 client/src/graphql/gql/submissionsQuery.gql

diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
index 92ac8acf..f4cd086f 100644
--- a/client/src/components/StudentSubmission.vue
+++ b/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>
 
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index 03387bfa..a028f20d 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/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}`;
       }
     }
   }
diff --git a/client/src/graphql/gql/submissionsQuery.gql b/client/src/graphql/gql/submissionsQuery.gql
new file mode 100644
index 00000000..24c8ddcb
--- /dev/null
+++ b/client/src/graphql/gql/submissionsQuery.gql
@@ -0,0 +1,13 @@
+query Submissions($id: ID!) {
+  assignment(id: $id) {
+    submissions {
+      id
+      text
+      document
+      student {
+        firstName
+        lastName
+      }
+    }
+  }
+}
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index d2391ac1..282a8bc0 100644
--- a/client/src/pages/submissions.vue
+++ b/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: [
diff --git a/client/src/router/index.js b/client/src/router/index.js
index e58c58e8..a8f055cd 100644
--- a/client/src/router/index.js
+++ b/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}

From 6e75b554752fd70f4245c186cf76428ff6deeec4 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 8 Oct 2018 15:32:25 +0200
Subject: [PATCH 2/5] Improve navigation styling

---
 .../components/modules/ModuleNavigation.vue   | 59 ++++++++++++-------
 server/assignments/schema/queries.py          |  3 +-
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index a028f20d..56666957 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -1,27 +1,38 @@
 <template>
   <div>
     <nav class="module-navigation">
-      <h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3>
-      <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>
-
-        <a href="#" class="module-navigation__anchor"
-           v-scroll-to="chapterId(index)"
-           v-for="(chapter, index) in module.chapters"
-           :key="chapter.id">{{chapter.title}}</a>
-        <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
-      </div>
-      <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: {{module.metaTitle}}
-      </router-link>
-      <div class="module-navigation__anchors">
+      <div class="module-navigation__module-content">
         <router-link
-          :to="submissionsLink(assignment)"
-          v-for="assignment in module.assignments"
-          :key="assignment.id"
-          class="module-navigation__anchor"
-        >{{assignment.title}}
+          tag="h3"
+          :to="moduleContentLink"
+          class="module-navigation__heading"
+        >Inhalte: {{module.metaTitle}}
         </router-link>
+        <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>
+
+          <a href="#" class="module-navigation__anchor"
+             v-scroll-to="chapterId(index)"
+             v-for="(chapter, index) in module.chapters"
+             :key="chapter.id">{{chapter.title}}</a>
+          <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
+        </div>
+      </div>
+
+      <div class="module-navigation__module-submissions">
+        <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse:
+          {{module.metaTitle}}
+        </router-link>
+        <div class="module-navigation__anchors">
+          <router-link
+            :to="submissionsLink(assignment)"
+            v-for="assignment in module.assignments"
+            :key="assignment.id"
+            class="module-navigation__anchor"
+          >{{assignment.title}}
+          </router-link>
+        </div>
       </div>
     </nav>
   </div>
@@ -40,6 +51,9 @@
     computed: {
       onModulePage() {
         return this.$route.name === 'module';
+      },
+      moduleContentLink() {
+        return `/module/${this.module.slug}`;
       }
     },
 
@@ -74,15 +88,20 @@
     position: sticky;
     top: 32px;
 
+    &__module-content {
+      margin-bottom: 18px;
+    }
+
     &__heading {
       @include module-navigation-typography;
       margin: 0;
       font-size: 1.0625rem;
+      cursor: pointer;
     }
     &__anchors {
       display: flex;
       flex-direction: column;
-      padding: 16px 24px;
+      padding: 16px 24px 0;
     }
     &__anchor {
       @include module-navigation-typography;
diff --git a/server/assignments/schema/queries.py b/server/assignments/schema/queries.py
index c410d657..7a77a920 100644
--- a/server/assignments/schema/queries.py
+++ b/server/assignments/schema/queries.py
@@ -1,5 +1,4 @@
 from graphene import relay
-import graphene
 from graphene_django.filter import DjangoFilterConnectionField
 
 from assignments.schema.types import AssignmentNode
@@ -7,4 +6,4 @@ from assignments.schema.types import AssignmentNode
 
 class AssignmentsQuery(object):
     assignment = relay.Node.Field(AssignmentNode)
-    assignments = DjangoFilterConnectionField(AssignmentNode)
\ No newline at end of file
+    assignments = DjangoFilterConnectionField(AssignmentNode)

From 26d34798710f53516bd9c5c9fd215a9188a68adc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 8 Oct 2018 16:00:32 +0200
Subject: [PATCH 3/5] Add title to assignment view

Also, make route changes work smoothly
---
 ....gql => assignmentWithSubmissionsQuery.gql} |  3 ++-
 client/src/pages/submissions.vue               | 18 ++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)
 rename client/src/graphql/gql/{submissionsQuery.gql => assignmentWithSubmissionsQuery.gql} (73%)

diff --git a/client/src/graphql/gql/submissionsQuery.gql b/client/src/graphql/gql/assignmentWithSubmissionsQuery.gql
similarity index 73%
rename from client/src/graphql/gql/submissionsQuery.gql
rename to client/src/graphql/gql/assignmentWithSubmissionsQuery.gql
index 24c8ddcb..2d167666 100644
--- a/client/src/graphql/gql/submissionsQuery.gql
+++ b/client/src/graphql/gql/assignmentWithSubmissionsQuery.gql
@@ -1,5 +1,6 @@
-query Submissions($id: ID!) {
+query AssignmentWithSubmissions($id: ID!) {
   assignment(id: $id) {
+    title
     submissions {
       id
       text
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index 282a8bc0..e5db53b5 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="submissions-page">
-    <h1 class="submissions-page__title">Auftrag 2 - Aufgabe Interview</h1>
+    <h1 class="submissions-page__title">{{assignment.title}}</h1>
 
     <student-submission class="submissions-page__submission"
-                        v-for="(submission, index) in submissions"
+                        v-for="(submission, index) in assignment.submissions"
                         :key="index"
                         :submission="submission"
     >
@@ -15,7 +15,7 @@
 <script>
   import StudentSubmission from '@/components/StudentSubmission';
 
-  import SUBMISSIONS_QUERY from '@/graphql/gql/submissionsQuery.gql';
+  import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/assignmentWithSubmissionsQuery.gql';
 
   export default {
     components: {
@@ -23,14 +23,16 @@
     },
 
     apollo: {
-      submissions() {
+      assignment() {
         return {
-          query: SUBMISSIONS_QUERY,
-          variables: {
-            id: this.$route.params.id
+          query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
+          variables() {
+            return {
+              id: this.$route.params.id
+            }
           },
           update(result) {
-            return result.assignment.submissions;
+            return result.assignment;
           }
         }
       },

From f75b04b82fc8bc62b86fea2aecf4ba177013ba95 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 8 Oct 2018 16:55:39 +0200
Subject: [PATCH 4/5] Add active state on submissions link

---
 client/src/components/modules/ModuleNavigation.vue | 1 +
 server/assignments/schema/types.py                 | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index 56666957..cb6196e2 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -30,6 +30,7 @@
             v-for="assignment in module.assignments"
             :key="assignment.id"
             class="module-navigation__anchor"
+            exact-active-class="module-navigation__anchor--active"
           >{{assignment.title}}
           </router-link>
         </div>
diff --git a/server/assignments/schema/types.py b/server/assignments/schema/types.py
index bf5f89dd..53f52636 100644
--- a/server/assignments/schema/types.py
+++ b/server/assignments/schema/types.py
@@ -23,5 +23,6 @@ class AssignmentNode(DjangoObjectType):
     def resolve_submission(self, info, **kwargs):
         return self.submissions.filter(student=info.context.user).first()  #  returns None if it doesn't exist yet
 
+    #todo: restrict for students
     def resolve_submissions(self, info, **kwargs):
-        return self.submissions.all()
\ No newline at end of file
+        return self.submissions.all()

From ace485bca2b21b635e84d8ee850f7e51c06409aa Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 8 Oct 2018 16:56:25 +0200
Subject: [PATCH 5/5] Move assignment with submissions to own component

---
 .../components/AssignmentWithSubmissions.vue  | 39 ++++++++++++++++
 client/src/pages/submissions.vue              | 45 +++----------------
 2 files changed, 46 insertions(+), 38 deletions(-)
 create mode 100644 client/src/components/AssignmentWithSubmissions.vue

diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
new file mode 100644
index 00000000..b9c8545c
--- /dev/null
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="assignment-with-submissions">
+    <h1 class="assignment-with-submissions__title">{{assignment.title}}</h1>
+
+    <student-submission class="assignment-with-submissions__submission"
+                        v-for="(submission, index) in assignment.submissions"
+                        :key="index"
+                        :submission="submission"
+    >
+    </student-submission>
+  </div>
+</template>
+
+<script>
+  import StudentSubmission from '@/components/StudentSubmission';
+
+  export default {
+    props: ['assignment'],
+
+    components: {
+      StudentSubmission
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .assignment-with-submissions {
+    &__title {
+      font-size: toRem(35px);
+    }
+
+    &__submission:first-of-type {
+      border-top: 1px solid $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index e5db53b5..5d1f9da2 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -1,25 +1,19 @@
 <template>
   <div class="submissions-page">
-    <h1 class="submissions-page__title">{{assignment.title}}</h1>
-
-    <student-submission class="submissions-page__submission"
-                        v-for="(submission, index) in assignment.submissions"
-                        :key="index"
-                        :submission="submission"
-    >
-    </student-submission>
+    <assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
+      :assignment="assignment"></assignment-with-submissions>
   </div>
 
 </template>
 
 <script>
-  import StudentSubmission from '@/components/StudentSubmission';
+  import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
 
   import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/assignmentWithSubmissionsQuery.gql';
 
   export default {
     components: {
-      StudentSubmission
+      AssignmentWithSubmissions
     },
 
     apollo: {
@@ -36,45 +30,20 @@
           }
         }
       },
-
     },
 
     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'}
-        ]
+        assignment: {
+          submissions: []
+        }
       }
     }
   }
 </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>