From db258d99998764105ccd7ecbbbf962b6cbd28f11 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 21 Aug 2024 12:58:15 +0200
Subject: [PATCH] make the option selection component exchangeable

---
 .../AbstractDataInput.svelte}                              | 4 ++--
 .../components/{ => DataInput}/AbstractDropdownItem.svelte | 0
 src/routes/firstdropdown/+page.svelte                      | 5 +++--
 src/routes/nextdropdown/+page.svelte                       | 7 ++++---
 4 files changed, 9 insertions(+), 7 deletions(-)
 rename src/lib/components/{AbstractDropdown.svelte => DataInput/AbstractDataInput.svelte} (74%)
 rename src/lib/components/{ => DataInput}/AbstractDropdownItem.svelte (100%)

diff --git a/src/lib/components/AbstractDropdown.svelte b/src/lib/components/DataInput/AbstractDataInput.svelte
similarity index 74%
rename from src/lib/components/AbstractDropdown.svelte
rename to src/lib/components/DataInput/AbstractDataInput.svelte
index edf0f9bf..8e26ff2a 100644
--- a/src/lib/components/AbstractDropdown.svelte
+++ b/src/lib/components/DataInput/AbstractDataInput.svelte
@@ -1,5 +1,4 @@
 <script>
-	import AbstractItem from './AbstractDropdownItem.svelte';
 	// @ts-nocheck
 	/**
 	 * @type {any[]}
@@ -7,11 +6,12 @@
 	// @ts-ignore
 	export let data = [];
 	export let heading = 'dummy dropdown data';
+	export let itemComponent; // = AbstractDropdownItem;
 </script>
 
 <div class="items-center space-x-4 rtl:space-x-reverse">
 	<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
 	{#each data as data_element}
-		<AbstractItem data={data_element} />
+		<svelte:component this={itemComponent} data={data_element} />
 	{/each}
 </div>
diff --git a/src/lib/components/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte
similarity index 100%
rename from src/lib/components/AbstractDropdownItem.svelte
rename to src/lib/components/DataInput/AbstractDropdownItem.svelte
diff --git a/src/routes/firstdropdown/+page.svelte b/src/routes/firstdropdown/+page.svelte
index 6d6c0bdf..03a2c4a1 100644
--- a/src/routes/firstdropdown/+page.svelte
+++ b/src/routes/firstdropdown/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
-	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
 
 	const letteroptions = ['a', 'b', 'c', 'd'];
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
@@ -31,5 +32,5 @@
 </script>
 
 <AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/nextdropdown" infoPage="/info">
-	<AbstractDropdown data={data_to_display} {heading} />
+	<AbstractDataInput data={data_to_display} {heading} itemComponent={AbstractDropdownItem} />
 </AbstractContent>
diff --git a/src/routes/nextdropdown/+page.svelte b/src/routes/nextdropdown/+page.svelte
index 5825d933..e7263104 100644
--- a/src/routes/nextdropdown/+page.svelte
+++ b/src/routes/nextdropdown/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
-	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
+	import AbstractDropdownItem from '$lib/components/AbstractDropdownItem.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
 
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
 
@@ -33,9 +34,9 @@
 		}
 	];
 
-	const heading = 'the second dummy dropdown page';
+	const heading = 'the second data selection page';
 </script>
 
 <AbstractContent showBottomNavbar={true} lastPage="/firstdropdown" nextPage="/" infoPage="/info">
-	<AbstractDropdown data={dropdownData} {heading} />
+	<AbstractDataInput data={dropdownData} {heading} itemComponent={AbstractDropdownItem} />
 </AbstractContent>