Add link to document

client/src/components/StudentSubmission.vue

@@ -3,21 +3,29 @@
     <div class="student-submission__student-name">
       {{name}}
     </div>
-    <div class="student-submission__entry">
-      {{submission.text | trimToLength(50)}}
+    <div class="student-submission__entry entry">
+      <p>{{submission.text | trimToLength(50)}}</p>
+      <p v-if="submission.document && submission.document.length > 0" class="entry__document">
+          <student-submission-document :document="submission.document" class="entry-document"></student-submission-document>
+      </p>
     </div>
   </div>
 </template>
 
 <script>
+
+  import DocumentIcon from '@/components/icons/DocumentIcon'
+  import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
+
   export default {
     props: ['submission'],
+    components: { DocumentIcon, StudentSubmissionDocument },
 
     computed: {
       name() {
         return this.submission && this.submission.student
           ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
-      }
+      },
     },
     filters: {
       trimToLength: function(text, numberOfChars) {
@@ -31,7 +39,7 @@
         if (index === -1) {
           return text;
         }
-        return `${text.substring(0, index)}...`;
+        return `${text.substring(0, index)}…`;
       }
     }
   }
@@ -58,5 +66,9 @@
       font-size: toRem(14px);
       font-family: $sans-serif-font-family;
     }
+
+    .entry-document {
+      margin-top: 1rem;
+    }
   }
 </style>

client/src/components/StudentSubmissionDocument.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="submission-document">
+      <p v-if="document && document.length > 0" class="submission-document__content content">
+          <document-icon class="content__icon"></document-icon><span class="content__text">{{filename}}</span>
+      </p>
+  </div>
+</template>
+
+<script>
+
+  import DocumentIcon from '@/components/icons/DocumentIcon'
+  import filenameFromUrl from '@/helpers/urls';
+
+  export default {
+    props: ['document'],
+    name: 'student-submission-document',
+    components: { DocumentIcon },
+
+    computed: {
+      filename() {
+        return filenameFromUrl(this.document)
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .content {
+    display: flex;
+
+    &__icon {
+      width: 25px;
+      align-self: center;
+    }
+
+    &__text {
+      align-self: center;
+      padding-left: 5px;
+    }
+  }
+</style>

client/src/helpers/urls.js

@@ -0,0 +1,6 @@
+export default function filenameFromUrl(url) {
+  const index = url.lastIndexOf('/');
+
+  if (index === -1) { return url }
+  return url.substring(index + 1);
+}

client/src/pages/article.vue

@@ -64,46 +64,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-
-  .article {
-
-    &__header {
-      grid-template-rows: 50px minmax(50px, max-content) auto;
-      grid-row-gap: 30px;
-      display: -ms-grid;
-      display: grid;
-    }
-
-    &__meta {
-      border-bottom: 1px solid $color-lightgrey;
-      align-self: end;
-      padding: 20px 0;
-    }
-
-    &__title {
-      grid-row: 3;
-    }
-
-    &__subtitle {
-      grid-row: 2;
-      font-family: $serif-font-family;
-      font-weight: 400;
-    }
-
-    &__content {
-      display: -ms-grid;
-      display: grid;
-      grid-row-gap: 40px;
-      padding-bottom: 40px;
-
-      /deep/ p {
-        font-size: toRem(18px);
-        line-height: 1.5;
-      }
-    }
-  }
-</style>

client/src/pages/studentSubmission.vue

@@ -4,22 +4,24 @@
       <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 class="article__content article-content">
+      <p v-if="studentSubmission.document && studentSubmission.document.length > 0" class="article-content__document">
+        <a :href="studentSubmission.document" class="entry-document__link link" target="_blank">
+          <student-submission-document :document="studentSubmission.document"></student-submission-document>
+        </a>
+      </p>
+      <p>{{studentSubmission.text}}</p>
     </div>
   </div>
 </template>
 
 <script>
-  import TextBlock from '@/components/content-blocks/TextBlock';
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+  import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
   import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/studentSubmissionQuery.gql';
 
   export default {
-    components: {
-      TextBlock
-    },
+    components: { DocumentIcon, StudentSubmissionDocument },
 
     data() {
       return {
@@ -31,7 +33,8 @@
             firstName: '',
             lastName: ''
           },
-          text: ''
+          text: '',
+          document: ''
         }
       }
     },
@@ -51,7 +54,50 @@
 </script>
 
 <style scoped lang="scss">
-  .submissions-page {
-    width: 800px;
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .article {
+
+    &__header {
+      grid-template-rows: 50px minmax(50px, max-content) auto;
+      grid-row-gap: 30px;
+      display: -ms-grid;
+      display: grid;
+    }
+
+    &__meta {
+      border-bottom: 1px solid $color-lightgrey;
+      align-self: end;
+      padding: 20px 0;
+    }
+
+    &__title {
+      grid-row: 3;
+    }
+
+    &__subtitle {
+      grid-row: 2;
+      font-family: $serif-font-family;
+      font-weight: 400;
+    }
+
+    &__content {
+      display: -ms-grid;
+      display: grid;
+      grid-row-gap: 40px;
+      padding-bottom: 40px;
+
+      /deep/ p {
+        font-size: toRem(18px);
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .article-content {
+    &__document {
+      margin-bottom: 1rem;
+    }
   }
 </style>

client/src/router/index.js

@@ -44,7 +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: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
   {
     path: '/book',
     name: 'book',

client/src/styles/_article.scss

@@ -0,0 +1,37 @@
+.article {
+
+  &__header {
+    grid-template-rows: 50px minmax(50px, max-content) auto;
+    grid-row-gap: 30px;
+    display: -ms-grid;
+    display: grid;
+  }
+
+  &__meta {
+    border-bottom: 1px solid $color-lightgrey;
+    align-self: end;
+    padding: 20px 0;
+  }
+
+  &__title {
+    grid-row: 3;
+  }
+
+  &__subtitle {
+    grid-row: 2;
+    font-family: $serif-font-family;
+    font-weight: 400;
+  }
+
+  &__content {
+    display: -ms-grid;
+    display: grid;
+    grid-row-gap: 40px;
+    padding-bottom: 40px;
+
+    /deep/ p {
+      font-size: toRem(18px);
+      line-height: 1.5;
+    }
+  }
+}

client/src/styles/main.scss

@@ -11,3 +11,4 @@
 @import "uploadcare_overwrite";
 @import "help-text";
 @import "objective-group";
+@import "article";