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

f113_UI_fixes #40

Merged
trachi93 merged 3 commits from f113_UI_fixes into development 2025-11-13 12:51:30 +01:00
Conversation 0 Commits 3 Files Changed 3 +100 -67
2 changed files with 100 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ac79f10153 - Show all commits

41
src/lib/components/NameItemEditor.svelte
View File

@@ -58,26 +58,53 @@
}
</script>
<div data-testid="test-nameItemEditor">
<div data-testid="test-nameItemEditor" class="flex flex-col gap-1">
{#if isEditing}
<div class="flex items-center gap-1">
<input
data-testid="test-input"
bind:this={inputRef}
bind:value={localName}
onkeydown={handleKeydown}
class="flex-1 border border-gray-300 rounded px-1.5 py-0.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
<button
data-testid="commit-button"
disabled={!!error || localName === currentName}
onclick={commitEdit}><Check /></button
onclick={commitEdit}
class="text-gray-500 hover:text-green-600 transition disabled:opacity-40"
>
<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
<Check class="w-4 h-4" />
</button>
<button
data-testid="cancel-button"
onclick={cancelEdit}
class="text-gray-500 hover:text-red-600 transition"
>
<X class="w-4 h-4" />
</button>
</div>
{:else}
<span>{localName}</span>
<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-gray-900 truncate">{localName}</span>
<button
data-testid="edit-button"
onclick={startEdit}
class="text-gray-500 hover:text-blue-600 transition"
>
<Edit class="w-4 h-4" />
</button>
<button
data-testid="delete-button"
onclick={handleDeleteClick}
class="text-gray-500 hover:text-red-600 transition"
>
<Trash class="w-4 h-4" />
</button>
</div>
{/if}
{#if error}
<p class="text-red-500">{error}</p>
<p class="text-xs text-red-500 mt-1">{error}</p>
{/if}
</div>

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

@@ -263,50 +263,56 @@ 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">
<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 justify-between gap-x-6 py-5"
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 />
<Cube class="w-5 h-5" />
</a>
<div class="min-w-0 flex-auto">
<div class="flex flex-col flex-1 min-w-0">
{#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"
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}
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
{shortenFileSize(item.size)}
</p>
<span>{shortenFileSize(item.size)}</span>
{:else}
<span></span>
{/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>
<span>
Zuletzt geändert
<time datetime={item.lastModified}>
{timeElapsed(new Date(item.lastModified))}
</time>
</span>
{/if}
</div>
</div>
</div>
</li>
{/each}
{/if}