Add basic pages & queries for single submissions

client/src/components/AssignmentWithSubmissions.vue

@@ -1,13 +1,15 @@
 <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>
+     <router-link
+      :to="submissionLink(submission)"
+      v-for="(submission, index) in assignment.submissions"
+      :key="index">
+        <student-submission class="assignment-with-submissions__submission"
+                            :submission="submission"
+        >
+        </student-submission>
+     </router-link>
   </div>
 </template>
 
@@ -19,6 +21,11 @@
 
     components: {
       StudentSubmission
+    },
+    methods: {
+      submissionLink(submission) {
+        return `/submission/${submission.id}`
+      }
     }
   }
 </script>

client/src/components/StudentSubmission.vue

@@ -4,7 +4,7 @@
       {{name}}
     </div>
     <div class="student-submission__entry">
-      {{submission.text}}
+      {{submission.text | trimToLength(50)}}
     </div>
   </div>
 </template>
@@ -18,6 +18,21 @@
         return this.submission && this.submission.student
           ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
       }
+    },
+    filters: {
+      trimToLength: function(text, numberOfChars) {
+        if (!text) {
+          return '';
+        }
+        if (text.length <= numberOfChars) {
+          return text;
+        }
+        const index = text.indexOf(' ', numberOfChars - 1);
+        if (index === -1) {
+          return text;
+        }
+        return `${text.substring(0, index)}...`;
+      }
     }
   }
 </script>

client/src/graphql/gql/studentSubmissionQuery.gql

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

client/src/pages/studentSubmission.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="article submission-page">
+    <div class="article__header">
+      <h1 class="article__title">{{studentSubmission.assignment.title}}</h1>
+      <h2 class="article__subtitle">{{`${studentSubmission.student.firstName} ${studentSubmission.student.lastName}`}}</h2>
+    </div>
+    <div class="article__content">
+
+      <text-block :value="studentSubmission">
+      </text-block>
+    </div>
+  </div>
+</template>
+
+<script>
+  import TextBlock from '@/components/content-blocks/TextBlock';
+  import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/studentSubmissionQuery.gql';
+
+  export default {
+    components: {
+      TextBlock
+    },
+
+    data() {
+      return {
+        studentSubmission: {
+          assignment: {
+            title: ''
+          },
+          student: {
+            firstName: '',
+            lastName: ''
+          },
+          text: ''
+        }
+      }
+    },
+     apollo: {
+      studentSubmission() {
+        return {
+          query: STUDENT_SUBMISSIONS_QUERY,
+          variables() {
+            return {
+              id: this.$route.params.id
+            }
+          }
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .submissions-page {
+    width: 800px;
+  }
+</style>

client/src/router/index.js

@@ -14,6 +14,7 @@ import basicknowledge from '@/pages/basicknowledge'
 import submissions from '@/pages/submissions'
 import p404 from '@/pages/p404'
 import start from '@/pages/start'
+import submission from '@/pages/studentSubmission'
 
 const routes = [
   {path: '/', component: start, meta: {layout: 'blank'}},
@@ -43,6 +44,7 @@ const routes = [
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
   {path: '/basic-knowledge', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
+  {path: '/submission/:id', name: 'submission', component: submission},
   {
     path: '/book',
     name: 'book',

server/api/schema.py

@@ -6,7 +6,7 @@ from graphene_django.debug import DjangoDebug
 # noinspection PyUnresolvedReferences
 from api import graphene_wagtail  # Keep this import exactly here, it's necessary for StreamField conversion
 from assignments.schema.mutations import AssignmentMutations
-from assignments.schema.queries import AssignmentsQuery
+from assignments.schema.queries import AssignmentsQuery, StudentSubmissionQuery
 from books.schema.mutations.main import BookMutations
 from books.schema.queries import BookQuery
 from objectives.mutations import ObjectiveMutations
@@ -16,7 +16,8 @@ from rooms.schema import RoomsQuery
 from users.schema import UsersQuery
 
 
-class Query(UsersQuery, RoomsQuery, ObjectivesQuery, BookQuery, AssignmentsQuery, graphene.ObjectType):
+class Query(UsersQuery, RoomsQuery, ObjectivesQuery, BookQuery, AssignmentsQuery, StudentSubmissionQuery,
+            graphene.ObjectType):
     node = relay.Node.Field()
 
     if settings.DEBUG:

server/assignments/schema/queries.py

@@ -1,9 +1,14 @@
 from graphene import relay
 from graphene_django.filter import DjangoFilterConnectionField
 
-from assignments.schema.types import AssignmentNode
+from assignments.schema.types import AssignmentNode, StudentSubmissionNode
 
 
 class AssignmentsQuery(object):
     assignment = relay.Node.Field(AssignmentNode)
     assignments = DjangoFilterConnectionField(AssignmentNode)
+
+
+class StudentSubmissionQuery(object):
+    studentSubmission = relay.Node.Field(StudentSubmissionNode)
+