Input Feld springt

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

@@ -5,9 +5,10 @@
 </style>
 
 <script>
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import { page } from '$app/stores';
+
 	import timeElapsed from '$lib/helper/timeElapsed';
 
 	/** @type {import('./$types').PageData} */
@@ -19,6 +20,9 @@
 	let list = [];
 	$: list;
 
+	let rename_input;
+	$: rename_input;
+
 	onMount(async () => {
 		const response = await fetch('/api/list/' + $page.params.vorgang);
 		const stream = response.body;
@@ -38,6 +42,11 @@
 
 			console.log(objs);
 			list = list.concat(objs);
+
+			list = list.map((item) => {
+				item.show_input = false;
+				return item;
+			})
 		}
 	});
 </script>
@@ -70,7 +79,83 @@
 								/>
 							</svg>
 							<div class="min-w-0 flex-auto">
-								<p class="text-sm font-semibold leading-6 text-gray-900">{item.name}</p>
+								<span class="text-sm font-semibold leading-6 text-gray-900">{item.name}</span>
+								<!-- https://iconduck.com/icons/192863/edit-rename -->
+
+								<!-- on:click|preventDefault needs `tick()` to grab the element -->
+								<button
+								style="padding: 2px;"
+								id="{item.name}-btn"
+								on:click|preventDefault={async (ev) => {
+									console.log(`${ev.currentTarget.id}`)
+									item.show_input = ! item.show_input;
+
+									await tick();
+
+									if (item.show_input) {
+										let input_field_id = item.name + "-input"
+										console.log(`--- ${input_field_id}`)
+
+										let input_field = document.getElementById(input_field_id)
+										input_field.focus();
+									}
+								}}
+								>
+									<svg
+									style="vertical-align: middle" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m14.996094 3-11.9921878 11.992188h-.0039062v4.007812h1 2 1.0078125v-.0039l11.9921875-11.9921938-.001953-.0019531.001953-.0019531-4-4-.002.00195zm-1.998047 3.4121094 2.589844 2.5898437-7.587891 7.5878909v-1.589844h-1-1v-1-.589844zm-7.998047 7.9980466v1.589844h1 1v1 .589844l-.4101562.410156h-1.5898438l-1-1v-1.589844z" fill="#373737" transform="translate(1 1)"/></svg>
+								</button>
+								{#if item.show_input}
+								<input
+									placeholder="new name"
+									id="{item.name}-input"
+									type="text"
+									on:click|preventDefault={() =>
+										console.log(`--- focussed`)
+									}
+									on:keydown|stopPropagation={async (event) => {
+										if (event.key == "Escape") {
+											item.show_input = ! item.show_input;
+											return;
+										}
+										if (event.key == "Enter") {
+											console.log('--- hitted')
+											let new_name = event.currentTarget.value
+
+											if (new_name == '') {
+												alert('Bitte einen gültigen Namen eingeben.')
+												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('-')[0]
+
+											const response = await fetch(url, {method: 'PUT', body: JSON.stringify( data_obj )
+											})
+
+											console.log(`xxx ${await response.text()}`)
+
+											return;
+										}
+									}}
+									on:focusout={() => {
+										item.show_input = ! item.show_input;
+									}}
+									on:mouseleave={() => {
+										item.show_input = ! item.show_input;
+									}}
+								/>
+								{/if}
 								<p class="mt-1 truncate text-xs leading-5 text-gray-500">
 									{shortenFileSize(item.size)}
 								</p>

src/routes/(angemeldet)/list/[vorgang]/+server.js

@@ -0,0 +1,11 @@
+import { client } from '$lib/minio';
+import { json } from '@sveltejs/kit';
+
+
+export async function PUT({ request }) {
+    const data = await request.json();
+
+    console.log(`--- ${request.url} +++ ${data.old_name}`);
+
+    return json({ success: 'SUCKZESS' }, { status: 201 });
+};