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_button = true;
+				return item;
+			})
 		}
 	});
 </script>
@@ -70,7 +79,100 @@
 								/>
 							</svg>
 							<div class="min-w-0 flex-auto">
-								<p class="text-sm font-semibold leading-6 text-gray-900">{item.name}</p>
+								<span
+								style="display: inline-block; min-width: 5px;"
+								id="{item.name}-label"
+								class="text-sm font-semibold leading-6 text-gray-900"
+								contenteditable={! item.button}
+								on:focusout={(event) => {
+									let text_field_id = item.name + "-label"
+
+									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 = item.name + "-label"
+
+										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('-')[0]
+
+										const response = await fetch(url,
+											{method: 'PUT', body: JSON.stringify( data_obj )
+										})
+
+
+										if (!response.ok) {
+											throw new Error(`Fehlgeschlagen: ${response.status}`)
+										} else {
+											setTimeout(() => {window.location.reload()}, 500)
+										}
+
+										// --- upload finished ---
+
+										return;
+									}
+								}}
+
+								>{item.name}</span>
+								<!-- https://iconduck.com/icons/192863/edit-rename -->
+
+								{#if item.show_button}
+								<button
+								style="padding: 2px"
+								id="{item.name}-btn"
+								on:click|preventDefault={(ev) => {
+									let text_field_id = item.name + "-label"
+
+									let text_field = document.getElementById(text_field_id)
+									text_field.setAttribute("contenteditable", true)
+									text_field.focus();
+									text_field.textContent = '';
+
+									// hide button
+									item.show_button = false
+								}}
+								>
+									<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}
 								<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,26 @@
+import { client } from '$lib/minio';
+import { json } from '@sveltejs/kit';
+
+
+
+export async function PUT({ request }) {
+    const data = await request.json();
+
+    console.log(`--- ${request.url.split('/').at(-1)} +++ ${JSON.stringify(data)}`);
+
+    // Vorgang
+    let vorgang = request.url.split('/').at(-1)
+
+    // copy
+    let old_name = data["old_name"]
+    let src_full_path = `/tatort/${vorgang}/${old_name}`
+    let new_name = `${vorgang}/${data["new_name"]}`
+    await client.copyObject('tatort', new_name, src_full_path)
+
+    // delete
+    await client.removeObject('tatort', `${vorgang}/${old_name}`)
+
+    // return success or failure
+
+    return json({ success: 'SUCKZESS' }, { status: 200 });
+};