Refactor frontend

client/src/components/dashboard/CoursePanel.vue

@@ -96,7 +96,9 @@ function hasActionButton(): boolean {
           </a>
         </div>
         <p>
-          <span class="rounded bg-gray-300 px-2 py-1">{{ courseConfig.role_key }}</span>
+          <span class="rounded bg-gray-300 px-2 py-1">
+            {{ $t(courseConfig.role_key) }}
+          </span>
           <router-link
             v-if="courseConfig.has_preview"
             :to="getLearningPathUrl(courseConfig.course_slug)"

client/src/composables.ts

@@ -1,7 +1,12 @@
 import { useCSRFFetch } from "@/fetchHelpers";
 import type { CourseStatisticsType } from "@/gql/graphql";
 import { graphqlClient } from "@/graphql/client";
-import { COURSE_QUERY, COURSE_SESSION_DETAIL_QUERY } from "@/graphql/queries";
+import {
+  COMPETENCE_NAVI_CERTIFICATE_FOR_USER_QUERY,
+  COMPETENCE_NAVI_CERTIFICATE_QUERY,
+  COURSE_QUERY,
+  COURSE_SESSION_DETAIL_QUERY,
+} from "@/graphql/queries";
 import {
   circleFlatChildren,
   circleFlatLearningContents,
@@ -656,3 +661,29 @@ export function useCourseStatisticsv2(courseSlug: string) {
     circleMeta,
   };
 }
+
+export function useCertificateQuery(userId: string | undefined, courseSlug: string) {
+  const certificatesQuery = (() => {
+    const courseSession = useCurrentCourseSession();
+    if (userId) {
+      return useQuery({
+        query: COMPETENCE_NAVI_CERTIFICATE_FOR_USER_QUERY,
+        variables: {
+          courseSlug: courseSlug,
+          courseSessionId: courseSession.value.id,
+          userId: userId,
+        },
+      });
+    } else {
+      return useQuery({
+        query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
+        variables: {
+          courseSlug: courseSlug,
+          courseSessionId: courseSession.value.id,
+        },
+      });
+    }
+  })();
+
+  return { certificatesQuery };
+}

client/src/pages/competence/CompetenceCertificateDetailPage.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
 import log from "loglevel";
-import {
-  COMPETENCE_NAVI_CERTIFICATE_FOR_USER_QUERY,
-  COMPETENCE_NAVI_CERTIFICATE_QUERY,
-} from "@/graphql/queries";
-import { useQuery } from "@urql/vue";
 import { computed, onMounted } from "vue";
 import type { CompetenceCertificate } from "@/types";
-import { useCurrentCourseSession } from "@/composables";
+import { useCertificateQuery } from "@/composables";
 import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
-import {
+import { getCertificates } from "@/services/competence";
-  isCompetenceCertificateForUserQueryQuery,
-  isCompetenceCertificateQueryQuery,
-} from "@/services/competence";
 
 const props = defineProps<{
   courseSlug: string;
@@ -22,53 +14,23 @@ const props = defineProps<{
 
 log.debug("CompetenceCertificateDetailPage setup", props);
 
-const courseSession = useCurrentCourseSession();
+const certificatesQuery = useCertificateQuery(
-
+  props.userId,
-const certificatesQuery = (() => {
+  props.courseSlug
-  if (props.userId) {
+).certificatesQuery;
-    return useQuery({
-      query: COMPETENCE_NAVI_CERTIFICATE_FOR_USER_QUERY,
-      variables: {
-        courseSlug: props.courseSlug,
-        courseSessionId: courseSession.value.id,
-        userId: props.userId,
-      },
-    });
-  } else {
-    return useQuery({
-      query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
-      variables: {
-        courseSlug: props.courseSlug,
-        courseSessionId: courseSession.value.id,
-      },
-    });
-  }
-})();
 
 const certificate = computed(() => {
-  const data = certificatesQuery.data.value;
+  const certificates = getCertificates(
-  if (!data) {
+    certificatesQuery.data.value,
-    return null;
+    props.userId ?? null
-  }
+  );
 
-  let certificate;
+  if (!certificates) {
-
-  if (props.userId && isCompetenceCertificateForUserQueryQuery(data)) {
-    certificate = data.competence_certificate_list_for_user;
-  } else if (isCompetenceCertificateQueryQuery(data)) {
-    certificate = data.competence_certificate_list;
-  } else {
-    // Handle case where data does not match expected types
-    console.error("Data structure is not recognized!");
-    return null;
-  }
-
-  if (!certificate) {
     return null;
   }
 
   return (
-    (certificate.competence_certificates as unknown as CompetenceCertificate[]) ?? []
+    (certificates.competence_certificates as unknown as CompetenceCertificate[]) ?? []
   ).find((cc) => cc.slug.endsWith(props.certificateSlug));
 });
 

client/src/pages/competence/CompetenceCertificateListPage.vue

@@ -1,23 +1,15 @@
 <script setup lang="ts">
 import log from "loglevel";
-import {
-  COMPETENCE_NAVI_CERTIFICATE_FOR_USER_QUERY,
-  COMPETENCE_NAVI_CERTIFICATE_QUERY,
-} from "@/graphql/queries";
-import { useQuery } from "@urql/vue";
 import { computed, onMounted } from "vue";
 import type { CompetenceCertificate } from "@/types";
-import { useCurrentCourseSession } from "@/composables";
+import { useCertificateQuery } from "@/composables";
 import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
 import {
   assignmentsMaxEvaluationPoints,
   assignmentsUserPoints,
 } from "@/pages/competence/utils";
 import { useRoute } from "vue-router";
-import {
+import { getCertificates } from "@/services/competence";
-  isCompetenceCertificateForUserQueryQuery,
-  isCompetenceCertificateQueryQuery,
-} from "@/services/competence";
 
 const props = defineProps<{
   courseSlug: string;
@@ -26,50 +18,25 @@ const props = defineProps<{
 
 log.debug("CompetenceCertificateListPage setup", props);
 
-const courseSession = useCurrentCourseSession();
 const route = useRoute();
 
-const certificatesQuery = (() => {
+const certificatesQuery = useCertificateQuery(
-  if (props.userId) {
+  props.userId,
-    return useQuery({
+  props.courseSlug
-      query: COMPETENCE_NAVI_CERTIFICATE_FOR_USER_QUERY,
+).certificatesQuery;
-      variables: {
-        courseSlug: props.courseSlug,
-        courseSessionId: courseSession.value.id,
-        userId: props.userId,
-      },
-    });
-  } else {
-    return useQuery({
-      query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
-      variables: {
-        courseSlug: props.courseSlug,
-        courseSessionId: courseSession.value.id,
-      },
-    });
-  }
-})();
 
 const competenceCertificates = computed(() => {
-  const data = certificatesQuery.data.value;
+  const certificates = getCertificates(
-  if (!data) {
+    certificatesQuery.data.value,
-    return [];
+    props.userId ?? null
-  }
+  );
 
-  let certificate;
+  if (!certificates) {
-
+    return null;
-  if (props.userId && isCompetenceCertificateForUserQueryQuery(data)) {
-    certificate = data.competence_certificate_list_for_user;
-  } else if (isCompetenceCertificateQueryQuery(data)) {
-    certificate = data.competence_certificate_list;
-  } else {
-    // Handle case where data does not match expected types
-    console.error("Data structure is not recognized!");
-    return [];
   }
 
   return (
-    (certificate?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
+    (certificates?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
   );
 });
 
@@ -108,7 +75,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="container-large">
+  <div v-if="assignments" class="container-large">
     <h2 class="mb-4 lg:py-4">{{ $t("a.Kompetenznachweise") }}</h2>
 
     <div class="mb-4 bg-white p-8" data-cy="certificate-total-points-text">

client/src/services/competence.ts

@@ -1,5 +1,6 @@
 import type {
   CompetenceCertificateForUserQueryQuery,
+  CompetenceCertificateListObjectType,
   CompetenceCertificateQueryQuery,
 } from "@/gql/graphql";
 import type { PerformanceCriteria } from "@/types";
@@ -39,3 +40,24 @@ export function isCompetenceCertificateQueryQuery(
     (data as CompetenceCertificateQueryQuery).competence_certificate_list !== undefined
   );
 }
+
+export function getCertificates(
+  data: any,
+  userId: string | null
+): CompetenceCertificateListObjectType | null {
+  if (!data) {
+    return null;
+  }
+  let certificates = null;
+
+  if (userId && isCompetenceCertificateForUserQueryQuery(data)) {
+    certificates = data.competence_certificate_list_for_user;
+  } else if (isCompetenceCertificateQueryQuery(data)) {
+    certificates = data.competence_certificate_list;
+  } else {
+    // Handle case where data does not match expected types
+    console.error("Data structure is not recognized!");
+    return null;
+  }
+  return certificates ?? null;
+}