work on data integration

ssciwr · Oct 22, 2024 · e1e19d0 · e1e19d0
1 parent 92537d3
commit e1e19d0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -13,6 +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 +54,7 @@
 	$: valid = evalValid(value);
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
+	$: console.log('disabled field: ', disabled);
 </script>
 
 {#if label}
@@ -62,8 +64,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 +77,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/DataInput/RadioList.svelte b/frontend/src/lib/components/DataInput/RadioList.svelte
@@ -16,6 +16,7 @@
 		dispatch('click', { value: event.target.value });
 	}
 	export let value: any;
+	export let disabled: boolean = false;
 	let windowWidth = 1920;
 	$: smallScreen = windowWidth < 800;
 </script>
@@ -27,6 +28,7 @@
 		{#each $$props.items as item, index}
 			<RadioButton
 				class="mx-2"
+				{disabled}
 				bind:group={value}
 				value={item.value}
 				on:change={handleChange}
@@ -38,6 +40,7 @@
 		{#each $$props.items as item, index}
 			<Radio
 				class="mx-2"
+				{disabled}
 				bind:group={value}
 				value={item.value}
 				on:change={handleChange}

diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
@@ -61,9 +61,9 @@
 
 			// disable all elements to make editing a conscious choice
 			for (let element of data) {
-				element.props.disabled = true;
+				element.disabled = true;
 			}
-			currentDataSubmitted = true;
+			dataIsCurrent = true;
 		}
 	}
 
@@ -78,14 +78,16 @@
 
 	// flags for enabling and disabling visual hints
 	let showAlert: boolean = false;
-	let currentDataSubmitted: boolean = false;
+	let dataIsCurrent: boolean = false;
+	$: reload = false;
 
 	// what is shown in the alert if showAlert === true
 	let alertMessage: string = $_('userData.alertMessageMissing');
 
 	// load questions and current answers from server and put them into the data
 	// structure that the UserDataInput component understands
 	onMount(async () => {
+		console.log('onmount');
 		const currentUser = await usersCurrentUser();
 
 		if (currentUser.error) {
@@ -135,10 +137,20 @@
 				console.log('data from backend: ', 'currentAnswers: ', currentAnswers?.data);
 				for (let i = 0; i < data.length; i++) {
 					data[i].value = currentAnswers.data[i].answer;
+					data[i].disabled = true;
+					dataIsCurrent = true;
 				}
 			}
 		}
+		console.log('onmount done');
+		reload = true;
 	});
+	console.log(
+		'data: ',
+		data.map((e) => {
+			e.value;
+		})
+	);
 </script>
 
 <!-- Show big alert message when something is missing -->
@@ -182,17 +194,19 @@
 					}}
 				/>
 			{/each}
-			{#if currentDataSubmitted === true}
+			{#if dataIsCurrent === true}
 				<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={() => {
+						console.log('dataiscurrent click');
 						for (let element of data) {
-							element.props.disabled = false;
+							element.disabled = false;
 						}
+						dataIsCurrent = false;
 					}}
 				>
-					<div class="flex items-center justify-center">$_('userData.changeData')</div>
+					<div class="flex items-center justify-center">{$_('userData.changeData')}</div>
 				</Button>
 			{:else}
 				<Button

diff --git a/frontend/src/routes/userLand/userLandingpage/+page.svelte b/frontend/src/routes/userLand/userLandingpage/+page.svelte
@@ -13,7 +13,7 @@
 
 		if (asItems) {
 			return values.map((v) => {
-				return { name: String(v), value: v };
+				return { name: String(v), value: String(v) };
 			});
 		} else {
 			return values;
@@ -25,7 +25,7 @@
 
 		if (asItems) {
 			return values.map((v) => {
-				return { name: String(v), value: v };
+				return { name: String(v), value: String(v) };
 			});
 		} else {
 			return values;
@@ -37,6 +37,8 @@
 			component: Select,
 			value: null,
 			additionalValue: null,
+			disabled: false,
+			showTextField: false,
 			props: {
 				name: $_('userData.yearOfBirth.label'),
 				items: numericalRange(60, 1960, 1, true),
@@ -50,6 +52,8 @@
 			component: RadioList,
 			value: null,
 			additionalValue: null,
+			disabled: false,
+			showTextField: false,
 			props: {
 				name: $_('userData.gender.label'),
 				items: [
@@ -72,6 +76,8 @@
 			component: Select,
 			value: null,
 			additionalValue: null,
+			disabled: false,
+			showTextField: false,
 			props: {
 				name: $_('userData.education.label'),
 				items: [
@@ -97,6 +103,8 @@
 			component: Select,
 			value: null,
 			additionalValue: null,
+			disabled: false,
+			showTextField: false,
 			props: {
 				name: $_('userData.workingHours.label'),
 				items: intervalRange(13, 0, 5, true),
@@ -111,6 +119,8 @@
 			component: Select,
 			value: null,
 			additionalValue: null,
+			disabled: false,
+			showTextField: false,
 			props: {
 				name: $_('userData.incomePerYear.label'),
 				items: intervalRange(23, 0, 5000, true),
@@ -125,6 +135,8 @@
 			component: Input,
 			value: null,
 			additionalValue: null,
+			disabled: false,
+			showTextField: false,
 			props: {
 				name: $_('userData.profession.label'),
 				type: 'text',