87 lines
2.1 KiB
Svelte
87 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import Trash from '$lib/icons/Trash.svelte';
|
|
import Folder from '$lib/icons/Folder.svelte';
|
|
import EmptyList from '$lib/components/EmptyList.svelte';
|
|
|
|
let { data } = $props();
|
|
|
|
let vorgangList = data.vorgangList;
|
|
|
|
let isEmptyList = vorgangList.length === 0;
|
|
|
|
async function delete_item(ev: Event) {
|
|
let delete_item = window.confirm('Bist du sicher?');
|
|
|
|
if (delete_item) {
|
|
const target = ev.currentTarget as HTMLElement | null;
|
|
if (!target) return;
|
|
let filename = target.id.split('del__')[1];
|
|
|
|
let url = `/api/list/${filename}`;
|
|
|
|
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>
|
|
|
|
<div class="-z-10 bg-white">
|
|
<div class="flex flex-col items-center justify-center w-full">
|
|
<h1 class="text-xl">Liste der Vorgänge</h1>
|
|
</div>
|
|
<div class="mx-auto flex justify-center max-w-7xl h-full">
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
{#if isEmptyList}
|
|
<EmptyList></EmptyList>
|
|
{:else}
|
|
{#each vorgangList as vorgangItem}
|
|
<li data-testid="test-list-item">
|
|
<a
|
|
href="/list/{vorgangItem.vorgangToken}?pin={vorgangItem.vorgangPIN}"
|
|
class="flex justify-between gap-x-6 py-5"
|
|
>
|
|
<div class="flex gap-x-4">
|
|
<Folder />
|
|
<div class="min-w-0 flex-auto">
|
|
<span class="text-sm font-semibold leading-6 text-gray-900"
|
|
>{vorgangItem.vorgangName}</span
|
|
>
|
|
<button
|
|
style="padding: 2px"
|
|
id="del__{vorgangItem.vorgangToken}"
|
|
on:click|preventDefault={delete_item}
|
|
aria-label="Vorgang {vorgangItem.name} löschen"
|
|
>
|
|
<Trash />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden sm:flex sm:flex-col sm:items-end">
|
|
<p class="text-sm leading-6 text-gray-900">Vorgang</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
{/if}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
ul {
|
|
min-width: 24rem;
|
|
}
|
|
</style>
|