49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
|
|
import log from "loglevel";
|
|
import { useDashboardPersonsDueDates } from "@/composables";
|
|
import { computed } from "vue";
|
|
import _ from "lodash";
|
|
import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
|
|
|
|
log.debug("DashboardAsideWidget created");
|
|
|
|
const { loading, dashboardPersons, dashboardDueDates } = useDashboardPersonsDueDates();
|
|
|
|
const displayDueDates = computed(() => {
|
|
return _.take(dashboardDueDates.value, 6);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="loading" class="m-8 flex justify-center">
|
|
<LoadingSpinner />
|
|
</div>
|
|
<div v-else>
|
|
<section class="border-b p-8">
|
|
<h3 class="mb-4">{{ dashboardPersons.length }} {{ $t("a.Personen") }}</h3>
|
|
<div>
|
|
<router-link class="btn-secondary" to="/dashboard/persons">
|
|
{{ $t("a.Alle Personen anzeigen") }}
|
|
</router-link>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="dashboardDueDates.length > 0" class="p-8">
|
|
<h3>{{ $t("a.Termine") }}</h3>
|
|
|
|
<div v-for="dueDate in displayDueDates" :key="dueDate.id">
|
|
<div class="border-b">
|
|
<DueDateSingle :due-date="dueDate" />
|
|
</div>
|
|
</div>
|
|
|
|
<router-link class="btn-secondary mt-4" to="/dashboard/due-dates">
|
|
{{ $t("a.Alle Termine anzeigen") }}
|
|
</router-link>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|