Add performanceCriteriaStatusCount to index page

client/src/components/header/MainNavigationBar.vue

@@ -132,15 +132,6 @@ onMounted(() => {
                 >
                   {{ t("competences.title") }}
                 </router-link>
-
-                <router-link
-                  v-if="inCourse() && courseSessionsStore.currentCourseSession"
-                  :to="`${courseSessionsStore.currentCourseSession.competence_url}-old`"
-                  class="nav-item"
-                  :class="{ 'nav-item--active': inCompetenceProfile() }"
-                >
-                  {{ t("competences.title") }} (old)
-                </router-link>
               </div>
             </div>
 

client/src/pages/competence/CompetenceIndexPage.vue

@@ -11,6 +11,7 @@ import {
   competenceCertificateProgressStatusCount,
 } from "@/pages/competence/utils";
 import ItProgress from "@/components/ui/ItProgress.vue";
+import { useCompetenceStore } from "@/stores/competence";
 
 const props = defineProps<{
   courseSlug: string;
@@ -20,6 +21,8 @@ log.debug("CompetenceIndexPage setup", props);
 
 const courseSession = useCurrentCourseSession();
 
+const competenceStore = useCompetenceStore();
+
 const certificatesQuery = useQuery({
   query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
   variables: {
@@ -46,13 +49,17 @@ const totalPointsEvaluatedAssignments = computed(() => {
 const userPointsEvaluatedAssignments = computed(() => {
   return assignmentsUserPoints(allAssignments.value);
 });
+
+const performanceCriteriaStatusCount = computed(() => {
+  return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria());
+});
 </script>
 
 <template>
   <div class="container-large lg:mt-4">
     <h1 class="mb-8">{{ $t("a.KompetenzNavi") }}</h1>
 
-    <div class="mb-4 bg-white p-8">
+    <section class="mb-4 bg-white p-8">
       <div class="flex items-center">
         <h3>{{ $t("a.Kompetenznachweise") }}</h3>
       </div>
@@ -113,7 +120,55 @@ const userPointsEvaluatedAssignments = computed(() => {
           </div>
         </div>
       </div>
-    </div>
+    </section>
+
+    <section class="mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
+      <h3 class="mb-4 border-b pb-4 lg:border-0 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 w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r 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">
+              {{ performanceCriteriaStatusCount.FAIL }}
+            </p>
+          </div>
+        </li>
+        <li
+          class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r 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">
+              {{ performanceCriteriaStatusCount.SUCCESS }}
+            </p>
+          </div>
+        </li>
+        <li class="w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 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">
+              {{ performanceCriteriaStatusCount.UNKNOWN }}
+            </p>
+          </div>
+        </li>
+      </ul>
+      <!--      <router-link-->
+      <!--        :to="`${competenceStore.competenceProfilePage()?.frontend_url}-old/criteria`"-->
+      <!--        class="btn-text inline-flex items-center py-2 pl-0"-->
+      <!--      >-->
+      <!--        <span>{{ $t("general.showAll") }}</span>-->
+      <!--        <it-icon-arrow-right></it-icon-arrow-right>-->
+      <!--      </router-link>-->
+    </section>
   </div>
 </template>