From 84d874f81fd6eb25da550c74ffe208912a052e51 Mon Sep 17 00:00:00 2001
From: Botvid Johansson <asdf@qwertyist.se>
Date: Thu, 13 Feb 2025 19:20:57 +0100
Subject: [PATCH] =?UTF-8?q?kan=20v=C3=A4lja=20mellan=20=C3=A4mneslistor=20?=
 =?UTF-8?q?och=20standardlistor=20med=20cachning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/listselector.svelte | 101 +++++++++++++++++++++++++++++
 src/components/menu.svelte         |   8 +++
 src/lib/stores.svelte.ts           |   2 +-
 src/modules/shortforms.ts          |   2 +
 src/routes/+page.svelte            |   8 +++
 5 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/components/listselector.svelte

diff --git a/src/components/listselector.svelte b/src/components/listselector.svelte
new file mode 100644
index 0000000..ddb08e7
--- /dev/null
+++ b/src/components/listselector.svelte
@@ -0,0 +1,101 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import * as Card from '$lib/components/ui/card/index';
+	import * as Select from '$lib/components/ui/select';
+	import { Label } from '$lib/components/ui/label';
+	import { db } from '../db/main';
+	import { liveQuery } from 'dexie';
+	import { shortforms } from '$lib/stores.svelte';
+	import { cacheShortforms } from '../modules/shortforms';
+
+	const onSelectedStandardListChange = (e) => {
+		console.log('onSelectedStandardListChange', e);
+		shortforms.standardList = e.value;
+		cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectLists)]);
+	};
+
+	const onSelectedSubjectListChange = (e) => {
+		console.log('onSelectedSubjectListChange', e);
+		shortforms.subjectList = e.value;
+		cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
+	};
+
+	const onSubmit = (e) => {
+		e.preventDefault();
+		console.log('submit', listSelectorForm);
+	};
+
+	let listSelectorForm = {
+		standard: { value: '', label: '' },
+		subject: { value: '', label: '' }
+	};
+
+	let standardLists = [];
+	let subjectLists = [];
+	onMount(() => {
+		db.lists.toArray().then((lists) => {
+			standardLists = lists.filter((l) => l.type == 0);
+			subjectLists = lists.filter((l) => l.type == 1);
+		});
+	});
+</script>
+
+<Card.Root class="mx-auto w-[490px]">
+	<Card.Header>
+		<Card.Title>Välj förkortningslistor</Card.Title>
+		<Card.Description></Card.Description>
+	</Card.Header>
+	<Card.Content class="mx-auto">
+		<form
+			class="grid gap-4 py-4"
+			method="post"
+			enctype="multipart/form-data"
+			onsubmit={onSubmit}
+			autocomplete="off"
+		>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label>Standardlista</Label>
+				<Select.Root
+					selected={listSelectorForm.standard}
+					onSelectedChange={onSelectedStandardListChange}
+				>
+					<Select.Trigger class="w-[290px]">
+						<Select.Value placeholder="Ingen lista vald" />
+					</Select.Trigger>
+
+					<Select.Content>
+						{#each standardLists as list}
+							<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label>Ämneslista</Label>
+				<Select.Root
+					selected={listSelectorForm.subject}
+					onSelectedChange={onSelectedSubjectListChange}
+					disabled={subjectLists.length < 1}
+				>
+					<Select.Trigger class="w-[290px]">
+						<Select.Value placeholder="Ingen lista vald" />
+					</Select.Trigger>
+
+					<Select.Content>
+						{#each subjectLists as list}
+							<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<button type="submit" class="hidden" />
+		</form>
+	</Card.Content>
+	<!--
+	<Card.Footer class="flex justify-between">
+		<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
+		<Button on:click={handleCreate}>Importera</Button>
+	</Card.Footer>
+	-->
+</Card.Root>
diff --git a/src/components/menu.svelte b/src/components/menu.svelte
index b66fd7c..0f07199 100644
--- a/src/components/menu.svelte
+++ b/src/components/menu.svelte
@@ -38,6 +38,14 @@
 		</DropdownMenu.Group>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Group>
+			<DropdownMenu.Item
+				on:click={() => {
+					appState.open = 'selectLists';
+				}}
+			>
+				Välj listor
+				<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
 			<DropdownMenu.Item>
 				Förkortningar
 				<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts
index 38c6ab6..3a28c1d 100644
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -32,7 +32,7 @@ const colorThemes = [
 
 let selectedColor = 0;
 
-export const shortforms = $state({ standardList: "", subjectLists: [], cache: new Map() })
+export const shortforms = $state({ standardList: "", subjectList: "", cache: new Map() })
 export const importState = $state({ data: "", errors: [] })
 export const textSettings = $state({ font: "Arial", size: 30, colors: colorSetting, padding: 0, lineheight: 1 })
 export const appState = $state({ text: "", menuOpen: false, open: "" })
diff --git a/src/modules/shortforms.ts b/src/modules/shortforms.ts
index 004b385..9269cc5 100644
--- a/src/modules/shortforms.ts
+++ b/src/modules/shortforms.ts
@@ -49,6 +49,8 @@ export function cacheShortforms(lists: Array<number> = []) {
 
 		})
 	}
+
+	shortforms.cache = cache
 	return cache;
 }
 export function expandShortform(
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0075005..37e1b72 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import Textarea from '../components/textarea.svelte';
 	import Import from '../components/import/import.svelte';
 	import Create from '../components/create.svelte';
+	import ListSelector from '../components/listselector.svelte';
 	import Dashboard from '../components/dashboard.svelte';
 	import { db, deleteShortformList, type Shortform } from '../db/main';
 	import Menu from '../components/menu.svelte';
@@ -43,6 +44,13 @@
 			<Create />
 		</div>
 	{/if}
+	{#if appState.open == 'selectLists'}
+		<div
+			class="fixed left-0 right-0 top-0 z-50 flex h-[calc(100%-1rem)] max-h-full w-full items-center justify-center align-middle md:inset-0"
+		>
+			<ListSelector />
+		</div>
+	{/if}
 	<div class="h-full">
 		<Menu />
 		<Textarea bind:ref={textarea} />