src/lib/components/ExpandableForm.svelte

@@ -22,6 +22,7 @@
 <div data-testid="expand-container" class="flex flex-col items-center">
   <!-- + / × button -->
   <button
+    data-testid="expand-button"
     class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 text-white text-2xl font-bold hover:bg-blue-700 transition"
     on:click={toggle}
     aria-expanded={expanded}

src/lib/components/NameItemEditor.svelte

@@ -13,8 +13,9 @@
 	// 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 = () => {};
+	export let vorgangToken: string | null;
+	export let onSave: (n: string, o: string, t?: string) => unknown = () => {};
+	export let onDelete: ((n: string) => unknown) | null = () => {};
 
 	let localName = currentName;
 	let isEditing = false;
@@ -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>
 
@@ -94,13 +98,15 @@
       >
         <Edit class="w-4 h-4" />
       </button>
-      <button
-        data-testid="delete-button"
-        onclick={handleDeleteClick}
-        class="text-gray-500 hover:text-red-600 transition"
-      >
-        <Trash class="w-4 h-4" />
-      </button>
+      {#if onDelete}
+		<button
+			data-testid="delete-button"
+			onclick={handleDeleteClick}
+			class="text-gray-500 hover:text-red-600 transition"
+		>
+			<Trash class="w-4 h-4" />
+		</button>
+      {/if}
     </div>
   {/if}
 

src/lib/server/vorgangService.ts

@@ -234,3 +234,27 @@ export const vorgangPINValidation = function (vorgangToken: string, vorgangPIN:
 
 	return true;
 };
+
+/**
+ * Change VorgangName or VorgangPIN
+ * @param vorgangToken
+ * @param newValue
+ * @returns {int} number of affected lines
+ */
+export const updateVorgangAttrByToken = function (vorgangToken: string,
+											newValue: string,
+											column: string) {
+	const renameSQLStmt = `UPDATE cases set ${column} = ? WHERE token = ?`;
+	const statement = db.prepare(renameSQLStmt);
+
+	let info;
+	
+	try {
+		info = statement.run(newValue, 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/(token-based)/list/[vorgang]/+page.svelte

@@ -190,6 +190,34 @@
 		}
 	}
 
+	async function savePIN(newVorgangPIN: string, oldVorgangPIN: 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, oldVorgangPIN, newVorgangPIN,
+										changePIN: true})
+			});
+
+			if (!res.ok) {
+				throw new Error('Fehler beim Speichern');
+			}
+			await invalidateAll();
+			crimesList = data.crimesList;
+			open = false;
+		} catch (err) {
+			console.error('⚠️ Netzwerkfehler beim Speichern', err);
+			isError = true;
+		} finally {
+			inProgress = false;
+		}
+	}
+
 	async function handleDelete(tatort: string) {
 		open = true;
 		inProgress = true;
@@ -251,7 +279,15 @@ Mit freundlichen Grüßen,
 			<h1 class="text-xl">{vorgangName}</h1>
 
 			{#if admin}
-				Zugangs-PIN: {vorgangPIN}
+				<div class="flex items-center gap-2">
+				Zugangs-PIN:
+				<NameItemEditor
+				list={[]}
+				currentName={vorgangPIN}
+				onSave={savePIN}
+				onDelete={null}
+				/>
+				</div>
 				<a class="pt-2 pb-6" href={constructMailToLink()}
 					><Button disabled={isEmptyList}>Share Link</Button></a
 				>

src/routes/api/list/+server.ts

@@ -1,5 +1,4 @@
 import { getVorgaenge } from '$lib/server/vorgangService';
-import { json } from '@sveltejs/kit';
 
 export async function GET() {
 	const vorgaenge = getVorgaenge();
@@ -7,4 +6,4 @@ export async function GET() {
 	return new Response(JSON.stringify(vorgaenge), {
 		status: 200
 	});
-}
+}

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

@@ -3,7 +3,8 @@ import { json } from '@sveltejs/kit';
 import {
 	deleteVorgangByToken,
 	getCrimesListByToken,
-	vorgangNameExists
+	vorgangNameExists,
+	updateVorgangAttrByToken
 } from '$lib/server/vorgangService';
 
 export async function DELETE({ params }) {
@@ -57,3 +58,31 @@ export async function GET({ params }) {
 		return new Response(null, { status: 500 });
 	}
 }
+
+// change Vorgang properties
+export async function PUT({ request }) {
+	const data = await request.json();
+	
+	const vorgangToken = data['vorgangToken'];
+
+	const changePIN = data['changePIN'];
+
+	let attrChanged;
+	let newValue;
+	
+	if (changePIN) {
+		attrChanged = 'pin';
+		newValue = data['newVorgangPIN']
+	} else {
+		attrChanged = 'name';
+		newValue = data['newName']
+	}
+
+	const res = updateVorgangAttrByToken(vorgangToken, newValue, attrChanged);
+	
+	if (!res) {
+		return json({ msg: 'Fehler beim Umbenennen' }, { status: 400 });
+	}
+
+	return json({ success: 'success' }, { status: 200 });
+}

tests/components/NameItemEditor.test.ts

@@ -87,7 +87,7 @@ describe('NameItemEditor - Funktionalität', () => {
 		expect(onSave).not.toHaveBeenCalled();
 	});
 
-	it('ruft onSave korrekt auf bei gültigem Namen', async () => {
+	it('ruft onSave korrekt auf bei gültigem Namen: Tatort/Crime', async () => {
 		render(NameItemEditor, { props: baseProps });
 		await fireEvent.click(screen.getByTestId('edit-button'));
 
@@ -95,7 +95,7 @@ describe('NameItemEditor - Funktionalität', () => {
 		await fireEvent.input(input, { target: { value: testLocalName } });
 		await fireEvent.click(screen.getByTestId('commit-button'));
 
-		expect(onSave).toHaveBeenCalledWith(testLocalName, testCurrentName);
+		expect(onSave).toHaveBeenCalledWith(testLocalName, testCurrentName, undefined);
 	});
 
 	it('ruft onDelete korrekt auf', async () => {
@@ -117,7 +117,7 @@ describe('NameItemEditor - Funktionalität', () => {
 		expect(screen.getByTestId('edit-button')).toBeInTheDocument();
 	});
 
-	it('triggert Save bei Enter-Taste', async () => {
+	it('triggert Save bei Enter-Taste: Tatort/Crime', async () => {
 		render(NameItemEditor, { props: baseProps });
 		await fireEvent.click(screen.getByTestId('edit-button'));
 
@@ -125,7 +125,7 @@ describe('NameItemEditor - Funktionalität', () => {
 		await fireEvent.input(input, { target: { value: 'ViaEnter' } });
 		await fireEvent.keyDown(input, { key: 'Enter' });
 
-		expect(onSave).toHaveBeenCalledWith('ViaEnter', testCurrentName);
+		expect(onSave).toHaveBeenCalledWith('ViaEnter', testCurrentName, undefined);
 	});
 
 	it('bricht ab bei Escape-Taste', async () => {

tests/views/TatortList.view.test.ts

@@ -100,4 +100,16 @@ describe('Seite: Vorgangsansicht', () => {
 			expect(linkElement).toHaveAttribute('href', expectedURL);
 		});
 	});
+
+	describe('PIN Anzeige & Button', () => {
+		it('Teste korrekte Anzeige von PIN Komponente', () => {
+			const testData = { ...baseData};
+			render(TatortListPage, { props: { data: testData } });
+			const vorgObj = baseData.vorgangList[0]
+
+			// PIN is being displayed within ´NameItemEditor´
+			let label = screen.queryByText(vorgObj.vorgangPIN);
+			expect(label).toBeInTheDocument();
+		});
+	});
 });

tests/views/VorgangList.view.test.ts

@@ -6,6 +6,14 @@ import { ROUTE_NAMES } from '../../src/routes';
 import { actions } from '../../src/routes/(angemeldet)/list/+page.server';
 import { createVorgang } from '$lib/server/vorgangService';
 
+// mock animation features of the browser
+
+window.HTMLElement.prototype.scrollIntoView = vi.fn();
+window.HTMLElement.prototype.animate = vi.fn(() => ({
+	finished: Promise.resolve(),
+													cancel: vi.fn(),
+}))
+
 describe('Vorgänge Liste Page EmptyList-Komponente View', () => {
 	it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => {
 		const testData = { ...baseData, vorgangList: [] };
@@ -47,16 +55,8 @@ describe('Teste Links auf Korrektheit', () => {
 });
 
 async function clickPlusButton() {
-	// mock animation features of the browser
-
-	window.HTMLElement.prototype.scrollIntoView = vi.fn();
-	window.HTMLElement.prototype.animate = vi.fn(() => ({
-		finished: Promise.resolve(),
-		cancel: vi.fn(),
-	}))
-
 	// button is visible
-	const button = screen.getByRole('button')
+	const button = screen.getByTestId('expand-button')
 	expect(button).toBeInTheDocument();
 
 	await fireEvent.click(button)
@@ -171,4 +171,14 @@ describe('Hinzufügen Buton', () => {
 		const result = await actions.default(event);
 		expect(result).toEqual({ token: testVorgangToken });
 	});
+});
+
+describe('Vorgang-Operationen', () => {
+	it('Teste korrekte Anzeige von Vorgang-Input Komponente', () => {
+		const testData = { ...baseData};
+		const { getAllByTestId } = render(VorgangListPage, { props: { data: testData } });
+
+		let buttons = getAllByTestId('edit-button')
+		expect(buttons.length).toBeGreaterThan(1);
+	});
 });