Fix list creation

Signed-off-by: pdamianik <[email protected]>
Gschaftlhaberer · Apr 12, 2024 · 8f23246 · 8f23246
1 parent 5bb19c5
commit 8f23246
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 77 deletions.
diff --git a/app/package.json b/app/package.json
@@ -51,5 +51,9 @@
 		"vitest": "^1.2.0",
 		"yaml": "^2.4.1"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@types/speakingurl": "^13.0.6",
+		"speakingurl": "^14.0.1"
+	}
 }
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/lib/components/ListenItem.svelte b/app/src/lib/components/ListenItem.svelte
diff --git a/app/src/lib/components/ProductList.svelte b/app/src/lib/components/ProductList.svelte
@@ -1,38 +1,47 @@
 <script lang="ts">
 	import type { ExistingDocument, ProductList } from '$lib/db';
-	import { Card, Heading } from 'flowbite-svelte';
+	import { Button, Card, Heading, Modal } from 'flowbite-svelte';
+	import TrashBinSolid from '~icons/flowbite/trash-bin-solid';
+	import ExclamationCircleSolid from '~icons/flowbite/exclamation-circle-solid';
 
 	export let productlist: ExistingDocument<ProductList>;
 
 	import { db as DB } from '$lib/db';
 	import { get } from 'svelte/store';
 
-	async function deleteList(id: string) {
+	async function deleteList() {
 		const db = get(DB);
-		const list = await db.get(id);
+		const list = await db.get(deleteModalId);
 		await db.remove(list);
 	}
-</script>
 
-<head>
-	<link
-		href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-		rel="stylesheet"
-	/>
-</head>
+	let deleteModal = false;
+	let deleteModalId = '';
+</script>
 
 <Card href={`/items/${productlist._id}`} {...$$restProps}>
 	<div class="flex items-center justify-between">
 		<Heading tag="h4">{productlist.name}</Heading>
-		<button
-			class="inline-flex items-center justify-center rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"
-			on:click|stopPropagation|preventDefault={() => {
-				if (confirm('Möchten Sie diese Liste wirklich löschen?')) {
-					deleteList(productlist._id);
-				}
+		<Button
+			color="red"
+			on:click={(e) => {
+				e.preventDefault();
+				deleteModal = true;
+				deleteModalId = productlist._id;
 			}}
 		>
-			<i class="fas fa-trash-alt"></i>
-		</button>
+			<TrashBinSolid aria-label="Löschen" />
+		</Button>
 	</div>
 </Card>
+
+<Modal bind:open={deleteModal} size="xs" autoclose outsideclose>
+	<div class="text-center">
+		<ExclamationCircleSolid class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200" />
+		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+			Sicher, dass sie dieses Produkt löschen möchten?
+		</h3>
+		<Button color="red" class="me-2" on:click={deleteList}>Ja, ich bin sicher</Button>
+		<Button color="alternative">Nein, abbrechen</Button>
+	</div>
+</Modal>
diff --git a/app/src/lib/index.ts b/app/src/lib/index.ts
@@ -1 +1,2 @@
 // place files you want to import through the `$lib` alias in this folder.
+export { default as getSlug } from 'speakingurl';
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { Heading, ListPlaceholder, Alert, P } from 'flowbite-svelte';
+	import { Heading, ListPlaceholder, Alert, P, Modal, Button, Label, Input } from 'flowbite-svelte';
 	import type { PageData } from './$types';
 	import { db, type ExistingDocument, type ProductList as PL } from '$lib/db';
 	import ProductList from '$lib/components/ProductList.svelte';
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+	import PlusOutline from '~icons/flowbite/plus-outline';
+	import { getSlug } from '$lib';
 
 	export let data: PageData;
 
@@ -52,6 +55,22 @@
 		}
 		return result;
 	});
+
+	let name = '';
+	let createModal = false;
+
+	async function addList() {
+		if (name.trim() !== '') {
+			await get(db).put({
+				_id: getSlug(name),
+				type: 'list',
+				name: name,
+				version: ''
+			});
+			name = '';
+			createModal = false;
+		}
+	}
 </script>
 
 <svelte:head>
@@ -74,11 +93,30 @@
 	{/await}
 
 	<!-- Button zum Erstellen einer neuen Liste -->
-	<a
-		href="/createlist"
-		class="mt-5 inline-flex items-center justify-center rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700"
+	<Button
+		size="xl"
+		on:click={() => (createModal = true)}
+		class="mt-5 flex flex-row items-center justify-center gap-2"
 	>
-		<i class="fas fa-plus mr-2"></i>
+		<PlusOutline />
 		<span>Neue Liste erstellen</span>
-	</a>
+	</Button>
 </div>
+
+<Modal bind:open={createModal} outsideclose>
+	<form class="flex flex-col space-y-6" on:submit|preventDefault={addList}>
+		<Heading tag="h4">Neue Einkaufsliste erstellen</Heading>
+		<Label for="list-name" class="space-y-2"
+			><span>Name der Einkaufsliste:</span>
+			<Input
+				id="list-name"
+				bind:value={name}
+				placeholder="List name"
+				required
+				class="w-full"
+			/></Label
+		>
+
+		<Button type="submit" variant="primary" class="w-full">Liste hinzufügen</Button>
+	</form>
+</Modal>
diff --git a/app/src/routes/createlist/+page.svelte b/app/src/routes/createlist/+page.svelte