vbv/client/src/pages/dashboard/statistic/AttendanceList.vue

90 lines
2.9 KiB
Vue

<script setup lang="ts">
import type {
CourseStatisticsType,
PresenceRecordStatisticsType,
StatisticsCircleDataType,
} from "@/gql/graphql";
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { getDateString } from "@/components/dueDates/dueDatesUtils";
import dayjs from "dayjs";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
courseStatistics: CourseStatisticsType;
courseSessionName: (sessionId: string) => string;
circleMeta: (circleId: string) => StatisticsCircleDataType;
}>();
const attendanceStats = (present: number, total: number) => {
return {
SUCCESS: present,
FAIL: total - present,
UNKNOWN: 0,
};
};
</script>
<template>
<main>
<div class="mb-10 flex items-center justify-between">
<h3>{{ $t("Anwesenheit") }}</h3>
</div>
<div
v-if="courseStatistics?.attendance_day_presences.records"
class="mt-8 bg-white"
>
<StatisticFilterList
:course-session-properties="courseStatistics.course_session_properties"
:items="courseStatistics.attendance_day_presences.records"
>
<template #default="{ item }">
<div class="flex justify-between">
<div>
<h4 class="font-bold">
{{ $t("a.Präsenztag") }}: Circle «{{
circleMeta(item.circle_id)?.name
}}»
</h4>
<div>
{{ $t("a.Durchfuehrung") }} «{{
courseSessionName(item.course_session_id)
}}»
</div>
<div class="mt-4">
{{ $t("a.Termin") }}:
{{
getDateString(dayjs((item as PresenceRecordStatisticsType).due_date))
}}
</div>
</div>
<div class="w-72">
<div>
{{
$t("a.present von total Teilnehmenden anwesend", {
present: (item as PresenceRecordStatisticsType)
.participants_present,
total: (item as PresenceRecordStatisticsType).participants_total,
})
}}
</div>
<ItProgress
:status-count="
attendanceStats((item as PresenceRecordStatisticsType).participants_present, (item as PresenceRecordStatisticsType).participants_total)
"
></ItProgress>
<router-link
class="underline"
target="_blank"
:to="(item as PresenceRecordStatisticsType).details_url"
>
{{ $t("a.Details anschauen") }}
</router-link>
</div>
</div>
</template>
</StatisticFilterList>
</div>
</main>
</template>