Handle form updates

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

@@ -7,7 +7,7 @@
           :saved="saved"
           :final="final"
           :placeholder="placeholder"
-          :reopen="$emit('reopen')"
+          :reopen="reopenSubmission"
         ></submission-form>
       </div>
 
@@ -22,6 +22,7 @@
       <final-submission
         v-if="final"
         :user-input="userInput"
+        :shared-msg="sharedMsg"
         @reopen="$emit('reopen')"></final-submission>
     </div>
 </template>
@@ -36,7 +37,7 @@
       FinalSubmission
     },
 
-    props: ['userInput', 'saved', 'placeholder', 'action', 'reopen', 'document'],
+    props: ['userInput', 'saved', 'placeholder', 'action', 'reopen', 'document', 'sharedMsg'],
 
     computed: {
       final() {
@@ -45,6 +46,9 @@
     },
 
     methods: {
+      reopenSubmission() {
+        this.$emit('reopen');
+      },
       saveInput(input) {
         this.$emit('saveInput', input);
       }

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

@@ -7,7 +7,7 @@
     ></document-block>
     <div class="final-submission__explanation">
       <info-icon class="final-submission__explanation-icon"></info-icon>
-      <span class="final-submission__explanation-text">Das Ergebnis wurde mit der Lehrperson geteilt</span>
+      <span class="final-submission__explanation-text">{{sharedMsg}}</span>
       <a class="final-submission__reopen" @click="$emit('reopen')">Bearbeiten</a>
     </div>
   </div>
@@ -19,7 +19,7 @@
   import {newLineToParagraph} from '@/helpers/text';
 
   export default {
-    props: ['userInput'],
+    props: ['userInput', 'sharedMsg'],
 
     components: {
       InfoIcon,

client/src/graphql/gql/mutations/updateFeedback.gql

@@ -4,6 +4,7 @@ mutation UpdateSubmissionFeedback($input: UpdateSubmissionFeedbackInput!) {
 		updatedSubmissionFeedback {
       id
       text
+      final
     }
   }
 }

client/src/pages/studentSubmission.vue

@@ -16,12 +16,14 @@
     </div>
     <div class="feedback-submission">
       <feedback-form
+        v-if="studentSubmission"
         @turnIn="turnIn"
         @saveInput="saveInput"
         @reopen="reopen"
         :user-input="studentSubmission.submissionfeedback"
         :placholder="'Feedback erfassen'"
         :action="'Feedback teilen'"
+        :shared-msg="'Dieses Feedback wurde geteilt.'"
         :saved="!unsaved"
         >
         <div v-if="!final" class="feedback-submission__emojis emojis">
@@ -30,7 +32,7 @@
           <span @click="addEmoji('🤩')">🤩</span>
           <span @click="addEmoji('😎')">😎</span>
           <span @click="addEmoji('🤔')">🤔</span>
-          <span@click="addEmoji('👍🏻')">👍🏻</span>
+          <span @click="addEmoji('👍🏻')">👍🏻</span>
           <span @click="addEmoji('👎🏻')">👎🏻</span>
         </div>
         </feedback-form>
@@ -84,8 +86,6 @@
         this.updateFeedbackText(feedbackText);
       },
       _save: debounce(function () {
-        const that = this;
-
         this.saving++;
         this.$apollo.mutate({
           mutation: UPDATE_FEEDBACK_MUTATION,
@@ -97,23 +97,7 @@
               }
             }
           },
-          update(store, {data: {updateSubmissionFeedback: {successful, updatedSubmissionFeedback}}}) {
+          update: this.updateCache
-            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) {
@@ -141,7 +125,8 @@
                 final: true
               }
             }
-          }
+          },
+          update: this.updateCache
         });
       },
       reopen() {
@@ -159,9 +144,27 @@
                 final: false
               }
             }
-          }
+          },
+          update: this.updateCache
         });
       },
+      updateCache(store, {data: {updateSubmissionFeedback: {successful, updatedSubmissionFeedback}}}) {
+        try {
+          if (successful) {
+            const query = STUDENT_SUBMISSIONS_QUERY;
+            const variables = {
+              id: this.studentSubmission.id
+            };
+            const data = store.readQuery({query, variables});
+
+            data.studentSubmission.submissionfeedback = Object.assign({}, updatedSubmissionFeedback);
+            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
+        }
+      },
       updateFeedbackText(text) {
         this.studentSubmission = Object.assign({}, this.studentSubmission, {
           submissionfeedback: Object.assign({}, this.studentSubmission.submissionfeedback, {text: text})
@@ -206,6 +209,6 @@
   }
 
   .emojis {
-    font-size: toRem(24px);
+    font-size: toRem(32px);
   }
 </style>

server/assignments/schema/mutations.py

@@ -52,7 +52,11 @@ class UpdateSubmissionFeedback(relay.ClientIDMutation):
         (submission_feedback, created) = SubmissionFeedback.objects.get_or_create(teacher=user,
                                                                                   student_submission_id=student_submission_id)
 
-        submission_feedback.final = submission_feedback_data.get('final') or submission_feedback.final
+        final = submission_feedback.final
+        if 'final' in submission_feedback_data:
+            final = submission_feedback_data.get('final')
+
+        submission_feedback.final = final
         submission_feedback.text = submission_feedback_data.get('text')
         submission_feedback.save()