Divide updates for assignment submissions

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

@@ -5,9 +5,9 @@
       {{assignment.assignment}}
     </p>
 
-    <final-submission :submission="assignment.submission" v-if="assignment.submission.final"></final-submission>
+    <final-submission :submission="assignment.submission" v-if="final"></final-submission>
 
-    <div class="assignment__submission" v-if="!assignment.submission.final">
+    <div class="assignment__submission" v-if="!final">
       <div class="assignment__toggle-input-container">
         <button
           class="assignment__toggle-input"
@@ -25,25 +25,17 @@
       </div>
 
       <div class="assignment__inputs">
-        <div class="assignment__text-answer"
+        <submission-form
-           v-if="inputType === 'text'">
+          @input="saveInput"
-      <textarea
+          :submission="submission"
-        class="assignment__textarea"
+          v-if="inputType === 'text'"
-        placeholder="Ergebnis erfassen"
+        ></submission-form>
-        :value="assignment.submission.text"
+        <div
-        @input="saveInput"
+          class="assignment__file-upload"
-      ></textarea>
+          v-if="inputType === 'file'">
-        <div class="assignment__save-status">
+          File Input goes here
-          <tick-circle-icon class="assignment__save-status-icon"></tick-circle-icon>
-          <span class="assignment__save-status-text">Alle Änderungen gespeichert</span>
         </div>
       </div>
-      <div
-        class="assignment__file-upload"
-        v-if="inputType === 'file'">
-        File Input goes here
-      </div>
-      </div>
 
       <button
         class="assignment__submit button button--primary button--white-bg"
@@ -57,30 +49,38 @@
 <script>
   import ASSIGNMENT_QUERY from '@/graphql/gql/assignmentQuery.gql';
   import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
+  import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
   import debounce from 'debounce';
 
-  import TickCircleIcon from '@/components/icons/TickCircleIcon';
   import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
+  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
 
   export default {
     props: ['value'],
 
     components: {
-      TickCircleIcon,
+      SubmissionForm,
       FinalSubmission
     },
 
-    computed: {},
+    computed: {
+      final() {
+        return !!this.submission && this.submission.final
+      },
+      submission() {
+        return this.assignment.submission ? this.assignment.submission : {}
+      }
+    },
 
     methods: {
-      saveInput: debounce(function (event) {
+      saveInput: debounce(function (answer) {
         this.$apollo.mutate({
-          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
           variables: {
             input: {
               assignment: {
                 id: this.assignment.id,
-                answer: event.target.value
+                answer: answer
               }
             }
           }
@@ -117,7 +117,8 @@
       return {
         assignment: {
           submission: {
-            text: ''
+            text: '',
+            final: false
           }
         },
         inputType: 'text'
@@ -171,45 +172,6 @@
       margin-bottom: 12px;
     }
 
-    &__textarea {
-      display: block;
-      width: 100%;
-      border-radius: $input-border-radius;
-      padding: 13px;
-      @include input-box-shadow;
-      box-sizing: border-box;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      line-height: 1.5;
-      border-bottom: 0;
-      min-height: 110px;
-    }
-
-    &__save-status {
-      background-color: $color-white;
-      font-family: $sans-serif-font-family;
-      padding: 13px;
-      border-radius: $input-border-radius;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border: 1px solid #DBDBDB;
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-
-    &__save-status-icon {
-      width: 22px;
-      height: 22px;
-      fill: $color-grey;
-      margin-right: 8px;
-    }
-
-    &__save-status-text {
-      font-size: toRem(14px);
-      color: $color-grey;
-    }
-
     &__submit {
     }
   }

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="submission-form__text-answer">
+      <textarea
+        class="submission-form__textarea"
+        placeholder="Ergebnis erfassen"
+        :value="submission.text"
+        @input="$emit('input', $event.target.value)"
+      ></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>
+    </div>
+  </div>
+</template>
+
+<script>
+  import TickCircleIcon from '@/components/icons/TickCircleIcon';
+
+  export default {
+    props: ['submission', 'saved'],
+
+    components: {
+      TickCircleIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .submission-form {
+    &__textarea {
+      display: block;
+      width: 100%;
+      border-radius: $input-border-radius;
+      padding: 13px;
+      @include input-box-shadow;
+      box-sizing: border-box;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      line-height: 1.5;
+      border-bottom: 0;
+      min-height: 110px;
+    }
+
+    &__save-status {
+      background-color: $color-white;
+      font-family: $sans-serif-font-family;
+      padding: 13px;
+      border-radius: $input-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border: 1px solid #DBDBDB;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &__save-status-icon {
+      width: 22px;
+      height: 22px;
+      fill: $color-grey;
+      margin-right: 8px;
+    }
+
+    &__save-status-text {
+      font-size: toRem(14px);
+      color: $color-grey;
+    }
+  }
+</style>

client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql

@@ -0,0 +1,5 @@
+mutation UpdateAssignmentWithSuccess($input: UpdateAssignmentInput!) {
+  updateAssignment(input: $input){
+    successful
+  }
+}

server/assignments/schema/mutations.py

@@ -12,6 +12,7 @@ class UpdateAssignment(relay.ClientIDMutation):
         assignment = graphene.Argument(AssignmentInput)
 
     updated_assignment = graphene.Field(AssignmentNode)
+    successful = graphene.Boolean()
     errors = graphene.List(graphene.String)
 
     @classmethod
@@ -24,7 +25,7 @@ class UpdateAssignment(relay.ClientIDMutation):
         if final is not None:
             submission.final = final
         submission.save()
-        return cls(updated_assignment=assignment, errors=None)
+        return cls(successful=True, updated_assignment=assignment, errors=None)
 
 
 class AssignmentMutations(object):