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