save changes, bin aber noch nicht fertig

src/lib/components/NameItemEditor.svelte

@@ -10,27 +10,20 @@
 		token?: string;
 		// add other properties as needed
 	}
-	let {
-		list,
-		editedName = $bindable(),
-		currentName,
-		onSave = () => {},
-		onDelete = () => {}
-	} = $props();
+	let { list, currentName, onSave = () => {}, onDelete = () => {} } = $props();
 
 	let localName = $state(currentName);
-	let wasCancelled = $state(false);
-
-	let error: string = $derived(validateName(localName));
 	let isEditing = $state(false);
-	let inputRef: HTMLInputElement;
 
-	function validateName(name: string) {
+	let error = $derived(() => validateName(localName));
+
+	let inputRef = $state<HTMLInputElement | null>(null);
+
+	function validateName(name: string | undefined | null) {
+		if (!name) return 'Name darf nicht leer sein.';
 		const trimmed = name.trim();
 
-		if (!trimmed) {
-			return 'Name darf nicht leer sein.';
-		}
+		if (!trimmed) return 'Name darf nicht leer sein.';
 
 		const duplicate = list.some(
 			(item: ListItem) => item.name === trimmed && item.name !== currentName
@@ -41,67 +34,44 @@
 		return '';
 	}
 
-	function commitIfValid() {
-		if (!error && !wasCancelled && localName != currentName) {
-			const trimmedName: string = localName.trim();
-			inputRef?.blur();
-			isEditing = false;
-			onSave(trimmedName, currentName);
-		} else {
-			cancelEdit();
-		}
+	function startEdit() {
+		isEditing = true;
+		tick().then(() => inputRef?.focus());
 	}
 
-	function resetEdit() {
-		inputRef?.blur();
+	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') {
-			event.preventDefault();
-			commitIfValid();
-		} else if (event.key === 'Escape') {
-			event.preventDefault();
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
-	async function startEdit() {
-		isEditing = true;
-		await tick();
-		inputRef?.focus();
-	}
-
-	function cancelEdit() {
-		resetEdit();
-		wasCancelled = true;
-		localName = currentName;
+		if (event.key === 'Enter') commitEdit();
+		if (event.key === 'Escape') cancelEdit();
 	}
 </script>
 
 <div data-testid="test-nameItemEditor">
-	<input
-		data-testid="test-input"
-		bind:this={inputRef}
-		bind:value={localName}
-		onfocus={() => {
-			isEditing = true;
-		}}
-		onblur={commitIfValid}
-		onkeydown={handleKeydown}
-	/>
 	{#if isEditing}
-		<button data-testid="commit-button" disabled={wasCancelled} onclick={commitIfValid}
-			><Check /></button
-		>
+		<input
+			data-testid="test-input"
+			bind:this={inputRef}
+			bind:value={localName}
+			onkeydown={handleKeydown}
+		/>
+		<button data-testid="commit-button" 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={() => onDelete(currentName)}><Trash /></button>
 	{/if}
-	{#if error}
-		<p class="text-red-500">{error}</p>
+	{#if error()}
+		<p class="text-red-500">{error()}</p>
 	{/if}
 </div>

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

@@ -25,7 +25,6 @@
 		prefix?: string;
 		// add other properties as needed
 	}
-	console.log(data.url);
 
 	let vorgangName: string = data.vorgang.vorgangName;
 	let crimesList: ListItem[] = $state(data.crimesList);
@@ -44,6 +43,8 @@
 	async function handleSave(newName: string, oldName: string) {
 		open = true;
 		inProgress = true;
+		console.log('debug handleSave', newName, oldName);
+
 		try {
 			const res = await fetch(`/api/list/${vorgangToken}/${oldName}`, {
 				method: 'PUT',
@@ -51,18 +52,18 @@
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, oldName, newName })
-			})
-				.then(() => {
-					inProgress = false;
-					invalidateAll();
-					crimesList = data.crimesList;
-					open = false;
-				})
-				.catch((err) => {
-					inProgress = false;
-					isError = true;
-					console.log('ERROR', err);
-				});
+			});
+
+			if (res.ok) {
+				inProgress = false;
+				invalidateAll();
+				data.crimesList = newName;
+				open = false;
+			} else {
+				inProgress = false;
+				isError = true;
+				throw new Error('Fehler beim Speichern');
+			}
 		} catch (err) {
 			isError = true;
 			inProgress = false;
@@ -94,7 +95,7 @@
 				.catch((err) => {
 					isError = true;
 					inProgress = false;
-					console.log('ERROR', err);
+					console.error('ERROR', err);
 				});
 		} catch (err) {
 			isError = true;
@@ -145,7 +146,7 @@ Mit freundlichen Grüßen,
 				{#if isEmptyList}
 					<EmptyList></EmptyList>
 				{:else}
-					{#each data.crimesList as item, crimeListItemIndex}
+					{#each data.crimesList as item}
 						<li data-testid="test-list-item">
 							<div class=" flex gap-x-4">
 								<a
@@ -161,7 +162,6 @@ Mit freundlichen Grüßen,
 									{#if admin}
 										<NameItemEditor
 											list={data.crimesList}
-											editedName={data.crimeNames[crimeListItemIndex]}
 											currentName={item.name}
 											onSave={handleSave}
 											onDelete={handleDelete}