From e66d7e97f15ef4601595eea1e0d81d6a00e6b480 Mon Sep 17 00:00:00 2001
From: Aleksa Ognjanovic <alexa.ognjanovic@protonmail.com>
Date: Thu, 9 Jan 2025 13:45:57 +0100
Subject: [PATCH] Added choice option.

---
 src/routes/(dashboard)/+page.server.ts        |  9 ++++---
 src/routes/(dashboard)/columns.ts             |  3 +++
 .../(dashboard)/data-table-editable.svelte    | 24 ++++++++++++++++---
 src/routes/(dashboard)/data-table.svelte      |  6 +++++
 src/table.d.ts                                |  3 ++-
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/routes/(dashboard)/+page.server.ts b/src/routes/(dashboard)/+page.server.ts
index ff7dd03..9b11734 100644
--- a/src/routes/(dashboard)/+page.server.ts
+++ b/src/routes/(dashboard)/+page.server.ts
@@ -6,18 +6,21 @@ import { deleteSessionTokenCookie } from '$lib/server/session';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import { formSchema } from './schema';
+import { getDepartments } from '$lib/server/db/department';
 
 export const load: PageServerLoad = async ({ locals }) => {
 	const { database } = locals;
 	try {
 		const persons = await getPersons(database, 1000, 0);
+		const departments = await getDepartments(database);
 		return {
-			persons
+			persons,
+			departments
 		};
 	} catch (err: unknown) {
-		console.debug(`Failed to get persons: ${(err as Error).message}`);
+		console.debug(`Failed to get persons or departments: ${(err as Error).message}`);
 		return fail(500, {
-			message: 'Failed to get persons'
+			message: 'Failed to get persons or departments'
 		});
 	}
 };
diff --git a/src/routes/(dashboard)/columns.ts b/src/routes/(dashboard)/columns.ts
index 2478596..ab4a5f4 100644
--- a/src/routes/(dashboard)/columns.ts
+++ b/src/routes/(dashboard)/columns.ts
@@ -31,6 +31,9 @@ export const columns: ColumnDef<Person>[] = [
 		header: 'Department',
 		meta: {
 			editable: true,
+			editableChoices: (data) => {
+				return data.departments.map((val) => val.name);
+			}
 		}
 	},
 	{
diff --git a/src/routes/(dashboard)/data-table-editable.svelte b/src/routes/(dashboard)/data-table-editable.svelte
index 4576203..55fc3db 100644
--- a/src/routes/(dashboard)/data-table-editable.svelte
+++ b/src/routes/(dashboard)/data-table-editable.svelte
@@ -3,16 +3,19 @@
 	import type { Person } from '$lib/types/person';
 	import type { Table } from '@tanstack/table-core';
 	import { fly } from 'svelte/transition';
+	import * as Select from '$lib/components/ui/select';
 
 	let {
 		id,
 		value,
+		choices = null,
 		name,
 		enabled = false,
 		table
 	}: {
 		id: number;
 		value: string;
+		choices?: string[] | null;
 		name: string;
 		enabled?: boolean;
 		table: Table<Person>;
@@ -35,9 +38,24 @@
 </script>
 
 {#if enabled && table.options !== null && table.options.meta?.getEditChanges(id)}
-	<div in:fly>
-		<Input class="w-min field-sizing-content" bind:value={getChangesMap, updateChangesMap} />
-	</div>
+	{#if choices === null}
+		<div in:fly>
+			<Input class="w-min field-sizing-content" bind:value={getChangesMap, updateChangesMap} />
+		</div>
+	{:else}
+		<div in:fly>
+			<Select.Root type="single" bind:value={getChangesMap, updateChangesMap}>
+				<Select.Trigger>
+					{getChangesMap()}
+				</Select.Trigger>
+				<Select.Content>
+					{#each choices as choice}
+						<Select.Item value={choice}>{choice}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+	{/if}
 {:else}
 	<div in:fly>
 		{value}
diff --git a/src/routes/(dashboard)/data-table.svelte b/src/routes/(dashboard)/data-table.svelte
index fd69673..090b8ed 100644
--- a/src/routes/(dashboard)/data-table.svelte
+++ b/src/routes/(dashboard)/data-table.svelte
@@ -18,6 +18,7 @@
 	import { SvelteMap } from 'svelte/reactivity';
 	import DataTableEditable from './data-table-editable.svelte';
 	import type { PersonEditable } from './columns';
+	import { page } from '$app/stores';
 
 	type DataTableProps<Person> = {
 		columns: ColumnDef<Person>[];
@@ -81,6 +82,11 @@
 				renderComponent(DataTableEditable, {
 					id: row.original.id,
 					value: cell.getValue() as string,
+					choices:
+						columnDef.meta?.editableChoices === undefined ||
+						columnDef.meta?.editableChoices === null
+							? null
+							: columnDef.meta?.editableChoices($page.data),
 					name: columnDef.accessorKey,
 					enabled: columnDef.meta?.editable,
 					table: table
diff --git a/src/table.d.ts b/src/table.d.ts
index 8096944..8ec1399 100644
--- a/src/table.d.ts
+++ b/src/table.d.ts
@@ -5,7 +5,8 @@ declare module '@tanstack/table-core' {
         editables?: SvelteMap;
     }
     interface ColumnMeta<TData extends RowData, TValue> {
-        editable?: boolean
+        editable?: boolean,
+        editableChoices?: (data: any) => string[]
     }
     interface TableMeta<TData extends RowData> {
         setEditChanges: (id: number, changes?: PersonEditable) => void,