vbv/client/src/pages/dashboard/statistic/FeedbackList.vue

82 lines
2.9 KiB
Vue

<script setup lang="ts">
import type {
CourseStatisticsType,
FeedbackStatisticsRecordType,
PresenceRecordStatisticsType,
StatisticsCircleDataType,
} from "@/gql/graphql";
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
import { getBlendedColorForRating } from "@/utils/ratingToColor";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
courseStatistics: CourseStatisticsType;
courseSessionName: (sessionId: string) => string;
circleMeta: (circleId: string) => StatisticsCircleDataType;
}>();
</script>
<template>
<main>
<div class="mb-10 flex items-center justify-between">
<h3>{{ $t("a.Feedback Teilnehmer") }}</h3>
</div>
<div v-if="courseStatistics?.feedback_responses.records" class="mt-8 bg-white">
<StatisticFilterList
:course-session-properties="courseStatistics.course_session_properties"
:items="courseStatistics.feedback_responses.records"
>
<template #default="{ item }">
<div class="flex justify-between">
<div>
<h4 class="font-bold">
Feedback: Circle «{{ circleMeta(item.circle_id)?.name }}»
</h4>
<div>
{{ $t("a.Durchfuehrung") }} «{{
courseSessionName(item.course_session_id)
}}» - Trainer: {{ (item as FeedbackStatisticsRecordType).experts }}
</div>
</div>
<div class="w-80">
<div class="mb-4 flex items-center space-x-2">
<div
class="rounded px-2 py-1"
:style="{ backgroundColor: getBlendedColorForRating((item as FeedbackStatisticsRecordType).satisfaction_average) }"
>
<i18next :translation="$t('a.{AVG} von {MAX}')">
<template #AVG>
<span class="font-bold">
{{
(
item as FeedbackStatisticsRecordType
).satisfaction_average.toFixed(1)
}}
</span>
</template>
<template #MAX>
<span>
{{ (item as FeedbackStatisticsRecordType).satisfaction_max }}
</span>
</template>
</i18next>
</div>
<span>
{{ $t("a.Allgemeine Zufriedenheit") }}
</span>
</div>
<router-link
class="underline"
target="_blank"
:to="(item as PresenceRecordStatisticsType).details_url"
>
{{ $t("a.Details anschauen") }}
</router-link>
</div>
</div>
</template>
</StatisticFilterList>
</div>
</main>
</template>