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) => {
+								on:click|preventDefault={delete_item}
-									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)
-											}
-
-										}
-
-								}}
 								>
 									<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

@@ -68,42 +68,9 @@
 		console.log('reset');
 		open = false;
 	}
-</script>
 
-<div class="-z-10 bg-white">
+	function defocus_element(i) {
-	<div class="flex flex-col items-center justify-center w-full">
+		let item = list[i]
-		<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
-	</div>
-	<div class="mx-auto flex justify-center max-w-7xl h-full">
-		<ul class="divide-y divide-gray-100">
-			{#each list as item}
-				<li>
-					<a
-						href="/view/{$page.params.vorgang}/{item.name}"
-						class="flex justify-between gap-x-6 py-5"
-					>
-						<div class="flex gap-x-4">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-6 h-6"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
-								/>
-							</svg>
-							<div class="min-w-0 flex-auto">
-								<span
-								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)
@@ -111,11 +78,13 @@
 		text_field.textContent = item.name;
 
 		// reshow button
-									item.show_button = true
+		list[i].show_button = true;
 		return;
-								}}
+	}
-								on:keydown|stopPropagation={async (event) => {
+
-									if (event.key == "Escape") {
+	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)
@@ -126,15 +95,15 @@
 			item.show_button = true
 			return;
 		}
-									if (event.key == "Enter") {
+		if (ev.key == "Enter") {
 			console.log('--- hitted')
-										let name_field = event.currentTarget
+			let name_field = ev.currentTarget
 			let new_name = name_field.textContent || name_field.innerText || '';
 
 
 			if (new_name == '') {
 				alert('Bitte einen gültigen Namen eingeben.');
-											event.preventDefault();
+				ev.preventDefault();
 				return;
 			}
 
@@ -142,7 +111,7 @@
 			// -------------
 
 			// to prevent from item being selected
-										event.preventDefault();
+			ev.preventDefault();
 
 			// construct PUT URL
 			const url = $page.url
@@ -150,7 +119,7 @@
 
 			let data_obj = {}
 			data_obj["new_name"] = new_name
-										data_obj["old_name"] = event.currentTarget.id.split('__')[1]
+			data_obj["old_name"] = ev.currentTarget.id.split('__')[1]
 
 
 			open = true;
@@ -179,7 +148,51 @@
 
 			return;
 		}
+	}
+
+</script>
+
+<div class="-z-10 bg-white">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
+	</div>
+	<div class="mx-auto flex justify-center max-w-7xl h-full">
+		<ul class="divide-y divide-gray-100">
+			{#each list as item, i}
+				<li>
+					<a
+						href="/view/{$page.params.vorgang}/{item.name}"
+						class="flex justify-between gap-x-6 py-5"
+					>
+						<div class="flex gap-x-4">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-6 h-6"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
+								/>
+							</svg>
+							<div class="min-w-0 flex-auto">
+								<span
+								style="display: inline-block; min-width: 5px;"
+								id="label__{item.name}"
+								class="text-sm font-semibold leading-6 text-gray-900"
+								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 -->