Merge pull request 'f113_UI_fixes' (#40) from f113_UI_fixes into development
All checks were successful
InnoHub Processor/tatort/pipeline/head This commit looks good
All checks were successful
InnoHub Processor/tatort/pipeline/head This commit looks good
Reviewed-on: #40
This commit was merged in pull request #40.
This commit is contained in:
@@ -58,26 +58,53 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div data-testid="test-nameItemEditor">
|
||||
{#if isEditing}
|
||||
<input
|
||||
data-testid="test-input"
|
||||
bind:this={inputRef}
|
||||
bind:value={localName}
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<button
|
||||
data-testid="commit-button"
|
||||
disabled={!!error || localName === currentName}
|
||||
onclick={commitEdit}><Check /></button
|
||||
>
|
||||
<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
|
||||
{:else}
|
||||
<span>{localName}</span>
|
||||
<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
|
||||
<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
|
||||
{/if}
|
||||
{#if error}
|
||||
<p class="text-red-500">{error}</p>
|
||||
{/if}
|
||||
<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}
|
||||
class="text-gray-500 hover:text-green-600 transition disabled:opacity-40"
|
||||
>
|
||||
<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}
|
||||
<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>
|
||||
|
||||
@@ -101,28 +101,25 @@
|
||||
{#each vorgangList as vorgangItem}
|
||||
<li data-testid="test-list-item">
|
||||
<a
|
||||
href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
|
||||
class="flex justify-between gap-x-6 py-5"
|
||||
href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 px-4 rounded-lg hover:bg-gray-50 transition text-center"
|
||||
>
|
||||
<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>
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<Folder class="w-6 h-6 text-gray-600" />
|
||||
|
||||
<span class="text-sm font-semibold leading-6 text-gray-900">
|
||||
{vorgangItem.vorgangName}
|
||||
</span>
|
||||
|
||||
<button
|
||||
id="del__{vorgangItem.vorgangToken}"
|
||||
on:click|preventDefault={delete_item}
|
||||
aria-label="Vorgang {vorgangItem.name} löschen"
|
||||
class="p-1.5 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-50 transition"
|
||||
>
|
||||
<Trash class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -198,3 +195,4 @@
|
||||
min-width: 24rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -248,7 +248,7 @@ Mit freundlichen Grüßen,
|
||||
{#if data.vorgang && crimesList}
|
||||
<div class="-z-10 bg-white">
|
||||
<div class="flex flex-col items-center justify-center w-full">
|
||||
<h1 class="text-xl">Vorgang {vorgangName}</h1>
|
||||
<h1 class="text-xl">{vorgangName}</h1>
|
||||
|
||||
{#if admin}
|
||||
Zugangs-PIN: {vorgangPIN}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user