Dashboard, Types und Formular

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -19,35 +19,39 @@
 	import Overlay from "#components/Overlay.svelte";
 	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
 	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
-	import { UploadedGebaeudeBild, VerbrauchsausweisWohnenClient, GebaeudeClient, BenutzerClient, GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+	import { VerbrauchsausweisWohnenClient, BenutzerClient } from "#components/Ausweis/types";
 	import { dialogs } from "svelte-dialogs";
 	import LoginDialog from "#components/LoginDialog.svelte";
+	import { exclude } from "#lib/exclude";
 			
-	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
-	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient = {} as GebaeudeAufnahmeClient;
-	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;
 
+	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
+	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
+	let images = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
+
 	async function bilderHochladen() {
 		if (images.length == 0) {
 			return;
 		}
 
+		const imagesToUpload = images.filter(image => !image.uid);
+
+		if (imagesToUpload.length == 0) {
+			return;
+		}
+
 		// Alle Bilder hochladen
 		const notification = addNotification({
 			dismissable: false,
 			message: "Bilder hochladen.",
-			subtext: `${images.length} Bilder werden hochgeladen, bitte haben sie Geduld.`,
+			subtext: `${imagesToUpload.length} Bilder werden hochgeladen, bitte haben sie Geduld.`,
 			timeout: 0,
 			type: "info"
 		})
-		for (let i = 0; i < images.length; i++) {
-			const image = images[i];
-			if (image.uid) {
-				// Bild wurde bereits hochgeladen, wir müssen es also nicht nochmal hochladen.
-				continue
-			}
+		for (let i = 0; i < imagesToUpload.length; i++) {
+			const image = imagesToUpload[i];
 
 			try {
 				const response = await client.v1.bilder.upload.mutate({
@@ -61,15 +65,15 @@
 				updateNotification(notification, {
 					dismissable: true,
 					message: "Bild hochgeladen.",
-					subtext: `${i + 1}/${images.length} Bildern wurden erfolgreich hochgeladen, bitte haben sie Geduld.`,
-					timeout: 4000
+					subtext: `${i + 1}/${imagesToUpload.length} Bildern wurden erfolgreich hochgeladen.`,
+					timeout: 3000
 				})
 			} catch (e) {
 				updateNotification(notification, {
 					dismissable: true,
 					message: "Bild konnte nicht hochgeladen werden.",
-					subtext: `Bild ${i + 1}/${images.length} konnte nicht hochgeladen werden, wir haben bereits ein Ticket erstellt und melden uns so schnell wie möglich bei ihnen.`,
-					timeout: 150000,
+					subtext: `Eines ihrer Bilder konnte nicht hochgeladen werden. Wir haben bereits ein Ticket erstellt und melden uns so schnell wie möglich bei ihnen.`,
+					timeout: 15000,
 					type: "error"
 				})
 			}
@@ -92,10 +96,17 @@
 			// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
 			// Jetzt müssen wir ihn nun nur noch abspeichern.
 			try {
+				const gebaeudeBilderEntfernt = exclude(gebaeude, ["gebaeude_bilder"])
+				const gebaeudeAufnahmeGeneratedFieldsEntfernt = exclude(gebaeude_aufnahme_allgemein, ["erstellungsdatum"])
+				const ausweisGeneratedFieldsEntfernt = exclude(ausweis, ["ausweisart", "rechnungen"])
 				await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
-					ausweis,
-					gebaeude,
-					gebaeude_aufnahme_allgemein
+					...ausweisGeneratedFieldsEntfernt,
+					gebaeude_aufnahme_allgemein: {
+						...gebaeudeAufnahmeGeneratedFieldsEntfernt,
+						gebaeude_stammdaten: {
+							...gebaeudeBilderEntfernt
+						}
+					}
 				})
 
 				await bilderHochladen();
@@ -108,9 +119,13 @@
 			// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
 			try {
 				const response = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
-					ausweis,
-					gebaeude,
-					gebaeude_aufnahme_allgemein
+					...ausweis,
+					gebaeude_aufnahme_allgemein: {
+						...gebaeude_aufnahme_allgemein,
+						gebaeude_stammdaten: {
+							...gebaeude
+						}
+					}
 				})
 				ausweis.uid = response.uid;
 				gebaeude.uid = response.gebaeude_uid;

src/modules/Dashboard/DashboardAusweiseModule.svelte

@@ -1,60 +1,73 @@
 <script lang="ts">
-	import { BenutzerClient } from "#components/Ausweis/types";
+	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
 	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
+	import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
 	import { client } from "src/trpc";
+	import { onMount } from "svelte";
 	export let user: BenutzerClient;
 
-	let ausweisRequest = client.v1.benutzer.getAusweise.query({
-		limit: 10
-	});
+	let ausweise: VerbrauchsausweisWohnenClient[] | null = null;
+
+	let ausweisUeberpruefung: ReturnType<typeof verbrauchsausweisWohnenCalculateFormProgress>[] = [];
+	let errorCount = 0;
+
+	onMount(async () => {
+		ausweise = await client.v1.verbrauchsausweisWohnen.getMany.query({
+			limit: 10
+		});
+
+		if (!ausweise) return;
+
+		ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));
+
+		errorCount = ausweisUeberpruefung.reduce((acc, { errors }) => acc + errors.length, 0);
+	})
+
+	
 </script>
 
+{#if errorCount > 0}
 <h1 class="text-4xl font-medium my-8">Wichtiges</h1>
 
-<div class="flex flex-row gap-4">
-	<div class="card w-96 card-bordered bg-base-200 border-base-300">
-		<div class="card-body">
-			<div class="badge badge-warning font-semibold">Warnung!</div>
-			<h2 class="card-title">Gebäudebilder</h2>
-			<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
-			<div class="card-actions justify-end">
-				<a class="btn btn-primary">Beheben</a>
+<div class="flex flex-row gap-4 overflow-x-auto">
+	{#each ausweisUeberpruefung as { errors }}
+		{#if errors.length > 0}
+			<div class="card w-96 card-bordered bg-base-200 border-base-300">
+				<div class="card-body">
+					<div class="badge font-semibold" class:badge-warning={errors[0].severity == "warning"} class:badge-error={errors[0].severity == "error"}>{errors[0].severity == "error" ? "Achtung!" : "Wichtig!"}</div>
+					<h2 class="card-title">{errors[0].title}</h2>
+					<p>{errors[0].description}</p>
+					{#if errors[0].resolvehref}
+					<div class="card-actions justify-end">
+						<a class="btn btn-primary" href={errors[0].resolvehref}>Beheben</a>
+					</div>
+					{/if}
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="card w-96 card-bordered bg-base-200 border-base-300">
-		<div class="card-body">
-			<div class="badge badge-error font-semibold">Fehler!</div>
-			<h2 class="card-title">Daten</h2>
-			<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
-			<div class="card-actions justify-end">
-				<a class="btn btn-primary">Beheben</a>
-			</div>
-		</div>
-	</div>
+		{/if}
+	{/each}
 </div>
+{/if}
 
 <h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
 	
 <div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
 
-	{#await ausweisRequest}
+	{#if ausweise === null}
 		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
-		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
-		
-	{:then ausweise}
+	{:else}
 		{#if ausweise.length == 0}
 			<div class="">
 				<h1 class="text-2xl">Es konnten keine Ausweise gefunden werden.</h1>
 				<p>Erstellen sie einen Verbrauchsausweis für ihr Wohngebäude <a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">hier</a></p>
 			</div>
 		{:else}
-			{#each ausweise as ausweis}
-				<DashboardAusweis {ausweis}></DashboardAusweis>
+			{#each ausweise as ausweis, i}
+				<DashboardAusweis progress={ausweisUeberpruefung[i]?.progress || 0} {ausweis}></DashboardAusweis>
 			{/each}
 		{/if}
-	{/await}
+	{/if}
 
 </div>
 

src/modules/Dashboard/UserModule.svelte

@@ -2,10 +2,11 @@
 	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
 	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
+	import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
 	export let user: BenutzerClient;
 	export let ausweise: VerbrauchsausweisWohnenClient[];
 
-	console.log(ausweise);
+	const ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));
 	
 </script>
 
@@ -41,8 +42,9 @@
 	{#if ausweise.length == 0}
 		
 	{:else}
-		{#each ausweise as ausweis}
-			<DashboardAusweis {ausweis}></DashboardAusweis>
+		{#each ausweise as ausweis, i}
+		{console.log(ausweis, i)}
+			<DashboardAusweis progress={ausweisUeberpruefung[i].progress} {ausweis}></DashboardAusweis>
 		{/each}
 	{/if}
 

src/modules/KaufabschlussModule.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import HelpLabel from "#components/HelpLabel.svelte";
 	import ZipSearch from "../components/PlzSuche.svelte";
 	import Label from "../components/Label.svelte";
 	import type {
@@ -15,12 +14,12 @@
 	import type { inferProcedureInput } from "@trpc/server";
 	import type { AppRouter } from "@ibcornelsen/api";
 	import CheckoutItem from "#components/CheckoutItem.svelte";
+	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 
-	export let user: Benutzer;
+	export let user: BenutzerClient;
 	export let ausweis:
-		| VerbrauchsausweisWohnen
-		| BedarfsausweisWohnen
-		| VerbrauchsausweisGewerbe;
+		| VerbrauchsausweisWohnenClient;
+	// TODO: überarbeiten und zu inferProcedureOutput machen
 	let rechnung: inferProcedureInput<
 		AppRouter["v1"]["rechnungen"]["erstellen"]
 	> = {};
@@ -53,7 +52,7 @@
 	];
 
 	export let selectedPaymentType: Bezahlmethoden =
-		Enums.Bezahlmethoden.PAYPAL;
+		Enums.Bezahlmethoden.paypal;
 
 	let agbAkzeptiert: boolean;
 	let datenschutzAkzeptiert: boolean;

src/modules/KundendatenModule.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
 	import type {
-		BedarfsausweisWohnen,
-		Benutzer,
 		Bezahlmethoden,
-		VerbrauchsausweisGewerbe,
-		VerbrauchsausweisWohnen,
 	} from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client";
 
-	export let user: Benutzer;
-	export let ausweis:
-		| VerbrauchsausweisWohnen
-		| BedarfsausweisWohnen
-		| VerbrauchsausweisGewerbe;
+	export let user: BenutzerClient;
+	export let ausweis: VerbrauchsausweisWohnenClient;
 
 	let services = [
 		{
@@ -46,6 +39,7 @@
 		Enums.Bezahlmethoden.paypal;
 
 	import { PRICES } from "#lib/constants";
+	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 
 	const prices = PRICES[ausweis.ausweisart];