Teilbearbeitung des Pull-Requests, nicht fertig da meeting

src/lib/components/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let href = null;
-	export let type = 'button';
+	export let type: 'button' | 'submit' | 'reset' = 'button';
 	export let size = 'md';
 	export let variant = 'primary';
 	export let fullWidth = false;

src/lib/components/NameItemEditor.svelte

@@ -20,9 +20,6 @@
 	let wasCancelled = $state(false);
 
 	let error: string = $derived(validateName(localName));
-
-	let manualError = $state('');
-
 	let isEditing = $state(false);
 	let inputRef: HTMLInputElement;
 
@@ -56,7 +53,6 @@
 
 	function resetEdit() {
 		wasCancelled = false;
-		manualError = '';
 		inputRef?.blur();
 		isEditing = false;
 	}
@@ -88,7 +84,7 @@
 	/>
 	<button onclick={startEdit}><Edit /></button>
 	<button onclick={() => onDelete(currentName)}><Trash /></button>
-	{#if manualError || error}
-		<p style="color: red;">{manualError || error}</p>
+	{#if error}
+		<p style="color: red;">{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/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -9,16 +9,15 @@
 	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 NameItemEditor from '$lib/components/NameItemEditor.svelte';
 
 	//Seite für die Tatort-Liste
 	let { data } = $props();
 
-	console.log('tatorte: debug ', data); //zur besseren Nachvollziehbarkeit noch drin gelassen, kann vorm merge gelöscht werden
-
+	console.log('tatorte: debug ', data);
 	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
+		//sollte Typ Vorgang sein, aber der einfachheit ist es noch ListItem, damit die Komponente NameItemEditor für Vorgang und Tatort eingesetzt werden kann
 		name: string;
 		size: number;
 		lastModified: string | number | Date;
@@ -27,40 +26,46 @@
 		// add other properties as needed
 	}
 
-	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 vorgangName: string = data.vorgang.vorgangName;
 	let crimesList: ListItem[] = $state(data.crimesList);
-	const vorgangPIN: string = data.vorgang.vorgangPIN; //caseToken??  //	const token: string | null = data.caseToken;
+	const vorgangPIN: string = data.vorgang.vorgangPIN;
 	let vorgangToken: string = data.vorgang.vorgangToken;
 
 	//Variablen für Modal
 	let open = $state(false);
 	let inProgress = $state(false);
-	let err = $state(false);
+	let isError = $state(false);
 
 	//Variable um nur admin UI anzuzeigen
 	let admin = data?.user?.admin;
 
 	async function handleSave(newName: string, oldName: string) {
 		open = true;
-		console.log('Eltern, speichern erfolgreich', newName, oldName); //zur besseren Nachvollziehbarkeit noch drin gelassen, kann vorm merge gelöscht werden
+		inProgress = true;
 		try {
 			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({ vorgangToken, oldName, newName })
-			});
+			})
+				.then(() => {
+					inProgress = false;
+				})
+				.catch((err) => {
+					inProgress = false;
+					isError = true;
+					console.log('ERROR', err);
+				});
 
 			if (!res.ok) {
 				const msg = await res.text();
-				console.error('❌ Fehler beim Speichern:', msg);
+				console.error('❌ Fehler beim Umbenennen:', msg);
+				isError = true;
 			} else {
-				await invalidate(`/api/list/${vorgangToken}`);
 				await invalidateAll();
 				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) {
@@ -69,6 +74,8 @@
 	}
 
 	async function handleDelete(tatort: string) {
+		open = true;
+		inProgress = true;
 		let url = new URL(data.url);
 		url.pathname += `/${tatort}`;
 		console.log('Delete tatort: ', `/api${url.pathname}`, url.pathname);
@@ -80,18 +87,25 @@
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, tatort })
-			});
-
+			})
+				.then(() => {
+					inProgress = false;
+				})
+				.catch((err) => {
+					isError = true;
+					inProgress = false;
+					console.log('ERROR', err);
+				});
 			if (!res.ok) {
 				const msg = await res.text();
 				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) {
+			isError = true;
 			console.error('⚠️ Netzwerkfehler beim Löschen:', err);
 		}
 	}
@@ -117,6 +131,7 @@
 
 	function closeModal() {
 		open = false;
+		isError = false;
 	}
 </script>
 
@@ -145,13 +160,13 @@
 							</a>
 							<div class="min-w-0 flex-auto">
 								{#if admin}
-									<EditableItem
+									<NameItemEditor
 										list={data.crimesList}
 										editedName={data.crimeNames[crimeListItemIndex]}
 										currentName={item.name}
 										onSave={handleSave}
 										onDelete={handleDelete}
-									></EditableItem>
+									></NameItemEditor>
 								{:else}
 									<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
 										>{item.name}</span
@@ -183,9 +198,10 @@
 			><ModalTitle>Umbenennen</ModalTitle><ModalContent>
 				{#if inProgress}
 					<p class="py-2 mb-1">Vorgang läuft...</p>
-				{/if}
-				{#if err}
+				{:else if isError}
 					<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
+				{:else}
+					<Alert class="w-full">Upload erfolgreich</Alert>
 				{/if}
 			</ModalContent>
 			<ModalFooter><Button disabled={inProgress} on:click={closeModal}>Ok</Button></ModalFooter>

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

@@ -11,7 +11,7 @@ export async function load({fetch, params, url}){
   	throw new Error(`Fehlgeschlagen, es wurden keine Daten zum token gefunden`);
     }
 
-	//Variabeln für EditableItem
+	//Variabeln für NameItemEditor
 	const crimeNames: string[] = crimesList.map((l) => l.name);
 
    if (crimesList.length === 0) {