refactoring branch, tatort page-svelte, Datenaktualisierung durch api, page.ts, choose better names

src/lib/components/Button.svelte

@@ -1,3 +1,31 @@
+<script lang="ts">
+	export let href = null;
+	export let type = 'button';
+	export let size = 'md';
+	export let variant = 'primary';
+	export let fullWidth = false;
+	export let align = 'center';
+	export let disabled = false;
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+{#if href}
+	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
+		><slot />
+	</a>
+{:else}
+	<button
+		on:click
+		{type}
+		{disabled}
+		class:w-full={fullWidth}
+		class="button {variant} {size} {classNames} {align}"
+	>
+		<slot />
+	</button>
+{/if}
+
 <style>
 	.button {
 		@apply inline-flex;
@@ -172,31 +200,3 @@
 		@apply justify-end;
 	}
 </style>
-
-<script lang="ts">
-	export let href = null;
-	export let type = 'button';
-	export let size = 'md';
-	export let variant = 'primary';
-	export let fullWidth = false;
-	export let align = 'center';
-	export let disabled = false;
-	let classNames = '';
-	export { classNames as class };
-</script>
-
-{#if href}
-	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
-		><slot />
-	</a>
-{:else}
-	<button
-		on:click
-		{type}
-		{disabled}
-		class:w-full={fullWidth}
-		class="button {variant} {size} {classNames} {align}"
-	>
-		<slot />
-	</button>
-{/if}

src/lib/components/EditableItem.svelte

@@ -16,7 +16,6 @@
 		onDelete = () => {}
 	} = $props();
 
-	let names = list.map((l: ListItem) => l.name);
 	let localName = $state(currentName);
 	let wasCancelled = $state(false);
 
@@ -46,6 +45,8 @@
 	function commitIfValid() {
 		if (!error && !wasCancelled && localName != currentName) {
 			editedName = localName.trim();
+			inputRef?.blur();
+			isEditing = false;
 			onSave(editedName, currentName);
 		} else {
 			localName = currentName;

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/(token-based)/list/[vorgang]/+page.server.ts

@@ -1,31 +0,0 @@
-import { getVorgangByToken, getCrimesListByToken } from '$lib/server/vorgangService';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({fetch, params, url }) => {
-	const vorgangToken = params.vorgang;
-	const vorgangPIN = url.searchParams.get('pin');
-
-		const adminRes = await fetch(`/api/user`)
-const user = await adminRes.json()
-
-	const crimesList = await getCrimesListByToken(vorgangToken); // TatortList zum Vorgang
-	const vorgangObjekt = getVorgangByToken(vorgangToken); //einzelner Vorgang //TypeScript darf nicht undefined sein
-let vorgangName:string;
-	if(vorgangObjekt){
-vorgangName  = vorgangObjekt.name;
-	}else{
-		vorgangName = '';
-	}
-
-	return {
-		crimesList, //crimesList
-		vorgangPIN, //caseToken
-		vorgangName, //caseId?
-		vorgangObjekt,
-		user
-	};
-};
-
-
-// Ersetze diese Verbindung zum Server durch API Endpunkte
-

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

@@ -9,77 +9,59 @@
 	import ModalContent from '$lib/components/Modal/ModalContent.svelte';
 	import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
 	import Cube from '$lib/icons/Cube.svelte';
-
 	import EditableItem from '$lib/components/EditableItem.svelte';
-
+	import { invalidate, invalidateAll } from '$app/navigation';
-	import { invalidate } from '$app/navigation';
-	import { page } from '$app/stores';
 
 	//Seite für die Tatort-Liste
 	let { data } = $props();
 
-	console.log('tatorte: debug ', data);
+	console.log('tatorte: debug ', data); //zur besseren Nachvollziehbarkeit noch drin gelassen, kann vorm merge gelöscht werden
 
 	interface ListItem {
+		//sollte Typ Vorgang sein, aber der einfachheit ist es noch ListItem, damit die Komponente EditableItem für Vorgang und Tatort eingesetzt werden kann
 		name: string;
 		size: number;
 		lastModified: string | number | Date;
 		show_button?: boolean;
+		prefix?: string;
 		// add other properties as needed
 	}
 
-	let vorgang: string = data.vorgangName; //	let vorgang = data.caseId;  	<!--caseId, vorgang.name aber das funktioniert nicht richtig, daher in server.ts geändert-->
+	let vorgangName: string = data.vorgang.vorgangName; //	let vorgang = data.caseId;  	<!--caseId, vorgang.name aber das funktioniert nicht richtig, daher in server.ts geändert-->
 	let crimesList: ListItem[] = $state(data.crimesList);
-	const vorgangPIN: string = data.vorgangPIN; //caseToken??  //	const token: string | null = data.caseToken;
+	const vorgangPIN: string = data.vorgang.vorgangPIN; //caseToken??  //	const token: string | null = data.caseToken;
+	let vorgangToken: string = data.vorgang.vorgangToken;
 
 	//Variablen für Modal
 	let open = $state(false);
 	let inProgress = $state(false);
 	let err = $state(false);
-	function uploadSuccessful() {
-		open = false;
-	}
 
-	//Variabeln für EditableItem
+	//Variable um nur admin UI anzuzeigen
-	let names: string[] = $state(crimesList.map((l) => l.name));
+	let admin = data?.user?.admin;
-	let editedName: string = $state('');
-	let currentName: string = $state('');
-
-	let editingId: number;
-
-	// let admin = data?.user?.admin;
-	let admin = true;
-
-	let rename_input;
-
-	$effect(() => {
-		console.log('rename_input hat sich geändert:', rename_input);
-	});
 
 	async function handleSave(newName: string, oldName: string) {
-		console.log('Eltern, speichern erfolgreich', newName, oldName);
+		open = true;
+		console.log('Eltern, speichern erfolgreich', newName, oldName); //zur besseren Nachvollziehbarkeit noch drin gelassen, kann vorm merge gelöscht werden
 		try {
-			const res = await fetch(`/api/list/${vorgang}/${oldName}`, {
+			const res = await fetch(`/api/list/${vorgangToken}/${oldName}`, {
+				//irgendwas stimmt hier nicht, vorgangToken führt zu Fehler in API,
 				method: 'PUT',
 				headers: {
 					'Content-Type': 'application/json'
 				},
-				body: JSON.stringify({ vorgang, oldName, newName })
+				body: JSON.stringify({ vorgangToken, oldName, newName })
 			});
-			const clone = res.clone();
-			const data = await res.json();
-			let message = data.message;
-			let error = !data.success;
-
-			console.log('Tatort Update: ', message);
 
 			if (!res.ok) {
-				const msg = await clone.text();
+				const msg = await res.text();
 				console.error('❌ Fehler beim Speichern:', msg);
 			} else {
-				console.log('✅ Erfolgreich gespeichert:', newName);
+				await invalidate(`/api/list/${vorgangToken}`);
-				await invalidate('');
+				await invalidateAll();
-				currentName = newName;
+				crimesList = data.crimesList;
+				console.log('✅ Erfolgreich gespeichert:', crimesList, data.crimesList, newName); //zur besseren Nachvollziehbarkeit noch drin gelassen, kann vorm merge gelöscht werden
+				open = false;
 			}
 		} catch (err) {
 			console.error('⚠️ Netzwerkfehler:', err);
@@ -87,7 +69,7 @@
 	}
 
 	async function handleDelete(tatort: string) {
-		let url = new URL($page.url);
+		let url = new URL(data.url);
 		url.pathname += `/${tatort}`;
 		console.log('Delete tatort: ', `/api${url.pathname}`, url.pathname);
 
@@ -97,7 +79,7 @@
 				headers: {
 					'Content-Type': 'application/json'
 				},
-				body: JSON.stringify({ vorgang, tatort })
+				body: JSON.stringify({ vorgangToken, tatort })
 			});
 
 			if (!res.ok) {
@@ -105,255 +87,67 @@
 				console.error('❌ Fehler beim Löschen:', msg);
 			} else {
 				console.log('🗑️ Erfolgreich gelöscht:', url.pathname);
+				await invalidate(`/api/list/${vorgangToken}`);
+				await invalidateAll();
+				crimesList = data.crimesList;
 			}
 		} catch (err) {
 			console.error('⚠️ Netzwerkfehler beim Löschen:', err);
 		}
 	}
 
-	// function defocus_element(i: number) {
+	function constructMailToLink() {
-	// 	let item = crimesList[i];
+		const subject = 'Link zum Tatvorgang';
-	// 	let text_field_id = `label__${item.name}`;
 
-	// 	let text_field = document.getElementById(text_field_id);
+		const link = data.url.origin + data.url.pathname;
-	// 	if (text_field) {
+		const body = `Hallo,
-	// 		text_field.setAttribute('contenteditable', 'false');
-	// 		text_field.textContent = item.name;
-	// 	}
 
-	// 	// reshow button
+	hier ist der Link zum Tatvorgang:
-	// 	crimesList[i].show_button = true;
+	${link}
-	// 	return;
-	// }
 
-	// 	async function handleEditFieldInput(ev: KeyboardEvent, listItemIndex: number) {
+	Der Zugangs-PIN wird zur Sicherheit über einen zweiten Kommunikationskanal übermittelt.
-	// 		let item = crimesList[listItemIndex];
-	// 		if (ev.key == 'Escape') {
-	// 			let text_field_id = `label__${item.name}`;
 
-	// 			let text_field = document.getElementById(text_field_id);
+	Mit freundlichen Grüßen,
-	// 			if (text_field) {
+	`;
-	// 				text_field.setAttribute('contenteditable', 'false');
-	// 				text_field.textContent = item.name;
-	// 			}
 
-	// 			// reshow button
+		const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
-	// 			item.show_button = true;
-	// 			return;
-	// 		}
-	// 		if (ev.key == 'Enter') {
-	// 			let name_field = ev.currentTarget as HTMLElement | null;
-	// 			let new_name = name_field
-	// 				? name_field.textContent || (name_field as any).innerText || ''
-	// 				: '';
 
-	// 			if (new_name == '') {
+		return mailtoLink;
-	// 				alert('Bitte einen gültigen Namen eingeben.');
+	}
-	// 				ev.preventDefault();
-	// 				return;
-	// 			}
 
-	// 			// actual upload
+	function closeModal() {
-	// 			// -------------
+		open = false;
-
+	}
-	// 			// to prevent from item being selected
-	// 			ev.preventDefault();
-
-	// 			// construct PUT URL
-	// 			const url = $page.url.pathname.split('?')[0];
-
-	// 			let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
-	// 			data_obj['new_name'] = new_name;
-	// 			data_obj['old_name'] =
-	// 				ev.currentTarget && (ev.currentTarget as HTMLElement).id
-	// 					? (ev.currentTarget as HTMLElement).id.split('__')[1]
-	// 					: '';
-
-	// 			open = true;
-	// 			inProgress = true;
-
-	// 			const response = await fetch(url, { method: 'PUT', body: JSON.stringify(data_obj) });
-
-	// 			inProgress = false;
-
-	// 			if (!response.ok) {
-	// 				err = true;
-	// 				if (response.status == 400) {
-	// 					let json_res = await response.json();
-	// 					return;
-	// 				}
-	// 				throw new Error(`Fehlgeschlagen: ${response.status}`);
-	// 			} else {
-	// 				uploadSuccessful();
-	// 				setTimeout(() => {
-	// 					window.location.reload();
-	// 				}, 500);
-	// 			}
-
-	// 			// --- upload finished ---
-
-	// 			return;
-	// 		}
-	// 	}
-
-	// function constructMailToLink() {
-	// 	const subject = 'Link zum Tatvorgang';
-	// 	const link = $page.url.toString().split('?')[0];
-	// 	const body = `Hallo,
-
-	// hier ist der Link zum Tatvorgang:
-	// ${link}
-
-	// Der Zugangs-PIN wird zur Sicherheit über einen zweiten Kommunikationskanal übermittelt.
-
-	// Mit freundlichen Grüßen,
-	// `;
-
-	// 	const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
-
-	// 	return mailtoLink;
-	// }
 </script>
 
-{#if vorgang}
+{#if data.vorgang && data.crimesList}
 	<div class="-z-10 bg-white">
 		<div class="flex flex-col items-center justify-center w-full">
-			<h1 class="text-xl">Vorgang {vorgang}</h1>
+			<h1 class="text-xl">Vorgang {vorgangName}</h1>
 
-			<!-- {#if data?.user?.admin}
+			{#if admin}
-				Zugangs-PIN: {vorgang.pin}
+				Zugangs-PIN: {vorgangPIN}
-				<a href={constructMailToLink()}><Button>Share Link</Button></a>
+				<a class="pt-2 pb-6" href={constructMailToLink()}><Button>Share Link</Button></a>
-			{/if} -->
+			{/if}
 		</div>
 		<div class="mx-auto flex justify-center max-w-7xl h-full">
 			<ul class="divide-y divide-gray-100">
-				{#each crimesList as item, crimeListItemIndex}
+				{#each data.crimesList as item, crimeListItemIndex}
-					<!-- <li>
-						<a
-							href="/view/{$page.params.vorgang}/{item.name}?pin={vorgangPIN}"
-							class=" flex justify-between gap-x-6 py-5"
-							aria-label="zum 3D-modell"
-						>
-							<div class=" flex gap-x-4">
-								<Cube />
-								<div class="min-w-0 flex-auto">
-									{#if data?.user?.admin}
-										<span
-											id="label__{item.name}"
-											class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-											contenteditable={!item.show_button}
-											role="textbox"
-											tabindex="0"
-											aria-label="Dateiname bearbeiten"
-											on:focusout={() => {
-												defocus_element(crimeListItemIndex);
-											}}
-											on:keydown|stopPropagation={// event needed to identify ID
-											// TO-DO: check if event is needed or if index is sufficient
-											async (ev) => {
-												handleEditFieldInput(ev, crimeListItemIndex);
-											}}>{item.name}</span
-										>
-
-										{#if item.show_button}
-											<button
-												style="padding: 2px"
-												id="edit__{item.name}"
-												aria-label="Datei umbenennen"
-												on:click|preventDefault={(ev) => {
-													let text_field_id = `label__${item.name}`;
-
-													let text_field = document.getElementById(text_field_id);
-													if (text_field) {
-														text_field.setAttribute('contenteditable', 'true');
-														text_field.focus();
-														text_field.textContent = '';
-													}
-
-													// hide button
-													item.show_button = false;
-												}}
-											>
-												<Edit />
-											</button>
-										{/if}
-										<button
-											style="padding: 2px"
-											id="del__{item.name}"
-											on:click|preventDefault={async (ev) => {
-												let delete_item = window.confirm('Bist du sicher?');
-
-												if (delete_item) {
-													// bucket: tatort, name: <vorgang>/item-name
-													let vorgang = $page.params.vorgang;
-													let filename = '';
-													if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
-														filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
-													}
-
-													// delete request
-													// --------------
-
-													let url = new URL($page.url);
-													url.pathname += `/${filename}`;
-
-													try {
-														const response = await fetch(`/api${url.pathname}`, {
-															method: 'DELETE'
-														});
-														if (response.status == 204) {
-															setTimeout(() => {
-																window.location.reload();
-															}, 500);
-														}
-													} catch (error) {
-														if (error instanceof Error) {
-															console.log(error.message);
-														} else {
-															console.log(error);
-														}
-													}
-												}
-											}}
-											aria-label="Datei löschen"
-										>
-											<Trash />
-										</button>
-									{:else}
-										<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-											>{item.name}</span
-										>
-									{/if}
-									<p class="mt-1 truncate text-xs leading-5 text-gray-500">
-										{shortenFileSize(item.size)}
-									</p>
-								</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>
-								<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>
-							</div>
-						</a>
-					</li> -->
-
 					<li>
 						<div class=" flex gap-x-4">
 							<a
-								href="/view/{$page.params.vorgang}/{currentName}?pin={vorgangPIN}"
+								href="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"
 								class=" flex justify-between gap-x-6 py-5"
-								aria-label="zum 3D-modell"
+								aria-label="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"
+								title={item.name}
 							>
 								<Cube />
 							</a>
 							<div class="min-w-0 flex-auto">
 								{#if admin}
 									<EditableItem
-										list={crimesList}
+										list={data.crimesList}
-										bind:editedName={names[crimeListItemIndex]}
+										editedName={data.crimeNames[crimeListItemIndex]}
 										currentName={item.name}
 										onSave={handleSave}
 										onDelete={handleDelete}
@@ -394,9 +188,7 @@
 					<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
 				{/if}
 			</ModalContent>
-			<ModalFooter
+			<ModalFooter><Button disabled={inProgress} on:click={closeModal}>Ok</Button></ModalFooter>
-				><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter
-			>
 		</Modal>
 	</div>
 {/if}

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

@@ -0,0 +1,27 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load({fetch, params, url}){
+    const  vorgangResponse = await fetch(`/api/list`);
+     const vorgangList = await vorgangResponse.json()
+     const vorgangToken = params.vorgang;
+         const crimesListResponse = await fetch(`/api/list/${vorgangToken}`)
+         const crimesList = await crimesListResponse.json();
+    const vorgang = vorgangList.find(v => v.vorgangToken === vorgangToken); //vorgang sollte ein eigener Typ werden, und dann kann man es hier vernünftig typisieren
+    if(!vorgang || !crimesList){
+  	throw new Error(`Fehlgeschlagen, es wurden keine Daten zum token gefunden`);
+    }
+
+	//Variabeln für EditableItem
+	const crimeNames: string[] = crimesList.map((l) => l.name);
+
+   if (crimesList.length === 0) {
+    throw redirect(302, '/upload'); // weiterleiten auf die hinzufügen seite
+  }
+     return {
+      vorgang,
+      vorgangList,
+      crimesList,
+      url,
+      crimeNames
+     }
+}

src/routes/(token-based)/list/[vorgang]/+server.ts

@@ -1,34 +0,0 @@
-import { client } from '$lib/minio';
-import { json } from '@sveltejs/kit';
-
-
-// rename operation for crimes
-export async function PUT({ request }: {request: Request}) {
-    const data = await request.json();
-
-    // Vorgang
-    const vorgangToken = request.url.split('/').at(-1);
-
-    // prepare copy, incl. check if new name exists already
-    const crimeOldName = data["old_name"];
-    const crimeS3FullBucketPathOld = `/tatort/${vorgangToken}/${crimeOldName}`;
-    const crimeNewName = `${vorgangToken}/${data["new_name"]}`;
-
-    try {
-        await client.statObject('tatort', crimeNewName);
-        return json({ msg: 'Die Datei existiert bereits.' }, { status: 400 });
-    } catch (error) {
-        // continue operation
-        console.log(error, 'continue operation');
-    }
-
-    // actual copy operation
-    await client.copyObject('tatort', crimeNewName, crimeS3FullBucketPathOld)
-
-    // delete
-    await client.removeObject('tatort', `${vorgangToken}/${crimeOldName}`)
-
-    // return success or failure
-
-    return json({ success: 'success' }, { status: 200 });
-};

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

@@ -1,5 +1,5 @@
 import { BUCKET, client } from '$lib/minio';
-import { json, type RequestHandler } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { getVorgangByName } from '$lib/server/vorgangService';
 
 export async function GET() {
@@ -36,12 +36,13 @@ export async function DELETE({ request }: { request: Request }) {
 }
 
 // rename operation for crimes
-export async function PUT({ params, request }: { params: RequestHandler; request: Request }) {
+export async function PUT({ params, request }) {
 	const data = await request.json();
 
 	// Vorgang
-	const vorgangName = params.vorgang;
+	const vorgangToken = params.vorgang;
-	const vorgangToken = getVorgangByName(vorgangName)?.token;
+	//const vorgangToken = getVorgangByName(vorgangName)?.token;
+
 
 	// prepare copy, incl. check if new name exists already
 	const crimeOldName = data['oldName'];