vbv/client/src/pages/cockpit/cockpitPage/mentor/MentorOverviewPage.vue

97 lines
3.0 KiB
Vue

<script setup lang="ts">
import type { Assignment } from "@/services/mentorCockpit";
import { useMentorCockpit } from "@/services/mentorCockpit";
import { useCurrentCourseSession } from "@/composables";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { computed, type Ref, ref } from "vue";
import PraxisAssignmentItem from "@/components/cockpit/mentor/PraxisAssignmentItem.vue";
import { useTranslation } from "i18next-vue";
import SelfAssignmentFeedbackAssignmentItem from "@/components/cockpit/mentor/SelfAssignmentFeedbackAssignmentItem.vue";
const { t } = useTranslation();
const courseSession = useCurrentCourseSession();
const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
const summary = mentorCockpitStore.summary;
const statusFilterValue = ref({ name: t("Alle"), id: "_all" });
const statusFilter = ref([
{ name: t("Alle"), id: "_all" },
{ name: t("a.Zu erledigen"), id: "todo" },
]);
const circleFilterValue = ref({ name: t("a.AlleCircle"), id: "_all" });
const circleFilter = computed(() => {
if (!summary.value) return [];
return [
{ name: t("a.AlleCircle"), id: "_all" },
...summary.value.circles.map((circle) => ({
name: `Circle: ${circle.title}`,
id: circle.id,
})),
];
});
const filteredAssignments: Ref<Assignment[]> = computed(() => {
if (!summary.value) return [];
let filtered = summary.value.assignments;
if (statusFilterValue.value.id !== "_all") {
filtered = filtered.filter((item) => item.pending_evaluations > 0);
}
if (circleFilterValue.value.id !== "_all") {
filtered = filtered.filter(
(item) => item.circle_id === String(circleFilterValue.value.id)
);
}
return filtered;
});
</script>
<template>
<div v-if="summary" class="bg-white">
<div class="flex flex-col space-x-2 lg:flex-row">
<ItDropdownSelect
v-model="statusFilterValue"
class="min-w-[10rem]"
:items="statusFilter"
borderless
></ItDropdownSelect>
<ItDropdownSelect
v-model="circleFilterValue"
class="min-w-[18rem]"
:items="circleFilter"
borderless
></ItDropdownSelect>
</div>
<template v-for="item in filteredAssignments" :key="item.id">
<PraxisAssignmentItem
v-if="item.type === 'praxis_assignment'"
:circle-title="mentorCockpitStore.getCircleTitleById(item.circle_id)"
:pending-tasks="item.pending_evaluations"
:task-link="{
name: 'mentorCockpitPraxisAssignments',
params: { praxisAssignmentId: item.id },
}"
:task-title="item.title"
/>
<SelfAssignmentFeedbackAssignmentItem
v-else-if="item.type === 'self_evaluation_feedback'"
:circle-title="mentorCockpitStore.getCircleTitleById(item.circle_id)"
:pending-tasks="item.pending_evaluations"
:task-link="{
name: 'mentorCockpitSelfEvaluationFeedbackAssignments',
params: { learningUnitId: item.id },
}"
:task-title="item.title"
/>
</template>
</div>
</template>