132 lines
4.6 KiB
Vue
132 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Assignment, Participant } from "@/services/learningMentees";
|
|
import { useLearningMentees } from "@/services/learningMentees";
|
|
import { computed, type Ref } from "vue";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
|
|
const props = defineProps<{
|
|
learningUnitId: string;
|
|
}>();
|
|
|
|
const courseSession = useCurrentCourseSession();
|
|
const learningMentees = useLearningMentees(courseSession.value.id);
|
|
|
|
const selfEvaluationFeedback: Ref<Assignment | null> = computed(() =>
|
|
learningMentees.getAssignmentById(props.learningUnitId)
|
|
);
|
|
|
|
const getParticipantById = (id: string): Participant | null => {
|
|
if (learningMentees.summary.value?.participants) {
|
|
const found = learningMentees.summary.value.participants.find(
|
|
(item) => item.id === id
|
|
);
|
|
return found || null;
|
|
}
|
|
return null;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="selfEvaluationFeedback">
|
|
<div class="p-6">
|
|
<h2 class="mb-2">
|
|
{{ $t("a.Selbsteinschätzung") }}: {{ selfEvaluationFeedback.title }}
|
|
</h2>
|
|
<span class="text-gray-800">
|
|
Circle «{{ selfEvaluationFeedback.circle_name }}»
|
|
</span>
|
|
<template v-if="selfEvaluationFeedback.pending_evaluations > 0">
|
|
<div class="flex flex-row items-center space-x-2 pt-4">
|
|
<div
|
|
class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 text-sm font-bold"
|
|
>
|
|
<span>{{ selfEvaluationFeedback.pending_evaluations }}</span>
|
|
</div>
|
|
<span>{{ $t("a.Selbsteinschätzungen geteilt") }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="border-t">
|
|
<div
|
|
v-for="item in selfEvaluationFeedback.completions"
|
|
:key="item.user_id"
|
|
class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
|
|
>
|
|
<!-- Left -->
|
|
<div class="flex flex-grow flex-row items-center justify-start">
|
|
<div class="w-80">
|
|
<div class="flex items-center space-x-2">
|
|
<img
|
|
:alt="item.last_name"
|
|
class="h-11 w-11 rounded-full"
|
|
:src="
|
|
getParticipantById(item.user_id)?.avatar_url ||
|
|
'/static/avatars/myvbv-default-avatar.png'
|
|
"
|
|
/>
|
|
<div>
|
|
<div class="text-bold">
|
|
{{ getParticipantById(item.user_id)?.first_name }}
|
|
{{ getParticipantById(item.user_id)?.last_name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Center -->
|
|
<div
|
|
class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20"
|
|
>
|
|
<template v-if="item.status == 'SUBMITTED'">
|
|
<div
|
|
class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
|
|
>
|
|
<span class="flex items-center">
|
|
<it-icon-check class="h-5 w-5"></it-icon-check>
|
|
</span>
|
|
</div>
|
|
<span>{{ $t("a.Selbsteinschätzung geteilt") }}</span>
|
|
</template>
|
|
<template v-if="item.status == 'EVALUATED'">
|
|
<div
|
|
class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 bg-green-500 px-3 py-1 text-sm font-bold"
|
|
>
|
|
<span class="flex items-center">
|
|
<it-icon-check class="h-5 w-5"></it-icon-check>
|
|
</span>
|
|
</div>
|
|
<span>{{ $t("a.Fremdeinschätzung freigeben") }}</span>
|
|
</template>
|
|
</div>
|
|
<!-- Right -->
|
|
<div>
|
|
<router-link
|
|
v-if="item.status == 'SUBMITTED'"
|
|
class="btn-primary"
|
|
:to="{
|
|
name: 'mentorSelfEvaluationFeedback',
|
|
params: {
|
|
learningUnitId: learningUnitId,
|
|
},
|
|
}"
|
|
>
|
|
{{ $t("a.Fremdeinschätzung vornehmen") }}
|
|
</router-link>
|
|
<router-link
|
|
v-if="item.status == 'EVALUATED'"
|
|
class="underline"
|
|
:to="{
|
|
name: 'mentorSelfEvaluationFeedback',
|
|
params: {
|
|
learningUnitId: learningUnitId,
|
|
},
|
|
}"
|
|
>
|
|
{{ $t("a.Selbsteinschätzung anzeigen") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|