From 8f23246cc30a9fc5d7e0a54ec05f6c1c5ffdf159 Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 12 Apr 2024 09:24:48 +0200
Subject: [PATCH] Fix list creation

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/package.json                          |  6 ++-
 app/pnpm-lock.yaml                        | 17 ++++++++
 app/src/lib/components/ListenItem.svelte  | 15 -------
 app/src/lib/components/ProductList.svelte | 45 ++++++++++++--------
 app/src/lib/index.ts                      |  1 +
 app/src/routes/+page.svelte               | 50 ++++++++++++++++++++---
 app/src/routes/createlist/+page.svelte    | 37 -----------------
 7 files changed, 94 insertions(+), 77 deletions(-)
 delete mode 100644 app/src/lib/components/ListenItem.svelte
 delete mode 100644 app/src/routes/createlist/+page.svelte

diff --git a/app/package.json b/app/package.json
index 616a6f1..4af4732 100644
--- 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
index 6df9455..db7fc4b 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -4,6 +4,14 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  '@types/speakingurl':
+    specifier: ^13.0.6
+    version: 13.0.6
+  speakingurl:
+    specifier: ^14.0.1
+    version: 14.0.1
+
 devDependencies:
   '@iconify-json/flowbite':
     specifier: ^1.1.2
@@ -904,6 +912,10 @@ packages:
     resolution: {integrity: sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==}
     dev: true
 
+  /@types/speakingurl@13.0.6:
+    resolution: {integrity: sha512-ywkRHNHBwq0mFs/2HRgW6TEBAzH66G8f2Txzh1aGR0UC9ZoAUHfHxLZGDhwMpck4BpSnB61eNFIFmlV+TJ+KUA==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin@7.0.2(@typescript-eslint/parser@7.0.2)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-/XtVZJtbaphtdrWjr+CJclaCVGPtOdBpFEnvtNf/jRV0IiEemRrL0qABex/nEt8isYcnFacm3nPHYQwL+Wb7qg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -3205,6 +3217,11 @@ packages:
     resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
     dev: true
 
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
diff --git a/app/src/lib/components/ListenItem.svelte b/app/src/lib/components/ListenItem.svelte
deleted file mode 100644
index 77b23c0..0000000
--- a/app/src/lib/components/ListenItem.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	export let liste;
-
-	// Hier könntest du Funktionen für das Löschen oder Bearbeiten hinzufügen
-</script>
-
-<div>
-	<h3>{liste.titel}</h3>
-	<ul>
-		{#each liste.artikel as artikel}
-			<li>{artikel.name} ({artikel.menge}) - {artikel.geschäft}</li>
-		{/each}
-	</ul>
-	// Buttons für Bearbeiten und Löschen hier einfügen
-</div>
diff --git a/app/src/lib/components/ProductList.svelte b/app/src/lib/components/ProductList.svelte
index 7c42ca4..f2181f7 100644
--- 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
index 856f2b6..cfe6c83 100644
--- 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
index c1adf08..e13ae30 100644
--- 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
deleted file mode 100644
index 70bbfef..0000000
--- a/app/src/routes/createlist/+page.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-	import { db as DB } from '$lib/db';
-	import { get } from 'svelte/store';
-	import { Button, Input, Label } from 'flowbite-svelte';
-	import { goto } from '$app/navigation';
-
-	let name = '';
-
-	async function addList() {
-		if (name.trim() !== '') {
-			const db = get(DB);
-			await db.post({
-				type: 'list',
-				name: name,
-				version: ''
-			});
-			name = '';
-			goto('/');
-		}
-	}
-</script>
-
-<div class="flex min-h-screen flex-col items-center justify-center">
-	<h1 class="mb-8 text-3xl font-bold text-gray-700">Neue Einkaufsliste erstellen</h1>
-
-	<form
-		class="w-full max-w-md rounded bg-white px-8 py-6 shadow-md"
-		on:submit|preventDefault={addList}
-	>
-		<div class="mb-4">
-			<Label for="list-name" class="mb-2">Name der Einkaufsliste:</Label>
-			<Input id="list-name" bind:value={name} placeholder="List name" required class="w-full" />
-		</div>
-
-		<Button type="submit" variant="primary" class="w-full">Liste hinzufügen</Button>
-	</form>
-</div>