Refactor submission form
This commit is contained in:
Christian Cueni
parent
a732074a9b
commit
066f5259ce
|
|
@ -7,44 +7,20 @@
|
|||
<solution :value="solution" v-if="assignment.solution"></solution>
|
||||
|
||||
<template v-if="isStudent">
|
||||
<div class="assignment__submission submissionform-container">
|
||||
|
||||
<div class="submissionform-container__inputs">
|
||||
<submission-form
|
||||
@input="saveInput"
|
||||
:input-text="submission.text"
|
||||
v-if="isStudent"
|
||||
@turnIn="turnIn"
|
||||
@saveInput="saveInput"
|
||||
@reopen="reopen"
|
||||
@changeDocumentUrl="changeDocumentUrl"
|
||||
:user-input="submission"
|
||||
:placholder="'Ergebnis erfassen'"
|
||||
:action="'Ergebnis mit Lehrperson teilen'"
|
||||
:shared-msg="'Das Ergebnis wurde mit der Lehrperson geteilt.'"
|
||||
:saved="!unsaved"
|
||||
:final="final"
|
||||
></submission-form>
|
||||
</div>
|
||||
>
|
||||
</submission-form>
|
||||
|
||||
<div class="submissionform-container__actions" v-if="!final">
|
||||
<button
|
||||
class="submissionform-container__submit button button--primary button--white-bg"
|
||||
@click="turnIn"
|
||||
>Ergebnis mit Lehrperson teilen
|
||||
</button>
|
||||
|
||||
<div v-if="assignment.submission.document">
|
||||
<document-block
|
||||
:value="{url: assignment.submission.document}"
|
||||
show-trash-icon
|
||||
v-on:trash="changeDocumentUrl('')"
|
||||
></document-block>
|
||||
</div>
|
||||
|
||||
<simple-file-upload
|
||||
v-on:link-change-url="changeDocumentUrl"
|
||||
:value="assignment.submission.document"
|
||||
></simple-file-upload>
|
||||
</div>
|
||||
|
||||
<final-submission
|
||||
v-if="final"
|
||||
:user-input="assignment.submission.text"
|
||||
:shared-msg="'Das Ergebnis wurde mit der Lehrperson geteilt'"
|
||||
@reopen="reopen"></final-submission>
|
||||
</div>
|
||||
<div v-if="this.assignment.submission.submissionfeedback" class="submissionform-container__feedback">
|
||||
<p>{{feedbackText}}</p>
|
||||
</div>
|
||||
|
|
@ -66,6 +42,7 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
|
||||
import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
|
||||
import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
|
||||
import DocumentForm from '@/components/content-forms/DocumentForm';
|
||||
import DocumentBlock from '@/components/content-blocks/DocumentBlock';
|
||||
|
|
@ -78,10 +55,11 @@
|
|||
components: {
|
||||
DocumentBlock,
|
||||
DocumentForm,
|
||||
SubmissionForm,
|
||||
SubmissionInput,
|
||||
FinalSubmission,
|
||||
Solution,
|
||||
SimpleFileUpload
|
||||
SimpleFileUpload,
|
||||
SubmissionForm
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
<template>
|
||||
<div class="feedback__submission submissionform-container">
|
||||
<div class="submissionform-container__inputs">
|
||||
<submission-form
|
||||
@input="saveInput"
|
||||
:input-text="userInput.text"
|
||||
:saved="saved"
|
||||
:final="final"
|
||||
:placeholder="placeholder"
|
||||
:reopen="reopenSubmission"
|
||||
></submission-form>
|
||||
</div>
|
||||
|
||||
<div class="submissionform-container__actions" v-if="!final">
|
||||
<button class="submissionform-container__submit button button--primary button--white-bg"
|
||||
@click="$emit('turnIn')"
|
||||
>{{action}}
|
||||
</button>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<final-submission
|
||||
v-if="final"
|
||||
:user-input="userInput"
|
||||
:shared-msg="sharedMsg"
|
||||
@reopen="$emit('reopen')"></final-submission>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
|
||||
import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SubmissionForm,
|
||||
FinalSubmission
|
||||
},
|
||||
|
||||
props: ['userInput', 'saved', 'placeholder', 'action', 'reopen', 'document', 'sharedMsg'],
|
||||
|
||||
computed: {
|
||||
final() {
|
||||
return !!this.userInput && this.userInput.final
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
reopenSubmission() {
|
||||
this.$emit('reopen');
|
||||
},
|
||||
saveInput(input) {
|
||||
this.$emit('saveInput', input);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
|
@ -1,84 +1,119 @@
|
|||
<template>
|
||||
<div class="submission-form__text-answer submission-form">
|
||||
<textarea
|
||||
v-auto-grow
|
||||
rows="1"
|
||||
class="submission-form__textarea"
|
||||
<div class="feedback__submission submissionform-container">
|
||||
<div class="submissionform-container__inputs">
|
||||
<submission-input
|
||||
@input="saveInput"
|
||||
:input-text="userInput.text"
|
||||
:saved="saved"
|
||||
:final="final"
|
||||
:placeholder="placeholder"
|
||||
:readonly="final"
|
||||
:value="inputText"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
></textarea>
|
||||
<div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
|
||||
<tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon>
|
||||
:reopen="reopenSubmission"
|
||||
></submission-input>
|
||||
</div>
|
||||
<div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
|
||||
<loading-icon class="submission-form__save-status-icon submission-form__saving-icon"></loading-icon>
|
||||
|
||||
<div class="submissionform-container__actions" v-if="!final">
|
||||
<button class="submissionform-container__submit button button--primary button--white-bg"
|
||||
@click="$emit('turnIn')"
|
||||
>{{action}}
|
||||
</button>
|
||||
<div v-if="userInput.document">
|
||||
<document-block
|
||||
:value="{url: userInput.document}"
|
||||
show-trash-icon
|
||||
v-on:trash="changeDocumentUrl('')"
|
||||
></document-block>
|
||||
</div>
|
||||
|
||||
<simple-file-upload
|
||||
v-if="allowsDocuments"
|
||||
v-on:link-change-url="changeDocumentUrl"
|
||||
:value="userInput.document"
|
||||
class="submissionform-container__document"
|
||||
></simple-file-upload>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<final-submission
|
||||
v-if="final"
|
||||
:user-input="userInput"
|
||||
:shared-msg="sharedMsg"
|
||||
@reopen="$emit('reopen')"></final-submission>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TickCircleIcon from '@/components/icons/TickCircleIcon';
|
||||
import LoadingIcon from '@/components/icons/LoadingIcon';
|
||||
import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
|
||||
import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
|
||||
import SimpleFileUpload from '@/components/SimpleFileUpload';
|
||||
import DocumentBlock from '@/components/content-blocks/DocumentBlock';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
inputText: String,
|
||||
saved: Boolean,
|
||||
final: Boolean,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Ergebnis erfassen'
|
||||
components: {
|
||||
SubmissionInput,
|
||||
FinalSubmission,
|
||||
SimpleFileUpload,
|
||||
DocumentBlock
|
||||
},
|
||||
|
||||
props: ['userInput', 'saved', 'placeholder', 'action', 'reopen', 'document', 'sharedMsg'],
|
||||
|
||||
computed: {
|
||||
final() {
|
||||
return !!this.userInput && this.userInput.final
|
||||
},
|
||||
allowsDocuments() {
|
||||
return 'document' in this.userInput;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TickCircleIcon,
|
||||
LoadingIcon
|
||||
|
||||
methods: {
|
||||
reopenSubmission() {
|
||||
this.$emit('reopen');
|
||||
},
|
||||
saveInput(input) {
|
||||
this.$emit('saveInput', input);
|
||||
},
|
||||
changeDocumentUrl(documentUrl) {
|
||||
this.$emit('changeDocumentUrl', documentUrl);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
@import '@/styles/_mixins.scss';
|
||||
|
||||
.submission-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.submissionform-container {
|
||||
|
||||
&__textarea {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
line-height: 1.5;
|
||||
border: 0;
|
||||
min-height: 110px;
|
||||
@include input-box-shadow;
|
||||
background-color: $color-white;
|
||||
border-radius: $input-border-radius;
|
||||
border: 1px solid $color-silver;
|
||||
padding: $medium-spacing;
|
||||
|
||||
&__inputs {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__save-status {
|
||||
position: relative;
|
||||
&__submit {
|
||||
margin-right: $medium-spacing;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__save-status-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: $color-silver-dark;
|
||||
&__feedback {
|
||||
margin-top: $medium-spacing;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
&__document {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__saving-icon {
|
||||
animation: spin 2.5s linear infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div class="submission-form__text-answer submission-form">
|
||||
<textarea
|
||||
v-auto-grow
|
||||
rows="1"
|
||||
class="submission-form__textarea"
|
||||
:placeholder="placeholder"
|
||||
:readonly="final"
|
||||
:value="inputText"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
></textarea>
|
||||
<div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
|
||||
<tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon>
|
||||
</div>
|
||||
<div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
|
||||
<loading-icon class="submission-form__save-status-icon submission-form__saving-icon"></loading-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TickCircleIcon from '@/components/icons/TickCircleIcon';
|
||||
import LoadingIcon from '@/components/icons/LoadingIcon';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
inputText: String,
|
||||
saved: Boolean,
|
||||
final: Boolean,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Ergebnis erfassen'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TickCircleIcon,
|
||||
LoadingIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.submission-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&__textarea {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
line-height: 1.5;
|
||||
border: 0;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
&__save-status {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__save-status-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: $color-silver-dark;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__saving-icon {
|
||||
animation: spin 2.5s linear infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,15 +6,15 @@
|
|||
</div>
|
||||
<div class="submission-page__content submission-content">
|
||||
<h2>Ergebnis von {{fullName}}</h2>
|
||||
<p v-html="text"></p>
|
||||
<p v-if="studentSubmission.document && studentSubmission.document.length > 0" class="article-content__document">
|
||||
<a :href="studentSubmission.document" class="entry-document__link link" target="_blank">
|
||||
<student-submission-document :document="studentSubmission.document"></student-submission-document>
|
||||
</a>
|
||||
</p>
|
||||
<p v-html="text"></p>
|
||||
</div>
|
||||
<div class="submission-page__feedback feedback">
|
||||
<feedback-form
|
||||
<submission-form
|
||||
v-if="studentSubmission"
|
||||
@turnIn="turnIn"
|
||||
@saveInput="saveInput"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<span @click="addEmoji('👍🏻')">👍🏻</span>
|
||||
<span @click="addEmoji('👎🏻')">👎🏻</span>
|
||||
</div>
|
||||
</feedback-form>
|
||||
</submission-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -46,12 +46,12 @@
|
|||
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
|
||||
import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/studentSubmissionQuery.gql';
|
||||
import UPDATE_FEEDBACK_MUTATION from '@/graphql/gql/mutations/updateFeedback.gql';
|
||||
import FeedbackForm from '@/components/content-blocks/assignment/FeedbackForm';
|
||||
import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StudentSubmissionDocument,
|
||||
FeedbackForm
|
||||
SubmissionForm
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
@import '@/styles/_mixins.scss';
|
||||
|
||||
.submissionform-container {
|
||||
|
||||
@include input-box-shadow;
|
||||
background-color: $color-white;
|
||||
border-radius: $input-border-radius;
|
||||
border: 1px solid $color-silver;
|
||||
padding: $medium-spacing;
|
||||
|
||||
&__inputs {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
margin-right: $medium-spacing;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__feedback {
|
||||
margin-top: $medium-spacing;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue