118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import log from "loglevel";
|
|
import { computed, onMounted } from "vue";
|
|
import type { CompetenceCertificate } from "@/types";
|
|
import { useCertificateQuery } from "@/composables";
|
|
import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
|
|
import {
|
|
assignmentsUserPoints,
|
|
calcCompetencesTotalGrade,
|
|
} from "@/pages/competence/utils";
|
|
import { useRoute } from "vue-router";
|
|
import { getCertificates } from "@/services/competence";
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
userId?: string;
|
|
}>();
|
|
|
|
log.debug("CompetenceCertificateListPage setup", props);
|
|
|
|
const route = useRoute();
|
|
|
|
const certificatesQuery = useCertificateQuery(
|
|
props.userId,
|
|
props.courseSlug
|
|
).certificatesQuery;
|
|
|
|
const competenceCertificates = computed(() => {
|
|
const certificates = getCertificates(
|
|
certificatesQuery.data.value,
|
|
props.userId ?? null
|
|
);
|
|
|
|
if (!certificates) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
(certificates?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
|
|
);
|
|
});
|
|
|
|
const assignments = computed(() => {
|
|
return competenceCertificates?.value?.flatMap((cc) => cc.assignments);
|
|
});
|
|
|
|
const totalGrade = computed(() => {
|
|
return calcCompetencesTotalGrade(competenceCertificates.value ?? []);
|
|
});
|
|
|
|
const userPointsEvaluatedAssignments = computed(() => {
|
|
return assignmentsUserPoints(assignments.value ?? []);
|
|
});
|
|
|
|
const numAssignmentsEvaluated = computed(() => {
|
|
return (assignments.value ?? []).filter((a) => {
|
|
return a.completion?.completion_status === "EVALUATION_SUBMITTED";
|
|
}).length;
|
|
});
|
|
|
|
const certificateFrontendUrl = function (frontendUrl: string) {
|
|
if (props.userId) {
|
|
const pathSegments = frontendUrl.split("/");
|
|
const lastSegment = pathSegments[pathSegments.length - 1];
|
|
|
|
// Assuming you want to navigate to the current path + last segment
|
|
return `${route.path}/${lastSegment}`;
|
|
}
|
|
return frontendUrl;
|
|
};
|
|
|
|
onMounted(async () => {
|
|
// log.debug("AssignmentView mounted", props.assignmentId, props.userId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<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">
|
|
<div class="flex flex-col lg:flex-row lg:items-center">
|
|
<div
|
|
v-if="numAssignmentsEvaluated < assignments.length"
|
|
class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2"
|
|
>
|
|
{{ $t("a.Zwischenstand") }}
|
|
</div>
|
|
<h3 class="mt-2 lg:order-first lg:mt-0">{{ $t("a.Erfahrungsnote üK") }}</h3>
|
|
</div>
|
|
|
|
<section
|
|
v-if="userPointsEvaluatedAssignments > 0"
|
|
class="flex items-center"
|
|
data-cy="certificate-total-grade"
|
|
>
|
|
<div class="heading-1 py-4">{{ $t("a.Note") }}: {{ totalGrade }}</div>
|
|
</section>
|
|
<section v-else class="my-4">
|
|
{{ $t("a.competenceCertificateNoUserPoints") }}
|
|
</section>
|
|
</div>
|
|
|
|
<div
|
|
v-for="competenceCertificate in competenceCertificates"
|
|
:key="competenceCertificate.id"
|
|
>
|
|
<CompetenceCertificateComponent
|
|
:competence-certificate="competenceCertificate"
|
|
:detail-view="false"
|
|
:frontend-url="certificateFrontendUrl(competenceCertificate.frontend_url)"
|
|
></CompetenceCertificateComponent>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|