Refactor common code into composable

client/src/composables.ts

@@ -32,6 +32,7 @@ import { useUserStore } from "@/stores/user";
 import type {
   ActionCompetence,
   CircleType,
+  CompetenceCertificate,
   Course,
   CourseCompletion,
   CourseCompletionStatus,
@@ -52,6 +53,8 @@ import log from "loglevel";
 import type { ComputedRef, Ref } from "vue";
 import { computed, onMounted, ref, watchEffect } from "vue";
 import { useRouter, type RouteLocationRaw } from "vue-router";
+import { getCertificates } from "./services/competence";
+import { mergeCompetenceCertificates } from "./pages/competence/utils";
 
 export function useCurrentCourseSession() {
   /**
@@ -746,3 +749,30 @@ export function useVVByLink() {
 
   return { href };
 }
+
+export function useAllCompetenceCertificates(
+  userId: string | undefined,
+  courseSlug: string
+) {
+  const courseSessionsStore = useCourseSessionsStore();
+  const certificateQueries = courseSessionsStore.allCourseSessions.map(
+    (courseSession) => {
+      return useCertificateQuery(userId, courseSlug, courseSession).certificatesQuery;
+    }
+  );
+
+  const competenceCertificatesPerCs = computed(() =>
+    certificateQueries.map((query) => {
+      return getCertificates(query.data.value, userId ?? null)
+        ?.competence_certificates as unknown as CompetenceCertificate[];
+    })
+  );
+  const isLoaded = computed(() => !certificateQueries.some((q) => q.fetching.value));
+  const competenceCertificates = computed(() =>
+    mergeCompetenceCertificates(competenceCertificatesPerCs.value.flat())
+  );
+  return {
+    competenceCertificates,
+    isLoaded,
+  };
+}

client/src/pages/competence/CompetenceCertificateDetailPage.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { computed } from "vue";
-import type { CompetenceCertificate } from "@/types";
+import { useAllCompetenceCertificates } from "@/composables";
-import { useCertificateQuery } from "@/composables";
 import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
-import { getCertificates } from "@/services/competence";
 import { getPreviousRoute } from "@/router/history";
-import { mergeCompetenceCertificates } from "./utils";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-
 const props = defineProps<{
   courseSlug: string;
   certificateSlug: string;
@@ -17,24 +12,19 @@ const props = defineProps<{
 
 log.debug("CompetenceCertificateDetailPage setup", props);
 
-const store = useCourseSessionsStore();
+const { competenceCertificates } = useAllCompetenceCertificates(
-const certificateQueries = store.allCourseSessions.map((courseSession) => {
+  props.userId,
-  return useCertificateQuery(props.userId, props.courseSlug, courseSession)
+  props.courseSlug
-    .certificatesQuery;
+);
-});
 
 const certificate = computed(() => {
-  const competenceCertificatesPerCs = certificateQueries.map((query) => {
+  if (!competenceCertificates) {
-    return getCertificates(query.data.value, props.userId!)
-      ?.competence_certificates as unknown as CompetenceCertificate[];
-  });
-  const certificates = mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
-
-  if (!certificates) {
     return null;
   }
 
-  return certificates.find((cc) => cc.slug.endsWith(props.certificateSlug));
+  return competenceCertificates.value.find((cc) =>
+    cc.slug.endsWith(props.certificateSlug)
+  );
 });
 </script>
 

client/src/pages/competence/CompetenceCertificateListPage.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { computed, onMounted } from "vue";
-import type { CompetenceCertificate } from "@/types";
+import { useAllCompetenceCertificates } from "@/composables";
-import { useCertificateQuery } from "@/composables";
 import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
 import {
   assignmentsUserPoints,
   calcCompetencesTotalGrade,
-  mergeCompetenceCertificates,
 } from "@/pages/competence/utils";
 import { useRoute } from "vue-router";
-import { getCertificates } from "@/services/competence";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-
 const props = defineProps<{
   courseSlug: string;
   userId?: string;
@@ -22,30 +17,17 @@ log.debug("CompetenceCertificateListPage setup", props);
 
 const route = useRoute();
 
-const store = useCourseSessionsStore();
+const { competenceCertificates } = useAllCompetenceCertificates(
-console.log(
+  props.userId,
-  `Loading competence certificates from ${store.allCourseSessions.length} course sessions:`,
+  props.courseSlug
-  store.allCourseSessions.map((cs) => cs.title)
 );
-const certificateQueries = store.allCourseSessions.map((courseSession) => {
-  return useCertificateQuery(props.userId, props.courseSlug, courseSession)
-    .certificatesQuery;
-});
-
-const mergedCertificates = computed(() => {
-  const competenceCertificatesPerCs = certificateQueries.map((query) => {
-    return getCertificates(query.data.value, props.userId ?? null)
-      ?.competence_certificates as unknown as CompetenceCertificate[];
-  });
-  return mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
-});
 
 const assignments = computed(() => {
-  return mergedCertificates?.value?.flatMap((cc) => cc.assignments);
+  return competenceCertificates?.value.flatMap((cc) => cc.assignments);
 });
 
 const totalGrade = computed(() => {
-  return calcCompetencesTotalGrade(mergedCertificates.value ?? []);
+  return calcCompetencesTotalGrade(competenceCertificates.value ?? []);
 });
 
 const userPointsEvaluatedAssignments = computed(() => {
@@ -102,7 +84,7 @@ onMounted(async () => {
     </div>
 
     <div
-      v-for="competenceCertificate in mergedCertificates"
+      v-for="competenceCertificate in competenceCertificates"
       :key="competenceCertificate.id"
     >
       <CompetenceCertificateComponent

client/src/pages/competence/CompetenceIndexPage.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { computed } from "vue";
-import type { CompetenceCertificate } from "@/types";
+import { useAllCompetenceCertificates, useCurrentCourseSession } from "@/composables";
-import { useCertificateQuery, useCurrentCourseSession } from "@/composables";
 import {
   assignmentsUserPoints,
   calcCompetenceCertificateGrade,
   calcCompetencesTotalGrade,
   competenceCertificateProgressStatusCount,
-  mergeCompetenceCertificates,
 } from "@/pages/competence/utils";
 import ItProgress from "@/components/ui/ItProgress.vue";
 import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
 import { useUserStore } from "@/stores/user";
 import { useRouter } from "vue-router";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-import { getCertificates } from "@/services/competence";
 
 const props = defineProps<{
   courseSlug: string;
@@ -23,27 +19,13 @@ const props = defineProps<{
 
 log.debug("CompetenceIndexPage setup", props);
 
-const store = useCourseSessionsStore();
+const { competenceCertificates, isLoaded } = useAllCompetenceCertificates(
-console.log(
+  undefined,
-  `Loading competence certificates from ${store.allCourseSessions.length} course sessions:`,
+  props.courseSlug
-  store.allCourseSessions.map((cs) => cs.title)
 );
-const certificateQueries = store.allCourseSessions.map((courseSession) => {
-  return useCertificateQuery(undefined, props.courseSlug, courseSession)
-    .certificatesQuery;
-});
-
-const mergedCertificates = computed(() => {
-  const competenceCertificatesPerCs = certificateQueries.map((query) => {
-    return getCertificates(query.data.value, null)
-      ?.competence_certificates as unknown as CompetenceCertificate[];
-  });
-
-  return mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
-});
 
 const allAssignments = computed(() => {
-  return mergedCertificates.value.flatMap((cc) => cc.assignments);
+  return competenceCertificates.value.flatMap((cc) => cc.assignments);
 });
 
 const userPointsEvaluatedAssignments = computed(() => {
@@ -52,8 +34,6 @@ const userPointsEvaluatedAssignments = computed(() => {
 
 const currentCourseSession = useCurrentCourseSession();
 
-const isLoaded = computed(() => !certificateQueries.some((q) => q.fetching.value));
-
 const router = useRouter();
 </script>
 
@@ -71,7 +51,7 @@ const router = useRouter();
         <div v-if="userPointsEvaluatedAssignments > 0">
           {{ $t("a.Erfahrungsnote üK") }}:
           <span class="font-bold">
-            {{ calcCompetencesTotalGrade(mergedCertificates ?? []) }}
+            {{ calcCompetencesTotalGrade(competenceCertificates ?? []) }}
           </span>
 
           <span class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2">
@@ -86,7 +66,7 @@ const router = useRouter();
       <div>
         <div class="mt-4">
           <div
-            v-for="certificate in mergedCertificates"
+            v-for="certificate in competenceCertificates"
             :key="certificate.id"
             class="flex flex-col justify-between py-4 lg:flex-row lg:items-center"
             :data-cy="`certificate-${certificate.slug}`"