WIP: Update feedback statistics page

This commit is contained in:
Christian Cueni 2024-04-18 17:48:37 +02:00
parent 8cb00b0976
commit bfdb992d60
3 changed files with 22 additions and 13 deletions

View File

@ -7,6 +7,7 @@ const props = defineProps<{
feedbackCount: number; feedbackCount: number;
statisfactionMax: number; statisfactionMax: number;
statisfactionAvg: number; statisfactionAvg: number;
courseSlug: string;
}>(); }>();
const satisfactionColor = computed(() => { const satisfactionColor = computed(() => {
@ -15,7 +16,10 @@ const satisfactionColor = computed(() => {
</script> </script>
<template> <template>
<BaseBox :details-link="'/statistic/feedback'" data-cy="dashboard.stats.feedback"> <BaseBox
:details-link="`/statistic/${courseSlug}/feedback`"
data-cy="dashboard.stats.feedback"
>
<template #title>{{ $t("a.Feedback Teilnehmer") }}</template> <template #title>{{ $t("a.Feedback Teilnehmer") }}</template>
<template #content> <template #content>
<div class="flex items-center"> <div class="flex items-center">

View File

@ -22,7 +22,7 @@ const { courseStatistics, loading, courseSessionName, circleMeta } =
</script> </script>
<template> <template>
<main v-if="courseStatistics"> <main v-if="!loading">
<div class="mb-10 flex items-center justify-between"> <div class="mb-10 flex items-center justify-between">
<h3>{{ $t("a.Selbsteinschätzung") }}</h3> <h3>{{ $t("a.Selbsteinschätzung") }}</h3>
<ItDropdownSelect <ItDropdownSelect

View File

@ -1,27 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { useDashboardStore } from "@/stores/dashboard"; import { useDashboardStore } from "@/stores/dashboard";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { computed } from "vue";
import type { import type {
CourseStatisticsType,
FeedbackStatisticsRecordType, FeedbackStatisticsRecordType,
PresenceRecordStatisticsType, PresenceRecordStatisticsType,
} from "@/gql/graphql"; } from "@/gql/graphql";
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue"; import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
import { useCourseStatistics } from "@/composables"; import { useCourseStatisticsv2 } from "@/composables";
import { getBlendedColorForRating } from "@/utils/ratingToColor"; import { getBlendedColorForRating } from "@/utils/ratingToColor";
import { courseIdForCourseSlug } from "@/services/dashboard";
const props = defineProps<{
courseSlug: string;
}>();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const statistics = computed(() => { const courseId = courseIdForCourseSlug(
return dashboardStore.currentDashBoardData as CourseStatisticsType; dashboardStore.dashboardConfigsv2,
}); props.courseSlug
);
const { courseSessionName, circleMeta } = useCourseStatistics(); const { courseStatistics, loading, courseSessionName, circleMeta } =
useCourseStatisticsv2(courseId);
</script> </script>
<template> <template>
<main v-if="statistics"> <main v-if="!loading">
<div class="mb-10 flex items-center justify-between"> <div class="mb-10 flex items-center justify-between">
<h3>{{ $t("a.Feedback Teilnehmer") }}</h3> <h3>{{ $t("a.Feedback Teilnehmer") }}</h3>
<ItDropdownSelect <ItDropdownSelect
@ -31,10 +36,10 @@ const { courseSessionName, circleMeta } = useCourseStatistics();
@update:model-value="dashboardStore.switchAndLoadDashboardConfig" @update:model-value="dashboardStore.switchAndLoadDashboardConfig"
></ItDropdownSelect> ></ItDropdownSelect>
</div> </div>
<div v-if="statistics.feedback_responses.records" class="mt-8 bg-white"> <div v-if="courseStatistics?.feedback_responses.records" class="mt-8 bg-white">
<StatisticFilterList <StatisticFilterList
:course-session-properties="statistics.course_session_properties" :course-session-properties="courseStatistics.course_session_properties"
:items="statistics.feedback_responses.records" :items="courseStatistics.feedback_responses.records"
> >
<template #default="{ item }"> <template #default="{ item }">
<div class="flex justify-between"> <div class="flex justify-between">