WIP: Update feedback statistics page
This commit is contained in:
parent
8cb00b0976
commit
bfdb992d60
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue