From d3a81e17d8630283a8b81d4e5c50964ee8f55129 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 14 Nov 2019 11:11:58 +0100
Subject: [PATCH] Add Feedback container component

---
 .../components/AssignmentWithSubmissions.vue  |   2 +-
 .../content-blocks/assignment/Assignment.vue  |  31 +-----
 .../assignment/FeedbackForm.vue               |  50 +++++++++
 .../assignment/SubmissionForm.vue             |  15 ++-
 .../graphql/gql/mutations/updateFeedback.gql  |   9 ++
 .../graphql/gql/studentSubmissionQuery.gql    |   5 +
 client/src/pages/studentSubmission.vue        | 102 +++++++++++++++++-
 client/src/pages/submissions.vue              |   6 +-
 .../src/styles/_submissionform-container.scss |  23 ++++
 client/src/styles/main.scss                   |   3 +-
 server/assignments/schema/queries.py          |   7 +-
 11 files changed, 207 insertions(+), 46 deletions(-)
 create mode 100644 client/src/components/content-blocks/assignment/FeedbackForm.vue
 create mode 100644 client/src/graphql/gql/mutations/updateFeedback.gql
 create mode 100644 client/src/styles/_submissionform-container.scss

diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index 1e392634..106f3cdf 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -4,7 +4,7 @@
     <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>
+      <a class="button button--primary submissions-page__back" @click="$emit('back')">Aufgabe im Modul anzeigen</a>
     </div>
 
     <div class="assignment-with-submissions__solution" v-if="assignment.solution">
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index cd734dc1..6cd9618f 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -7,20 +7,20 @@
     <solution :value="solution" v-if="assignment.solution"></solution>
 
     <template v-if="isStudent">
-      <div class="assignment__submission">
+      <div class="assignment__submission submissionform-container">
 
-        <div class="assignment__inputs">
+        <div class="submissionform-container__inputs">
           <submission-form
             @input="saveInput"
-            :submission="submission"
+            :input-text="submission.text"
             :saved="!unsaved"
             :final="final"
           ></submission-form>
         </div>
 
-        <div class="assignment__actions" v-if="!final">
+        <div class="submissionform-container__actions" v-if="!final">
           <button
-            class="assignment__submit button button--primary button--white-bg"
+            class="submissionform-container__submit button button--primary button--white-bg"
             @click="turnIn"
           >Ergebnis mit Lehrperson teilen
           </button>
@@ -265,26 +265,5 @@
         color: $color-charcoal-dark;
       }
     }
-
-    &__submission {
-      @include input-box-shadow;
-      background-color: $color-white;
-      border-radius: $input-border-radius;
-      border: 1px solid $color-silver;
-      padding: $medium-spacing;
-    }
-
-    &__inputs {
-      margin-bottom: 12px;
-    }
-
-    &__submit {
-      margin-right: $medium-spacing;
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-    }
   }
 </style>
diff --git a/client/src/components/content-blocks/assignment/FeedbackForm.vue b/client/src/components/content-blocks/assignment/FeedbackForm.vue
new file mode 100644
index 00000000..e0be7911
--- /dev/null
+++ b/client/src/components/content-blocks/assignment/FeedbackForm.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="feedback__submission submissionform-container">
+      <div class="submissionform-container__inputs">
+        <submission-form
+          @input="saveInput"
+          :input-text="feedback.text"
+          :saved="saved"
+          :final="final"
+          :placeholder="placeholder"
+        ></submission-form>
+      </div>
+
+      <div class="submissionform-container__actions" v-if="!final">
+        <button class="submissionform-container__submit button button--primary button--white-bg"
+          @click="$emit('turnIn')"
+        >{{action}}
+        </button>
+      </div>
+
+      <!-- <final-submission :submission="assignment.submission" v-if="final" @reopen="reopen"></final-submission> -->
+    </div>
+</template>
+
+<script>
+  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
+
+  export default {
+    components: {
+      SubmissionForm
+    },
+
+    props: ['feedback', 'saved', 'placeholder', 'action'],
+
+    computed: {
+      final() {
+        return !!this.feedback && this.feedback.final
+      }
+    },
+
+    methods: {
+      saveInput(input) {
+        this.$emit('saveInput', input);
+      }
+    },
+
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 2d8b9a2d..a6978b05 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -4,9 +4,9 @@
         v-auto-grow
         rows="1"
         class="submission-form__textarea"
-        placeholder="Ergebnis erfassen"
+        :placeholder="placeholder"
         :readonly="final"
-        :value="submission.text"
+        :value="inputText"
         @input="$emit('input', $event.target.value)"
       ></textarea>
     <div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
@@ -23,8 +23,15 @@
   import LoadingIcon from '@/components/icons/LoadingIcon';
 
   export default {
-    props: ['submission', 'saved', 'final'],
-
+    props: {
+      inputText: String,
+      saved: Boolean,
+      final: Boolean,
+      placeholder: {
+        type: String,
+        default: 'Ergebnis erfassen'
+      }
+    },
     components: {
       TickCircleIcon,
       LoadingIcon
diff --git a/client/src/graphql/gql/mutations/updateFeedback.gql b/client/src/graphql/gql/mutations/updateFeedback.gql
new file mode 100644
index 00000000..dfa696b2
--- /dev/null
+++ b/client/src/graphql/gql/mutations/updateFeedback.gql
@@ -0,0 +1,9 @@
+mutation UpdateSubmissionFeedback($input: UpdateSubmissionFeedbackInput!) {
+  updateSubmissionFeedback(input: $input){
+    successful
+		updatedSubmissionFeedback {
+      id
+      text
+    }
+  }
+}
diff --git a/client/src/graphql/gql/studentSubmissionQuery.gql b/client/src/graphql/gql/studentSubmissionQuery.gql
index 6f60fc62..d5ae54c5 100644
--- a/client/src/graphql/gql/studentSubmissionQuery.gql
+++ b/client/src/graphql/gql/studentSubmissionQuery.gql
@@ -9,6 +9,11 @@ query StudentSubmissions($id: ID!) {
     }
     assignment {
       title
+      assignment
+    }
+    submissionfeedback {
+      text
+      final
     }
   }
 }
diff --git a/client/src/pages/studentSubmission.vue b/client/src/pages/studentSubmission.vue
index e3781ab6..af3dfea6 100644
--- a/client/src/pages/studentSubmission.vue
+++ b/client/src/pages/studentSubmission.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="article submission-page">
     <div class="article__header">
-      <h1 class="article__title">{{studentSubmission.assignment.title}}</h1>
-      <h2 class="article__subtitle">{{fullName}}</h2>
+      <!-- <h1 class="article__title">{{studentSubmission.assignment.title}}</h1> -->
+      <h1>Aufgabe</h1>
+      <p>{{studentSubmission.assignment.assignment}}</p>
     </div>
     <div class="article__content article-content">
+            <h2 class="article__subtitle">Ergebnis von {{fullName}}</h2>
       <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>
@@ -12,21 +14,38 @@
       </p>
       <p class="article-content__text" v-html="text"></p>
     </div>
+      <div class="feedback__submission">
+        <feedback-form
+          :feedback="studentSubmission.submissionfeedback"
+          @turnIn="turnIn"
+          @saveInput="saveInput"
+          :placholder="'Feedback erfassen'"
+          :action="'Feedback teilen'"
+          :saved="!unsaved"
+          />
+      </div>
   </div>
 </template>
 
 <script>
   import {newLineToParagraph} from '@/helpers/text';
+  import debounce from 'lodash/debounce';
 
   import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
   import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/studentSubmissionQuery.gql';
+  import UPDATE_FEEDBACK_MUTATION from '@/graphql/gql/mutations/updateFeedback.gql';
+  import FeedbackForm from '@/components/content-blocks/assignment/FeedbackForm';
 
   export default {
     components: {
-      StudentSubmissionDocument
+      StudentSubmissionDocument,
+      FeedbackForm
     },
 
     computed: {
+      final() {
+        return !!this.studentSubmission && this.studentSubmission.final;
+      },
       text() {
         return newLineToParagraph(this.studentSubmission.text);
       },
@@ -48,6 +67,73 @@
       },
     },
 
+    methods: {
+      _save: debounce(function () {
+        const that = this;
+
+        this.saving++;
+        this.$apollo.mutate({
+          mutation: UPDATE_FEEDBACK_MUTATION,
+          variables: {
+            input: {
+              submissionFeedback: {
+                studentSubmission: this.studentSubmission.id,
+                text: this.studentSubmission.submissionfeedback.text,
+                final: this.studentSubmission.submissionfeedback.final
+              }
+            }
+          },
+          update(store, {data: {updateSubmissionFeedback: {successful, updatedSubmissionFeedback}}}) {
+            try {
+              if (successful) {
+                const query = STUDENT_SUBMISSIONS_QUERY;
+                const variables = {
+                  id: that.studentSubmission.id
+                };
+                const data = store.readQuery({query, variables});
+
+                data.studentSubmission = Object.assign({}, that.studentSubmission);
+                store.writeQuery({query, variables, data});
+              }
+            } catch (e) {
+              console.error(e);
+              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+            }
+          }
+        }).then(() => {
+          this.saving--;
+          if (this.saving === 0) {
+            this.unsaved = false;
+          }
+        });
+      }, 500),
+      saveInput: function (feedbackText) {
+        this.unsaved = true;
+        /*
+          We update the assignment on this component, so the changes are reflected on it. The server does not return
+          the updated entity, to prevent the UI to update when the user is entering his input
+         */
+        this.studentSubmission = Object.assign({}, this.studentSubmission, {
+          submissionfeedback: Object.assign({}, this.studentSubmission.submissionfeedback, {text: feedbackText})
+        })
+        this._save();
+      },
+      turnIn() {
+        this.$apollo.mutate({
+          mutation: UPDATE_FEEDBACK_MUTATION,
+          variables: {
+            input: {
+              submissionFeedback: {
+                studentSubmission: this.studentSubmission.id,
+                text: this.studentSubmission.submissionfeedback.text,
+                final: true
+              }
+            }
+          }
+        });
+      },
+    },
+
     data() {
       return {
         studentSubmission: {
@@ -59,8 +145,14 @@
             lastName: ''
           },
           text: '',
-          document: ''
-        }
+          document: '',
+          submissionfeedback: {
+            text: '',
+            final: false
+          }
+        },
+        unsaved: false,
+        saving: 0
       }
     }
   }
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index 661cadbc..1ff91052 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -2,14 +2,14 @@
   <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>
+                                 :assignment="assignment"
+                                 @back="back"></assignment-with-submissions>
   </div>
 
 </template>
 
 <script>
   import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
-
   import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/assignmentWithSubmissionsQuery.gql';
 
   export default {
@@ -61,6 +61,4 @@
     margin-top: 2rem;
 
   }
-
-
 </style>
diff --git a/client/src/styles/_submissionform-container.scss b/client/src/styles/_submissionform-container.scss
new file mode 100644
index 00000000..2efe72ff
--- /dev/null
+++ b/client/src/styles/_submissionform-container.scss
@@ -0,0 +1,23 @@
+@import '@/styles/_mixins.scss';
+
+.submissionform-container {
+
+  @include input-box-shadow;
+  background-color: $color-white;
+  border-radius: $input-border-radius;
+  border: 1px solid $color-silver;
+  padding: $medium-spacing;
+
+  &__inputs {
+    margin-bottom: 12px;
+  }
+
+  &__submit {
+    margin-right: $medium-spacing;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 0cc31820..0920efc3 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -20,4 +20,5 @@
 @import "solutions";
 @import "password_forms";
 @import "public-page";
-@import "student-submission"
+@import "student-submission";
+@import "submissionform-container";
diff --git a/server/assignments/schema/queries.py b/server/assignments/schema/queries.py
index 80d1e3d9..7f9ac9da 100644
--- a/server/assignments/schema/queries.py
+++ b/server/assignments/schema/queries.py
@@ -1,11 +1,8 @@
-import graphene
 from graphene import relay
 from graphene_django.filter import DjangoFilterConnectionField
-from rest_framework.exceptions import PermissionDenied
 
-from api.utils import get_by_id_or_slug
-from assignments.models import StudentSubmission, SubmissionFeedback
-from assignments.schema.types import AssignmentNode, StudentSubmissionNode, SubmissionFeedbackNode
+from assignments.models import StudentSubmission
+from assignments.schema.types import AssignmentNode, StudentSubmissionNode
 
 
 class AssignmentsQuery(object):