diff --git a/frontend/e2e/persons.spec.ts b/frontend/e2e/persons.spec.ts index 3aca3b51..3d3312f6 100644 --- a/frontend/e2e/persons.spec.ts +++ b/frontend/e2e/persons.spec.ts @@ -96,21 +96,36 @@ test.describe('New person', () => { }); test.describe('Person detail — sort toggle', () => { - test('sort toggle changes the button label when person has documents', async ({ page }) => { + test('each section has its own sort toggle that works independently', async ({ page }) => { await page.goto('/persons'); const firstPerson = page.locator('a[href^="/persons/"]').first(); await firstPerson.click(); await page.waitForSelector('[data-hydrated]'); - const sortBtn = page.getByRole('button', { name: /Neueste zuerst|Älteste zuerst/i }); - if (await sortBtn.isVisible()) { - await expect(sortBtn).toContainText('Neueste zuerst'); - await sortBtn.click(); - await expect(sortBtn).toContainText('Älteste zuerst'); - await sortBtn.click(); - await expect(sortBtn).toContainText('Neueste zuerst'); - await page.screenshot({ path: 'test-results/e2e/person-sort-toggle.png' }); + // Find sort buttons — there may be 0, 1 or 2 depending on whether sections have >1 doc + const sortBtns = page.getByRole('button', { name: /Neueste zuerst|Älteste zuerst/i }); + const btnCount = await sortBtns.count(); + + if (btnCount >= 1) { + const firstBtn = sortBtns.first(); + await expect(firstBtn).toContainText('Neueste zuerst'); + await firstBtn.click(); + await expect(firstBtn).toContainText('Älteste zuerst'); + await firstBtn.click(); + await expect(firstBtn).toContainText('Neueste zuerst'); } + + if (btnCount >= 2) { + // Second sort button toggles independently + const secondBtn = sortBtns.nth(1); + await expect(secondBtn).toContainText('Neueste zuerst'); + await secondBtn.click(); + await expect(secondBtn).toContainText('Älteste zuerst'); + // First button should be unaffected + await expect(sortBtns.first()).toContainText('Neueste zuerst'); + } + + await page.screenshot({ path: 'test-results/e2e/person-sort-toggle.png' }); }); }); diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte index 01b2dfff..b44cdd79 100644 --- a/frontend/src/routes/persons/[id]/+page.svelte +++ b/frontend/src/routes/persons/[id]/+page.svelte @@ -12,12 +12,13 @@ const DOCS_PREVIEW_LIMIT = 5; - let sortDir = $state('DESC'); + let sortDirSent = $state('DESC'); + let sortDirReceived = $state('DESC'); let showAllSent = $state(false); let showAllReceived = $state(false); - const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDir)); - const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDir)); + const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDirSent)); + const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDirReceived)); const visibleSentDocuments = $derived(showAllSent ? sortedSentDocuments : sortedSentDocuments.slice(0, DOCS_PREVIEW_LIMIT)); const visibleReceivedDocuments = $derived(showAllReceived ? sortedReceivedDocuments : sortedReceivedDocuments.slice(0, DOCS_PREVIEW_LIMIT)); @@ -330,19 +331,6 @@ {/if} - - {#if allDocuments.length > 0} -
- -
- {/if} -
@@ -353,6 +341,14 @@ {#if sentYearRange} {sentYearRange} {/if} + {#if sentDocuments.length > 1} + + {/if}
{#if sentDocuments.length === 0} @@ -417,6 +413,14 @@ {#if receivedYearRange} {receivedYearRange} {/if} + {#if receivedDocuments.length > 1} + + {/if}
{#if receivedDocuments.length === 0}