hochladen

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

@@ -2,17 +2,23 @@
 	import Folder from '$lib/icons/Folder.svelte';
 	import EditableItem from '$lib/components/EditableItem.svelte';
 
-	export let data;
-	export let editingId: number;
-
 	interface ListItem {
 		name: string;
 		token?: string;
 		// add other properties as needed
 	}
 
+	let { data } = $props();
+
 	const caseList: ListItem[] = data.caseList;
 
+	//Variabeln für EditableItem
+	let names: string[] = $state(caseList.map((l) => l.name));
+	let editedName: string = $state('');
+
+	function getNameById(list: ListItem[], id: number) {
+		return list[id].name;
+	}
 	async function delete_item(ev: Event) {
 		let delete_item = window.confirm('Bist du sicher?');
 
@@ -42,6 +48,51 @@
 			}
 		}
 	}
+
+	async function handleSave(newName: string, oldName: string) {
+		console.log('Eltern, speichern erfolgreich', newName, oldName);
+		try {
+			const res = await fetch(`/api/list/${oldName}`, {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({ oldName, newName })
+			});
+
+			if (!res.ok) {
+				const msg = await res.text();
+				console.error('❌ Fehler beim Speichern:', msg);
+			} else {
+				console.log('✅ Erfolgreich gespeichert:', newName);
+			}
+		} catch (err) {
+			console.error('⚠️ Netzwerkfehler:', err);
+		}
+	}
+
+	async function handleDelete(name: string) {
+		try {
+			const res = await fetch(`/api/list/${name}`, {
+				method: 'DELETE',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({ name })
+			});
+
+			if (!res.ok) {
+				const msg = await res.text();
+				console.error('❌ Fehler beim Löschen:', msg);
+			} else {
+				console.log('🗑️ Erfolgreich gelöscht:', name);
+				// Optional: Lokale Liste aktualisieren
+				//S	items = items.filter((item) => item.name !== name);
+			}
+		} catch (err) {
+			console.error('⚠️ Netzwerkfehler beim Löschen:', err);
+		}
+	}
 </script>
 
 <div class="-z-10 bg-white">
@@ -52,33 +103,28 @@
 		<ul role="list" class="divide-y divide-gray-100">
 			{#each caseList as item, i}
 				<li>
-					<a href="/list/{item.name}?token={item.token}" class="flex justify-between gap-x-6 py-5">
-						<div class="flex gap-x-4">
-							<!-- Ordner -->
+					<div class="flex gap-x-4">
+						<!-- Ordner -->
+						<a
+							href="/list/{item.name}?token={item.token}"
+							class="bg-red-500 flex justify-between gap-x-6 py-5"
+						>
 							<Folder />
-							<div class="min-w-0 flex-auto">
-								<EditableItem
-									class=""
-									id={i}
-									inputValue={item.name}
-									editing={editingId === i}
-									editStart={() => (editingId = i)}
-									variant="casename"
-									existings={caseList}
-									save={(data) => {
-										console.log('Gespeichert:', data);
-									}}
-									deleteItem={(data) => {
-										console.log('Gelöscht:', data);
-										delete_item(data.customEvent);
-									}}
-								></EditableItem>
-							</div>
-							<div class="hidden sm:flex sm:flex-col sm:items-end">
-								<p class="text-sm leading-6 text-gray-900">Vorgang</p>
-							</div>
+						</a>
+
+						<div class="min-w-0 flex-auto">
+							<EditableItem
+								list={caseList}
+								bind:editedName={names[i]}
+								currentName={item.name}
+								onSave={handleSave}
+								onDelete={handleDelete}
+							></EditableItem>
 						</div>
-					</a>
+						<div class="hidden sm:flex sm:flex-col sm:items-end">
+							<p class="text-sm leading-6 text-gray-900">Vorgang</p>
+						</div>
+					</div>
 				</li>
 			{/each}
 		</ul>