From cc2ae195c068cf9d3d2fcacc933be7ca7fb0255b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 3 Dec 2024 17:44:02 +0100
Subject: [PATCH] Refactor Certificate component, add new page and component

---
 .../CompetenceCertificateComponent.vue        | 35 +++-------------
 .../competence/CompetenceCertificateGrade.vue | 41 +++++++++++++++++++
 .../CompetenceCertificateOverviewPage.vue     | 40 ++++++++++++++++++
 3 files changed, 87 insertions(+), 29 deletions(-)
 create mode 100644 client/src/pages/competence/CompetenceCertificateGrade.vue
 create mode 100644 client/src/pages/competence/CompetenceCertificateOverviewPage.vue

diff --git a/client/src/pages/competence/CompetenceCertificateComponent.vue b/client/src/pages/competence/CompetenceCertificateComponent.vue
index 893ad19d..5feeb606 100644
--- a/client/src/pages/competence/CompetenceCertificateComponent.vue
+++ b/client/src/pages/competence/CompetenceCertificateComponent.vue
@@ -8,8 +8,9 @@ import {
   competenceCertificateProgressStatusCount,
 } from "@/pages/competence/utils";
 import type { CompetenceCertificate } from "@/types";
-import * as log from "loglevel";
+import log from "loglevel";
 import { computed } from "vue";
+import CompetenceCertificateGrade from "./CompetenceCertificateGrade.vue";
 
 log.debug("CompetenceCertificateComponent setup");
 
@@ -85,34 +86,10 @@ const showCourseSession = computed(() => {
         </h3>
       </div>
 
-      <section v-if="userPointsEvaluatedAssignments > 0">
-        <div class="flex items-center">
-          <div
-            class="py-4"
-            :class="{ 'heading-1': props.detailView, 'heading-2': !props.detailView }"
-            :data-cy="`certificate-${competenceCertificate.slug}-grade`"
-          >
-            {{ $t("a.Note") }}: {{ userGrade }}
-          </div>
-        </div>
-        <div
-          class="text-gray-900"
-          :data-cy="`certificate-${competenceCertificate.slug}-grade-percent`"
-        >
-          {{ $t("a.Ungerundete Note") }}: {{ userGradeRounded2Places }}.
-          <a
-            :href="$t('a.wegleitungUkUrl')"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="underline"
-          >
-            {{ $t("a.Wegleitung üK") }}
-          </a>
-        </div>
-      </section>
-      <section v-else class="py-2">
-        {{ $t("a.competenceCertificateNoUserPoints") }}
-      </section>
+      <CompetenceCertificateGrade
+        :detail-view="detailView"
+        :competence-certificate="competenceCertificate"
+      />
 
       <ItProgress :status-count="progressStatusCount" />
       <div>
diff --git a/client/src/pages/competence/CompetenceCertificateGrade.vue b/client/src/pages/competence/CompetenceCertificateGrade.vue
new file mode 100644
index 00000000..307a8133
--- /dev/null
+++ b/client/src/pages/competence/CompetenceCertificateGrade.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { CompetenceCertificate } from "@/types";
+import { useTranslation } from "i18next-vue";
+import { computed } from "vue";
+import { assignmentsUserPoints, calcCompetenceCertificateGrade } from "./utils";
+
+export interface Props {
+  detailView: boolean;
+  competenceCertificate: CompetenceCertificate;
+  compactView?: boolean;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compactView: false,
+});
+
+const userGrade = computed(() => {
+  return calcCompetenceCertificateGrade(props.competenceCertificate.assignments, true);
+});
+const userPointsEvaluatedAssignments = computed(() => {
+  return assignmentsUserPoints(props.competenceCertificate.assignments);
+});
+</script>
+
+<template>
+  <section v-if="userPointsEvaluatedAssignments > 0">
+    <div class="flex items-center">
+      <div
+        class="py-4"
+        :class="detailView ? 'heading-1' : compactView ? 'heading-3' : 'heading-2'"
+        :data-cy="`certificate-${competenceCertificate.slug}-grade`"
+      >
+        {{ label ?? $t("a.Note") }}: {{ userGrade }}
+      </div>
+    </div>
+  </section>
+  <section v-else class="py-2">
+    {{ $t("a.competenceCertificateNoUserPoints") }}
+  </section>
+</template>
diff --git a/client/src/pages/competence/CompetenceCertificateOverviewPage.vue b/client/src/pages/competence/CompetenceCertificateOverviewPage.vue
new file mode 100644
index 00000000..305bf373
--- /dev/null
+++ b/client/src/pages/competence/CompetenceCertificateOverviewPage.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useAllCompetenceCertificates } from "@/composables";
+import { useUserStore } from "@/stores/user";
+import CompetenceCertificateComponent from "./CompetenceCertificateComponent.vue";
+import CompetenceCertificateGrade from "./CompetenceCertificateGrade.vue";
+
+export interface Props {
+  courseSlug: string;
+}
+
+const props = defineProps<Props>();
+
+const { id: currentUserId } = useUserStore();
+const { competenceCertificates } = useAllCompetenceCertificates(
+  currentUserId,
+  props.courseSlug
+);
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <div class="container-large">
+      <h1>Certificate Overview</h1>
+      <div v-for="certificate in competenceCertificates" :key="certificate.id">
+        <CompetenceCertificateGrade
+          :label="$t('a.Note')"
+          :compact-view="true"
+          :detail-view="false"
+          :competence-certificate="certificate"
+        />
+      </div>
+      <CompetenceCertificateComponent
+        v-for="certificate in competenceCertificates"
+        :key="certificate.id"
+        :detail-view="false"
+        :competence-certificate="certificate"
+      />
+    </div>
+  </div>
+</template>