src/lib/components/NameItemEditor.svelte

@@ -13,7 +13,8 @@
 	// props, old syntax
 	export let list: ListItem[] = [];
 	export let currentName: string;
-	export let onSave: (n: string, o: string) => unknown = () => {};
+	export let vorgangToken: string | null;
+	export let onSave: (n: string, o: string, t?: string) => unknown = () => {};
 	export let onDelete: (n: string) => unknown = () => {};
 
 	let localName = currentName;
@@ -43,8 +44,10 @@
 	}
 
 	function commitEdit() {
-		if (!error && localName != currentName) onSave(localName, currentName);
-
+		if (!error && localName != currentName) onSave(localName, currentName, vorgangToken);
+		// restore original value
+		if (error) { localName = currentName }
+		
 		isEditing = false;
 	}
 
@@ -54,7 +57,8 @@
 	}
 
 	function handleDeleteClick() {
-		onDelete(currentName);
+		// vorgangToken defined when deleting Vorgang, otherwise Crime
+		onDelete(vorgangToken || currentName);
 	}
 </script>
 

src/lib/server/vorgangService.ts

@@ -234,3 +234,25 @@ export const vorgangPINValidation = function (vorgangToken: string, vorgangPIN:
 
 	return true;
 };
+
+/**
+ * Rename Vorgang
+ * @param vorgangToken
+ * @param newName
+ * @returns {int} number of affected lines
+ */
+export const renameVorgangByToken = function (vorgangToken: string, newName: string) {
+	const renameSQLStmt = 'UPDATE cases set name = ? WHERE token = ?';
+	const statement = db.prepare(renameSQLStmt);
+
+	let info;
+	
+	try {
+		info = statement.run(newName, vorgangToken);
+	} catch (err) {
+		console.log(`error: ${err}`)
+		return 0;
+	}
+
+	return info.changes;
+};

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

@@ -3,12 +3,35 @@
 	import Trash from '$lib/icons/Trash.svelte';
 	import Folder from '$lib/icons/Folder.svelte';
 	import EmptyList from '$lib/components/EmptyList.svelte';
+	import NameItemEditor from '$lib/components/NameItemEditor.svelte';
+	import Alert from '$lib/components/Alert.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import Modal from '$lib/components/Modal/Modal.svelte';
+	import ModalTitle from '$lib/components/Modal/ModalTitle.svelte';
+	import ModalContent from '$lib/components/Modal/ModalContent.svelte';
+	import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
 	import { API_ROUTES, ROUTE_NAMES } from '../../index.js';
+	import { invalidateAll } from '$app/navigation';
 
 	let { data, form } = $props();
 
-	let vorgangList = data.vorgangList;
-
+	let vorgangList = $state(data.vorgangList);
+    
+    // same as `vorgangList` but with one different property to be used
+    // with ´NameItemEditor`
+    const derivedList = $derived.by(
+		() => {
+			return vorgangList.map(
+				({ vorgangName, ...rest }) => (
+					{
+						name: vorgangName,
+						...rest
+					}
+				)
+			)
+		}
+    );
+	
 	let isEmptyList = vorgangList.length === 0;
 
 	let vorgangName = $state('');
@@ -61,16 +84,12 @@
 		return true;
 	}
 
-	async function delete_item(ev: Event) {
+	async function deleteVorgang(vorgangToken: string) {
 		let delete_item = window.confirm('Bist du sicher?');
 
 		if (delete_item) {
-			const target = ev.currentTarget as HTMLElement | null;
-			if (!target) return;
-			let filename = target.id.split('del__')[1];
-
-			let url = API_ROUTES.VORGANG(filename);
-
+			let url = API_ROUTES.VORGANG(vorgangToken);
+			
 			try {
 				const response = await fetch(url, { method: 'DELETE' });
 				if (response.status == 204) {
@@ -87,6 +106,46 @@
 			}
 		}
 	}
+	
+	//Variablen für Modal
+	let open = $state(false);
+	let inProgress = $state(false);
+	let isError = $state(false);
+
+	async function handleSave(newName: string, oldName: string, vorgangToken: string) {
+		open = true;
+		inProgress = true;
+		isError = false;
+		try {
+			const res = await fetch(API_ROUTES.VORGANG(vorgangToken), {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({ vorgangToken, oldName, newName })
+			});
+
+			if (!res.ok) {
+				throw new Error('Fehler beim Speichern');
+			}
+			await invalidateAll();
+			vorgangList = data.vorgangList;
+			open = false;
+		} catch (err) {
+			console.error('⚠️ Netzwerkfehler beim Speichern', err);
+			isError = true;
+		} finally {
+			inProgress = false;
+		}
+	}
+	
+	
+	
+	 async function closeModal() {
+		open = false;
+		isError = false;
+	}
+	
 </script>
 
 <div class="-z-10 bg-white">
@@ -100,27 +159,21 @@
 			{:else}
 				{#each vorgangList as vorgangItem}
 					<li data-testid="test-list-item">
+						<div class="flex items-center justify-center gap-3">
 						<a
 						href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
-						class="flex flex-col items-center justify-center gap-2 py-4 px-4 rounded-lg hover:bg-gray-50 transition text-center"
+						class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-gray-50 transition text-center"
 						>
-						<div class="flex items-center justify-center gap-3">
 							<Folder class="w-6 h-6 text-gray-600" />
-
-							<span class="text-sm font-semibold leading-6 text-gray-900">
-							{vorgangItem.vorgangName}
-							</span>
-
-							<button
-							id="del__{vorgangItem.vorgangToken}"
-							on:click|preventDefault={delete_item}
-							aria-label="Vorgang {vorgangItem.name} löschen"
-							class="p-1.5 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-50 transition"
-							>
-							<Trash class="w-4 h-4" />
-							</button>
-						</div>
 						</a>
+							<NameItemEditor
+							list={derivedList}
+							currentName={vorgangItem.vorgangName}
+							vorgangToken={vorgangItem.vorgangToken}
+							onSave={handleSave}
+							onDelete={deleteVorgang}
+							/>
+						</div>
 					</li>
 				{/each}
 			{/if}
@@ -190,6 +243,19 @@
 
 </ExpandableForm>
 
+<Modal {open}
+			><ModalTitle>Umbenennen</ModalTitle><ModalContent>
+				{#if inProgress}
+					<p class="py-2 mb-1">Vorgang läuft...</p>
+				{:else if isError}
+					<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
+				{:else}
+					<Alert class="w-full">Umbenennen erfolgreich</Alert>
+				{/if}
+			</ModalContent>
+			<ModalFooter><Button disabled={inProgress} on:click={closeModal}>Ok</Button></ModalFooter>
+</Modal>
+
 <style>
 	ul {
 		min-width: 24rem;

src/routes/api/list/[vorgang]/+server.ts

@@ -3,7 +3,8 @@ import { json } from '@sveltejs/kit';
 import {
 	deleteVorgangByToken,
 	getCrimesListByToken,
-	vorgangNameExists
+	vorgangNameExists,
+	renameVorgangByToken
 } from '$lib/server/vorgangService';
 
 export async function DELETE({ params }) {
@@ -57,3 +58,19 @@ export async function GET({ params }) {
 		return new Response(null, { status: 500 });
 	}
 }
+
+// rename vorgang
+export async function PUT({ request }) {
+	const data = await request.json();
+	
+	const vorgangToken = data['vorgangToken'];
+	const newVorgangName = data['newName'];
+	
+	const res = renameVorgangByToken(vorgangToken, newVorgangName);
+	
+	if (!res) {
+		return json({ msg: 'Fehler beim Umbenennen' }, { status: 400 });
+	}
+
+	return json({ success: 'success' }, { status: 200 });
+}