Move assignment with submissions to own component

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/pages/submissions.vue

@@ -1,25 +1,19 @@
 <template>
   <div class="submissions-page">
-    <h1 class="submissions-page__title">{{assignment.title}}</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 assignment.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: {
@@ -36,45 +30,20 @@
           }
         }
       },
-
     },
 
     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>