Update submission on assignment component

Update the data on the parent component to prevent inconsistent data on the server

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

@@ -28,6 +28,7 @@
         <submission-form
           @input="saveInput"
           :submission="submission"
+          :saved="!unsaved"
           v-if="inputType === 'text'"
         ></submission-form>
         <div
@@ -73,7 +74,7 @@
     },
 
     methods: {
-      saveInput: debounce(function (answer) {
+      _save: debounce(function (answer) {
         this.$apollo.mutate({
           mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
           variables: {
@@ -84,8 +85,24 @@
               }
             }
           }
+        }).then(() => {
+          this.unsaved = false;
         });
       }, 500),
+      saveInput: function (answer) {
+        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.assignment = Object.assign({}, this.assignment, {
+          submission: {
+            ...this.submission,
+            text: answer
+          }
+        });
+        this._save(answer);
+      },
       turnIn() {
         this.$apollo.mutate({
           mutation: UPDATE_ASSIGNMENT_MUTATION,
@@ -121,7 +138,8 @@
             final: false
           }
         },
-        inputType: 'text'
+        inputType: 'text',
+        unsaved: false
       }
     }
   }

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

@@ -8,7 +8,7 @@
       ></textarea>
     <div class="submission-form__save-status">
       <tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon>
-      <span class="submission-form__save-status-text">Alle Änderungen gespeichert</span>
+      <span class="submission-form__save-status-text">Alle Änderungen gespeichert {{saved}}</span>
     </div>
   </div>
 </template>