ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update submission on assignment component 

Update the data on the parent component to prevent inconsistent data on the server
This commit is contained in:
Ramon Wenger 2018-10-02 15:01:43 +02:00
parent e52a98c50b
commit 95f2e348f1
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/content-blocks/assignment/Assignment.vue
View File

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

2
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -8,7 +8,7 @@
></textarea> ></textarea>
<div class="submission-form__save-status"> <div class="submission-form__save-status">
<tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon> <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>
</div> </div>
</template> </template>