73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import type { TrainingResponsibleStatisticsQuery } from "@/gql/graphql";
|
|
import { fetchTrainingResponsibleStatistics } from "@/services/dashboard";
|
|
import { formatCurrencyChfCentimes } from "@/utils/format_currency_chf";
|
|
import { computed, onMounted, ref } from "vue";
|
|
import BaseBox from "./BaseBox.vue";
|
|
|
|
const props = defineProps<{
|
|
courseId: string;
|
|
courseSessionId: string;
|
|
}>();
|
|
|
|
const statistics = ref<TrainingResponsibleStatisticsQuery | null>(null);
|
|
|
|
onMounted(async () => {
|
|
statistics.value = await fetchTrainingResponsibleStatistics(props.courseSessionId);
|
|
});
|
|
|
|
const totalCostInCurrentYear = computed(() => {
|
|
return statistics.value?.training_responsible_statistics?.cost_per_year.find(
|
|
(cost) => cost?.year === new Date().getFullYear()
|
|
)?.total_cost;
|
|
});
|
|
|
|
const attendanceCountInCurrentYear = computed(() => {
|
|
return (
|
|
statistics.value?.training_responsible_statistics?.participants_per_year?.find(
|
|
(entry) => entry?.year === new Date().getFullYear()
|
|
)?.participants?.length ?? 0
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col flex-wrap items-stretch md:flex-row">
|
|
<BaseBox
|
|
:details-link="`/dashboard/cost/${courseSessionId}`"
|
|
data-cy="dashboard.mentor.competenceSummary"
|
|
class="w-1/2"
|
|
>
|
|
<template #title>{{ $t("Kosten in") }} {{ new Date().getFullYear() }}</template>
|
|
<template #content>
|
|
<div class="flex flex-row space-x-3 bg-white pb-6">
|
|
<div class="flex h-[74px] items-center justify-center py-1 pr-3">
|
|
<span class="text-3xl font-bold">
|
|
{{ formatCurrencyChfCentimes(totalCostInCurrentYear) }}
|
|
</span>
|
|
<span class="ml-4">CHF</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</BaseBox>
|
|
<BaseBox
|
|
:details-link="`/dashboard/persons?course=${courseId}`"
|
|
data-cy="dashboard.mentor.competenceSummary"
|
|
>
|
|
<template #title>{{ $t("Teilnehmer im 2024") }}</template>
|
|
<template #content>
|
|
<div class="flex flex-row space-x-3 bg-white pb-6">
|
|
<div
|
|
class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
|
|
>
|
|
<span>{{ attendanceCountInCurrentYear }}</span>
|
|
</div>
|
|
<p class="ml-3 mt-0 leading-[74px]">
|
|
{{ $t("Teilnehmer") }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</BaseBox>
|
|
</div>
|
|
</template>
|