Merge branch 'development' into f090_magic_strings_refactoring

src/routes/(angemeldet)/list/+page.svelte

@@ -2,10 +2,9 @@
 	import Trash from '$lib/icons/Trash.svelte';
 	import Folder from '$lib/icons/Folder.svelte';
 	import EmptyList from '$lib/components/EmptyList.svelte';
-	import type { PageData } from '../$types';
 
-	// let { data } = $props();
-	export let data: PageData;
+	let { data } = $props();
+
 	let vorgangList = data.vorgangList;
 
 	let isEmptyList = vorgangList.length === 0;
@@ -48,7 +47,7 @@
 				<EmptyList></EmptyList>
 			{:else}
 				{#each vorgangList as vorgangItem}
-					<li>
+					<li data-testid="test-list-item">
 						<a
 							href="/list/{vorgangItem.vorgangToken}?pin={vorgangItem.vorgangPIN}"
 							class="flex justify-between gap-x-6 py-5"

src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -9,7 +9,7 @@
 	import ModalContent from '$lib/components/Modal/ModalContent.svelte';
 	import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
 	import Cube from '$lib/icons/Cube.svelte';
-	import { invalidate, invalidateAll } from '$app/navigation';
+	import { invalidateAll } from '$app/navigation';
 	import NameItemEditor from '$lib/components/NameItemEditor.svelte';
 	import EmptyList from '$lib/components/EmptyList.svelte';
 
@@ -26,8 +26,8 @@
 		// add other properties as needed
 	}
 
+	let crimesList = $state<ListItem[]>(data.crimesList);
 	let vorgangName: string = data.vorgang.vorgangName;
-	let crimesList: ListItem[] = $state(data.crimesList);
 	const vorgangPIN: string = data.vorgang.vorgangPIN;
 	let vorgangToken: string = data.vorgang.vorgangToken;
 	let isEmptyList = $derived(crimesList.length === 0);
@@ -37,12 +37,12 @@
 	let inProgress = $state(false);
 	let isError = $state(false);
 
-	//Variable um nur admin UI anzuzeigen
 	let admin = data?.user?.admin;
 
 	async function handleSave(newName: string, oldName: string) {
 		open = true;
 		inProgress = true;
+		isError = false;
 		try {
 			const res = await fetch(`/api/list/${vorgangToken}/${oldName}`, {
 				method: 'PUT',
@@ -50,29 +50,18 @@
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, oldName, newName })
-			})
-				.then(() => {
-					inProgress = false;
-				})
-				.catch((err) => {
-					inProgress = false;
-					isError = true;
-					console.log('ERROR', err);
-				});
+			});
 
 			if (!res.ok) {
-				const msg = await res.text();
-				console.error('❌ Fehler beim Umbenennen:', msg);
-				isError = true;
-				inProgress = false;
-			} else {
-				await invalidateAll();
-				crimesList = data.crimesList;
-				open = false;
-				inProgress = false;
+				throw new Error('Fehler beim Speichern');
 			}
+			await invalidateAll();
+			crimesList = data.crimesList;
+			open = false;
 		} catch (err) {
-			console.error('⚠️ Netzwerkfehler:', err);
+			console.error('⚠️ Netzwerkfehler beim Speichern', err);
+			isError = true;
+		} finally {
 			inProgress = false;
 		}
 	}
@@ -80,39 +69,31 @@
 	async function handleDelete(tatort: string) {
 		open = true;
 		inProgress = true;
-		let url = new URL(data.url);
-		url.pathname += `/${tatort}`;
-		console.log('Delete tatort: ', `/api${url.pathname}`, url.pathname);
+		isError = false;
+		let path = new URL(data.url).pathname;
+		path += `/${tatort}`;
 
 		try {
-			const res = await fetch(`/api${url.pathname}`, {
+			const res = await fetch(`/api${path}`, {
 				method: 'DELETE',
 				headers: {
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, tatort })
-			})
-				.then(() => {
-					inProgress = false;
-				})
-				.catch((err) => {
-					isError = true;
-					inProgress = false;
-					console.log('ERROR', err);
-				});
-			if (!res.ok) {
-				const msg = await res.text();
-				console.error('❌ Fehler beim Löschen:', msg);
-			} else {
-				console.log('🗑️ Erfolgreich gelöscht:', url.pathname);
-				await invalidateAll();
+			});
 
-				crimesList = data.crimesList;
+			if (!res.ok) {
+				throw new Error('Fehler beim Löschen');
 			}
+			crimesList = crimesList.filter((i) => i.name !== tatort);
+			await invalidateAll();
+			console.log('🗑️ Erfolgreich gelöscht:', path);
+			open = false;
 		} catch (err) {
+			console.error('⚠️ Netzwerkfehler beim Speichern', err);
 			isError = true;
+		} finally {
 			inProgress = false;
-			console.error('⚠️ Netzwerkfehler beim Löschen:', err);
 		}
 	}
 
@@ -141,7 +122,7 @@ Mit freundlichen Grüßen,
 	}
 </script>
 
-{#if data.vorgang && data.crimesList}
+{#if data.vorgang && crimesList}
 	<div class="-z-10 bg-white">
 		<div class="flex flex-col items-center justify-center w-full">
 			<h1 class="text-xl">Vorgang {vorgangName}</h1>
@@ -158,10 +139,11 @@ Mit freundlichen Grüßen,
 				{#if isEmptyList}
 					<EmptyList></EmptyList>
 				{:else}
-					{#each data.crimesList as item, crimeListItemIndex}
-						<li>
+					{#each crimesList as item (item.name)}
+						<li data-testid="test-list-item">
 							<div class=" flex gap-x-4">
 								<a
+									data-testid="crime-link"
 									href="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"
 									class=" flex justify-between gap-x-6 py-5"
 									aria-label="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"
@@ -172,16 +154,18 @@ Mit freundlichen Grüßen,
 								<div class="min-w-0 flex-auto">
 									{#if admin}
 										<NameItemEditor
-											list={data.crimesList}
-											editedName={data.crimeNames[crimeListItemIndex]}
+											list={crimesList}
 											currentName={item.name}
 											onSave={handleSave}
 											onDelete={handleDelete}
 										></NameItemEditor>
 									{:else}
-										<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-											>{item.name}</span
+										<p
+											data-testid="test-nameItem-p"
+											class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
 										>
+											{item.name}
+										</p>
 									{/if}
 									{#if item.size}
 										<p class="mt-1 truncate text-xs leading-5 text-gray-500">