From 4ff843289db81c109b260cba1f97d2de0effb0fe Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 18 Oct 2024 15:16:00 +0200
Subject: [PATCH] add 'change' and 'disable when done' functionality to data
 inptu

---
 .../lib/components/DataInput/DataInput.svelte |  7 +++--
 .../src/lib/components/UserDataInput.svelte   | 28 ++++++++++++++-----
 frontend/src/locales/de.json                  |  1 +
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 09edb483..965eb63f 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -13,7 +13,7 @@
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
 	export let additionalInput: any = null;
-
+	export let disabled: boolean = false;
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
 
@@ -53,6 +53,7 @@
 	$: valid = evalValid(value);
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
+	$: console.log('value in datainput: ', value);
 </script>
 
 {#if label}
@@ -62,8 +63,9 @@
 <div class="space-y-4">
 	<svelte:component
 		this={component}
+		{disabled}
 		class={highlight
-			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
+			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
@@ -74,6 +76,7 @@
 
 	{#if showTextField === true}
 		<Textarea
+			{disabled}
 			bind:value={additionalInput}
 			on:blur={additionalEventHandlers['on:blur']}
 			on:change={additionalEventHandlers['on:change']}
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index 7a722d8b..f7eafa06 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -56,17 +56,21 @@
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
+					disabled={done}
 					eventHandlers={{
-						'on:change': () => {
-							done = false;
-							element?.onchange();
+						'on:change': (e) => {
+							if (element.onchange) {
+								element.onchange(e);
+							}
 						},
 						'on:blur': element.onblur,
 						'on:click': element.onclick
 					}}
 					additionalEventHandlers={{
-						'on:change': () => {
-							done = false;
+						'on:change': (e) => {
+							if (element.additionalOnChange) {
+								element.additionalOnChange(e);
+							}
 						},
 						'on:blur': element.onblur,
 						'on:click': element.onclick
@@ -74,10 +78,20 @@
 				/>
 			{/each}
 			{#if done}
-				<div class="m-2 flex items-center justify-center p-2 text-gray-700 dark:text-gray-400">
-					<CheckCircleOutline size="xl" color="green" class="m-2" />
+				<div
+					class="m-2 flex w-full items-center justify-center p-2 text-gray-700 dark:text-gray-400"
+				>
+					<CheckCircleOutline size="xl" color="green" class="" />
 					{$_('userData.submitSuccessMessage')}
 				</div>
+
+				<Button
+					type="button"
+					class="dark:bg-primay-700 bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-800 w-full text-center text-sm text-white hover:text-white"
+					on:click={(e) => {
+						done = false;
+					}}>{$_('userData.changeButtonLabel')}</Button
+				>
 			{:else}
 				<Button
 					class="dark:bg-primay-700 bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-800 w-full text-center text-sm text-white hover:text-white"
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index c8774d32..ce3959ad 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -81,6 +81,7 @@
 		"alertMessageMissing": "Bitte füllen Sie die benötigten Felder (hervorgehoben) aus.",
 		"alertMessageError": "Ein Fehler ist aufgetreten",
 		"submitButtonLabel": "Abschließen",
+		"changeButtonLabel": "Ändern",
 		"submitSuccessMessage": "Vielen Dank!",
 		"yearOfBirth": {
 			"label": "Geburtsjahr",