vbv/client/src/pages/competence/CompetenceIndexPage.vue

<script setup lang="ts">
import log from "loglevel";
import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
import { useQuery } from "@urql/vue";
import { computed } from "vue";
import type { CompetenceCertificate } from "@/types";
import { useCurrentCourseSession } from "@/composables";
import {
  assignmentsUserPoints,
  calcCompetenceCertificateGrade,
  calcCompetencesTotalGrade,
  competenceCertificateProgressStatusCount,
} 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";

const props = defineProps<{
  courseSlug: string;
}>();

log.debug("CompetenceIndexPage setup", props);

const courseSession = useCurrentCourseSession();

const certificatesQuery = useQuery({
  query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
  variables: {
    courseSlug: props.courseSlug,
    courseSessionId: courseSession.value.id,
  },
});

const competenceCertificates = computed(() => {
  return (
    (certificatesQuery.data.value?.competence_certificate_list
      ?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
  );
});

const allAssignments = computed(() => {
  return competenceCertificates.value.flatMap((cc) => cc.assignments);
});

const userPointsEvaluatedAssignments = computed(() => {
  return assignmentsUserPoints(allAssignments.value);
});

const currentCourseSession = useCurrentCourseSession();

const isLoaded = computed(() => !certificatesQuery.fetching.value);

const router = useRouter();
</script>

<template>
  <div v-if="isLoaded" class="container-large lg:mt-4">
    <!-- Competence certificates -->
    <section
      v-if="currentCourseSession.course.configuration.enable_competence_certificates"
      class="mb-4 bg-white p-8"
    >
      <div class="flex items-center">
        <h3>{{ $t("a.Kompetenznachweise") }}</h3>
      </div>
      <div class="mt-4" data-cy="certificate-total-points-text">
        <div v-if="userPointsEvaluatedAssignments > 0">
          {{ $t("a.Erfahrungsnote üK") }}:
          <span class="font-bold">
            {{ calcCompetencesTotalGrade(competenceCertificates ?? []) }}
          </span>

          <span class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2">
            {{ $t("a.Zwischenstand") }}
          </span>
        </div>
        <div v-else>
          {{ $t("a.competenceCertificateNoUserPoints") }}
        </div>
      </div>

      <div>
        <div class="mt-4">
          <div
            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}`"
          >
            <div class="text-bold text-xl">
              {{ certificate.title }}
            </div>
            <div class="mt-4 lg:mt-0">
              <span
                v-if="calcCompetenceCertificateGrade(certificate.assignments)"
                class="text-bold"
              >
                {{ $t("a.Note") }}:
                {{ calcCompetenceCertificateGrade(certificate.assignments) }}
              </span>
            </div>
            <div class="flex">
              <div>
                {{
                  $t("assignment.x von y Kompetenznachweis-Elementen abgeschlossen", {
                    x: certificate.assignments.filter(
                      (a) => a.completion?.completion_status === "EVALUATION_SUBMITTED"
                    ).length,
                    y: certificate.assignments.length,
                  })
                }}
              </div>
              <div class="ml-2 hidden w-40 lg:block">
                <ItProgress
                  :status-count="
                    competenceCertificateProgressStatusCount(certificate.assignments)
                  "
                />
              </div>
            </div>
          </div>
          <div>
            <router-link
              :to="`/course/${props.courseSlug}/competence/certificates`"
              class="btn-text mt-4 inline-flex items-center py-2 pl-0"
              data-cy="certificates-show-all-button"
            >
              <span>{{ $t("a.Details anzeigen") }}</span>
              <it-icon-arrow-right></it-icon-arrow-right>
            </router-link>
          </div>
        </div>
      </div>
    </section>
    <SelfEvaluationAndFeedbackOverview
      :profile-user-id="useUserStore().id"
      @show-all="
        () => {
          router.push({ name: 'selfEvaluationAndFeedback' });
        }
      "
    />
  </div>
</template>

<style scoped></style>