Merge pull request 'development' (#48) from development into main

Reviewed-on: #48

Dockerfile.prod

@@ -1,7 +1,5 @@
 # --- Build stage ---
 FROM node:22 AS build
-ENV NODE_ENV=production
-ENV ORIGIN=https://tatort.innovation-hub-niedersachsen.de
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
@@ -11,7 +9,13 @@ RUN npm run build
 
 # --- Production stage ---
 FROM node:22-alpine3.20
-COPY --from=build /app .
+WORKDIR /app
+ENV NODE_ENV=production
+ENV ORIGIN=https://tatort.innovation-hub-niedersachsen.de
+COPY --from=build /app/build ./build
+COPY --from=build /app/package*.json ./
+COPY --from=build /app/config.json ./config.json
+RUN npm ci --omit=dev
 ENV HOST=0.0.0.0
 EXPOSE 3000
-CMD ["sh", "-c", "ORIGIN=https://tatort.innovation-hub-niedersachsen.de node build/index.js"]
+CMD ["node", "build/index.js"]

config.json

@@ -1,10 +1,10 @@
 {
 	"minio": {
-		"endPoint": "sws3.innovation-hub-niedersachsen.de",
+		"endPoint": "api-s3.innovation-hub-niedersachsen.de",
 		"port": 443,
 		"useSSL": true,
-		"accessKey": "wjpKrmaqXra99rX3D61H",
-		"secretKey": "fTPi0u0FR6Lv9Y9IKydWv6WM0EA5XrsK008HCt9u"
+		"accessKey": "AbCdEfGhIjKlMnOpQrSt",
+		"secretKey": "UvWxYz1234567890AbCdEfGhIjKlMnOpQrStUvWx"
 	},
 	"jwt": {
 		"secret": "@S2!q@@wXz$dCQ8JoVsHLpzaJ6JCfB",
@@ -14,4 +14,4 @@
 		"admin": { "password": "A-InnoHUB_2025!", "admin": true },
 		"user": { "password": "U-InnoHUB_2025!", "admin": false }
 	}
-}
+}

config_dev.json

@@ -1,10 +1,10 @@
 {
 	"minio": {
-		"endPoint": "sws3.innovation-hub-niedersachsen.de",
+		"endPoint": "api-s3.innovation-hub-niedersachsen.de",
 		"port": 443,
 		"useSSL": true,
-		"accessKey": "wjpKrmaqXra99rX3D61H",
-		"secretKey": "fTPi0u0FR6Lv9Y9IKydWv6WM0EA5XrsK008HCt9u"
+		"accessKey": "AbCdEfGhIjKlMnOpQrSt",
+		"secretKey": "UvWxYz1234567890AbCdEfGhIjKlMnOpQrStUvWx"
 	},
 	"jwt": {
 		"secret": "@S2!q@@wXz$dCQ8JoVsHLpzaJ6JCfB",
@@ -14,4 +14,4 @@
 		"admin": { "password": "A-InnoHUB_2025!", "admin": true },
 		"user": { "password": "U-InnoHUB_2025!", "admin": false }
 	}
-}
+}

config_prod.json

@@ -1,10 +1,10 @@
 {
 	"minio": {
-		"endPoint": "sws3.innovation-hub-niedersachsen.de",
+		"endPoint": "api-s3.innovation-hub-niedersachsen.de",
 		"port": 443,
 		"useSSL": true,
-		"accessKey": "wjpKrmaqXra99rX3D61H",
-		"secretKey": "fTPi0u0FR6Lv9Y9IKydWv6WM0EA5XrsK008HCt9u"
+		"accessKey": "GxKhfnfkNvlDU7qzsz0D",
+		"secretKey": "cqSM5rIRr4MPtqzu2sNKgmB9k2OghPbyxwAWogeM"
 	},
 	"jwt": {
 		"secret": "@S2!q@@wXz$dCQ8JoVsHLpzaJ6JCfB",
@@ -14,4 +14,4 @@
 		"admin": { "password": "A-InnoHUB_2025!", "admin": true },
 		"user": { "password": "U-InnoHUB_2025!", "admin": false }
 	}
-}
+}

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,30 +57,60 @@
 	}
 
 	function handleDeleteClick() {
-		onDelete(currentName);
+		// vorgangToken defined when deleting Vorgang, otherwise Crime
+		onDelete(vorgangToken || currentName);
 	}
 </script>
 
-<div data-testid="test-nameItemEditor">
-	{#if isEditing}
-		<input
-			data-testid="test-input"
-			bind:this={inputRef}
-			bind:value={localName}
-			onkeydown={handleKeydown}
-		/>
+<div data-testid="test-nameItemEditor" class="flex flex-col gap-1">
+  {#if isEditing}
+    <div class="flex items-center gap-1">
+      <input
+        data-testid="test-input"
+        bind:this={inputRef}
+        bind:value={localName}
+        onkeydown={handleKeydown}
+        class="flex-1 border border-gray-300 rounded px-1.5 py-0.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+      />
+      <button
+        data-testid="commit-button"
+        disabled={!!error || localName === currentName}
+        onclick={commitEdit}
+        class="text-gray-500 hover:text-green-600 transition disabled:opacity-40"
+      >
+        <Check class="w-4 h-4" />
+      </button>
+      <button
+        data-testid="cancel-button"
+        onclick={cancelEdit}
+        class="text-gray-500 hover:text-red-600 transition"
+      >
+        <X class="w-4 h-4" />
+      </button>
+    </div>
+  {:else}
+    <div class="flex items-center gap-1">
+      <span class="text-sm font-medium text-gray-900 truncate">{localName}</span>
+      <button
+        data-testid="edit-button"
+        onclick={startEdit}
+        class="text-gray-500 hover:text-blue-600 transition"
+      >
+        <Edit class="w-4 h-4" />
+      </button>
+      {#if onDelete}
 		<button
-			data-testid="commit-button"
-			disabled={!!error || localName === currentName}
-			onclick={commitEdit}><Check /></button
+			data-testid="delete-button"
+			onclick={handleDeleteClick}
+			class="text-gray-500 hover:text-red-600 transition"
 		>
-		<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 class="text-red-500">{error}</p>
-	{/if}
+			<Trash class="w-4 h-4" />
+		</button>
+      {/if}
+    </div>
+  {/if}
+
+  {#if error}
+    <p class="text-xs text-red-500 mt-1">{error}</p>
+  {/if}
 </div>

src/lib/config.ts

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

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)/+layout.server.ts

@@ -1,8 +1,6 @@
 import { type ServerLoadEvent } from '@sveltejs/kit';
 import type { PageServerLoad } from '../anmeldung/$types';
 
-import { ROUTE_NAMES } from '..';
-
 export const load: PageServerLoad = (event: ServerLoadEvent) => {
 	if (event.locals.user) {
 		return {

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,30 +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 justify-between gap-x-6 py-5"
+						href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
+						class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-gray-50 transition text-center"
 						>
-							<div class="flex gap-x-4">
-								<Folder />
-								<div class="min-w-0 flex-auto">
-									<span class="text-sm font-semibold leading-6 text-gray-900"
-										>{vorgangItem.vorgangName}</span
-									>
-									<button
-										style="padding: 2px"
-										id="del__{vorgangItem.vorgangToken}"
-										on:click|preventDefault={delete_item}
-										aria-label="Vorgang {vorgangItem.name} löschen"
-									>
-										<Trash />
-									</button>
-								</div>
-							</div>
-							<div class="hidden sm:flex sm:flex-col sm:items-end">
-								<p class="text-sm leading-6 text-gray-900">Vorgang</p>
-							</div>
+							<Folder class="w-6 h-6 text-gray-600" />
 						</a>
+							<NameItemEditor
+							list={derivedList}
+							currentName={vorgangItem.vorgangName}
+							vorgangToken={vorgangItem.vorgangToken}
+							onSave={handleSave}
+							onDelete={deleteVorgang}
+							/>
+						</div>
 					</li>
 				{/each}
 			{/if}
@@ -193,8 +243,22 @@
 
 </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;
 	}
 </style>
+

src/routes/(angemeldet)/upload/+page.server.ts

@@ -1,10 +1,8 @@
 import { Readable } from 'stream';
 import { BUCKET, client } from '$lib/minio';
 import { fail, error } from '@sveltejs/kit';
-import { v4 as uuidv4 } from 'uuid';
 
-import { db } from '$lib/server/dbService';
-import { getVorgangByName, vorgangNameExists } from '$lib/server/vorgangService';
+import { getVorgangByName } from '$lib/server/vorgangService';
 
 const isRequiredFieldValid = (value: unknown) => {
 	if (value == null) return false;

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import timeElapsed from '$lib/helper/timeElapsed';
 	import { deserialize } from '$app/forms';
@@ -41,10 +42,14 @@
 	let formErrors: Record<string, any> | null = $state(null);
 	let etag: string | null = $state(null);
 	let files: FileList | null = $state(null);
+	let fileInput = $state(null);
 
 	// Model Variablen für Upload
 	let openUL = $state(false);
 	let inProgressUL = $state(form === null);
+	
+	// Variablen für Copy-Funktion
+    let copied = $state(false);
 
 	async function buttonClick(event: MouseEvent) {
 		if (!(await validateForm())) {
@@ -98,6 +103,7 @@
 		openUL = false;
 		name = '';
 		files = null;
+		fileInput.value = "";
 		await invalidateAll();
 		crimesList = data.crimesList;
 	}
@@ -128,17 +134,17 @@
 
 		// big endian!
 		let file = files[0];
-		let file_header = file.slice(0, 4);
-		console.log(file_header);
-		let header_bytes = await file_header.bytes();
-		let file_header_hex = '0x' + header_bytes.toHex().toString();
+		const fileHeader = file.slice(0, 4);
+		const buffer = await fileHeader.arrayBuffer();
+		console.log(fileHeader);
+		let headerBytes = new Uint8Array(buffer);
+		let fileHeaderHex = '0x' + headerBytes.toHex().toString();
 
-		if (GLD_MAGIC == swap_endian(file_header_hex)) {
+		if (GLD_MAGIC == swap_endian(fileHeaderHex)) {
 			return true;
 		} else {
 			return false;
 		}
-		return true;
 	}
 
 	async function getUrl() {
@@ -190,6 +196,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;
@@ -220,9 +254,8 @@
 		}
 	}
 
-	function constructMailToLink() {
+	async function copyAndOpenMail() {
 		const subject = 'Link zum Tatvorgang';
-
 		const link = data.url.origin + data.url.pathname;
 		const body = `Hallo,
 
@@ -234,27 +267,75 @@ Der Zugangs-PIN wird zur Sicherheit über einen zweiten Kommunikationskanal übe
 Mit freundlichen Grüßen,
 `;
 
-		const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    try {
+        await navigator.clipboard.writeText(body);
+        
+        copied = true;
 
-		return mailtoLink;
-	}
+        // Kurz warten, dann Mail öffnen
+        setTimeout(() => {
+            const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}`;
+            window.location.href = mailtoLink;
+        }, 1000);
+        
+        setTimeout(() => copied = false, 2000);
+    } catch (err) {
+        console.error('Clipboard-Fehler:', err);
+        error = 'Konnte Text nicht kopieren. Bitte manuell markieren und kopieren.';
+        }
+    }
 
 	function closeModal() {
 		open = false;
 		isError = false;
 	}
+
+	// drag and drop functionality
+		let isDragging = $state(false);
+
+		async function handleDrop(event) {
+			event.preventDefault();
+			isDragging = false;
+
+			if (event.dataTransfer?.files?.length) {
+				files = event.dataTransfer.files;
+			}
+			if (!(await check_valid_glb_file())) {
+				formErrors = { file: 'Keine gültige .GLD-Datei' }
+				// reset form fields etc.
+				files = null;
+				fileInput.value = '';
+			} else {
+				formErrors = { ...formErrors, file: ''}
+			};
+		}
+
 </script>
 
+<svelte:window
+	on:dragover|preventDefault
+	on:drop|preventDefault
+/>
+
 {#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>
+			<h1 class="text-xl">{vorgangName}</h1>
 
 			{#if admin}
-				Zugangs-PIN: {vorgangPIN}
-				<a class="pt-2 pb-6" href={constructMailToLink()}
-					><Button disabled={isEmptyList}>Share Link</Button></a
-				>
+				<div class="flex items-center gap-2">
+				Zugangs-PIN:
+				<NameItemEditor
+				list={[]}
+				currentName={vorgangPIN}
+				onSave={savePIN}
+				onDelete={null}
+				/>
+				</div>
+                <Button variant="secondary" on:click={copyAndOpenMail} disabled={isEmptyList}>Link kopieren und Mail verfassen</Button>
+                {#if copied}
+                <p transition:fade>✔ Kopiert! Per Ctrl+V einfügen.</p>
+                {/if}
 			{/if}
 		</div>
 		<div class="mx-auto flex justify-center max-w-7xl h-full">
@@ -263,51 +344,57 @@ Mit freundlichen Grüßen,
 					<EmptyList></EmptyList>
 				{:else}
 					{#each crimesList as item (item.name)}
-						<li data-testid="test-list-item">
-							<div class=" flex gap-x-4">
-								<a
-									data-testid="crime-link"
-									href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
-									class=" flex justify-between gap-x-6 py-5"
-									aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
-									title={item.name}
-								>
-									<Cube />
-								</a>
-								<div class="min-w-0 flex-auto">
-									{#if admin}
-										<NameItemEditor
-											list={crimesList}
-											currentName={item.name}
-											onSave={handleSave}
-											onDelete={handleDelete}
-										></NameItemEditor>
-									{:else}
-										<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">
-											{shortenFileSize(item.size)}
-										</p>
-									{/if}
-								</div>
-							</div>
-							<div class="hidden sm:flex sm:flex-col sm:items-end">
-								<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
-								{#if item.lastModified}
-									<p class="mt-1 text-xs leading-5 text-gray-500">
-										Zuletzt geändert <time datetime="2023-01-23T13:23Z"
-											>{timeElapsed(new Date(item.lastModified))}</time
-										>
-									</p>
-								{/if}
-							</div>
-						</li>
+					<li
+					data-testid="test-list-item"
+					class="flex items-center justify-between gap-6 py-4 px-2 hover:bg-gray-50 rounded-lg transition"
+					>
+					<div class="flex items-center gap-4 flex-1">
+						<a
+						data-testid="crime-link"
+						href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
+						class="flex items-center justify-center w-8 h-8 text-gray-600 hover:text-blue-600 transition"
+						aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
+						title={item.name}
+						>
+						<Cube class="w-5 h-5" />
+						</a>
+
+						<div class="flex flex-col flex-1 min-w-0">
+						{#if admin}
+							<NameItemEditor
+							list={crimesList}
+							currentName={item.name}
+							onSave={handleSave}
+							onDelete={handleDelete}
+							/>
+						{:else}
+							<p
+							data-testid="test-nameItem-p"
+							class="text-sm font-semibold leading-6 text-gray-900 truncate"
+							>
+							{item.name}
+							</p>
+						{/if}
+
+						<!-- size left, last modified right -->
+						<div class="flex items-center justify-between mt-1 text-xs leading-5 text-gray-500">
+							{#if item.size}
+							<span>{shortenFileSize(item.size)}</span>
+							{:else}
+							<span></span>
+							{/if}
+							{#if item.lastModified}
+							<span>
+								Zuletzt geändert
+								<time datetime={item.lastModified}>
+								{timeElapsed(new Date(item.lastModified))}
+								</time>
+							</span>
+							{/if}
+						</div>
+						</div>
+					</div>
+					</li>
 					{/each}
 				{/if}
 			</ul>
@@ -356,7 +443,13 @@ Mit freundlichen Grüßen,
 							</span>
 						</label>
 						<div
-							class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
+							class="mt-2 flex justify-center rounded-lg border border-dashed px-6 py-10
+								{isDragging
+								? 'border-blue-500 bg-blue-50'
+								: 'border-gray-900/25'}"
+							on:dragover|preventDefault={() => (isDragging = true)}
+							on:dragleave={() => (isDragging = false)}
+							on:drop={handleDrop}
 						>
 							<div class="text-center">
 								<FileRect />
@@ -366,7 +459,7 @@ Mit freundlichen Grüßen,
 										class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
 									>
 										<span>Wähle eine Datei aus</span>
-										<input id="file" bind:files name="file" type="file" class="sr-only" />
+										<input id="file" bind:this={fileInput} bind:files name="file" type="file" class="sr-only" />
 									</label>
 									<p class="pl-1">oder ziehe sie ins Feld</p>
 								</div>

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 });
+}

src/routes/api/users/[user]/+server.ts

@@ -1,4 +1,3 @@
-import { json } from '@sveltejs/kit';
 import { deleteUser } from '$lib/server/userService';
 
 export async function DELETE({ params }) {

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);
+	});
 });