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

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

@@ -58,26 +58,53 @@
} }
</script> </script>
<div data-testid="test-nameItemEditor"> <div data-testid="test-nameItemEditor" class="flex flex-col gap-1">
{#if isEditing} {#if isEditing}
<input <div class="flex items-center gap-1">
data-testid="test-input" <input
bind:this={inputRef} data-testid="test-input"
bind:value={localName} bind:this={inputRef}
onkeydown={handleKeydown} bind:value={localName}
/> onkeydown={handleKeydown}
<button 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"
data-testid="commit-button" />
disabled={!!error || localName === currentName} <button
onclick={commitEdit}><Check /></button data-testid="commit-button"
> disabled={!!error || localName === currentName}
<button data-testid="cancel-button" onclick={cancelEdit}><X /></button> onclick={commitEdit}
{:else} class="text-gray-500 hover:text-green-600 transition disabled:opacity-40"
<span>{localName}</span> >
<button data-testid="edit-button" onclick={startEdit}><Edit /></button> <Check class="w-4 h-4" />
<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button> </button>
{/if} <button
{#if error} data-testid="cancel-button"
<p class="text-red-500">{error}</p> onclick={cancelEdit}
{/if} class="text-gray-500 hover:text-red-600 transition"
>
<X class="w-4 h-4" />
</button>
</div>
{:else}
<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-xs text-red-500 mt-1">{error}</p>
{/if}
</div> </div>

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

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