65 lines
2.1 KiB
Vue
65 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import log from "loglevel";
|
|
import { computed } from "vue";
|
|
import type { CompetenceCertificate } from "@/types";
|
|
import { useCertificateQuery, useCurrentCourseSession } from "@/composables";
|
|
import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
|
|
import { getCertificates } from "@/services/competence";
|
|
import { getPreviousRoute } from "@/router/history";
|
|
import { mergeCompetenceCertificates } from "./utils";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
certificateSlug: string;
|
|
userId?: string;
|
|
}>();
|
|
|
|
log.debug("CompetenceCertificateDetailPage setup", props);
|
|
|
|
const store = useCourseSessionsStore();
|
|
const certificateQueries = store.allCourseSessions.map((courseSession) => {
|
|
return useCertificateQuery(props.userId, props.courseSlug, courseSession)
|
|
.certificatesQuery;
|
|
});
|
|
|
|
const certificate = computed(() => {
|
|
const competenceCertificatesPerCs = certificateQueries.map((query) => {
|
|
return getCertificates(query.data.value, props.userId!)
|
|
?.competence_certificates as unknown as CompetenceCertificate[];
|
|
});
|
|
const certificates = mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
|
|
|
|
if (!certificates) {
|
|
return null;
|
|
}
|
|
|
|
return certificates.find((cc) => cc.slug.endsWith(props.certificateSlug));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-large">
|
|
<nav class="py-4">
|
|
<router-link
|
|
:to="
|
|
getPreviousRoute() || `/course/${props.courseSlug}/competence/certificates`
|
|
"
|
|
class="btn-text inline-flex items-center p-0"
|
|
data-cy="back-button"
|
|
>
|
|
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
|
<span class="inline">{{ $t("general.back") }}</span>
|
|
</router-link>
|
|
</nav>
|
|
<div v-if="certificate">
|
|
<CompetenceCertificateComponent
|
|
:competence-certificate="certificate"
|
|
:detail-view="true"
|
|
></CompetenceCertificateComponent>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|