wip: Move code to composable

client/src/composables.ts

@@ -10,6 +10,7 @@ import {
 } from "@/services/circle";
 import type { DashboardDueDate, DashboardPersonType } from "@/services/dashboard";
 import {
+  courseIdForCourseSlug,
   fetchDashboardDueDates,
   fetchDashboardPersons,
   fetchStatisticData,
@@ -613,10 +614,13 @@ export function useCourseCircleProgress(circles: Ref<CircleType[] | undefined>)
   return { inProgressCirclesCount, circlesCount };
 }
 
-export function useCourseStatisticsv2(courseId: string) {
+export function useCourseStatisticsv2(courseSlug: string) {
+  const dashboardStore = useDashboardStore();
   const courseStatistics = ref<CourseStatisticsType[] | null>(null);
   const loading = ref(false);
 
+  const courseId = courseIdForCourseSlug(dashboardStore.dashboardConfigsv2, courseSlug);
+
   const fetchData = async () => {
     loading.value = true;
     try {
@@ -645,5 +649,6 @@ export function useCourseStatisticsv2(courseId: string) {
     loading,
     courseSessionName,
     circleMeta,
+    courseId,
   };
 }

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useDashboardStore } from "@/stores/dashboard";
 import type {
   AssignmentCompletionMetricsType,
   AssignmentStatisticsRecordType,
@@ -8,21 +7,14 @@ import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue"
 import { useCourseStatisticsv2 } from "@/composables";
 import { getDateString } from "@/components/dueDates/dueDatesUtils";
 import dayjs from "dayjs";
-import { courseIdForCourseSlug } from "@/services/dashboard";
 import ItProgress from "@/components/ui/ItProgress.vue";
 
 const props = defineProps<{
   courseSlug: string;
 }>();
 
-const dashboardStore = useDashboardStore();
-
-const courseId = courseIdForCourseSlug(
-  dashboardStore.dashboardConfigsv2,
-  props.courseSlug
-);
 const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(courseId);
+  useCourseStatisticsv2(props.courseSlug);
 
 const assignmentStats = (metrics: AssignmentCompletionMetricsType) => {
   if (!metrics.ranking_completed) {

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

@@ -1,25 +1,17 @@
 <script setup lang="ts">
-import { useDashboardStore } from "@/stores/dashboard";
 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";
-import { courseIdForCourseSlug } from "@/services/dashboard";
 
 const props = defineProps<{
   courseSlug: string;
 }>();
 
-const dashboardStore = useDashboardStore();
-
-const courseId = courseIdForCourseSlug(
-  dashboardStore.dashboardConfigsv2,
-  props.courseSlug
-);
 const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(courseId);
+  useCourseStatisticsv2(props.courseSlug);
 
 const attendanceStats = (present: number, total: number) => {
   return {

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

@@ -1,36 +1,20 @@
 <script setup lang="ts">
-import { useDashboardStore } from "@/stores/dashboard";
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type { CompetenceRecordStatisticsType } from "@/gql/graphql";
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
 import { useCourseStatisticsv2 } from "@/composables";
-import { courseIdForCourseSlug } from "@/services/dashboard";
 
 const props = defineProps<{
   courseSlug: string;
 }>();
 
-const dashboardStore = useDashboardStore();
-
-const courseId = courseIdForCourseSlug(
-  dashboardStore.dashboardConfigsv2,
-  props.courseSlug
-);
-
 const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(courseId);
+  useCourseStatisticsv2(props.courseSlug);
 </script>
 
 <template>
   <main v-if="!loading">
     <div class="mb-10 flex items-center justify-between">
       <h3>{{ $t("a.Selbsteinschätzung") }}</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?.competences.records" class="mt-8 bg-white">
       <StatisticFilterList

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useDashboardStore } from "@/stores/dashboard";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type {
   FeedbackStatisticsRecordType,
@@ -8,21 +7,13 @@ import type {
 import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
 import { useCourseStatisticsv2 } from "@/composables";
 import { getBlendedColorForRating } from "@/utils/ratingToColor";
-import { courseIdForCourseSlug } from "@/services/dashboard";
 
 const props = defineProps<{
   courseSlug: string;
 }>();
 
-const dashboardStore = useDashboardStore();
-
-const courseId = courseIdForCourseSlug(
-  dashboardStore.dashboardConfigsv2,
-  props.courseSlug
-);
-
 const { courseStatistics, loading, courseSessionName, circleMeta } =
-  useCourseStatisticsv2(courseId);
+  useCourseStatisticsv2(props.courseSlug);
 </script>
 
 <template>