WIP: Fix statistic pages

client/src/composables.ts

@@ -587,10 +587,24 @@ export function useCourseStatisticsv2(courseId: string) {
     }
   };
 
+  const courseSessionName = (courseSessionId: string) => {
+    return courseStatistics.value.course_session_properties.sessions.find(
+      (session) => session.id === courseSessionId
+    )?.name;
+  };
+
+  const circleMeta = (circleId: string) => {
+    return courseStatistics.value.course_session_properties.circles.find(
+      (circle) => circle.id === circleId
+    );
+  };
+
   onMounted(fetchData);
 
   return {
     courseStatistics,
     loading,
+    courseSessionName,
+    circleMeta,
   };
 }

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

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { useDashboardStore } from "@/stores/dashboard";
-import { onMounted, ref } from "vue";
 import type {
   AssignmentCompletionMetricsType,
   AssignmentStatisticsRecordType,
-  CourseStatisticsType,
 } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
-import { useCourseStatistics, useCourseStatisticsv2 } from "@/composables";
+import { useCourseStatisticsv2 } from "@/composables";
 import { getDateString } from "@/components/dueDates/dueDatesUtils";
 import dayjs from "dayjs";
 import { courseIdForCourseSlug } from "@/services/dashboard";
@@ -19,23 +17,12 @@ const props = defineProps<{
 
 const dashboardStore = useDashboardStore();
 
-const statistics = ref<CourseStatisticsType | null>(null);
-// const statistics = reactive<CourseStatisticsType>({
-//   course_session_properties: {
-//     sessions: [],
-//     generations: [],
-//     circles: [],
-//   },
-//   assignments: { records: [] },
-// });
-
 const courseId = courseIdForCourseSlug(
   dashboardStore.dashboardConfigsv2,
   props.courseSlug
 );
-const { courseStatistics, loading } = useCourseStatisticsv2(courseId);
-
-const { courseSessionName, circleMeta } = useCourseStatistics();
+const { courseStatistics, loading, courseSessionName, circleMeta } =
+  useCourseStatisticsv2(courseId);
 
 const assignmentStats = (metrics: AssignmentCompletionMetricsType) => {
   if (!metrics.ranking_completed) {
@@ -56,33 +43,16 @@ const assignmentStats = (metrics: AssignmentCompletionMetricsType) => {
 const total = (metrics: AssignmentCompletionMetricsType) => {
   return metrics.passed_count + metrics.failed_count + metrics.unranked_count;
 };
-
-onMounted(async () => {
-  console.log("onMount AssignmentList", courseId, props.courseSlug, statistics);
-  if (!courseId) {
-    return;
-  }
-  // statistics.value = await dashboardStore.loadStatisticsDatav2(courseId);
-  // const some = await courseStatistics.loadStatisticsDatav2(courseId);
-  // console.log("some", some.course_session_properties);
-  // statistics.value = some;
-  // console.log("other", statistics.value.course_session_properties);
-  // statistics.course_session_properties = some.course_session_properties;
-  // statistics.assignments = some.assignments;
-  // statistics.console.log(statistics.value);
-});
 </script>
 
 <template>
-  {{ loading }}
   <main v-if="!loading">
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("a.Kompetenznachweis-Elemente") }}</h3>
     </div>
     <div v-if="courseStatistics?.assignments.records" class="mt-8 bg-white">
       <StatisticFilterList
-        v-if="courseStatistics?.course_session_properties"
-        :course-session-properties="courseStatistics.course_session_properties"
+        :course-session-properties="courseStatistics?.course_session_properties"
         :items="courseStatistics.assignments.records"
       >
         <template #default="{ item }">

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { useDashboardStore } from "@/stores/dashboard";
-import { onMounted, ref } from "vue";
-import type { CourseStatisticsType, PresenceRecordStatisticsType } from "@/gql/graphql";
+import type { PresenceRecordStatisticsType } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
-import { useCourseStatistics } from "@/composables";
+import { useCourseStatisticsv2 } from "@/composables";
 import { getDateString } from "@/components/dueDates/dueDatesUtils";
 import dayjs from "dayjs";
 import { courseIdForCourseSlug } from "@/services/dashboard";
@@ -15,14 +14,12 @@ const props = defineProps<{
 
 const dashboardStore = useDashboardStore();
 
-const statistics = ref<CourseStatisticsType | null>(null);
-
 const courseId = courseIdForCourseSlug(
   dashboardStore.dashboardConfigsv2,
   props.courseSlug
 );
-
-const { courseSessionName, circleMeta } = useCourseStatistics();
+const { courseStatistics, loading, courseSessionName, circleMeta } =
+  useCourseStatisticsv2(courseId);
 
 const attendanceStats = (present: number, total: number) => {
   return {
@@ -31,22 +28,20 @@ const attendanceStats = (present: number, total: number) => {
     UNKNOWN: 0,
   };
 };
-
-onMounted(async () => {
-  console.log("onMount AttendanceList", courseId, props.courseSlug, statistics);
-  statistics.value = await dashboardStore.loadStatisticsDatav2(courseId);
-});
 </script>
 
 <template>
-  <main v-if="statistics">
+  <main v-if="!loading">
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("Anwesenheit") }}</h3>
     </div>
-    <div v-if="statistics.attendance_day_presences.records" class="mt-8 bg-white">
+    <div
+      v-if="courseStatistics?.attendance_day_presences.records"
+      class="mt-8 bg-white"
+    >
       <StatisticFilterList
-        :course-session-properties="statistics.course_session_properties"
-        :items="statistics.attendance_day_presences.records"
+        :course-session-properties="courseStatistics.course_session_properties"
+        :items="courseStatistics.attendance_day_presences.records"
       >
         <template #default="{ item }">
           <div class="flex justify-between">

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

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { useDashboardStore } from "@/stores/dashboard";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { onMounted, ref } from "vue";
 import type { CompetenceRecordStatisticsType } from "@/gql/graphql";
-import { CourseStatisticsType } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
-import { useCourseStatistics } from "@/composables";
+import { useCourseStatisticsv2 } from "@/composables";
 import { courseIdForCourseSlug } from "@/services/dashboard";
 
 const props = defineProps<{
@@ -13,22 +11,18 @@ const props = defineProps<{
 }>();
 
 const dashboardStore = useDashboardStore();
-const statistics = ref<CourseStatisticsType | null>(null);
 
 const courseId = courseIdForCourseSlug(
   dashboardStore.dashboardConfigsv2,
   props.courseSlug
 );
 
-const { courseSessionName, circleMeta } = useCourseStatistics();
-
-onMounted(async () => {
-  statistics.value = await dashboardStore.loadStatisticsDatav2(courseId);
-});
+const { courseStatistics, loading, courseSessionName, circleMeta } =
+  useCourseStatisticsv2(courseId);
 </script>
 
 <template>
-  <main v-if="statistics">
+  <main v-if="courseStatistics">
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("a.Selbsteinschätzung") }}</h3>
       <ItDropdownSelect
@@ -38,10 +32,10 @@ onMounted(async () => {
         @update:model-value="dashboardStore.switchAndLoadDashboardConfig"
       ></ItDropdownSelect>
     </div>
-    <div v-if="statistics.competences.records" class="mt-8 bg-white">
+    <div v-if="courseStatistics?.competences.records" class="mt-8 bg-white">
       <StatisticFilterList
-        :course-session-properties="statistics.course_session_properties"
-        :items="statistics.competences.records"
+        :course-session-properties="courseStatistics.course_session_properties"
+        :items="courseStatistics.competences.records"
       >
         <template #default="{ item }">
           <div class="flex justify-between">

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

@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import { useDashboardStore } from "@/stores/dashboard";
-import { computed, onMounted, watch } from "vue";
+import { onMounted } from "vue";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 
 const dashboardStore = useDashboardStore();
 dashboardStore.loading = true;
 
-const some = computed(() => {
-  return dashboardStore.loading;
-});
-
-watch(some, () => {
-  console.log("watch loading", dashboardStore.loading);
-});
-
 onMounted(async () => {
   console.log("onMount StatisticParentPage", dashboardStore.loading);
   await dashboardStore.loadDashboardDetails();