wip: Move loading of data to parent component

client/src/composables.ts

@@ -619,10 +619,13 @@ export function useCourseStatisticsv2(courseSlug: string) {
   const courseStatistics = ref<CourseStatisticsType[] | null>(null);
   const loading = ref(false);
 
-  const courseId = courseIdForCourseSlug(dashboardStore.dashboardConfigsv2, courseSlug);
-
   const fetchData = async () => {
     loading.value = true;
+    await dashboardStore.loadDashboardDetails();
+    const courseId = courseIdForCourseSlug(
+      dashboardStore.dashboardConfigsv2,
+      courseSlug
+    );
     try {
       courseStatistics.value = await fetchStatisticData(courseId);
     } finally {
@@ -649,6 +652,5 @@ export function useCourseStatisticsv2(courseSlug: string) {
     loading,
     courseSessionName,
     circleMeta,
-    courseId,
   };
 }

client/src/pages/dashboard/statistic/AssignmentList.vue

@@ -4,18 +4,17 @@ import type {
   AssignmentStatisticsRecordType,
 } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
-import { useCourseStatisticsv2 } from "@/composables";
 import { getDateString } from "@/components/dueDates/dueDatesUtils";
 import dayjs from "dayjs";
 import ItProgress from "@/components/ui/ItProgress.vue";
 
 const props = defineProps<{
   courseSlug: string;
+  courseStatistics: any;
+  courseSessionName: any;
+  circleMeta: any;
 }>();
 
-const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(props.courseSlug);
-
 const assignmentStats = (metrics: AssignmentCompletionMetricsType) => {
   if (!metrics.ranking_completed) {
     return {
@@ -38,7 +37,7 @@ const total = (metrics: AssignmentCompletionMetricsType) => {
 </script>
 
 <template>
-  <main v-if="!loading">
+  <main>
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("a.Kompetenznachweis-Elemente") }}</h3>
     </div>

client/src/pages/dashboard/statistic/AttendanceList.vue

@@ -2,17 +2,16 @@
 import type { PresenceRecordStatisticsType } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
-import { useCourseStatisticsv2 } from "@/composables";
 import { getDateString } from "@/components/dueDates/dueDatesUtils";
 import dayjs from "dayjs";
 
 const props = defineProps<{
   courseSlug: string;
+  courseStatistics: any;
+  courseSessionName: any;
+  circleMeta: any;
 }>();
 
-const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(props.courseSlug);
-
 const attendanceStats = (present: number, total: number) => {
   return {
     SUCCESS: present,
@@ -23,7 +22,7 @@ const attendanceStats = (present: number, total: number) => {
 </script>
 
 <template>
-  <main v-if="!loading">
+  <main>
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("Anwesenheit") }}</h3>
     </div>

client/src/pages/dashboard/statistic/CompetenceList.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import type { CompetenceRecordStatisticsType } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
-import { useCourseStatisticsv2 } from "@/composables";
 
 const props = defineProps<{
   courseSlug: string;
+  courseStatistics: any;
+  courseSessionName: any;
+  circleMeta: any;
 }>();
-
-const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(props.courseSlug);
 </script>
 
 <template>
-  <main v-if="!loading">
+  <main>
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("a.Selbsteinschätzung") }}</h3>
     </div>

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

@@ -1,31 +1,23 @@
 <script setup lang="ts">
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type {
   FeedbackStatisticsRecordType,
   PresenceRecordStatisticsType,
 } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
-import { useCourseStatisticsv2 } from "@/composables";
 import { getBlendedColorForRating } from "@/utils/ratingToColor";
 
 const props = defineProps<{
   courseSlug: string;
+  courseStatistics: any;
+  courseSessionName: any;
+  circleMeta: any;
 }>();
-
-const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(props.courseSlug);
 </script>
 
 <template>
-  <main v-if="!loading">
+  <main>
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("a.Feedback Teilnehmer") }}</h3>
-      <ItDropdownSelect
-        :model-value="dashboardStore.currentDashboardConfig"
-        class="mt-4 w-full lg:mt-0 lg:w-96"
-        :items="dashboardStore.dashboardConfigs"
-        @update:model-value="dashboardStore.switchAndLoadDashboardConfig"
-      ></ItDropdownSelect>
     </div>
     <div v-if="courseStatistics?.feedback_responses.records" class="mt-8 bg-white">
       <StatisticFilterList

client/src/pages/dashboard/statistic/StatisticParentPage.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import { useDashboardStore } from "@/stores/dashboard";
-import { onMounted } from "vue";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
+import { useCourseStatisticsv2 } from "@/composables";
 
-const dashboardStore = useDashboardStore();
-dashboardStore.loading = true;
+const props = defineProps<{
+  courseSlug: string;
+}>();
 
-onMounted(async () => {
-  console.log("onMount StatisticParentPage", dashboardStore.loading);
-  await dashboardStore.loadDashboardDetails();
-});
+const { courseStatistics, loading, courseSessionName, circleMeta } =
+  useCourseStatisticsv2(props.courseSlug);
 </script>
 
 <template>
   <div class="bg-gray-200">
-    <div v-if="dashboardStore.loading" class="m-8 flex justify-center">
+    <div v-if="loading" class="m-8 flex justify-center">
       <LoadingSpinner />
     </div>
     <div v-else class="container-large flex flex-col space-y-8">
@@ -22,7 +20,11 @@ onMounted(async () => {
         <it-icon-arrow-left />
         <span>{{ $t("general.back") }}</span>
       </router-link>
-      <router-view></router-view>
+      <router-view
+        :course-statistics="courseStatistics"
+        :course-session-name="courseSessionName"
+        :circle-meta="circleMeta"
+      ></router-view>
     </div>
   </div>
 </template>