103 lines
2.1 KiB
Vue
103 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>{{ text }}</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"
|
|
>
|
|
{{ feedback }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument.vue';
|
|
|
|
export default {
|
|
props: ['submission'],
|
|
components: {
|
|
StudentSubmissionDocument,
|
|
},
|
|
|
|
computed: {
|
|
text() {
|
|
return this.trimToLength(this.submission.text, 50);
|
|
},
|
|
feedback() {
|
|
return this.trimToLength(this.submission.submissionFeedback.text, 50);
|
|
},
|
|
name() {
|
|
return this.submission && this.submission.student
|
|
? `${this.submission.student.firstName} ${this.submission.student.lastName}`
|
|
: '';
|
|
},
|
|
},
|
|
methods: {
|
|
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/helpers';
|
|
|
|
.student-submission {
|
|
@include table-row;
|
|
|
|
&__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>
|