120 lines
4.3 KiB
Vue
120 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Assignment, Participant } from "@/services/mentorCockpit";
|
|
import { useMentorCockpit } from "@/services/mentorCockpit";
|
|
import { computed, onMounted, type Ref } from "vue";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
import log from "loglevel";
|
|
|
|
const props = defineProps<{
|
|
praxisAssignmentId: string;
|
|
}>();
|
|
|
|
const courseSession = useCurrentCourseSession();
|
|
const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
|
|
const participants = computed(() => mentorCockpitStore.summary.value?.participants);
|
|
const praxisAssignment: Ref<Assignment | null> = computed(() =>
|
|
mentorCockpitStore.getAssignmentById(props.praxisAssignmentId)
|
|
);
|
|
|
|
const getParticipantById = (id: string): Participant | null => {
|
|
return participants.value?.find((participant) => participant.id === id) || null;
|
|
};
|
|
|
|
onMounted(() => {
|
|
log.debug("MentorPraxisAssignment mounted");
|
|
mentorCockpitStore.fetchData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="praxisAssignment">
|
|
<div class="p-6">
|
|
<h2 class="mb-2">{{ $t("a.Praxisauftrag") }}: {{ praxisAssignment.title }}</h2>
|
|
<span class="text-gray-800">
|
|
Circle «{{ mentorCockpitStore.getCircleTitleById(praxisAssignment.circle_id) }}»
|
|
</span>
|
|
<template v-if="praxisAssignment.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>{{ praxisAssignment.pending_evaluations }}</span>
|
|
</div>
|
|
<span>{{ $t("a.Ergebnisse abgegeben") }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="border-t">
|
|
<div
|
|
v-for="item in praxisAssignment.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.Ergebnisse abgegeben") }}</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.Bewertung freigeben") }}</span>
|
|
</template>
|
|
</div>
|
|
<!-- Right -->
|
|
<div>
|
|
<router-link
|
|
v-if="item.status == 'SUBMITTED'"
|
|
class="btn-primary"
|
|
:to="item.url"
|
|
>
|
|
{{ $t("a.Ergebnis bewerten") }}
|
|
</router-link>
|
|
<router-link
|
|
v-else-if="item.status == 'EVALUATED'"
|
|
class="underline"
|
|
:to="item.url"
|
|
>
|
|
{{ $t("a.Bewertung ansehen") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|