82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<div class="student-submission student-submission-row">
|
|
<div class="student-submission__student-name">
|
|
{{name}}
|
|
</div>
|
|
<div class="student-submission__entry entry">
|
|
<p>{{submission.text | trimToLength(50)}}</p>
|
|
<p v-if="submission.document && submission.document.length > 0" class="entry__document">
|
|
<student-submission-document :document="submission.document" class="entry-document"></student-submission-document>
|
|
</p>
|
|
</div>
|
|
<div class="student-submission__feedback entry" v-if="submission.submissionFeedback">
|
|
<p class="entry__text" :class="{'entry__text--final': submission.submissionFeedback.final}">{{submission.submissionFeedback.text | trimToLength(50)}}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import DocumentIcon from '@/components/icons/DocumentIcon'
|
|
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
|
|
|
|
export default {
|
|
props: ['submission'],
|
|
components: { DocumentIcon, StudentSubmissionDocument },
|
|
|
|
computed: {
|
|
name() {
|
|
return this.submission && this.submission.student
|
|
? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
|
|
},
|
|
},
|
|
filters: {
|
|
trimToLength: function(text, numberOfChars) {
|
|
if (!text) {
|
|
return '';
|
|
}
|
|
if (text.length <= numberOfChars) {
|
|
return text;
|
|
}
|
|
const index = text.indexOf(' ', numberOfChars - 1);
|
|
if (index === -1) {
|
|
return text;
|
|
}
|
|
return `${text.substring(0, index)}…`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_functions.scss";
|
|
|
|
.student-submission {
|
|
|
|
&__student-name {
|
|
font-size: toRem(17px);
|
|
font-weight: 800;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__entry {
|
|
font-size: toRem(14px);
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
.entry-document {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.entry {
|
|
&__text {
|
|
color: $color-silver-dark;
|
|
&--final {
|
|
color: $color-charcoal-dark;
|
|
}
|
|
}
|
|
}
|
|
</style>
|