innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust ´edit´ and ´delete´ button on Vorgang page with crimesList

Browse Source
This commit is contained in:
Chi Cong Tran
2025-11-13 12:45:07 +01:00
parent dac1c57c98
commit ac79f10153
2 changed files with 100 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/routes/(token-based)/list/[vorgang]/+page.svelte
View File

@@ -263,51 +263,57 @@ Mit freundlichen Grüßen,
<EmptyList></EmptyList>
{:else}
{#each crimesList as item (item.name)}
<li data-testid="test-list-item">
<div class=" flex gap-x-4">
<a
data-testid="crime-link"
href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
class=" flex justify-between gap-x-6 py-5"
aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
title={item.name}
>
<Cube />
</a>
<div class="min-w-0 flex-auto">
{#if admin}
<NameItemEditor
list={crimesList}
currentName={item.name}
onSave={handleSave}
onDelete={handleDelete}
></NameItemEditor>
{:else}
<p
data-testid="test-nameItem-p"
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
>
{item.name}
</p>
{/if}
{#if item.size}
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
{shortenFileSize(item.size)}
</p>
{/if}
</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>
{#if item.lastModified}
<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>
{/if}
</div>
</li>
<li
data-testid="test-list-item"
class="flex items-center justify-between gap-6 py-4 px-2 hover:bg-gray-50 rounded-lg transition"
>
<div class="flex items-center gap-4 flex-1">
<a
data-testid="crime-link"
href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
class="flex items-center justify-center w-8 h-8 text-gray-600 hover:text-blue-600 transition"
aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
title={item.name}
>
<Cube class="w-5 h-5" />
</a>
<div class="flex flex-col flex-1 min-w-0">
{#if admin}
<NameItemEditor
list={crimesList}
currentName={item.name}
onSave={handleSave}
onDelete={handleDelete}
/>
{:else}
<p
data-testid="test-nameItem-p"
class="text-sm font-semibold leading-6 text-gray-900 truncate"
>
{item.name}
</p>
{/if}
<!-- size left, last modified right -->
<div class="flex items-center justify-between mt-1 text-xs leading-5 text-gray-500">
{#if item.size}
<span>{shortenFileSize(item.size)}</span>
{:else}
<span></span>
{/if}
{#if item.lastModified}
<span>
Zuletzt geändert
<time datetime={item.lastModified}>
{timeElapsed(new Date(item.lastModified))}
</time>
</span>
{/if}
</div>
</div>
</div>
</li>
{/each}
{/if}
</ul>