edit Leere Liste in Vorgang und Crime

This commit is contained in:
2025-09-03 12:27:13 +02:00
parent 37e103a494
commit 283755c7db
10 changed files with 134 additions and 98 deletions

View File

@@ -1,11 +1,12 @@
<script lang="ts">
import Trash from '$lib/icons/Trash.svelte';
import Folder from '$lib/icons/Folder.svelte';
import type { PageData } from '../$types';
import EmptyList from '$lib/components/EmptyList.svelte';
export let data: PageData;
let { data } = $props();
let vorgangList = data.vorgangList;
const vorgangList = data.vorgangList;
let isEmptyList = vorgangList.length === 0;
async function delete_item(ev: Event) {
let delete_item = window.confirm('Bist du sicher?');
@@ -41,34 +42,38 @@
</div>
<div class="mx-auto flex justify-center max-w-7xl h-full">
<ul role="list" class="divide-y divide-gray-100">
{#each vorgangList as vorgangItem}
<li>
<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>
{#if isEmptyList}
<EmptyList></EmptyList>
{:else}
{#each vorgangList as vorgangItem}
<li>
<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>
<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}
<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>