62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { useDashboardPersonsDueDates } from "@/composables";
|
|
import { computed } from "vue";
|
|
import _ from "lodash";
|
|
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
|
|
import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
courseSessionId: string;
|
|
circleId?: string;
|
|
maxCount?: number;
|
|
showAllButton?: boolean;
|
|
}>(),
|
|
{
|
|
maxCount: 3,
|
|
circleId: undefined,
|
|
showAllButton: false,
|
|
}
|
|
);
|
|
|
|
const { loading, currentDueDates } = useDashboardPersonsDueDates();
|
|
|
|
const filteredDueDates = computed(() => {
|
|
let dueDates = currentDueDates.value.filter(
|
|
(dueDate) => dueDate.course_session_id === props.courseSessionId
|
|
);
|
|
|
|
if (props.circleId) {
|
|
dueDates = dueDates.filter((dueDate) => dueDate.circle?.id === props.circleId);
|
|
}
|
|
return _.take(dueDates, props.maxCount);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="loading" class="m-8 flex justify-center">
|
|
<LoadingSpinner />
|
|
</div>
|
|
<div v-else class="flex flex-col space-y-2">
|
|
<h3 class="heading-3">{{ $t("Nächste Termine") }}</h3>
|
|
<div
|
|
v-for="dueDate in filteredDueDates"
|
|
:key="dueDate.id"
|
|
class="border-t border-gray-500 pt-2"
|
|
>
|
|
<DueDateSingle :due-date="dueDate"></DueDateSingle>
|
|
</div>
|
|
<div v-if="filteredDueDates.length === 0">
|
|
{{ $t("dueDates.noDueDatesAvailable") }}
|
|
</div>
|
|
</div>
|
|
|
|
<router-link
|
|
v-if="showAllButton"
|
|
class="btn-secondary mt-4"
|
|
:to="`/dashboard/due-dates?session=${courseSessionId}`"
|
|
>
|
|
{{ $t("a.Alle Termine anzeigen") }}
|
|
</router-link>
|
|
</template>
|