135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
<template>
|
|
<div class="feedback__submission submission-form-container">
|
|
<div class="submission-form-container__inputs">
|
|
<submission-input
|
|
@input="saveInput"
|
|
:input-text="userInput.text"
|
|
:saved="saved"
|
|
:final="final"
|
|
:placeholder="placeholder"
|
|
:reopen="reopenSubmission"
|
|
></submission-input>
|
|
</div>
|
|
|
|
<div class="submission-form-container__actions" v-if="!final">
|
|
<button class="submission-form-container__submit button button--primary button--white-bg"
|
|
@click="$emit('turnIn')"
|
|
>{{action}}
|
|
</button>
|
|
<button
|
|
class="submission-form-container__submit submission-form-container__spellcheck button button--primary button--white-bg"
|
|
v-if="spellcheck"
|
|
@click="$emit('spellcheck')"
|
|
>Rechtschreibung prüfen
|
|
</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="submission-form-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 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: {
|
|
userInput: Object,
|
|
saved: Boolean,
|
|
placeholder: String,
|
|
action: String,
|
|
reopen: Function,
|
|
document: String,
|
|
spellcheck: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
sharedMsg: String
|
|
},
|
|
|
|
components: {
|
|
SubmissionInput,
|
|
FinalSubmission,
|
|
SimpleFileUpload,
|
|
DocumentBlock
|
|
},
|
|
|
|
computed: {
|
|
final() {
|
|
return !!this.userInput && this.userInput.final
|
|
},
|
|
allowsDocuments() {
|
|
return 'document' in this.userInput;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
reopenSubmission() {
|
|
this.$emit('reopen');
|
|
},
|
|
saveInput(input) {
|
|
this.$emit('saveInput', input);
|
|
},
|
|
changeDocumentUrl(documentUrl) {
|
|
this.$emit('changeDocumentUrl', documentUrl);
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/styles/_mixins.scss';
|
|
|
|
.submission-form-container {
|
|
|
|
@include input-box-shadow;
|
|
background-color: $color-white;
|
|
border-radius: $input-border-radius;
|
|
border: 1px solid $color-silver;
|
|
padding: $medium-spacing;
|
|
margin-bottom: $medium-spacing;
|
|
|
|
&__inputs {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
&__submit {
|
|
margin-right: $medium-spacing;
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__document {
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|