90 lines
2.1 KiB
Vue
90 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
|
|
class="entry__document"
|
|
v-if="submission.document && submission.document.length > 0">
|
|
<student-submission-document
|
|
:document="submission.document"
|
|
class="entry-document"/>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="student-submission__feedback entry"
|
|
v-if="submission.submissionFeedback">
|
|
<p
|
|
:class="{'entry__text--final': submission.submissionFeedback.final}"
|
|
class="entry__text">{{ submission.submissionFeedback.text | trimToLength(50) }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
|
|
|
|
export default {
|
|
props: ['submission'],
|
|
components: {
|
|
StudentSubmissionDocument
|
|
},
|
|
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)}…`;
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
name() {
|
|
return this.submission && this.submission.student
|
|
? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
|
|
},
|
|
},
|
|
};
|
|
</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>
|