59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import BaseBox from "@/components/dashboard/BaseBox.vue";
|
|
import type { BaseStatisticsType } from "@/gql/graphql";
|
|
import {
|
|
type DashboardRoleKeyType,
|
|
fetchMentorCompetenceSummary,
|
|
} from "@/services/dashboard";
|
|
import { computed, onMounted, ref } from "vue";
|
|
|
|
const props = defineProps<{
|
|
courseId: string;
|
|
agentRole: DashboardRoleKeyType;
|
|
}>();
|
|
|
|
const mentorAssignmentData = ref<BaseStatisticsType | null>(null);
|
|
|
|
const summary = computed(() => {
|
|
return mentorAssignmentData.value?.assignments ?? null;
|
|
});
|
|
|
|
const courseSlug = computed(() => mentorAssignmentData.value?.course_slug);
|
|
|
|
onMounted(async () => {
|
|
mentorAssignmentData.value = await fetchMentorCompetenceSummary(
|
|
props.courseId,
|
|
props.agentRole
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="summary" class="w-60 sm:w-[325px]">
|
|
<BaseBox
|
|
:details-link="`/statistic/${props.agentRole}/${courseSlug}/assignment`"
|
|
data-cy="dashboard.mentor.competenceSummary"
|
|
>
|
|
<template #title>{{ $t("Kompetenznachweise") }}</template>
|
|
<template #content>
|
|
<div class="flex flex-row space-x-3 bg-white">
|
|
<div
|
|
class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
|
|
>
|
|
<span>{{ summary.summary.total_passed }}</span>
|
|
</div>
|
|
<p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p>
|
|
</div>
|
|
<div class="flex flex-row space-x-3 bg-white pb-6">
|
|
<div
|
|
class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
|
|
>
|
|
<span>{{ summary.summary.total_failed }}</span>
|
|
</div>
|
|
<p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
|
|
</div>
|
|
</template>
|
|
</BaseBox>
|
|
</div>
|
|
</template>
|