vbv/client/src/pages/competence/SelfEvaluationAndFeedbackPa...

70 lines
2.1 KiB
Vue

<script setup lang="ts">
import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
import { useCurrentCourseSession } from "@/composables";
import { computed, ref } from "vue";
import FeedbackByLearningUnitSummary from "@/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { t } from "i18next";
const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
useCurrentCourseSession().value.id
);
const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
const selectedCircle = ref({ name: t("a.AlleCircle"), id: "_all" });
const circles = computed(() => [
{ name: t("a.AlleCircle"), id: "_all" },
...selfEvaluationFeedbackSummaries.circles.value.map((circle) => ({
name: `Circle: ${circle.title}`,
id: circle.id,
})),
]);
const summaries = computed(() => {
if (selectedCircle.value.id === "_all") {
return selfEvaluationFeedbackSummaries.summaries.value;
}
return selfEvaluationFeedbackSummaries.summaries.value.filter(
(summary) => summary.circle_id === selectedCircle.value.id
);
});
const headerTitle = computed(() => {
const canHaveFeedback =
selfEvaluationFeedbackSummaries.aggregates.value?.feedback_assessment_visible ??
false;
if (canHaveFeedback) {
return t("a.Selbst- und Fremdeinschätzungen");
} else {
return t("a.Selbsteinschätzungen");
}
});
</script>
<template>
<div v-if="isLoaded">
<div class="container-large">
<div class="col flex items-center justify-between pb-4">
<h2 class="py-4">{{ headerTitle }}</h2>
<ItDropdownSelect
v-model="selectedCircle"
class="text-bold w-24 min-w-[18rem] border-2 border-gray-300"
:items="circles"
borderless
></ItDropdownSelect>
</div>
<div class="space-y-3">
<FeedbackByLearningUnitSummary
v-for="summary in summaries"
:key="summary.id"
:summary="summary"
/>
</div>
</div>
</div>
</template>
<style scoped></style>