rename link prpperty to something more common, add searchbar

ssciwr · Aug 23, 2024 · 9de2430 · 9de2430
1 parent fbb43f7
commit 9de2430
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 51 deletions.
diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
@@ -1,63 +1,79 @@
 <script>
 	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
 	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
-	import { Button, Heading } from 'flowbite-svelte';
-	import { PlusOutline } from 'flowbite-svelte-icons';
+	import { Heading } from 'flowbite-svelte';
 	import AbstractContent from './AbstractContent.svelte';
-	const cardProps = {
-		horizontal: true
-	};
 
 	export function generateData() {
 		return [
 			{
-				name: 'A',
-				tag: 'cohort1',
-				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.'
+				name: 'Anna',
+				info: 'A child that is making a mess and is doing good. Click to view more.',
+				href: '/surveyfeedback'
 			},
 			{
-				name: 'B',
-				tag: 'cohort1',
+				name: 'Ben',
 				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.'
+				info: 'A child that is making a mess and is doing good. Click to view more.',
+				href: '/surveyfeedback'
 			},
 			{
 				name: 'C',
-				tag: 'cohort2',
-				image: '/children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.'
+				info: 'A child that is making a mess and is doing good. Click to view more.',
+				href: '/surveyfeedback'
 			},
 			{
-				name: 'D',
-				tag: 'cohort1',
+				name: 'Dora',
 				image: '/children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.'
+				info: 'A child that is making a mess and is doing good. Click to view more.',
+				href: '/surveyfeedback'
 			},
 			{
 				name: 'E',
-				tag: 'cohort1',
 				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.'
+				info: 'A child that is making a mess and is doing good. Click to view more.',
+				href: '/surveyfeedback'
 			},
 			{
 				name: 'F',
-				tag: 'cohort2',
 				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.'
+				info: 'A child that is making a mess and is doing good. Click to view more.',
+				href: '/surveyfeedback'
 			}
 		];
 	}
 
-	export function convertData(data) {
-		return data.map((item) => {
+	export function convertData(rawdata) {
+		let data = rawdata.map((item) => {
 			return {
 				header: item.name,
 				summary: item.info,
 				image: item.image,
-				link: '/'
+				href: item.href ? item.href : '/',
+				props: {
+					horizontal: item.image ? true : false
+				}
 			};
 		});
+
+		// put in new element at the front which adds new child
+		data.unshift({
+			header: 'Neu',
+			summary: 'Ein neues Kind anmelden',
+			href: '/',
+			props: {
+				class:
+					'm-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700',
+				horizontal: false,
+				header: {
+					class: 'mb-2 text-2xl font-bold tracking-tight text-white dark:text-white'
+				},
+				summary: {
+					class: 'mb-3 flex font-normal leading-tight text-white dark:text-gray-400'
+				}
+			}
+		});
+		return data;
 	}
 
 	const data = convertData(generateData());
@@ -71,10 +87,6 @@
 			Wählen sie ein Kind zur Beobachtung aus oder legen melden sie ein neues Kind an.
 		</p>
 
-		<div>
-			<Button class="m-2" href="/"><PlusOutline class="h-24 w-24" /></Button>
-		</div>
-
-		<GalleryDisplay {data} itemComponent={CardDisplay} componentProps={cardProps} />
+		<GalleryDisplay {data} itemComponent={CardDisplay} searchableCol={'header'} />
 	</div>
 </AbstractContent>
diff --git a/src/lib/components/DataDisplay/CardDisplay.svelte b/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -5,29 +5,40 @@
 		header: undefined,
 		summary: undefined,
 		button: undefined,
-		link: undefined,
-		image: undefined
+		href: undefined,
+		image: undefined,
+		props: {
+			header: {},
+			summary: {},
+			button: {}
+		}
 	};
-	export let props = {};
 </script>
 
 <Card
 	img={data.image}
-	{...props}
-	class="hover:transition-color m-2 max-w-prose hover:bg-gray-300 dark:hover:bg-gray-600"
+	href={data.button ? null : data.href}
+	class="hover:transition-color m-2 max-w-prose cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600"
+	{...data.props}
 >
 	{#if data.header}
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white">
+		<h5
+			class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white"
+			{...data.props.header}
+		>
 			{data.header}
 		</h5>
 	{/if}
 	{#if data.summary}
-		<p class="mb-3 flex font-normal leading-tight text-gray-700 dark:text-gray-400">
+		<p
+			class="mb-3 flex font-normal leading-tight text-gray-700 dark:text-gray-400"
+			{...data.props.summary}
+		>
 			{data.summary}
 		</p>
 	{/if}
 	{#if data.button}
-		<Button href={data.link} class="w-fit"
+		<Button href={data.href} class="w-fit" {...data.props.button}
 			>{data.button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
 		>
 	{/if}

diff --git a/src/lib/components/DataDisplay/GalleryDisplay.svelte b/src/lib/components/DataDisplay/GalleryDisplay.svelte
@@ -1,9 +1,26 @@
+<script context="module">
+	export function filterDataByColumn(data, col, searchTerm) {
+		if (searchTerm === '') {
+			return data;
+		} else {
+			return data.filter((item) => item[col].toLowerCase().includes(searchTerm.toLowerCase()));
+		}
+	}
+</script>
+
 <script>
-	import { Gallery, Heading } from 'flowbite-svelte';
+	import { Button, Gallery, Heading, Search } from 'flowbite-svelte';
+	import { SearchOutline } from 'flowbite-svelte-icons';
+
 	export let data;
 	export let header;
 	export let itemComponent;
-	export let componentProps;
+	export let withSearch = true;
+	export let searchableCol = '';
+
+	// dynamic statements
+	let searchTerm = '';
+	$: filteredItems = filterDataByColumn(data, searchableCol, searchTerm);
 </script>
 
 {#if header}
@@ -17,8 +34,17 @@
 	</Heading>
 {/if}
 
+{#if withSearch}
+	<form class="flex gap-2">
+		<Search size="md" placeholder={'Search for child'} bind:value={searchTerm} />
+		<Button class="!p-2.5">
+			<SearchOutline class="h-6 w-6" />
+		</Button>
+	</form>
+{/if}
+
 <Gallery class="grid-cols-1 justify-center gap-8 md:grid-cols-2">
-	{#each data as item}
-		<svelte:component this={itemComponent} data={item} props={componentProps} />
+	{#each filteredItems as item}
+		<svelte:component this={itemComponent} data={item} />
 	{/each}
 </Gallery>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
@@ -10,60 +10,65 @@
 			header: 'Was ist Mondey?',
 			summary:
 				'Mondey ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von Kindern bis 6 Jahren.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		},
 		{
 			header: 'Wozu ist Mondey gut?',
 			summary:
 				'Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt einem übersichtlichen Ampelsystem.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		},
 		{
 			header: 'Was umfasst Mondey?',
 			summary:
 				'Mondey umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis 6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale Beziehungen.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		},
 		{
 			header: 'Wie funktioniert Mondey?',
 			summary:
 				'Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		},
 		{
 			header: 'Wo fange ich an?',
 			summary: 'Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.',
-			link: getStarted,
+			href: getStarted,
 			button: 'Los geht´s'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
+			href: '/info',
 			button: 'Mehr Info'
 		}
 	];
 
 	const props = {};
 </script>
 
-<GalleryDisplay itemComponent={CardDisplay} data={items} componentProps={props} />
+<GalleryDisplay
+	withSearch={false}
+	itemComponent={CardDisplay}
+	data={items}
+	componentProps={props}
+/>