add 'change' and 'disable when done' functionality to data inptu

ssciwr · Oct 18, 2024 · 4ff8432 · 4ff8432
1 parent c79c449
commit 4ff8432
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -56,28 +56,42 @@
 					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
 					}}
 				/>
 			{/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
@@ -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",