From ad07ada2f2aede9b65dc244fefc8daa234c02f24 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 13 Nov 2019 19:25:24 +0100
Subject: [PATCH] Add feedback to submission view, style view

---
 .../components/AssignmentWithSubmissions.vue  | 32 ++++++++++++++++---
 client/src/components/StudentSubmission.vue   | 11 +++----
 .../gql/assignmentWithSubmissionsQuery.gql    |  5 +++
 client/src/pages/submissions.vue              | 14 ++++----
 client/src/styles/_student-submission.scss    | 10 ++++++
 client/src/styles/main.scss                   |  1 +
 6 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 client/src/styles/_student-submission.scss

diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index 9381c655..1e392634 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -1,14 +1,24 @@
 <template>
   <div class="assignment-with-submissions">
     <!--<h1 class="assignment-with-submissions__title">{{assignment.assignment}}</h1>-->
-      <h4 class="assignment-with-submissions__heading">Aufgabe</h4>
-
     <p class="assignment-with-submissions__text">{{assignment.assignment}}</p>
+
+    <div>
+      <a class="button button--primary submissions-page__back" @click="back">Aufgabe im Modul anzeigen</a>
+    </div>
+
     <div class="assignment-with-submissions__solution" v-if="assignment.solution">
       <h4 class="assignment-with-submissions__heading">Lösung</h4>
       <p class="assignment-with-submissions__solution-text">{{assignment.solution}}</p>
     </div>
     <p v-if="!assignment.submissions.length">Zu diesem Auftrag sind noch keine Ergebnisse vorhanden</p>
+
+    <div class="assignment-with-submissions__submissions submissions">
+      <div class="submissions__header student-submission-row submission-header">
+          <p class="submission-header__title">Lernende</p>
+          <p class="submission-header__title">Ergebnisse</p>
+          <p class="submission-header__title">Feedback</p>
+      </div>
     <router-link
       :to="submissionLink(submission)"
       v-for="(submission, index) in submissions"
@@ -19,6 +29,8 @@
       >
       </student-submission>
     </router-link>
+    </div>
+
   </div>
 </template>
 
@@ -80,6 +92,7 @@
     }
 
     &__text {
+      font-size: toRem(26px);
       margin-bottom: 1rem;
     }
 
@@ -95,10 +108,19 @@
 
     &__link {
       display: block;
-      &:first-of-type {
-        border-top: 1px solid $color-silver-dark;
-      }
+    }
+
+    &__submissions {
+      margin-top: 3rem;
     }
 
   }
+
+  .submission-header {
+    &__title {
+      color: $color-silver-dark;
+      font-family: $sans-serif-font-family;
+    }
+  }
+
 </style>
diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
index 386d399c..00584f41 100644
--- a/client/src/components/StudentSubmission.vue
+++ b/client/src/components/StudentSubmission.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="student-submission">
+  <div class="student-submission student-submission-row">
     <div class="student-submission__student-name">
       {{name}}
     </div>
@@ -9,6 +9,9 @@
           <student-submission-document :document="submission.document" class="entry-document"></student-submission-document>
       </p>
     </div>
+    <div class="student-submission__feedback entry">
+      <p>{{submission.submissionfeedback.text | trimToLength(50)}}</p>
+    </div>
   </div>
 </template>
 
@@ -50,12 +53,6 @@
   @import "@/styles/_functions.scss";
 
   .student-submission {
-    display: grid;
-    grid-template-columns: 170px 1fr;
-    grid-column-gap: 80px;
-    align-items: center;
-    border-bottom: 1px solid $color-silver-dark;
-    padding: 15px 0;
 
     &__student-name {
       font-size: toRem(17px);
diff --git a/client/src/graphql/gql/assignmentWithSubmissionsQuery.gql b/client/src/graphql/gql/assignmentWithSubmissionsQuery.gql
index f98b2636..28dd7206 100644
--- a/client/src/graphql/gql/assignmentWithSubmissionsQuery.gql
+++ b/client/src/graphql/gql/assignmentWithSubmissionsQuery.gql
@@ -19,6 +19,11 @@ query AssignmentWithSubmissions($id: ID!) {
           }
         }
       }
+      submissionfeedback {
+        id
+        text
+        final
+      }
     }
   }
 }
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index 4043a5dc..661cadbc 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="submissions-page">
-    <div>
-      <a class="button button--primary submissions-page__back" @click="back">Zurück zur Aufgabe</a>
-    </div>
-
+  <div class="submissions-page skillbox__content">
+    <h2 class="submissions-page__heading">Aufgabe</h2>
     <assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
                                  :assignment="assignment"></assignment-with-submissions>
   </div>
@@ -61,8 +58,9 @@
     grid-row-gap: $large-spacing;
     grid-template-rows: auto 1fr;
 
-    @include desktop {
-      width: 800px;
-    }
+    margin-top: 2rem;
+
   }
+
+
 </style>
diff --git a/client/src/styles/_student-submission.scss b/client/src/styles/_student-submission.scss
new file mode 100644
index 00000000..fdc2633b
--- /dev/null
+++ b/client/src/styles/_student-submission.scss
@@ -0,0 +1,10 @@
+@import "@/styles/_variables.scss";
+
+.student-submission-row {
+  display: grid;
+  grid-template-columns: 170px 1fr 1fr;
+  grid-column-gap: 80px;
+  align-items: center;
+  border-bottom: 1px solid $color-silver-dark;
+  padding: 15px 0;
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 7102ca4b..0cc31820 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -20,3 +20,4 @@
 @import "solutions";
 @import "password_forms";
 @import "public-page";
+@import "student-submission"