Dashboard Template

This commit is contained in:
Moritz Utcke
2025-04-21 17:53:19 -03:00
parent 05b31a4862
commit 62e6dd44b9
3 changed files with 124 additions and 151 deletions

View File

@@ -5,7 +5,6 @@ export const createCaller = createCallerFactory({
"klimafaktoren": await import("../src/pages/api/klimafaktoren.ts"),
"postleitzahlen": await import("../src/pages/api/postleitzahlen.ts"),
"unterlage": await import("../src/pages/api/unterlage.ts"),
"aufnahme": await import("../src/pages/api/aufnahme/index.ts"),
"admin/ausstellen": await import("../src/pages/api/admin/ausstellen.ts"),
"admin/bestellbestaetigung": await import("../src/pages/api/admin/bestellbestaetigung.ts"),
"admin/erinnern": await import("../src/pages/api/admin/erinnern.ts"),
@@ -13,14 +12,15 @@ export const createCaller = createCallerFactory({
"admin/post-ausstellen": await import("../src/pages/api/admin/post-ausstellen.ts"),
"admin/registriernummer": await import("../src/pages/api/admin/registriernummer.ts"),
"admin/stornieren": await import("../src/pages/api/admin/stornieren.ts"),
"bedarfsausweis-gewerbe/[id]": await import("../src/pages/api/bedarfsausweis-gewerbe/[id].ts"),
"bedarfsausweis-gewerbe": await import("../src/pages/api/bedarfsausweis-gewerbe/index.ts"),
"aufnahme": await import("../src/pages/api/aufnahme/index.ts"),
"auth/access-token": await import("../src/pages/api/auth/access-token.ts"),
"auth/passwort-vergessen": await import("../src/pages/api/auth/passwort-vergessen.ts"),
"auth/refresh-token": await import("../src/pages/api/auth/refresh-token.ts"),
"bedarfsausweis-gewerbe/[id]": await import("../src/pages/api/bedarfsausweis-gewerbe/[id].ts"),
"bedarfsausweis-gewerbe": await import("../src/pages/api/bedarfsausweis-gewerbe/index.ts"),
"ausweise": await import("../src/pages/api/ausweise/index.ts"),
"bedarfsausweis-wohnen/[id]": await import("../src/pages/api/bedarfsausweis-wohnen/[id].ts"),
"bedarfsausweis-wohnen": await import("../src/pages/api/bedarfsausweis-wohnen/index.ts"),
"ausweise": await import("../src/pages/api/ausweise/index.ts"),
"bilder/[id]": await import("../src/pages/api/bilder/[id].ts"),
"geg-nachweis-gewerbe/[id]": await import("../src/pages/api/geg-nachweis-gewerbe/[id].ts"),
"geg-nachweis-gewerbe": await import("../src/pages/api/geg-nachweis-gewerbe/index.ts"),
@@ -31,12 +31,12 @@ export const createCaller = createCallerFactory({
"rechnung/anfordern": await import("../src/pages/api/rechnung/anfordern.ts"),
"rechnung": await import("../src/pages/api/rechnung/index.ts"),
"ticket": await import("../src/pages/api/ticket/index.ts"),
"verbrauchsausweis-wohnen/[id]": await import("../src/pages/api/verbrauchsausweis-wohnen/[id].ts"),
"verbrauchsausweis-wohnen": await import("../src/pages/api/verbrauchsausweis-wohnen/index.ts"),
"verbrauchsausweis-gewerbe/[id]": await import("../src/pages/api/verbrauchsausweis-gewerbe/[id].ts"),
"verbrauchsausweis-gewerbe": await import("../src/pages/api/verbrauchsausweis-gewerbe/index.ts"),
"user": await import("../src/pages/api/user/index.ts"),
"user/self": await import("../src/pages/api/user/self.ts"),
"verbrauchsausweis-gewerbe/[id]": await import("../src/pages/api/verbrauchsausweis-gewerbe/[id].ts"),
"verbrauchsausweis-gewerbe": await import("../src/pages/api/verbrauchsausweis-gewerbe/index.ts"),
"verbrauchsausweis-wohnen/[id]": await import("../src/pages/api/verbrauchsausweis-wohnen/[id].ts"),
"verbrauchsausweis-wohnen": await import("../src/pages/api/verbrauchsausweis-wohnen/index.ts"),
"webhooks/mollie": await import("../src/pages/api/webhooks/mollie.ts"),
"aufnahme/[id]/bilder": await import("../src/pages/api/aufnahme/[id]/bilder.ts"),
"aufnahme/[id]": await import("../src/pages/api/aufnahme/[id]/index.ts"),

View File

@@ -3,14 +3,22 @@
import Carousel from "#components/Carousel.svelte";
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
import { Objekt } from "#lib/client/prisma.js";
import { Aufnahme, BedarfsausweisWohnen, Bild, Objekt, Rechnung, Unterlage, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
import mime from "mime"
import { ChevronLeft, ChevronRight, FileText } from "radix-svelte-icons";
import { CaretRight, ChevronLeft, ChevronRight, FileText } from "radix-svelte-icons";
import CaretLeft from "radix-svelte-icons/src/lib/icons/CaretLeft.svelte";
export let user: BenutzerClient;
export let aufnahme: AufnahmeKomplettClient;
export let objekt: Objekt;
export let ausweis: (VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen) & {
rechnung: Rechnung,
aufnahme: Aufnahme & {
bilder: Bild[],
unterlagen: Unterlage[],
objekt: Objekt
}
};
export let benutzer: BenutzerClient;
export let page: number;
export let totalPageCount: number;
let dropdownOpen = false;
@@ -22,9 +30,9 @@
<div class="justify-between items-center flex flex-row">
<div class="text-2xl rounded-lg gap-2 bg-grey-200 text-center">
ID VWRYQRWZZ4C
ID: {ausweis.id}
</div>
<div class="text-2xl">{objekt.adresse}, {objekt.plz} {objekt.ort}</div>
<div class="text-2xl">{ausweis.aufnahme.objekt.adresse}, {ausweis.aufnahme.objekt.plz} {ausweis.aufnahme.objekt.ort}</div>
<div class="relative">
<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center" on:click={toggleDropdown}>
Ausweis erstellen +
@@ -32,9 +40,9 @@
{#if dropdownOpen}
<div class="absolute top-15 left-0 mt-2 w-50 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-[9999]" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
<div class="py-1 w-full" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Wohnen Erstellen</a>
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Gewerbe Erstellen</a>
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis<br>Wohnen Erstellen</a>
<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?aufnahme={ausweis.aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Wohnen Erstellen</a>
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?aufnahme={ausweis.aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Gewerbe Erstellen</a>
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?aufnahme={ausweis.aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis<br>Wohnen Erstellen</a>
</div>
</div>
{/if}
@@ -46,9 +54,9 @@
<div class="my-4 grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-2">
<div class="relative bg-gray-100 rounded-md flex justify-center items-center">
{#if aufnahme.bilder.length > 0}
{#if ausweis.aufnahme.bilder.length > 0}
<Carousel perPage={4}>
{#each aufnahme.bilder as bild, i (i)}
{#each ausweis.aufnahme.bilder as bild, i (i)}
<img src="/bilder/{bild.id}.jpg" alt={bild.kategorie} class="max-h-[15vh] h-full w-full object-contain">
{/each}
<span slot="left-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronLeft size={24}></ChevronLeft></span>
@@ -56,10 +64,10 @@
</Carousel>
{/if}
</div>
{#if aufnahme.unterlagen.length > 0}
{#if ausweis.aufnahme.unterlagen.length > 0}
<h3 class="font-semibold">Unterlagen</h3>
<div class="grid grid-flow-col gap-4">
{#each aufnahme.unterlagen as unterlage}
{#each ausweis.aufnahme.unterlagen as unterlage}
<a href="/unterlagen/{unterlage.id}.{mime.getExtension(unterlage.mime)}" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 p-2 rounded-lg"><FileText size={32}></FileText> {unterlage.name}</a>
{/each}
</div>
@@ -67,7 +75,29 @@
</div>
<div class="my-4 grid grid-cols-[1fr] md:grid-cols-[7fr,16fr,5fr] lg:grid-cols-[7fr,16fr,5fr]">
<DashboardAusweis {benutzer} {ausweis} aufnahme={ausweis.aufnahme} objekt={ausweis.aufnahme.objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
</div>
<div class="flex ites-center" class:justify-end={page === 0} class:justify-between={page > 0}>
{#if page > 0}
<a class="p-2 rounded-lg hover:bg-gray-200 cursor-pointer" href="/dashboard/objekte/{page - 1}">
<CaretLeft size={24}></CaretLeft>
</a>
{/if}
{#if totalPageCount > page}
<a class="p-2 rounded-lg hover:bg-gray-200 cursor-pointer" href="/dashboard/objekte/{page + 1}">
<CaretRight size={24}></CaretRight>
</a>
{/if}
</div>
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
<NotificationWrapper></NotificationWrapper>
</div>
<style>
/* TODO: Das kann auch als Tailwind Klasse gemacht werden */
.button {
padding: 0.5rem 1rem;
font-size: 1rem;
@@ -75,30 +105,3 @@
cursor: pointer;
}
</style>
<div class="my-4 grid grid-cols-[1fr] md:grid-cols-[7fr,16fr,5fr] lg:grid-cols-[7fr,16fr,5fr]">
{#if aufnahme.verbrauchsausweise_wohnen.length > 0}
{#each [aufnahme.verbrauchsausweise_wohnen.sort((a, b) => new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime())[0]] as ausweis}
<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
{/each}
{/if}
{#each aufnahme.bedarfsausweise_wohnen as ausweis}
<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
{/each}
{#each aufnahme.verbrauchsausweise_gewerbe as ausweis}
<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
{/each}
<!-- {#each aufnahme.geg_nachweise_wohnen as nachweis}
<DashboardAusweis {benutzer} ausweis={nachweis} {aufnahme} {objekt} rechnung={nachweis.rechnung}></DashboardAusweis>
{/each}
{#each aufnahme.geg_nachweise_gewerbe as nachweis}
<DashboardAusweis {benutzer} ausweis={nachweis} {aufnahme} {objekt} rechnung={nachweis.rechnung}></DashboardAusweis>
{/each}
{#each aufnahme.bedarfsausweise_gewerbe as nachweis}
<DashboardAusweis {benutzer} ausweis={nachweis} {aufnahme} {objekt} rechnung={nachweis.rechnung}></DashboardAusweis>
{/each} -->
</div>
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
<NotificationWrapper></NotificationWrapper>
</div>

View File

@@ -4,6 +4,7 @@ import { Enums, prisma } from "#lib/server/prisma";
import DashboardModule from "#modules/Dashboard/DashboardModule.svelte";
import { getCurrentUser } from "#lib/server/user";
import DashboardAufnahmeModule from "#modules/Dashboard/DashboardAufnahmeModule.svelte";
import { getPrismaAusweisAdapter } from "#lib/server/ausweis";
const params = Astro.params;
@@ -17,7 +18,7 @@ if (!user) {
return Astro.redirect("/auth/login")
}
const totalPages = await prisma.aufnahme.count({
const totalPageCount = await prisma.aufnahme.count({
where: user.rolle === Enums.BenutzerRolle.USER ? {
benutzer: {
id: user.id
@@ -25,113 +26,82 @@ const totalPages = await prisma.aufnahme.count({
} : {}
})
let aufnahme;
if (page < 0 || page > totalPageCount) {
return Astro.redirect("/dashboard/objekte/0")
}
let ausweis, result: { id: string, updated_at: Date }[] = [];
// Wir fragen den neuesten Ausweis ab
// Falls der Nutzer ein Admin ist dann kommt der ganz neueste ansonsten der neueste des eingeloggten Benutzers.
if (user.rolle === Enums.BenutzerRolle.USER) {
if (id) {
aufnahme = await prisma.aufnahme.findFirst({
where: user.rolle === Enums.BenutzerRolle.USER ? {
benutzer: {
id: user.id
},
} : {
...(id ? {
OR: [
{
verbrauchsausweise_gewerbe: {
some: {
id: {
contains: id
}
}
}
},
{
verbrauchsausweise_wohnen: {
some: {
id: {
contains: id
}
}
}
},
{
bedarfsausweise_wohnen: {
some: {
id: {
contains: id
}
}
}
},]} : {})
},
orderBy: {
erstellungsdatum: "desc"
const adapter = getPrismaAusweisAdapter(id);
ausweis = await adapter?.findUnique({
where: {
id,
benutzer_id: user.id
},
include: {
rechnung: true,
aufnahme: {
include: {
bilder: true,
unterlagen: true,
bedarfsausweise_wohnen: true,
verbrauchsausweise_gewerbe: true,
verbrauchsausweise_wohnen: true,
objekt: true
},
take: 1,
skip: (page - 1)
}
}
}
})
} else {
aufnahme = await prisma.aufnahme.findFirst({
where: user.rolle === Enums.BenutzerRolle.USER ? {
benutzer: {
id: user.id
},
} : {
OR: [
{
verbrauchsausweise_gewerbe: {
some: {
ausgestellt: false,
bestellt: true
result = await prisma.$queryRaw`SELECT id, updated_at FROM "VerbrauchsausweisWohnen" WHERE benutzer_id = ${user.id} UNION ALL SELECT id, updated_at FROM "VerbrauchsausweisGewerbe" WHERE benutzer_id = ${user.id} UNION ALL SELECT id, updated_at FROM "BedarfsausweisWohnen" WHERE benutzer_id = ${user.id} ORDER BY updated_at DESC LIMIT 1 OFFSET ${page}`;
}
} else {
if (id) {
const adapter = getPrismaAusweisAdapter(id);
ausweis = await adapter?.findUnique({
where: {
id
},
},
{
verbrauchsausweise_wohnen: {
some: {
ausgestellt: false,
bestellt: true
}
},
},
{
bedarfsausweise_wohnen: {
some: {
ausgestellt: false,
bestellt: true
}
},
}]
},
orderBy: {
erstellungsdatum: "desc"
},
include: {
rechnung: true,
aufnahme: {
include: {
bilder: true,
unterlagen: true,
bedarfsausweise_wohnen: true,
verbrauchsausweise_gewerbe: true,
verbrauchsausweise_wohnen: true,
objekt: true
},
take: 1,
skip: (page - 1)
}
}
}
})
} else {
result = await prisma.$queryRaw`SELECT id, updated_at FROM "VerbrauchsausweisWohnen" UNION ALL SELECT id, updated_at FROM "VerbrauchsausweisGewerbe" UNION ALL SELECT id, updated_at FROM "BedarfsausweisWohnen" ORDER BY updated_at DESC LIMIT 1 OFFSET ${page}`;
}
}
if (result.length > 0) {
const adapter = getPrismaAusweisAdapter(result[0].id);
ausweis = await adapter?.findUnique({
where: {
id: result[0].id
},
include: {
rechnung: true,
aufnahme: {
include: {
bilder: true,
unterlagen: true,
objekt: true
}
}
}
})
}
---
<UserLayout title="Objekte" {user}>
<DashboardAufnahmeModule {user} {aufnahme} benutzer={user} objekt={aufnahme.objekt} client:load/>
<DashboardAufnahmeModule {ausweis} benutzer={user} {totalPageCount} {page} client:load/>
<!-- {!aufnahme ? <p>Keine weiteren Ausweise vorhanden.</p> : <DashboardAufnahmeModule {user} {aufnahme} benutzer={user} objekt={aufnahme.objekt} client:load/>} -->
<!-- <DashboardModule {user} {objekte} totalPages={Math.ceil(totalPages / 25)} page={page} {id} client:load /> -->
</UserLayout>