107 lines
3.7 KiB
Vue
107 lines
3.7 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";
|
|
import { ref, type Ref } from "vue";
|
|
import { exportDataAsXls } from "@/utils/export";
|
|
import { exportFeedback } from "@/services/dashboard";
|
|
import { useUserStore } from "@/stores/user";
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const props = defineProps<{
|
|
courseStatistics: CourseStatisticsType;
|
|
courseSessionName: (sessionId: string) => string;
|
|
circleMeta: (circleId: string) => StatisticsCircleDataType;
|
|
}>();
|
|
|
|
const statisticFilter: Ref<typeof StatisticFilterList | null> = ref(null);
|
|
const userStore = useUserStore();
|
|
|
|
async function exportData() {
|
|
if (!statisticFilter.value) {
|
|
return;
|
|
}
|
|
const filteredItems = statisticFilter.value.getFilteredItems();
|
|
await exportDataAsXls(filteredItems, exportFeedback);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<div class="mb-10 flex items-center justify-between">
|
|
<h3>{{ $t("a.Feedback Teilnehmer") }}</h3>
|
|
<button
|
|
v-if="userStore.course_session_experts.length > 0"
|
|
class="flex"
|
|
data-cy="export-button"
|
|
@click="exportData"
|
|
>
|
|
<it-icon-export></it-icon-export>
|
|
<span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
|
|
</button>
|
|
</div>
|
|
<div v-if="courseStatistics?.feedback_responses.records" class="mt-8 bg-white">
|
|
<StatisticFilterList
|
|
ref="statisticFilter"
|
|
: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>
|