Merge branches 'f01_verify_file_upload' and 'f02_rename_file' into dev_merge
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
/**
|
||||
* @type any[]
|
||||
@@ -34,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">
|
||||
@@ -61,7 +89,16 @@
|
||||
/>
|
||||
</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>
|
||||
<!-- Delete button -->
|
||||
<button
|
||||
style="padding: 2px"
|
||||
id="del__{item.name}"
|
||||
on:click|preventDefault={delete_item}
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-col sm:items-end">
|
||||
|
||||
@@ -5,11 +5,19 @@
|
||||
</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';
|
||||
|
||||
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';
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
/** export let data; */
|
||||
|
||||
@@ -19,6 +27,16 @@
|
||||
let list = [];
|
||||
$: list;
|
||||
|
||||
let open = false;
|
||||
$: open;
|
||||
let inProgress = false;
|
||||
$: inProgress;
|
||||
let err = false;
|
||||
$: err;
|
||||
|
||||
let rename_input;
|
||||
$: rename_input;
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/api/list/' + $page.params.vorgang);
|
||||
const stream = response.body;
|
||||
@@ -38,8 +56,100 @@
|
||||
|
||||
console.log(objs);
|
||||
list = list.concat(objs);
|
||||
|
||||
list = list.map((item) => {
|
||||
item.show_button = true;
|
||||
return item;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
function uploadSuccessful() {
|
||||
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">
|
||||
@@ -48,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}"
|
||||
@@ -70,7 +180,81 @@
|
||||
/>
|
||||
</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="label__{item.name}"
|
||||
class="text-sm font-semibold leading-6 text-gray-900"
|
||||
contenteditable={! item.show_button}
|
||||
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
|
||||
style="padding: 2px"
|
||||
id="edit__{item.name}"
|
||||
on:click|preventDefault={(ev) => {
|
||||
let text_field_id = `label__${item.name}`
|
||||
|
||||
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
|
||||
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}
|
||||
<!-- Delete button -->
|
||||
<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 = event.currentTarget.id.split('del__')[1]
|
||||
|
||||
|
||||
|
||||
// delete request
|
||||
// --------------
|
||||
|
||||
let url = $page.url
|
||||
url += `/${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) {
|
||||
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>
|
||||
</button>
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||
{shortenFileSize(item.size)}
|
||||
</p>
|
||||
@@ -89,4 +273,17 @@
|
||||
{/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>
|
||||
|
||||
36
src/routes/(angemeldet)/list/[vorgang]/+server.js
Normal file
36
src/routes/(angemeldet)/list/[vorgang]/+server.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { client } from '$lib/minio';
|
||||
import { json } from '@sveltejs/kit';
|
||||
|
||||
|
||||
// rename operation
|
||||
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)
|
||||
|
||||
// prepare copy, incl. check if new name exists already
|
||||
let old_name = data["old_name"]
|
||||
let src_full_path = `/tatort/${vorgang}/${old_name}`
|
||||
let new_name = `${vorgang}/${data["new_name"]}`
|
||||
|
||||
try {
|
||||
let file_stats = await client.statObject('tatort', new_name)
|
||||
return json({ msg: 'Die Datei existiert bereits.' }, { status: 400 })
|
||||
} catch (error) {
|
||||
// continue operation
|
||||
console.log('continue operation')
|
||||
}
|
||||
|
||||
// actual copy operation
|
||||
await client.copyObject('tatort', new_name, src_full_path)
|
||||
|
||||
// delete
|
||||
await client.removeObject('tatort', `${vorgang}/${old_name}`)
|
||||
|
||||
// return success or failure
|
||||
|
||||
return json({ success: 'success' }, { status: 200 });
|
||||
};
|
||||
13
src/routes/(angemeldet)/list/[vorgang]/[tatort]/+server.js
Normal file
13
src/routes/(angemeldet)/list/[vorgang]/[tatort]/+server.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { client } from '$lib/minio';
|
||||
import { json } from '@sveltejs/kit';
|
||||
|
||||
export async function DELETE({ request }) {
|
||||
|
||||
let url_fragments = request.url.split('/')
|
||||
let item = url_fragments.at(-1);
|
||||
let vorgang = url_fragments.at(-2);
|
||||
|
||||
await client.removeObject('tatort', `${vorgang}/${item}`)
|
||||
|
||||
return new Response(null, { status: 204 });
|
||||
};
|
||||
@@ -33,3 +33,31 @@ export async function GET({ params }) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export async function DELETE({ params }) {
|
||||
const vorgang = params.vorgang
|
||||
|
||||
const object_list = await new Promise((resolve, reject) => {
|
||||
|
||||
const res = []
|
||||
const items_str = client.listObjects('tatort', vorgang, true)
|
||||
|
||||
items_str.on('data', (obj) => {
|
||||
res.push(obj.name)
|
||||
})
|
||||
|
||||
items_str.on('error', reject)
|
||||
|
||||
items_str.on('end', async () => {
|
||||
resolve(res)
|
||||
})
|
||||
|
||||
console.log(`+++ ${vorgang}`)
|
||||
|
||||
})
|
||||
|
||||
await client.removeObjects('tatort', object_list)
|
||||
|
||||
return new Response(null, { status: 204 });
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user