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,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}
+								contenteditable={! item.show_button}
-								on:focusout={(event) => {
+								on:focusout={() => {
-									let text_field_id = `label__${item.name}`
+									defocus_element(i);
-
-									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;
-									}
 								}}
+								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 -->