refactor event handlers

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

@@ -68,6 +68,88 @@
 		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">
@@ -76,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}"
@@ -102,84 +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]
-
-
-										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;
-									}
+								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 -->