break down childrenpage and start adding functionality

ssciwr · Aug 29, 2024 · 5b30b5c · 5b30b5c
1 parent 089e478
commit 5b30b5c
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 120 deletions.
diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
@@ -1,127 +1,141 @@
-<script>
-	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
-	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
-	import { Card, Heading, Input, Textarea } from 'flowbite-svelte';
-	$: data = [
-		{
-			itemComponent: Input,
-			componentProps: {
-				type: 'text',
-				name: 'name',
-				label: 'Name',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: Input,
-			componentProps: {
-				type: 'date',
-				name: 'dateofbirth',
-				label: 'Geburtsdatum',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Ja', 'Nein'],
-				label: 'Frühgeburt',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Männlich', 'Weiblich'],
-				label: 'Geschlecht',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['De', 'US', 'Fr', 'IT', 'Es'],
-				label: 'Nationalität',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
-				label: 'Bitte geben sie die erste Sprache an die das Kind gelernt hat',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: [
+<script lang="ts">
+	import { Button, Card, Heading, Input, Label, Select, Textarea } from 'flowbite-svelte';
+
+	const heading = 'Neues Kind registrieren';
+
+	let name: String;
+	let date_of_birth: Date;
+	let bornEarly: Boolean;
+	let gender: String;
+	let nationality: String;
+	let first_language: String;
+	let problems: String;
+	let relationship: String;
+	let remarks: String;
+
+	function onSubmit() {
+		let data = {
+			name,
+			date_of_birth,
+			bornEarly,
+			gender,
+			nationality,
+			first_language,
+			problems,
+			relationship
+		};
+		if (Object.values(data).every((val) => val !== undefined)) {
+			console.log('everything defined: ', data);
+			data['remarks' as String] = remarks;
+			return data;
+		} else {
+		}
+	}
+</script>
+
+<Card class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
+	{#if heading}
+		<Heading
+			tag="h3"
+			class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
+			>{heading}</Heading
+		>
+	{/if}
+
+	<div class="space-y-6rtl:space-x-reverse items-center justify-center space-x-4">
+		<form class="flex flex-col space-y-6">
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Name</Label>
+			<Input
+				type="text"
+				name="name"
+				required={true}
+				placeholder="Bitte eingeben"
+				bind:value={name}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geburtsdatum</Label>
+			<Input type="date" name="birthday" required={true} bind:value={date_of_birth} />
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Frühgeburt</Label>
+			<Select
+				name={'born_early'}
+				placeholder={'Bitte auswählen'}
+				items={[
+					{ name: 'Ja', value: 'Ja' },
+					{ name: 'Nein', value: 'Nein' }
+				]}
+				bind:value={bornEarly}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geschlecht</Label>
+			<Select
+				name={'gender'}
+				placeholder={'Bitte auswählen'}
+				items={[
+					{ name: 'männlich', value: 'männlich' },
+					{ name: 'weiblich', value: 'weiblich' }
+				]}
+				bind:value={gender}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Nationalität</Label>
+			<Select
+				name={'nationality'}
+				placeholder={'Bitte auswählen'}
+				items={['Deutschland', 'Grossbritannien', 'USA', 'China'].map((item) => ({
+					name: item,
+					value: item
+				}))}
+				bind:value={nationality}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Sprache</Label>
+			<Select
+				name={'first_language'}
+				placeholder={'Bitte auswählen'}
+				items={['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
+					(item) => ({ name: item, value: item })
+				)}
+				bind:value={first_language}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Verhältnis zum Kind</Label>
+			<Select
+				name={'Verhältnis zum Kind'}
+				placeholder={'Bitte auswählen'}
+				items={[
 					'Kind',
 					'Enkelkind',
 					'Neffe/Nichte',
 					'Pflegekind',
 					'Adoptivkind',
 					'Betreuung extern',
 					'Betreuung zu Hause'
-				],
-				value: '',
-				label: 'Verhältnis des Kindes zu ihnen',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
-				value: '',
-				label: 'Entwicklungsauffälligkeiten',
-				required: true
-			}
-		},
-		{
-			itemComponent: Textarea,
-			componentProps: {
-				name: 'Bitte eintragen',
-				label: 'Sonstige Anmerkungen',
-				rows: 5,
-				value: '',
-				required: true
-			}
-		}
-	];
+				].map((item) => ({ name: item, value: item }))}
+				bind:value={relationship}
+			/>
 
-	const heading = 'Neues Kind registrieren';
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400"
+				>Entwicklungsauffälligkeiten</Label
+			>
+			<Select
+				name={'developmental_problems'}
+				placeholder={'Bitte auswählen'}
+				items={['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'].map((item) => ({
+					name: item,
+					value: item
+				}))}
+				bind:value={problems}
+			/>
 
-	const buttons = [
-		{
-			label: 'Weiter',
-			href: '/'
-		}
-	];
-</script>
+			<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
+			<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen" />
 
-<div class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
-	<Card>
-		{#if heading}
-			<Heading
-				tag="h3"
-				class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
-				>{heading}</Heading
-			>
-		{/if}
-		<AbstractDataInput props={data} {buttons} />
-	</Card>
-</div>
+			<Button
+				class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
+				on:click={onSubmit}
+				>Weiter
+			</Button>
+		</form>
+	</div>
+</Card>
diff --git a/src/lib/components/DataInput/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte
@@ -2,7 +2,6 @@
 	import { Select, Tooltip } from 'flowbite-svelte';
 	// have the data processing here to coerce the input into the format that the component expects
 
-	console.log('passed props: ', $$props, ', value: ', $$props.value);
 	const items = $$props.items.map((item) => ({ name: item, value: item }));
 </script>
 

diff --git a/src/lib/components/DataInput/AbstractRegistrationForm.svelte b/src/lib/components/DataInput/AbstractRegistrationForm.svelte
@@ -5,7 +5,6 @@
 	export let heading = null;
 	export let buttons = null;
 	export let description = null;
-	console.log('props: ', props);
 </script>
 
 <div class="m-1 items-center justify-center pb-6">

diff --git a/src/lib/components/Navigation/NavigationButtons.svelte b/src/lib/components/Navigation/NavigationButtons.svelte
@@ -9,7 +9,7 @@
 		<Button
 			href={bprops.href}
 			class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
-			>{bprops.label}</Button
+			{...bprops.props}>{bprops.label}</Button
 		>
 	{/each}
 </ButtonGroup>