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

Divide updates for assignment submissions

This commit is contained in:
Ramon Wenger 2018-10-02 14:28:38 +02:00
parent 73759e1af8
commit e52a98c50b
4 changed files with 106 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"
v-if="inputType === 'text'">
<textarea
class="assignment__textarea"
placeholder="Ergebnis erfassen"
:value="assignment.submission.text"
@input="saveInput"
></textarea>
<div class="assignment__save-status">
<tick-circle-icon class="assignment__save-status-icon"></tick-circle-icon>
<span class="assignment__save-status-text">Alle Änderungen gespeichert</span>
<submission-form
@input="saveInput"
:submission="submission"
v-if="inputType === 'text'"
></submission-form>
<div
class="assignment__file-upload"
v-if="inputType === 'file'">
File Input goes here
</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 {
}
}

72
client/src/components/content-blocks/assignment/SubmissionForm.vue Normal file
View File

@ -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>

5
client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql Normal file
View File

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

3
server/assignments/schema/mutations.py
View File

@ -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):