126 lines
4.8 KiB
Svelte
126 lines
4.8 KiB
Svelte
<script lang="ts">
|
|
import AusweisPruefenBox from "#components/AusweisPruefenBox.svelte";
|
|
import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
|
|
import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
|
|
import AusweisPruefenNotification from "#components/AusweisPruefenNotification.svelte";
|
|
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte"
|
|
import { Event } from "#lib/client/prisma";
|
|
import Pagination from "#components/Pagination.svelte";
|
|
import { api } from "astro-typesafe-api/client";
|
|
import Cookies from "js-cookie"
|
|
import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js"
|
|
import AusweisePruefenFilter from "#components/Dashboard/AusweisePruefenFilter.svelte";
|
|
import { z, ZodTypeAny } from "zod";
|
|
import { filterAusweise } from "#lib/filters.js";
|
|
|
|
export let page: number;
|
|
export let totalPages: number;
|
|
|
|
let filters: { name: keyof z.infer<typeof filterAusweise>, type: ZodTypeAny, value: any }[] = []
|
|
</script>
|
|
|
|
<div class="flex flex-col mb-4">
|
|
<AusweisePruefenFilter bind:filters={filters}></AusweisePruefenFilter>
|
|
</div>
|
|
|
|
<div class="gap-4 flex flex-col">
|
|
{#await api.ausweise.GET.fetch({
|
|
limit: 10,
|
|
skip: (page - 1) * 10,
|
|
filters: filters.reduce((acc, filter) => {
|
|
acc[filter.name] = filter.value
|
|
return acc
|
|
}, {})
|
|
}, {
|
|
headers: {
|
|
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
|
|
}
|
|
})}
|
|
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
|
|
{:then ausweise}
|
|
{#each ausweise as { ausweis, objekt, aufnahme, bilder, events }}
|
|
{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt)}
|
|
<div class="rounded-lg border w-full h-20 p-2.5 gap-4 flex flex-row items-center">
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-8 h-8 rounded-full"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="w-1/12 h-full flex flex-col gap-2">
|
|
<div class="skeleton w-full h-4"></div>
|
|
<div class="skeleton w-full h-4"></div>
|
|
</div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
<div class="skeleton w-4 h-4"></div>
|
|
</div>
|
|
{:then calculations}
|
|
<AusweisPruefenBox {ausweis} {aufnahme} {objekt} {bilder} {events} {calculations}></AusweisPruefenBox>
|
|
{/await}
|
|
{/each}
|
|
{/await}
|
|
|
|
</div>
|
|
|
|
<Pagination pages={totalPages} current={page} prev="/dashboard/admin/ausweise-pruefen/{page - 1}" next="/dashboard/admin/ausweise-pruefen/{page + 1}"></Pagination>
|
|
|
|
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
|
|
<NotificationProvider component={AusweisPruefenNotification}></NotificationProvider>
|
|
</div> |