144 lines
4.2 KiB
Vue
144 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import * as log from "loglevel";
|
|
import type { CompetenceCertificate } from "@/types";
|
|
import CompetenceAssignmentRow from "@/pages/competence/CompetenceAssignmentRow.vue";
|
|
import { computed } from "vue";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import {
|
|
assignmentsUserPoints,
|
|
calcCompetenceCertificateGrade,
|
|
competenceCertificateProgressStatusCount,
|
|
} from "@/pages/competence/utils";
|
|
|
|
log.debug("CompetenceCertificateComponent setup");
|
|
|
|
const props = defineProps<{
|
|
competenceCertificate: CompetenceCertificate;
|
|
detailView: boolean;
|
|
frontendUrl?: string;
|
|
}>();
|
|
|
|
const userPointsEvaluatedAssignments = computed(() => {
|
|
return assignmentsUserPoints(props.competenceCertificate.assignments);
|
|
});
|
|
|
|
const userGrade = computed(() => {
|
|
return calcCompetenceCertificateGrade(props.competenceCertificate.assignments, true);
|
|
});
|
|
|
|
const userGradeRounded2Places = computed(() => {
|
|
return calcCompetenceCertificateGrade(props.competenceCertificate.assignments, false);
|
|
});
|
|
|
|
const numAssignmentsEvaluated = computed(() => {
|
|
return props.competenceCertificate.assignments.filter((a) => {
|
|
return a.completion?.completion_status === "EVALUATION_SUBMITTED";
|
|
}).length;
|
|
});
|
|
|
|
const numAssignmentsTotal = computed(() => {
|
|
return props.competenceCertificate.assignments.length;
|
|
});
|
|
|
|
const progressStatusCount = computed(() => {
|
|
return competenceCertificateProgressStatusCount(
|
|
props.competenceCertificate.assignments
|
|
);
|
|
});
|
|
|
|
const frontendUrl = computed(() => {
|
|
return props.frontendUrl
|
|
? props.frontendUrl
|
|
: props.competenceCertificate.frontend_url;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div
|
|
class="mb-4 bg-white p-8"
|
|
:data-cy="`certificate-${competenceCertificate.slug}`"
|
|
>
|
|
<div class="flex flex-col lg:flex-row lg:items-center">
|
|
<div
|
|
v-if="numAssignmentsEvaluated < numAssignmentsTotal"
|
|
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"
|
|
:class="{ 'heading-2': props.detailView }"
|
|
>
|
|
{{ props.competenceCertificate.title }}
|
|
</h3>
|
|
</div>
|
|
|
|
<section v-if="userPointsEvaluatedAssignments > 0">
|
|
<div class="flex items-center">
|
|
<div
|
|
class="py-4"
|
|
:class="{ 'heading-1': props.detailView, 'heading-2': !props.detailView }"
|
|
:data-cy="`certificate-${competenceCertificate.slug}-grade`"
|
|
>
|
|
{{ $t("a.Note") }}: {{ userGrade }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="text-gray-900"
|
|
:data-cy="`certificate-${competenceCertificate.slug}-grade-percent`"
|
|
>
|
|
{{ $t("a.Ungerundete Note") }}: {{ userGradeRounded2Places }}.
|
|
<a
|
|
:href="$t('a.wegleitungUkUrl')"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="underline"
|
|
>
|
|
{{ $t("a.Wegleitung üK") }}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section v-else class="py-2">
|
|
{{ $t("a.competenceCertificateNoUserPoints") }}
|
|
</section>
|
|
|
|
<ItProgress :status-count="progressStatusCount" />
|
|
<div>
|
|
{{
|
|
$t("assignment.x von y Kompetenznachweis-Elementen abgeschlossen", {
|
|
x: numAssignmentsEvaluated,
|
|
y: numAssignmentsTotal,
|
|
})
|
|
}}
|
|
</div>
|
|
|
|
<div v-if="!props.detailView">
|
|
<router-link
|
|
:to="frontendUrl"
|
|
class="btn-text mt-4 inline-flex items-center py-2 pl-0"
|
|
:data-cy="`certificate-${competenceCertificate.slug}-detail-link`"
|
|
>
|
|
<span>{{ $t("a.Details anzeigen") }}</span>
|
|
<it-icon-arrow-right></it-icon-arrow-right>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="props.detailView">
|
|
<div
|
|
v-for="(assignment, index) in competenceCertificate.assignments"
|
|
:key="assignment.id"
|
|
class="bg-white px-8"
|
|
>
|
|
<CompetenceAssignmentRow
|
|
:assignment="assignment"
|
|
:add-border-bottom="index < competenceCertificate.assignments.length - 1"
|
|
></CompetenceAssignmentRow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|