Merge branch 'development' into f090_magic_strings_refactoring

src/lib/components/EmptyList.svelte

@@ -1 +1,3 @@
-<p class="flex justify-center m-4">In dieser Liste sind keine Einträge vorhanden</p>
+<p data-testid="empty-list" class="flex justify-center m-4">
+	In dieser Liste sind keine Einträge vorhanden
+</p>

src/lib/components/NameItemEditor.svelte

@@ -1,90 +1,83 @@
 <script lang="ts">
+	import Check from '$lib/icons/Check.svelte';
 	import Edit from '$lib/icons/Edit.svelte';
 	import Trash from '$lib/icons/Trash.svelte';
+	import X from '$lib/icons/X.svelte';
 	import { tick } from 'svelte';
 
 	interface ListItem {
 		name: string;
 		token?: string;
-		// add other properties as needed
 	}
-	let {
-		list,
-		editedName = $bindable(),
-		currentName,
-		onSave = () => {},
-		onDelete = () => {}
-	} = $props();
 
-	let localName = $state(currentName);
-	let wasCancelled = $state(false);
+	// props, old syntax
+	export let list: ListItem[] = [];
+	export let currentName: string;
+	export let onSave: (n: string, o: string) => unknown = () => {};
+	export let onDelete: (n: string) => unknown = () => {};
 
-	let error: string = $derived(validateName(localName));
-	let isEditing = $state(false);
-	let inputRef: HTMLInputElement;
+	let localName = currentName;
+	let isEditing = false;
+	let inputRef: HTMLInputElement | null = null;
 
-	function validateName(name: string) {
-		const trimmed = name.trim();
+	$: error = validateName(localName);
 
-		if (!trimmed) {
-			return 'Name darf nicht leer sein.';
+	function validateName(name: string): string {
+		const trimmed = name?.trim() ?? '';
+		if (!trimmed) return 'Name darf nicht leer sein.';
+		if (list.some((item) => item.name === trimmed && item.name !== currentName)) {
+			return 'Name existiert bereits.';
 		}
-
-		const duplicate = list.some(
-			(item: ListItem) => item.name === trimmed && item.name !== currentName
-		);
-
-		if (duplicate) return 'Name existiert bereits.';
-
 		return '';
 	}
 
-	function commitIfValid() {
-		if (!error && !wasCancelled && localName != currentName) {
-			const trimmedName: string = localName.trim();
-			inputRef?.blur();
-			isEditing = false;
-			onSave(trimmedName, currentName);
-		} else {
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
-	function resetEdit() {
-		wasCancelled = false;
-		inputRef?.blur();
-		isEditing = false;
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			commitIfValid();
-		} else if (event.key === 'Escape') {
-			event.preventDefault();
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
 	async function startEdit() {
 		isEditing = true;
 		await tick();
 		inputRef?.focus();
 	}
+
+	function cancelEdit() {
+		localName = currentName;
+		isEditing = false;
+	}
+
+	function commitEdit() {
+		if (!error && localName != currentName) onSave(localName, currentName);
+
+		isEditing = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') commitEdit();
+		if (event.key === 'Escape') cancelEdit();
+	}
+
+	function handleDeleteClick() {
+		onDelete(currentName);
+	}
 </script>
 
-<div>
-	<input
-		bind:this={inputRef}
-		bind:value={localName}
-		onblur={commitIfValid}
-		onkeydown={handleKeydown}
-	/>
-	<button onclick={startEdit}><Edit /></button>
-	<button onclick={() => onDelete(currentName)}><Trash /></button>
+<div data-testid="test-nameItemEditor">
+	{#if isEditing}
+		<input
+			data-testid="test-input"
+			bind:this={inputRef}
+			bind:value={localName}
+			onkeydown={handleKeydown}
+		/>
+		<button
+			data-testid="commit-button"
+			disabled={!!error || localName === currentName}
+			onclick={commitEdit}><Check /></button
+		>
+		<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
+	{:else}
+		<span>{localName}</span>
+		<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
+		<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
+	{/if}
 	{#if error}
-		<p style="color: red;">{error}</p>
+		<p class="text-red-500">{error}</p>
 	{/if}
 </div>

src/lib/config.ts

@@ -1,3 +1,3 @@
 import { readFileSync } from 'fs';
 
-export default JSON.parse(readFileSync('./config.json').toString());
+export default JSON.parse(readFileSync('./config_prod.json').toString());

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">