mina feierabend bug reload vorgangsluste geht nicht
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import Cube from '$lib/icons/Cube.svelte';
|
||||
import shortenFileSize from '$lib/helper/shortenFileSize';
|
||||
@@ -6,223 +6,196 @@
|
||||
import Trash from '$lib/icons/Trash.svelte';
|
||||
import Edit from '$lib/icons/Edit.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Modal from './ui/Modal/Modal.svelte';
|
||||
import ModalTitle from './ui/Modal/ModalTitle.svelte';
|
||||
import ModalContent from './ui/Modal/ModalContent.svelte';
|
||||
import Alert from './ui/Alert.svelte';
|
||||
import ModalFooter from './ui/Modal/ModalFooter.svelte';
|
||||
import Button from './ui/Button.svelte';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
let { data, list, i } = $props(); // Holt `data` aus den Props
|
||||
const dispatch = createEventDispatcher();
|
||||
let item = list[i];
|
||||
let error = $state('');
|
||||
let open = $state(false);
|
||||
let inProgress = $state(false);
|
||||
let err = $state(false);
|
||||
|
||||
$inspect(item.show_button);
|
||||
let oldName = $state(item.name);
|
||||
console.log('alter Ego', oldName);
|
||||
let test = true;
|
||||
|
||||
function deleteItem() {
|
||||
console.log('delete');
|
||||
}
|
||||
|
||||
function handleClick(ev) {
|
||||
function handleClick(ev: MouseEvent & { currentTarget: EventTarget & HTMLInputElement }) {
|
||||
ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
ev.preventDefault(); // Stoppt die Standardaktion
|
||||
console.log('show click', item.show_button);
|
||||
oldName = item.name;
|
||||
console.log('Button wurde geklickt!', oldName);
|
||||
}
|
||||
|
||||
function handle_input(ev) {
|
||||
// // let item = list[i];
|
||||
console.log('Mina item', item.name, oldName);
|
||||
console.log('input', ev.key);
|
||||
async function handle_input(
|
||||
ev: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }
|
||||
) {
|
||||
if (item.name == '') {
|
||||
error = 'Bitte einen gültigen Namen eingeben.';
|
||||
if (ev.key == 'Enter') {
|
||||
item.name = oldName;
|
||||
}
|
||||
}
|
||||
|
||||
if (ev.key == 'Escape') {
|
||||
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
ev.preventDefault(); // Stoppt die Standardaktion
|
||||
item.name = oldName;
|
||||
console.log('Escape', ev.key, 'abbgebrochen: ', item.name, oldName);
|
||||
ev.target.blur(); //Entfernt den Fokus vom Input-Feld
|
||||
ev.target?.blur(); //Entfernt den Fokus vom Input-Feld
|
||||
}
|
||||
|
||||
if (ev.key == 'Enter') {
|
||||
//ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
ev.preventDefault(); // Stoppt die Standardaktion
|
||||
console.log('Enter', ev.key, 'erforlgreich: ', item.name, oldName);
|
||||
ev.target.blur(); //Entfernt den Fokus vom Input-Feld
|
||||
|
||||
open = true;
|
||||
inProgress = true;
|
||||
|
||||
const url = $page.url;
|
||||
|
||||
let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
|
||||
data_obj['new_name'] = item.name;
|
||||
data_obj['old_name'] = oldName;
|
||||
|
||||
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']);
|
||||
item.name = oldName;
|
||||
}
|
||||
}
|
||||
|
||||
ev.target?.blur(); //Entfernt den Fokus vom Input-Feld
|
||||
let wert = {
|
||||
index: i,
|
||||
oldName: oldName,
|
||||
newName: item.name,
|
||||
open: true
|
||||
open: true,
|
||||
inProgress: inProgress,
|
||||
err: err
|
||||
};
|
||||
|
||||
dispatch('update', wert);
|
||||
}
|
||||
}
|
||||
|
||||
// // if (ev.key == 'Escape') {
|
||||
// // item.name = oldName;
|
||||
// // // reshow button
|
||||
function uploadSuccessful() {
|
||||
open = false;
|
||||
}
|
||||
|
||||
// // item.show_button = true;
|
||||
async function delete_item(ev: Event) {
|
||||
let delete_item = window.confirm('Bist du dir sicher?');
|
||||
|
||||
// // return;
|
||||
// }
|
||||
if (delete_item) {
|
||||
const target = ev.currentTarget as HTMLElement | null;
|
||||
if (!target) return;
|
||||
let filename = target.id.split('del__')[1];
|
||||
|
||||
// if (ev.key == 'Enter') {
|
||||
// console.log('Enter', ev.key);
|
||||
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
// ev.preventDefault(); // Stoppt die Standardaktion
|
||||
// }
|
||||
// // if (ev.key == 'Enter') {
|
||||
// // console.log('--- hitted');
|
||||
// delete request
|
||||
// --------------
|
||||
|
||||
// // let name_field = ev.currentTarget as HTMLElement | null;
|
||||
let url = `/list/${filename}`;
|
||||
|
||||
// // let new_name = name_field
|
||||
// // ? name_field.textContent || (name_field as any).innerText || ''
|
||||
// // : '';
|
||||
console.log(`--- ${filename} + ${url}`);
|
||||
try {
|
||||
const response = await fetch(url, { method: 'DELETE' });
|
||||
if (response.status == 204) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.log(error.message);
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // if (new_name == '') {
|
||||
// // alert('Bitte einen gültigen Namen eingeben.');
|
||||
async function deleteItem(ev: Event) {
|
||||
console.log('debug', ev, item);
|
||||
let delete_item = window.confirm('Bist du dir sicher?');
|
||||
|
||||
// // ev.preventDefault();
|
||||
if (delete_item) {
|
||||
const target = ev.currentTarget as HTMLElement | null;
|
||||
if (!target) return;
|
||||
let filename = target.id.split('del__')[1];
|
||||
|
||||
// // return;
|
||||
// // }
|
||||
// delete request
|
||||
// --------------
|
||||
|
||||
// // // actual upload
|
||||
let url = `/api/list/${filename}`;
|
||||
|
||||
// // // -------------
|
||||
|
||||
// // // to prevent from item being selected
|
||||
|
||||
// // ev.preventDefault();
|
||||
|
||||
// // // construct PUT URL
|
||||
|
||||
// // const url = $page.url;
|
||||
|
||||
// // console.log(url);
|
||||
|
||||
// // let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
|
||||
|
||||
// // data_obj['new_name'] = new_name;
|
||||
|
||||
// // data_obj['old_name'] =
|
||||
// // ev.currentTarget && (ev.currentTarget as HTMLElement).id
|
||||
// // ? (ev.currentTarget as HTMLElement).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;
|
||||
// // }
|
||||
// }
|
||||
|
||||
// async (ev) => {
|
||||
// let delete_item = window.confirm('Bist du sicher?');
|
||||
|
||||
// if (delete_item) {
|
||||
// // bucket: tatort, name: <vorgang>/item-name
|
||||
|
||||
// let vorgang = $page.params.vorgang;
|
||||
|
||||
// let filename = '';
|
||||
|
||||
// if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
|
||||
// filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
|
||||
// }
|
||||
|
||||
// // delete request
|
||||
|
||||
// // --------------
|
||||
|
||||
// let url = new URL($page.url);
|
||||
|
||||
// url.pathname += `/${filename}`;
|
||||
|
||||
// console.log(`--- ${vorgang} + ${filename} + ${url}`);
|
||||
|
||||
// try {
|
||||
// const response = await fetch(
|
||||
// url,
|
||||
|
||||
// { method: 'DELETE' }
|
||||
// );
|
||||
|
||||
// if (response.status == 204) {
|
||||
// setTimeout(() => {
|
||||
// window.location.reload();
|
||||
// }, 500);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// if (error instanceof Error) {
|
||||
// console.log(error.message);
|
||||
// } else {
|
||||
// console.log(error);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
console.log(`--- ${filename} + ${url}`);
|
||||
try {
|
||||
const response = await fetch(url, { method: 'DELETE' });
|
||||
if (response.status == 204) {
|
||||
// setTimeout(() => {
|
||||
// window.location.reload();
|
||||
// }, 500);
|
||||
console.log('Debug Delete erfolgreich', response.status);
|
||||
//Weiterleitung fehlerhaft
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.log(error.message);
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<a href="/view/{$page.params.vorgang}/{item.name}" class=" flex justify-between gap-x-6 py-5">
|
||||
<div class=" flex gap-x-4">
|
||||
<div class=" flex gap-x-4 items-start">
|
||||
<Cube class="h-auto " />
|
||||
<div class="flex flex-col">
|
||||
<div class="min-w-0 flex flex-auto">
|
||||
<div class=" min-w-0 flex items-start">
|
||||
{#if data.user.admin}
|
||||
<input
|
||||
type="text"
|
||||
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||
class:bg-red-500={!item.show_button}
|
||||
bind:value={item.name}
|
||||
on:focusout={() => (item.show_button = true)}
|
||||
on:focusin={() => (item.show_button = false)}
|
||||
on:keydown|stopPropagation={(ev) => {
|
||||
handle_input(ev);
|
||||
}}
|
||||
on:click={(ev) => {
|
||||
handleClick(ev);
|
||||
}}
|
||||
/>
|
||||
<div class=" flex flex-col items-start">
|
||||
<input
|
||||
type="text"
|
||||
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||
class:bg-red-500={!item.show_button}
|
||||
bind:value={item.name}
|
||||
onfocusout={() => (item.show_button = true)}
|
||||
onfocusin={() => (item.show_button = false)}
|
||||
onkeydown={(ev) => {
|
||||
ev.stopPropagation();
|
||||
handle_input(ev);
|
||||
}}
|
||||
onclick={(ev) => {
|
||||
handleClick(ev);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{#if item.show_button}
|
||||
<button>
|
||||
<Edit />
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
style="padding: 2px"
|
||||
style="padding: 2px "
|
||||
id="del__{item.name}"
|
||||
on:click|preventDefault={deleteItem}
|
||||
onclick={async (ev) => {
|
||||
ev.preventDefault();
|
||||
await deleteItem(ev);
|
||||
}}
|
||||
aria-label="Datei löschen"
|
||||
>
|
||||
<Trash />
|
||||
@@ -236,6 +209,9 @@
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||
{shortenFileSize(item.size)}
|
||||
</p>
|
||||
{#if !item.name && data.user.admin}
|
||||
<p class="block text-sm leading-6 text-red-900 mt-1">{error}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -249,148 +225,16 @@
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<Modal {open}
|
||||
><ModalTitle>Umbenennen</ModalTitle><ModalContent>
|
||||
{#if inProgress}
|
||||
<p class="py-2 mb-1">Vorgang läuft...</p>
|
||||
{/if}
|
||||
|
||||
<!-- <a
|
||||
href="/view/{$page.params.vorgang}/{item.name}"
|
||||
class=" flex justify-between gap-x-6 py-5"
|
||||
>
|
||||
<div class=" flex gap-x-4">
|
||||
<Cube class="h-auto " />
|
||||
<div class="flex flex-col">
|
||||
<div class="min-w-0 flex-auto">
|
||||
{#if admin}
|
||||
{#if err}
|
||||
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<span
|
||||
id="label__{item.name}"
|
||||
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||
contenteditable={!item.show_button}
|
||||
role="textbox"
|
||||
tabindex="0"
|
||||
aria-label="Dateiname bearbeiten"
|
||||
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
|
||||
|
||||
{#if item.show_button}
|
||||
<button
|
||||
class="p-1"
|
||||
id="edit__{item.name}"
|
||||
aria-label="Datei umbenennen"
|
||||
on:click|preventDefault={(ev) => {
|
||||
let text_field_id = `label__${item.name}`;
|
||||
|
||||
let text_field = document.getElementById(text_field_id);
|
||||
|
||||
if (text_field) {
|
||||
text_field.setAttribute('contenteditable', 'true');
|
||||
|
||||
text_field.focus();
|
||||
|
||||
text_field.textContent = '';
|
||||
}
|
||||
|
||||
// hide button
|
||||
|
||||
item.show_button = false;
|
||||
}}
|
||||
>
|
||||
<Edit />
|
||||
</button>
|
||||
{/if}
|
||||
<input
|
||||
type="text"
|
||||
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||
class:bg-red-500={!item.show_button}
|
||||
bind:value={item.name}
|
||||
on:focusout={() => (item.show_button = true)}
|
||||
on:focusin={() => (item.show_button = false)}
|
||||
on:keydown|stopPropagation={async (event) => handle_input(event, i, item)}
|
||||
on:click={(ev) => {
|
||||
handleClick(ev, item);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
style="padding: 2px"
|
||||
id="del__{item.name}"
|
||||
on:click|preventDefault={async (ev) => {
|
||||
let delete_item = window.confirm('Bist du sicher?');
|
||||
|
||||
if (delete_item) {
|
||||
// bucket: tatort, name: <vorgang>/item-name
|
||||
|
||||
let vorgang = $page.params.vorgang;
|
||||
|
||||
let filename = '';
|
||||
|
||||
if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
|
||||
filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
|
||||
}
|
||||
|
||||
// delete request
|
||||
|
||||
// --------------
|
||||
|
||||
let url = new URL($page.url);
|
||||
|
||||
url.pathname += `/${filename}`;
|
||||
|
||||
console.log(`--- ${vorgang} + ${filename} + ${url}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
url,
|
||||
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
|
||||
if (response.status == 204) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.log(error.message);
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
aria-label="Datei löschen"
|
||||
>
|
||||
<Trash />
|
||||
</button>
|
||||
{:else}
|
||||
<span
|
||||
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||
>{item.name}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||
{shortenFileSize(item.size)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex sm:flex-col sm:items-end">
|
||||
<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
|
||||
|
||||
<p class="mt-1 text-xs leading-5 text-gray-500">
|
||||
Zuletzt geändert <time datetime="2023-01-23T13:23Z"
|
||||
>{timeElapsed(new Date(item.lastModified))}</time
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</a> -->
|
||||
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
|
||||
</Modal>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
/** @type {import('./$types').PageServerLoad} */
|
||||
export function load(event) {
|
||||
if (!event.locals.user && event.url.pathname !== '/anmeldung') throw redirect(303, '/anmeldung');
|
||||
return {
|
||||
|
||||
@@ -39,7 +39,9 @@
|
||||
const target = ev.currentTarget as HTMLElement | null;
|
||||
if (!target) return;
|
||||
let filename = target.id.split('del__')[1];
|
||||
|
||||
console.log('Debug Mina', filename);
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation;
|
||||
// delete request
|
||||
// --------------
|
||||
|
||||
@@ -51,7 +53,7 @@
|
||||
if (response.status == 204) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
}, 5000);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
|
||||
@@ -3,18 +3,6 @@
|
||||
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import Alert from '$lib/components/ui/Alert.svelte';
|
||||
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
|
||||
import Modal from '$lib/components/ui/Modal/Modal.svelte';
|
||||
|
||||
import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
|
||||
|
||||
import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
|
||||
|
||||
import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
|
||||
|
||||
import ListItem from '$lib/components/ListItem.svelte';
|
||||
|
||||
let { data } = $props();
|
||||
@@ -30,11 +18,10 @@
|
||||
|
||||
let list: ListItem[] = $state([]);
|
||||
let admin = data.user.admin;
|
||||
let wert = $state('Hallo');
|
||||
$effect: console.log('TEst', wert);
|
||||
let wert = $state('');
|
||||
|
||||
$effect: {
|
||||
console.log('Liste aktualisiert:', $inspect(list), $inspect(admin), $inspect(wert));
|
||||
$inspect(list), $inspect(admin), $inspect(wert);
|
||||
}
|
||||
|
||||
let open = $state(false);
|
||||
@@ -49,18 +36,10 @@
|
||||
|
||||
$inspect(err);
|
||||
|
||||
// let rename_input;
|
||||
|
||||
// $effect: rename_input;
|
||||
|
||||
$effect(() => {
|
||||
console.log('Update-Ereignis erkannt:', wert);
|
||||
});
|
||||
|
||||
let oldName = $state('');
|
||||
let nameArray = list.map((obj) => obj.name);
|
||||
|
||||
$effect: console.log('Mina Testing oben:', $inspect(nameArray), $inspect(oldName));
|
||||
$effect: $inspect(oldName);
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/api/list/' + vorgang);
|
||||
@@ -87,7 +66,7 @@
|
||||
.map((i) => JSON.parse(i));
|
||||
|
||||
console.log(objs);
|
||||
wert = 'Ich kann nicht mehr!';
|
||||
wert = 'wert';
|
||||
|
||||
list = list.concat(objs);
|
||||
|
||||
@@ -98,154 +77,10 @@
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Mina List', list);
|
||||
|
||||
function uploadSuccessful() {
|
||||
console.log('reset');
|
||||
|
||||
open = false;
|
||||
}
|
||||
|
||||
function defocus_element(i: number) {
|
||||
let item = list[i];
|
||||
|
||||
let text_field_id = `label__${item.name}`;
|
||||
|
||||
let text_field = document.getElementById(text_field_id);
|
||||
|
||||
if (text_field) {
|
||||
text_field.setAttribute('contenteditable', 'false');
|
||||
|
||||
text_field.textContent = item.name;
|
||||
}
|
||||
|
||||
// reshow button
|
||||
|
||||
list[i].show_button = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
async function handle_input(ev: KeyboardEvent, i: number, itemObj: any) {
|
||||
let item = list[i];
|
||||
console.log('Mina item', item, itemObj, oldName);
|
||||
console.log('input', ev.key);
|
||||
if (ev.key == 'Escape') {
|
||||
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
// ev.preventDefault(); // Stoppt die Standardaktion
|
||||
console.log('Escape', ev.key);
|
||||
itemObj.name = oldName;
|
||||
itemObj.show_button = true;
|
||||
}
|
||||
// if (ev.key == 'Escape') {
|
||||
// item.name = oldName;
|
||||
// // reshow button
|
||||
|
||||
// item.show_button = true;
|
||||
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (ev.key == 'Enter') {
|
||||
console.log('Enter', ev.key);
|
||||
ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
ev.preventDefault(); // Stoppt die Standardaktion
|
||||
}
|
||||
// if (ev.key == 'Enter') {
|
||||
// console.log('--- hitted');
|
||||
|
||||
// let name_field = ev.currentTarget as HTMLElement | null;
|
||||
|
||||
// let new_name = name_field
|
||||
// ? name_field.textContent || (name_field as any).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: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
|
||||
|
||||
// data_obj['new_name'] = new_name;
|
||||
|
||||
// data_obj['old_name'] =
|
||||
// ev.currentTarget && (ev.currentTarget as HTMLElement).id
|
||||
// ? (ev.currentTarget as HTMLElement).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;
|
||||
// }
|
||||
}
|
||||
|
||||
function handleClick(event: MouseEvent, obj: ListItem) {
|
||||
event.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
event.preventDefault(); // Stoppt die Standardaktion
|
||||
console.log('show click', obj.show_button);
|
||||
oldName = obj.name;
|
||||
console.log('Button wurde geklickt!', oldName);
|
||||
}
|
||||
|
||||
function toggleButton(item: ListItem, show: boolean) {
|
||||
// item.show_button = !item.show_button;
|
||||
|
||||
item.show_button = show;
|
||||
console.log('show toggle', item, show, item.show_button);
|
||||
}
|
||||
|
||||
function handleUpdate(ev: CustomEvent) {
|
||||
console.log('Update erfolgreich', ev.detail.newName);
|
||||
async function handleUpdate(ev: CustomEvent) {
|
||||
open = ev.detail.open;
|
||||
inProgress = ev.detail.inProgress;
|
||||
err = ev.detail.err;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -258,169 +93,11 @@
|
||||
<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">
|
||||
<Cube class="h-auto " />
|
||||
<div class="flex flex-col">
|
||||
<div class="min-w-0 flex-auto">
|
||||
{#if admin}
|
||||
<span
|
||||
id="label__{item.name}"
|
||||
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||
contenteditable={!item.show_button}
|
||||
role="textbox"
|
||||
tabindex="0"
|
||||
aria-label="Dateiname bearbeiten"
|
||||
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
|
||||
|
||||
{#if item.show_button}
|
||||
<button
|
||||
class="p-1"
|
||||
id="edit__{item.name}"
|
||||
aria-label="Datei umbenennen"
|
||||
on:click|preventDefault={(ev) => {
|
||||
let text_field_id = `label__${item.name}`;
|
||||
|
||||
let text_field = document.getElementById(text_field_id);
|
||||
|
||||
if (text_field) {
|
||||
text_field.setAttribute('contenteditable', 'true');
|
||||
|
||||
text_field.focus();
|
||||
|
||||
text_field.textContent = '';
|
||||
}
|
||||
|
||||
// hide button
|
||||
|
||||
item.show_button = false;
|
||||
}}
|
||||
>
|
||||
<Edit />
|
||||
</button>
|
||||
{/if}
|
||||
<input
|
||||
type="text"
|
||||
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||
class:bg-red-500={!item.show_button}
|
||||
bind:value={item.name}
|
||||
on:focusout={() => (item.show_button = true)}
|
||||
on:focusin={() => (item.show_button = false)}
|
||||
on:keydown|stopPropagation={async (event) => handle_input(event, i, item)}
|
||||
on:click={(ev) => {
|
||||
handleClick(ev, item);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
style="padding: 2px"
|
||||
id="del__{item.name}"
|
||||
on:click|preventDefault={async (ev) => {
|
||||
let delete_item = window.confirm('Bist du sicher?');
|
||||
|
||||
if (delete_item) {
|
||||
// bucket: tatort, name: <vorgang>/item-name
|
||||
|
||||
let vorgang = $page.params.vorgang;
|
||||
|
||||
let filename = '';
|
||||
|
||||
if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
|
||||
filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
|
||||
}
|
||||
|
||||
// delete request
|
||||
|
||||
// --------------
|
||||
|
||||
let url = new URL($page.url);
|
||||
|
||||
url.pathname += `/${filename}`;
|
||||
|
||||
console.log(`--- ${vorgang} + ${filename} + ${url}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
url,
|
||||
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
|
||||
if (response.status == 204) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.log(error.message);
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
aria-label="Datei löschen"
|
||||
>
|
||||
<Trash />
|
||||
</button>
|
||||
{:else}
|
||||
<span
|
||||
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||
>{item.name}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||
{shortenFileSize(item.size)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex sm:flex-col sm:items-end">
|
||||
<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
|
||||
|
||||
<p class="mt-1 text-xs leading-5 text-gray-500">
|
||||
Zuletzt geändert <time datetime="2023-01-23T13:23Z"
|
||||
>{timeElapsed(new Date(item.lastModified))}</time
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</a> -->
|
||||
|
||||
<ListItem {data} {list} {i} on:update={handleUpdate} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Modal {open}
|
||||
><ModalTitle>Umbenennen</ModalTitle><ModalContent>
|
||||
{#if inProgress}
|
||||
<p class="py-2 mb-1">Vorgang läuft...</p>
|
||||
{/if}
|
||||
|
||||
{#if err}
|
||||
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { client } from '$lib/minio';
|
||||
import { json } from '@sveltejs/kit';
|
||||
|
||||
export async function DELETE({ request }) {
|
||||
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script>
|
||||
// @ts-nocheck
|
||||
|
||||
import { deserialize, enhance } from '$app/forms';
|
||||
import Alert from '$lib/components/ui/Alert.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
@@ -304,7 +306,10 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center justify-end gap-x-6">
|
||||
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
|
||||
<!-- <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button> -->
|
||||
<Button variant="second" href="/" class="text-sm font-semibold leading-6 text-gray-900"
|
||||
>Cancel</Button
|
||||
>
|
||||
<Button
|
||||
on:click={buttonClick}
|
||||
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
|
||||
@@ -6,7 +6,7 @@ export const actions = {
|
||||
default: async ({ request }) => {
|
||||
const data = await request.formData();
|
||||
console.log(`--- ${Object.keys(data)}`)
|
||||
const caseNumber = data.get('caseNumber');
|
||||
const caseNumber = data.get('caseNumber')?.toString();
|
||||
|
||||
if (!caseNumber) {
|
||||
console.log('^^^ here')
|
||||
@@ -29,7 +29,6 @@ export const actions = {
|
||||
}
|
||||
else {
|
||||
throw redirect(303, `/list/${caseNumber}`);
|
||||
console.log(`---blabla ${caseNumber}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user