114 lines
3.5 KiB
Vue
114 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import type { LearningUnitSummary } from "@/services/selfEvaluationFeedback";
|
|
import SmileyCell from "@/components/selfEvaluationFeedback/SmileyCell.vue";
|
|
|
|
const props = defineProps<{
|
|
summary: LearningUnitSummary;
|
|
}>();
|
|
|
|
const hasFeedbackReceived = computed(() => {
|
|
return props.summary.feedback_assessment?.submitted_by_provider ?? false;
|
|
});
|
|
|
|
const feedbackProviderAvatar = computed(() => {
|
|
return props.summary.feedback_assessment?.provider_user.avatar_url ?? "";
|
|
});
|
|
|
|
const feedbackProviderName = computed(() => {
|
|
if (!props.summary.feedback_assessment?.provider_user) {
|
|
return "";
|
|
} else {
|
|
return `${props.summary.feedback_assessment.provider_user.first_name} ${props.summary.feedback_assessment.provider_user.last_name}`;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white" data-cy>
|
|
<!-- Top Row -->
|
|
<div class="flex items-center justify-between border-b-2 border-gray-200 p-4">
|
|
<div class="flex flex-col">
|
|
<b>{{ props.summary.title }}</b>
|
|
<span>Circle «{{ props.summary.circle_title }}»</span>
|
|
</div>
|
|
<span class="underline">
|
|
<router-link
|
|
:to="props.summary.detail_url"
|
|
:data-cy="`self-eval-${summary.id}-detail-url`"
|
|
>
|
|
{{ $t("a.Selbsteinschätzung anschauen") }}
|
|
</router-link>
|
|
</span>
|
|
</div>
|
|
<div class="ml-4 mr-4">
|
|
<!-- Self Assessment Row-->
|
|
<div class="flex pb-2 pt-2">
|
|
<div class="w-1/2">
|
|
{{ $t("a.Deine Selbsteinschätzung") }}
|
|
</div>
|
|
<div class="cell">
|
|
<SmileyCell
|
|
:count="props.summary.self_assessment.counts.pass"
|
|
:cypress-identifier="`self-eval-${props.summary.id}-pass`"
|
|
smiley="it-icon-smiley-happy"
|
|
/>
|
|
</div>
|
|
<div class="cell">
|
|
<SmileyCell
|
|
:count="props.summary.self_assessment.counts.fail"
|
|
:cypress-identifier="`self-eval-${props.summary.id}-fail`"
|
|
smiley="it-icon-smiley-thinking"
|
|
/>
|
|
</div>
|
|
<div class="cell">
|
|
<SmileyCell
|
|
:count="props.summary.self_assessment.counts.unknown"
|
|
:cypress-identifier="`self-eval-${props.summary.id}-unknown`"
|
|
smiley="it-icon-smiley-neutral"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- Feedback Assessment Row -->
|
|
<div v-if="hasFeedbackReceived" class="border-t-2 border-gray-200">
|
|
<div class="flex pb-2 pt-2">
|
|
<div class="flex w-1/2 items-center">
|
|
<span>
|
|
{{
|
|
$t("a.Fremdeinschätzung von FEEDBACK_PROVIDER_NAME", {
|
|
FEEDBACK_PROVIDER_NAME: feedbackProviderName,
|
|
})
|
|
}}
|
|
</span>
|
|
<img class="ml-2 h-7 w-7 rounded-full" :src="feedbackProviderAvatar" />
|
|
</div>
|
|
<div class="cell">
|
|
<SmileyCell
|
|
:count="props.summary.feedback_assessment?.counts.pass ?? 0"
|
|
smiley="it-icon-smiley-happy"
|
|
/>
|
|
</div>
|
|
<div class="cell">
|
|
<SmileyCell
|
|
:count="props.summary.feedback_assessment?.counts.fail ?? 0"
|
|
smiley="it-icon-smiley-thinking"
|
|
/>
|
|
</div>
|
|
<div class="cell">
|
|
<SmileyCell
|
|
:count="props.summary.feedback_assessment?.counts.unknown ?? 0"
|
|
smiley="it-icon-smiley-neutral"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss" scoped>
|
|
.cell {
|
|
@apply w-12;
|
|
}
|
|
</style>
|