refactor style creation

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

Hide file tree

Showing 3 changed files with 100 additions and 79 deletions.
diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
@@ -1,82 +1,94 @@
-<script>
-	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
-	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
-	import { Heading } from 'flowbite-svelte';
-	import AbstractContent from './AbstractContent.svelte';
-
-	export function generateData() {
-		return [
-			{
-				name: 'Anna',
-				info: 'A child that is making a mess and is doing good. Click to view more.',
-				href: '/surveyfeedback'
-			},
-			{
-				name: 'Ben',
-				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.',
-				href: '/surveyfeedback'
-			},
-			{
-				name: 'C',
-				info: 'A child that is making a mess and is doing good. Click to view more.',
-				href: '/surveyfeedback'
-			},
-			{
-				name: 'Dora',
-				image: '/children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.',
-				href: '/surveyfeedback'
-			},
-			{
-				name: 'E',
-				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.',
-				href: '/surveyfeedback'
-			},
-			{
-				name: 'F',
-				image: 'children.png',
-				info: 'A child that is making a mess and is doing good. Click to view more.',
-				href: '/surveyfeedback'
-			}
-		];
-	}
-
+<script context="module">
 	export function convertData(rawdata) {
 		let data = rawdata.map((item) => {
 			return {
 				header: item.name,
 				summary: item.info,
 				image: item.image,
-				href: item.href ? item.href : '/',
-				props: {
-					horizontal: item.image ? true : false
-				}
+				href: item.href ? item.href : '/'
 			};
 		});
 
 		// 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'
-				}
-			}
+			href: '/'
 		});
 		return data;
 	}
 
-	const data = convertData(generateData());
+	export function createStyle(data) {
+		return data.map((item) => ({
+			card:
+				item.header === 'Neu'
+					? {
+							class:
+								'm-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700',
+							horizontal: false
+						}
+					: { horizontal: item.image ? true : false },
+			header:
+				item.header == 'Neu'
+					? {
+							class: 'mb-2 text-2xl font-bold tracking-tight text-white dark:text-white'
+						}
+					: null,
+			summary:
+				item.header == 'Neu'
+					? {
+							class: 'mb-3 flex font-normal leading-tight text-white dark:text-gray-400'
+						}
+					: null,
+			button: null
+		}));
+	}
+</script>
+
+<script>
+	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
+	import { Heading } from 'flowbite-svelte';
+	import AbstractContent from './AbstractContent.svelte';
+
+	const rawdata = [
+		{
+			name: 'Anna',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'Ben',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'C',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'Dora',
+			image: '/children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'E',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'F',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		}
+	];
+
+	const data = convertData(rawdata);
 </script>
 
 <AbstractContent showNavIcons={false} iconProps={{ class: 'w-10 h-10' }}>
@@ -86,7 +98,11 @@
 		<p class="text-lg text-gray-700 dark:text-gray-400">
 			Wählen sie ein Kind zur Beobachtung aus oder legen melden sie ein neues Kind an.
 		</p>
-
-		<GalleryDisplay {data} itemComponent={CardDisplay} searchableCol={'header'} />
+		<GalleryDisplay
+			{data}
+			itemComponent={CardDisplay}
+			searchableCol={'header'}
+			componentProps={createStyle(data)}
+		/>
 	</div>
 </AbstractContent>
diff --git a/src/lib/components/DataDisplay/CardDisplay.svelte b/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -6,39 +6,43 @@
 		summary: undefined,
 		button: undefined,
 		href: undefined,
-		image: undefined,
-		props: {
-			header: {},
-			summary: {},
-			button: {}
-		}
+		image: undefined
+	};
+
+	export let styleProps = {
+		card: {},
+		header: {},
+		summary: {},
+		button: {}
 	};
 </script>
 
 <Card
 	img={data.image}
 	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}
+	class={data.button
+		? 'm-2 max-w-prose'
+		: 'hover:transition-color m-2 max-w-prose cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600'}
+	{...styleProps.card}
 >
 	{#if data.header}
 		<h5
 			class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white"
-			{...data.props.header}
+			{...styleProps.header}
 		>
 			{data.header}
 		</h5>
 	{/if}
 	{#if data.summary}
 		<p
 			class="mb-3 flex font-normal leading-tight text-gray-700 dark:text-gray-400"
-			{...data.props.summary}
+			{...styleProps.summary}
 		>
 			{data.summary}
 		</p>
 	{/if}
 	{#if data.button}
-		<Button href={data.href} class="w-fit" {...data.props.button}
+		<Button href={data.href} class="w-fit" {...styleProps.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
@@ -13,17 +13,18 @@
 	import { SearchOutline } from 'flowbite-svelte-icons';
 
 	export let data;
-	export let header;
+	export let header = null;
 	export let itemComponent;
 	export let withSearch = true;
 	export let searchableCol = '';
+	export let componentProps;
 
 	// dynamic statements
 	let searchTerm = '';
 	$: filteredItems = filterDataByColumn(data, searchableCol, searchTerm);
 </script>
 
-{#if header}
+{#if header !== null}
 	<Heading
 		tag="h1"
 		class="mb-2  tracking-tight "
@@ -44,7 +45,7 @@
 {/if}
 
 <Gallery class="grid-cols-1 justify-center gap-8 md:grid-cols-2">
-	{#each filteredItems as item}
-		<svelte:component this={itemComponent} data={item} />
+	{#each filteredItems as item, index}
+		<svelte:component this={itemComponent} data={item} styleProps={componentProps[index]} />
 	{/each}
 </Gallery>