From 3011fa2ef4cc7afa40fdf3d46cf06442bdce6145 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 22 Feb 2024 14:14:02 +0100
Subject: [PATCH] feat: overview page

---
 .../pages/competence/CompetenceIndexPage.vue  | 122 +++++++++---------
 .../pages/competence/CompetenceParentPage.vue |  16 ---
 .../SelfEvaluationAndFeedbackPage.vue         |   3 -
 client/src/pages/dashboard/ProgressPage.vue   |   2 +-
 4 files changed, 64 insertions(+), 79 deletions(-)

diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index f2469235..ddd87ae6 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -12,6 +12,7 @@ import {
 } from "@/pages/competence/utils";
 import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
 import ItProgress from "@/components/ui/ItProgress.vue";
+import { VV_COURSE_IDS } from "@/constants";
 
 const props = defineProps<{
   courseSlug: string;
@@ -65,13 +66,23 @@ const isFeedbackEvaluationVisible = computed(
     selfEvaluationFeedbackSummaries.aggregates.value?.feedback_assessment_visible ??
     false
 );
+
+// FIXME 22.02.24: To-be-tackled NEXT in a separate PR (shippable member comp.navi)
+//  -> Do not use the VV_COURSE_ID anymore (discuss with @chrigu) -> We do this next.
+const hasCompetenceCertificates = computed(() => {
+  return !VV_COURSE_IDS.includes(useCurrentCourseSession().value.course.id);
+});
+
+const isLoaded = computed(
+  () =>
+    !selfEvaluationFeedbackSummaries.loading.value && !certificatesQuery.fetching.value
+);
 </script>
 
 <template>
-  <div class="container-large lg:mt-4">
-    <h1 class="mb-8">{{ $t("a.KompetenzNavi") }}</h1>
-
-    <section class="mb-4 bg-white p-8">
+  <div v-if="isLoaded" class="container-large lg:mt-4">
+    <!-- Competence certificates -->
+    <section v-if="hasCompetenceCertificates" class="mb-4 bg-white p-8">
       <div class="flex items-center">
         <h3>{{ $t("a.Kompetenznachweise") }}</h3>
       </div>
@@ -145,79 +156,34 @@ const isFeedbackEvaluationVisible = computed(
 
     <!-- Self-evaluation -->
     <section class="mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
-      <h3 class="mb-4 pb-4 lg:pb-0">
-        {{ $t("a.Selbsteinschätzungen") }}
-      </h3>
-      <ul
-        class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
-      >
-        <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
-          <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
-          <div class="flex flex-row items-center">
-            <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
-            <p
-              class="ml-4 inline-block text-7xl font-bold"
-              data-cy="self-evaluation-fail"
-            >
-              {{ selfAssessmentCounts?.fail }}
-            </p>
-          </div>
-        </li>
-        <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
-          <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
-          <div class="flex flex-row items-center">
-            <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
-            <p
-              class="ml-4 inline-block text-7xl font-bold"
-              data-cy="self-evaluation-success"
-            >
-              {{ selfAssessmentCounts?.pass }}
-            </p>
-          </div>
-        </li>
-        <li class="flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
-          <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
-          <div class="flex flex-row items-center">
-            <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
-            <p
-              class="ml-4 inline-block text-7xl font-bold"
-              data-cy="self-evaluation-unknown"
-            >
-              {{ selfAssessmentCounts?.unknown }}
-            </p>
-          </div>
-        </li>
-      </ul>
-
-      <!-- Feedback evaluation -->
-      <template v-if="isFeedbackEvaluationVisible">
-        <h3 class="mb-4 border-t pb-4 pt-4 lg:pb-0">
-          {{ $t("a.Fremdeinschätzungen") }}
+      <div class="mb-8">
+        <h3 class="mb-4 pb-4 lg:pb-0">
+          {{ $t("a.Selbsteinschätzungen") }}
         </h3>
         <ul
           class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
         >
           <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
-            <h5 class="mb-4 text-gray-700">«{{ $t("receivedEvaluation.no") }}»</h5>
+            <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
             <div class="flex flex-row items-center">
               <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
               <p
                 class="ml-4 inline-block text-7xl font-bold"
                 data-cy="self-evaluation-fail"
               >
-                {{ feedbackEvaluationCounts?.fail }}
+                {{ selfAssessmentCounts?.fail }}
               </p>
             </div>
           </li>
           <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
-            <h5 class="mb-4 text-gray-700">«{{ $t("receivedEvaluation.yes") }}»</h5>
+            <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
             <div class="flex flex-row items-center">
               <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
               <p
                 class="ml-4 inline-block text-7xl font-bold"
                 data-cy="self-evaluation-success"
               >
-                {{ feedbackEvaluationCounts?.pass }}
+                {{ selfAssessmentCounts?.pass }}
               </p>
             </div>
           </li>
@@ -229,17 +195,55 @@ const isFeedbackEvaluationVisible = computed(
                 class="ml-4 inline-block text-7xl font-bold"
                 data-cy="self-evaluation-unknown"
               >
+                {{ selfAssessmentCounts?.unknown }}
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Feedback evaluation -->
+      <div v-if="isFeedbackEvaluationVisible" class="mb-8 border-t pt-8">
+        <h3 class="mb-4 pb-4 lg:pb-0">
+          {{ $t("a.Fremdeinschätzungen") }}
+        </h3>
+        <ul
+          class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
+        >
+          <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
+            <h5 class="mb-4 text-gray-700">«{{ $t("receivedEvaluation.no") }}»</h5>
+            <div class="flex flex-row items-center">
+              <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
+              <p class="ml-4 inline-block text-7xl font-bold">
+                {{ feedbackEvaluationCounts?.fail }}
+              </p>
+            </div>
+          </li>
+          <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
+            <h5 class="mb-4 text-gray-700">«{{ $t("receivedEvaluation.yes") }}»</h5>
+            <div class="flex flex-row items-center">
+              <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
+              <p class="ml-4 inline-block text-7xl font-bold">
+                {{ feedbackEvaluationCounts?.pass }}
+              </p>
+            </div>
+          </li>
+          <li class="flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
+            <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
+            <div class="flex flex-row items-center">
+              <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
+              <p class="ml-4 inline-block text-7xl font-bold">
                 {{ feedbackEvaluationCounts?.unknown }}
               </p>
             </div>
           </li>
         </ul>
-      </template>
+      </div>
 
       <div>
         <router-link
-          :to="`/course/${props.courseSlug}/competence/criteria`"
-          class="btn-text mt-4 inline-flex items-center py-2 pl-0"
+          :to="`/course/${props.courseSlug}/competence/self-evaluation-and-feedback`"
+          class="btn-text inline-flex items-center py-2 pl-0"
         >
           <span>{{ $t("general.showAll") }}</span>
           <it-icon-arrow-right></it-icon-arrow-right>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 67044e21..73b70961 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -19,10 +19,6 @@ function routeInCompetenceCertificate() {
   return route.path.includes("/certificate");
 }
 
-function routeInPerformanceCriteria() {
-  return route.path.endsWith("/criteria");
-}
-
 function routeInActionCompetences() {
   return route.path.endsWith("/competences");
 }
@@ -59,18 +55,6 @@ onMounted(async () => {
             {{ $t("a.Kompetenznachweise") }}
           </router-link>
         </li>
-        <li
-          class="border-t-2 border-t-transparent lg:ml-12"
-          :class="{ 'border-b-2 border-b-blue-900': routeInPerformanceCriteria() }"
-        >
-          <router-link
-            :to="`/course/${courseSlug}/competence/criteria`"
-            class="block py-3"
-          >
-            {{ $t("a.Selbsteinschätzungen") }}
-          </router-link>
-        </li>
-
         <li
           class="border-t-2 border-t-transparent lg:ml-12"
           :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
diff --git a/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue b/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
index 8d221e2e..6e655cb0 100644
--- a/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
+++ b/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import log from "loglevel";
 import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
 import { useCurrentCourseSession } from "@/composables";
 import { computed, ref } from "vue";
@@ -42,8 +41,6 @@ const headerTitle = computed(() => {
     return t("a.Selbsteinschätzungen");
   }
 });
-
-log.info("SelfEvaluationsAndFeedbackPage created");
 </script>
 
 <template>
diff --git a/client/src/pages/dashboard/ProgressPage.vue b/client/src/pages/dashboard/ProgressPage.vue
index b3aad0e1..c1087ab8 100644
--- a/client/src/pages/dashboard/ProgressPage.vue
+++ b/client/src/pages/dashboard/ProgressPage.vue
@@ -45,7 +45,7 @@ const competenceCertificateUrl = computed(() => {
 });
 
 const competenceCriteriaUrl = computed(() => {
-  return `/course/${courseSlug.value}/competence/criteria?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
+  return `/course/${courseSlug.value}/competence/self-evaluation-and-feedback?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
 });
 
 const isVVCourse = computed(() => {