fix(person): remove redundant role badges from document lists
The Gesendet/Empfangen badge is redundant since documents already appear in separate Gesendete/Empfangene sections. Refs #21 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -10,10 +10,18 @@
|
|||||||
const sentDocuments = $derived(data.sentDocuments);
|
const sentDocuments = $derived(data.sentDocuments);
|
||||||
const receivedDocuments = $derived(data.receivedDocuments);
|
const receivedDocuments = $derived(data.receivedDocuments);
|
||||||
|
|
||||||
|
const DOCS_PREVIEW_LIMIT = 5;
|
||||||
|
|
||||||
let sortDir = $state<SortDir>('DESC');
|
let sortDir = $state<SortDir>('DESC');
|
||||||
|
let showAllSent = $state(false);
|
||||||
|
let showAllReceived = $state(false);
|
||||||
|
|
||||||
const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDir));
|
const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDir));
|
||||||
const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDir));
|
const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDir));
|
||||||
|
|
||||||
|
const visibleSentDocuments = $derived(showAllSent ? sortedSentDocuments : sortedSentDocuments.slice(0, DOCS_PREVIEW_LIMIT));
|
||||||
|
const visibleReceivedDocuments = $derived(showAllReceived ? sortedReceivedDocuments : sortedReceivedDocuments.slice(0, DOCS_PREVIEW_LIMIT));
|
||||||
|
|
||||||
const allDocuments = $derived([...sentDocuments, ...receivedDocuments]);
|
const allDocuments = $derived([...sentDocuments, ...receivedDocuments]);
|
||||||
|
|
||||||
const docStats = $derived(() => {
|
const docStats = $derived(() => {
|
||||||
@@ -309,7 +317,7 @@
|
|||||||
<h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
|
<h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
|
||||||
<div class="flex flex-wrap gap-2">
|
<div class="flex flex-wrap gap-2">
|
||||||
{#each coCorrespondents() as c}
|
{#each coCorrespondents() as c}
|
||||||
<a href="/persons/{c.id}"
|
<a href="/conversations?senderId={person.id}&receiverId={c.id}"
|
||||||
class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
|
class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
|
||||||
{c.name}
|
{c.name}
|
||||||
<span class="text-xs text-gray-400 font-sans">({c.count})</span>
|
<span class="text-xs text-gray-400 font-sans">({c.count})</span>
|
||||||
@@ -362,7 +370,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<ul class="space-y-3">
|
<ul class="space-y-3">
|
||||||
{#each sortedSentDocuments as doc}
|
{#each visibleSentDocuments as doc}
|
||||||
<li class="group">
|
<li class="group">
|
||||||
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
|
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
@@ -384,9 +392,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
|
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
|
||||||
<span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-navy text-white">
|
|
||||||
{m.person_role_sender()}
|
|
||||||
</span>
|
|
||||||
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
|
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
|
||||||
{doc.status === 'UPLOADED'
|
{doc.status === 'UPLOADED'
|
||||||
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
|
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
|
||||||
@@ -400,6 +405,14 @@
|
|||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
{#if sentDocuments.length > DOCS_PREVIEW_LIMIT && !showAllSent}
|
||||||
|
<button
|
||||||
|
onclick={() => (showAllSent = true)}
|
||||||
|
class="mt-3 text-xs font-bold uppercase tracking-widest text-brand-navy/50 hover:text-brand-navy transition-colors"
|
||||||
|
>
|
||||||
|
+ {sentDocuments.length - DOCS_PREVIEW_LIMIT} weitere anzeigen
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -418,7 +431,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<ul class="space-y-3">
|
<ul class="space-y-3">
|
||||||
{#each sortedReceivedDocuments as doc}
|
{#each visibleReceivedDocuments as doc}
|
||||||
<li class="group">
|
<li class="group">
|
||||||
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
|
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
@@ -440,9 +453,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
|
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
|
||||||
<span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-mint text-brand-navy">
|
|
||||||
{m.person_role_receiver()}
|
|
||||||
</span>
|
|
||||||
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
|
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
|
||||||
{doc.status === 'UPLOADED'
|
{doc.status === 'UPLOADED'
|
||||||
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
|
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
|
||||||
@@ -456,6 +466,14 @@
|
|||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
{#if receivedDocuments.length > DOCS_PREVIEW_LIMIT && !showAllReceived}
|
||||||
|
<button
|
||||||
|
onclick={() => (showAllReceived = true)}
|
||||||
|
class="mt-3 text-xs font-bold uppercase tracking-widest text-brand-navy/50 hover:text-brand-navy transition-colors"
|
||||||
|
>
|
||||||
|
+ {receivedDocuments.length - DOCS_PREVIEW_LIMIT} weitere anzeigen
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user