PDF Designer Variablen Plugin

src/modules/Dashboard/DashboardPDFDesignerModule.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Designer } from "@pdfme/ui";
+	import { image, text } from "@pdfme/schemas";
+	import { variable } from "../../lib/pdf/plugins/variables/index"
 	import { onMount } from "svelte";
 
 	import { Template, BLANK_PDF } from "@pdfme/common";
@@ -12,12 +14,14 @@
 		],
 	};
 
+	let plugins = { Bild: image, Text: text, Variablen: variable }
+
 	let container: HTMLDivElement;
 
 	let designer: Designer;
 
 	onMount(() => {
-		designer = new Designer({ domContainer: container, template });
+		designer = new Designer({ domContainer: container, template, plugins });
 	});
 
 	function loadBasePDF() {
@@ -31,7 +35,7 @@
 
 			const basePdf = e.target.result as string;
 			const newTemplate = { ...template, basePdf };
-			designer = new Designer({ domContainer: container, template: newTemplate });
+			designer = new Designer({ domContainer: container, template: newTemplate, plugins });
 		};
 
 		reader.readAsDataURL(file);
@@ -74,7 +78,7 @@
 				if (!e.target) return;
 
 				const template = JSON.parse(e.target.result as string) as Template;
-				designer = new Designer({ domContainer: container, template });
+				designer = new Designer({ domContainer: container, template, plugins });
 			};
 
 			reader.readAsText(file);
@@ -86,7 +90,7 @@
 	let loadTemplateInput: HTMLInputElement;
 </script>
 
-<header>
+<header class="mb-4">
 	<button class="btn btn-secondary" on:click={() => loadTemplateInput.click()}>Change base PDF</button>
 	<button class="btn btn-secondary" on:click={addNewField}>Add new Field</button>
 	<button class="btn btn-secondary" on:click={exportTemplate}>Export</button>

src/modules/Dashboard/DashboardPDFViewerModule.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { variable } from "#lib/pdf/plugins/variables";
 	import { Benutzer, GebaeudeStammdaten, Rechnungen, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
 	import { Template } from "@pdfme/common";
 	import { Viewer } from "@pdfme/ui";
+	import { Check } from "radix-svelte-icons";
+	import { image, text } from "@pdfme/schemas";
 
 	type AusweisData = VerbrauchsausweisWohnen & { benutzer: Benutzer, gebaeude_stammdaten: GebaeudeStammdaten, rechnungen: Rechnungen }
 
@@ -47,7 +50,8 @@
 				viewer = new Viewer({
 					domContainer: pdfViewerContainer,
 					template,
-					inputs: [convertAusweisData(pdfInputs)]
+					inputs: [convertAusweisData(pdfInputs)],
+					plugins: { text, image, variable}
 				})
 			};
 
@@ -64,10 +68,13 @@
 			return
 		}
 
+		if (viewer) viewer.destroy();
+
 		viewer = new Viewer({
 			domContainer: pdfViewerContainer,
 			template,
-			inputs: [convertAusweisData(pdfInputs)]
+			inputs: [convertAusweisData(pdfInputs)],
+			plugins: { text, image, variable}
 		})
 	}
 
@@ -76,20 +83,21 @@
 
 <header>
 	<div>
-		<button class="btn btn-secondary" on:click={loadTemplate}>Load Template</button>
+		<button class="btn btn-secondary mb-4" on:click={loadTemplate}>Load Template</button>
 	</div>
 </header>
-<main class="grid grid-cols-[1fr_4fr]">
+<main class="grid grid-cols-[1fr_4fr] gap-4">
 	<div>
-		<h1>Ausweise</h1>
-		{#each ausweise as ausweis}
-			<div>
-				<h2 class="text-black">{ausweis.gebaeude_stammdaten.adresse}</h2>
-				<button class="btn btn-secondary" on:click={() => {
-					changeInputs(ausweis)
-				}}>Diesen Ausweis als Basis nehmen</button>
-			</div>
-		{/each}
+		<div class="flex flex-col gap-4">
+			{#each ausweise as ausweis}
+				<div class="rounded-lg border p-2 flex flex-row items-center justify-between">
+					<h2 class="text-black">{ausweis.gebaeude_stammdaten.adresse}</h2>
+					<button class="btn btn-square btn-ghost p-1.5" on:click={() => {
+						changeInputs(ausweis)
+					}}><Check size={20}/></button>
+				</div>
+			{/each}
+		</div>
 	</div>
 	<div bind:this={pdfViewerContainer}></div>
 </main>