Merge branch 'feature/student-submissions'

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>

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

@@ -1,27 +1,39 @@
 <template>
   <div>
     <nav class="module-navigation">
-      <h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3>
+      <div class="module-navigation__module-content">
-      <div class="module-navigation__anchors">
-        <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">
         <router-link
-          to="/module/geld/submissions"
+          tag="h3"
-          v-for="assignment in module.assignments"
+          :to="moduleContentLink"
-          :key="assignment.id"
+          class="module-navigation__heading"
-          class="module-navigation__anchor"
+        >Inhalte: {{module.metaTitle}}
-        >{{assignment.title}}
         </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"
+            exact-active-class="module-navigation__anchor--active"
+          >{{assignment.title}}
+          </router-link>
+        </div>
       </div>
     </nav>
   </div>
@@ -37,6 +49,15 @@
       module: moduleQuery
     },
 
+    computed: {
+      onModulePage() {
+        return this.$route.name === 'module';
+      },
+      moduleContentLink() {
+        return `/module/${this.module.slug}`;
+      }
+    },
+
     data() {
       return {
         module: {}
@@ -46,6 +67,9 @@
     methods: {
       chapterId(index) {
         return `#chapter-${index}`
+      },
+      submissionsLink(assignment) {
+        return `/module/${this.module.slug}/submissions/${assignment.id}`;
       }
     }
   }
@@ -65,15 +89,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;

client/src/graphql/gql/assignmentWithSubmissionsQuery.gql

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

client/src/pages/submissions.vue

@@ -1,61 +1,49 @@
 <template>
   <div class="submissions-page">
-    <h1 class="submissions-page__title">Auftrag 2 - Aufgabe Interview</h1>
+    <assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
-
+      :assignment="assignment"></assignment-with-submissions>
-    <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';
+  import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
+
+  import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/assignmentWithSubmissionsQuery.gql';
 
   export default {
     components: {
-      StudentSubmission
+      AssignmentWithSubmissions
+    },
+
+    apollo: {
+      assignment() {
+        return {
+          query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
+          variables() {
+            return {
+              id: this.$route.params.id
+            }
+          },
+          update(result) {
+            return result.assignment;
+          }
+        }
+      },
     },
 
     data() {
       return {
-        submissions: [
+        assignment: {
-          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
+          submissions: []
-          {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>

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}

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)
+    assignments = DjangoFilterConnectionField(AssignmentNode)

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()
+        return self.submissions.all()