refactor event handlers

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

@@ -35,6 +35,33 @@
 			list = list.concat(objs);
 		}
 	});
+
+	async function delete_item(ev) {
+		let delete_item = window.confirm("Bist du sicher?");
+
+		if (delete_item) {
+				let filename = event.currentTarget.id.split('del__')[1]
+
+				// delete request
+				// --------------
+
+				let url = `/api/list/${filename}`
+
+				console.log(`--- ${filename} + ${url}`)
+				try {
+					const response = await fetch(url,
+						{method: 'DELETE'}
+					)
+					if (response.status == 204) {
+						setTimeout(() => {window.location.reload()}, 500)
+					}
+				} catch (error) {
+					console.log(error.message)
+				}
+
+			}
+
+	}
 </script>
 
 <div class="-z-10 bg-white">
@@ -67,32 +94,7 @@
 								<button
 								style="padding: 2px"
 								id="del__{item.name}"
-								on:click|preventDefault={async (ev) => {
-									let delete_item = window.confirm("Bist du sicher?");
-
-									if (delete_item) {
-											let filename = event.currentTarget.id.split('del__')[1]
-
-											// delete request
-											// --------------
-
-											let url = `/api/list/${filename}`
-
-											console.log(`--- ${filename} + ${url}`)
-											try {
-												const response = await fetch(url,
-													{method: 'DELETE'}
-												)
-												if (response.status == 204) {
-													setTimeout(() => {window.location.reload()}, 500)
-												}
-											} catch (error) {
-												console.log(error.message)
-											}
-
-										}
-
-								}}
+								on:click|preventDefault={delete_item}
 								>
 									<svg
 									height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m8 3v1 1h1v-1h4v1h1v-1-1zm-4 3v1h14v-1zm2 2v11h1 9v-1-10h-1v10h-8v-10z" fill="#373737" transform="translate(1 1)"/></svg>

src/routes/(angemeldet)/list/[vorgang]/+page.svelte

@@ -11,6 +11,13 @@
 
 	import timeElapsed from '$lib/helper/timeElapsed';
 
+	import Alert from '$lib/components/ui/Alert.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Modal from '$lib/components/ui/Modal/Modal.svelte';
+	import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
+	import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
+	import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
+
 	/** @type {import('./$types').PageData} */
 	/** export let data; */
 
@@ -20,6 +27,13 @@
 	let list = [];
 	$: list;
 
+	let open = false;
+	$: open;
+	let inProgress = false;
+	$: inProgress;
+	let err = false;
+	$: err;
+
 	let rename_input;
 	$: rename_input;
 
@@ -49,6 +63,93 @@
 			})
 		}
 	});
+
+	function uploadSuccessful() {
+		console.log('reset');
+		open = false;
+	}
+
+	function defocus_element(i) {
+		let item = list[i]
+		let text_field_id = `label__${item.name}`
+
+		let text_field = document.getElementById(text_field_id)
+		text_field.setAttribute("contenteditable", false)
+		text_field.textContent = item.name;
+
+		// reshow button
+		list[i].show_button = true;
+		return;
+	}
+
+	async function handle_input(ev, i) {
+		let item = list[i]
+		if (ev.key == "Escape") {
+			let text_field_id = `label__${item.name}`
+
+			let text_field = document.getElementById(text_field_id)
+			text_field.setAttribute("contenteditable", false)
+			text_field.textContent = item.name;
+
+			// reshow button
+			item.show_button = true
+			return;
+		}
+		if (ev.key == "Enter") {
+			console.log('--- hitted')
+			let name_field = ev.currentTarget
+			let new_name = name_field.textContent || name_field.innerText || '';
+
+
+			if (new_name == '') {
+				alert('Bitte einen gültigen Namen eingeben.');
+				ev.preventDefault();
+				return;
+			}
+
+			// actual upload
+			// -------------
+
+			// to prevent from item being selected
+			ev.preventDefault();
+
+			// construct PUT URL
+			const url = $page.url
+			console.log(url);
+
+			let data_obj = {}
+			data_obj["new_name"] = new_name
+			data_obj["old_name"] = ev.currentTarget.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()
+					// alert(json_res['msg'])
+					return;
+				}
+				throw new Error(`Fehlgeschlagen: ${response.status}`)
+			} else {
+				uploadSuccessful();
+				setTimeout(() => {window.location.reload()}, 500)
+			}
+
+			// --- upload finished ---
+
+			return;
+		}
+	}
+
 </script>
 
 <div class="-z-10 bg-white">
@@ -57,7 +158,7 @@
 	</div>
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul class="divide-y divide-gray-100">
-			{#each list as item}
+			{#each list as item, i}
 				<li>
 					<a
 						href="/view/{$page.params.vorgang}/{item.name}"
@@ -83,77 +184,15 @@
 								style="display: inline-block; min-width: 5px;"
 								id="label__{item.name}"
 								class="text-sm font-semibold leading-6 text-gray-900"
-								contenteditable={! item.button}
-								on:focusout={(event) => {
-									let text_field_id = `label__${item.name}`
-
-									let text_field = document.getElementById(text_field_id)
-									text_field.setAttribute("contenteditable", false)
-									text_field.textContent = item.name;
-
-									// reshow button
-									item.show_button = true
-									return;
-								}}
-								on:keydown|stopPropagation={async (event) => {
-									if (event.key == "Escape") {
-										let text_field_id = `label__${item.name}`
-
-										let text_field = document.getElementById(text_field_id)
-										text_field.setAttribute("contenteditable", false)
-										text_field.textContent = item.name;
-
-										// reshow button
-										item.show_button = true
-										return;
-									}
-									if (event.key == "Enter") {
-										console.log('--- hitted')
-										let name_field = event.currentTarget
-										let new_name = name_field.textContent || name_field.innerText || '';
-
-
-										if (new_name == '') {
-											alert('Bitte einen gültigen Namen eingeben.');
-											event.preventDefault();
-											return;
-										}
-
-										// actual upload
-										// -------------
-
-										// to prevent from item being selected
-										event.preventDefault();
-
-										// construct PUT URL
-										const url = $page.url
-										console.log(url);
-
-										let data_obj = {}
-										data_obj["new_name"] = new_name
-										data_obj["old_name"] = event.currentTarget.id.split('__')[1]
-
-										const response = await fetch(url,
-											{method: 'PUT', body: JSON.stringify( data_obj )
-										})
-
-
-										if (!response.ok) {
-											if (response.status == 400) {
-												let json_res = await response.json()
-												alert(json_res['msg'])
-												return;
-											}
-											throw new Error(`Fehlgeschlagen: ${response.status}`)
-										} else {
-											setTimeout(() => {window.location.reload()}, 500)
-										}
-
-										// --- upload finished ---
-
-										return;
-									}
+								contenteditable={! item.show_button}
+								on:focusout={() => {
+									defocus_element(i);
 								}}
+								on:keydown|stopPropagation={
+									// event needed to identify ID
+									// TO-DO: check if event is needed or if index is sufficient
+									async (ev) => {handle_input(ev, i)}
+								}
 
 								>{item.name}</span>
 								<!-- https://iconduck.com/icons/192863/edit-rename -->
@@ -234,4 +273,17 @@
 			{/each}
 		</ul>
 	</div>
+
+<Modal {open}
+		><ModalTitle>Umbenennen</ModalTitle><ModalContent>
+			{#if inProgress}
+				<p class="py-2 mb-1">Vorgang läuft...</p>
+			{/if}
+			{#if err}
+				<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
+			{/if}
+		</ModalContent>
+		<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
+	</Modal>
+
 </div>