Add newlines to student submissions

client/src/components/content-blocks/assignment/FinalSubmission.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="final-submission">
-    <div v-if="submission.text" class="final-submission__text">
+    <div v-if="submission.text" class="final-submission__text" v-html="text">
-      {{submission.text}}
     </div>
     <document-block
       v-if="submission.document"
@@ -17,6 +16,7 @@
 <script>
   import InfoIcon from '@/components/icons/InfoIcon';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  import {newLineToParagraph} from '@/helpers/text';
 
   export default {
     props: ['submission'],
@@ -24,6 +24,12 @@
     components: {
       InfoIcon,
       DocumentBlock,
+    },
+
+    computed: {
+      text() {
+        return newLineToParagraph(this.submission.text);
+      }
     }
   }
 </script>

client/src/helpers/text.js

@@ -0,0 +1,6 @@
+export const newLineToParagraph = (text) => {
+  return text
+    .split(/\n+/)
+    .map(p => `<p>${p}</p>`)
+    .join('');
+};

client/src/pages/studentSubmission.vue

@@ -2,7 +2,7 @@
   <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>
+      <h2 class="article__subtitle">{{fullName}}</h2>
     </div>
     <div class="article__content article-content">
       <p v-if="studentSubmission.document && studentSubmission.document.length > 0" class="article-content__document">
@@ -10,18 +10,42 @@
           <student-submission-document :document="studentSubmission.document"></student-submission-document>
         </a>
       </p>
-      <p>{{studentSubmission.text}}</p>
+      <p class="article-content__text" v-html="text"></p>
     </div>
   </div>
 </template>
 
 <script>
+  import {newLineToParagraph} from '@/helpers/text';
+
   import DocumentIcon from '@/components/icons/DocumentIcon';
   import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
   import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/studentSubmissionQuery.gql';
 
   export default {
-    components: { DocumentIcon, StudentSubmissionDocument },
+    components: {DocumentIcon, StudentSubmissionDocument},
+
+    computed: {
+      text() {
+        return newLineToParagraph(this.studentSubmission.text);
+      },
+      fullName() {
+        return `${this.studentSubmission.student.firstName} ${this.studentSubmission.student.lastName}`
+      }
+    },
+
+    apollo: {
+      studentSubmission() {
+        return {
+          query: STUDENT_SUBMISSIONS_QUERY,
+          variables() {
+            return {
+              id: this.$route.params.id
+            }
+          }
+        }
+      },
+    },
 
     data() {
       return {
@@ -37,19 +61,7 @@
           document: ''
         }
       }
-    },
+    }
-     apollo: {
-      studentSubmission() {
-        return {
-          query: STUDENT_SUBMISSIONS_QUERY,
-          variables() {
-            return {
-              id: this.$route.params.id
-            }
-          }
-        }
-      },
-    },
   }
 </script>
 
@@ -58,5 +70,9 @@
     &__document {
       margin-bottom: 1rem;
     }
+
+    &__text /deep/ > p {
+      margin-bottom: 1em;
+    }
   }
 </style>