106 lines
3.6 KiB
Vue
106 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Assignment } from "@/services/learningMentees";
|
|
import { useLearningMentees } from "@/services/learningMentees";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { computed, type Ref, ref } from "vue";
|
|
import PraxisAssignmentItem from "@/components/learningMentor/PraxisAssignmentItem.vue";
|
|
import { useTranslation } from "i18next-vue";
|
|
import SelfAssignmentFeedbackAssignmentItem from "@/components/learningMentor/SelfAssignmentFeedbackAssignmentItem.vue";
|
|
|
|
const { t } = useTranslation();
|
|
const courseSession = useCurrentCourseSession();
|
|
|
|
const learningMentees = useLearningMentees(courseSession.value.id);
|
|
const summary = learningMentees.summary;
|
|
|
|
const statusFilterValue = ref({ name: t("a.Zu erledigen"), id: "_todo" });
|
|
|
|
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>
|
|
<template v-if="summary">
|
|
<h2 class="heading-2 mb-6 mt-6">{{ t("a.Das wurde mit dir geteilt") }}</h2>
|
|
<div class="flex flex-col bg-white pb-5 pt-1">
|
|
<div class="flex flex-col lg:flex-row lg:space-x-2">
|
|
<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-if="filteredAssignments.length > 0">
|
|
<template v-for="item in filteredAssignments" :key="item.id">
|
|
<PraxisAssignmentItem
|
|
v-if="item.type === 'praxis_assignment'"
|
|
:circle-title="learningMentees.getCircleTitleById(item.circle_id)"
|
|
:pending-tasks="item.pending_evaluations"
|
|
:task-link="{
|
|
name: 'learningMentorPraxisAssignments',
|
|
params: { praxisAssignmentId: item.id },
|
|
}"
|
|
:task-title="item.title"
|
|
/>
|
|
<SelfAssignmentFeedbackAssignmentItem
|
|
v-else-if="item.type === 'self_evaluation_feedback'"
|
|
:circle-title="learningMentees.getCircleTitleById(item.circle_id)"
|
|
:pending-tasks="item.pending_evaluations"
|
|
:task-link="{
|
|
name: 'learningMentorSelfEvaluationFeedbackAssignments',
|
|
params: { learningUnitId: item.id },
|
|
}"
|
|
:task-title="item.title"
|
|
/>
|
|
</template>
|
|
</template>
|
|
<div v-else class="mx-5 flex flex-row items-center bg-green-200 pl-2">
|
|
<it-icon-check class="it-icon"></it-icon-check>
|
|
<p class="py-4 text-base">{{ $t("a.Du hast alles erledigt.") }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|