* feat(ui): prev/next record navigation on detail pages Customer feedback: stepping between invoices in a reskontra (56 -> 57 -> 58) required going back to the list for every record. List pages now write their full ordered id array to sessionStorage when a row is opened (Accounted:list-context:<scope>:<companyId>), and the detail pages for kundfakturor, leverantorsfakturor, and verifikat show a compact prev/next pager (chevrons + 'n av m') next to the back control. ArrowLeft/ArrowRight step too, except while typing in a text field or while a dialog is open. Navigation uses router.replace so 'tillbaka' returns to the list in one step. Deep links and new tabs have no context: the pager hides and pages behave as before. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(pager): overlay-aware arrow guard, notes-draft safety, context on Visa detaljer Review fixes on the detail-record pager: - The keyboard guard matched any mounted [role=dialog], so the agent sheet (which stays mounted display:none once opened) killed arrow paging for the rest of the tab session, while open dropdown menus did not block at all. The guard now mirrors the AgentSheet Esc selector (data-state="open" variants incl. alertdialog and radix menu/select/listbox content) and also yields while focus sits inside a dialog/menu/listbox container. Extracted as pure functions in lib/hooks/detail-pager-guards.ts so the rules are testable in the node test environment. - Arrow keys could unmount the verifikat page and destroy an unsaved notes draft once the textarea lost focus. useDetailPager and DetailPager now take a keyboard flag, and the verifikat page disables keyboard paging while editingNotes is active; the chevron buttons stay live. - The expanded-row Visa detaljer link in JournalEntryList navigated without writing the list context, producing stale pager snapshots; it now calls rememberListContext like the voucher link. - ListContext.listPath was written and strictly validated but never consumed: removed from the interface, all writers, and the read validation. Reads stay tolerant of extra properties so contexts stored by older builds still parse. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(pager): quiet wayfinding strip instead of buttons in the title cluster The pager sat between the back arrow and the H1, which read as a toolbar of three boxed buttons and made the title jump horizontally per record. All three detail pages now share the verifikat page's pattern: a muted back text-link on the left and the pager right-aligned on the same quiet row. The pager itself drops to 16px glyphs, muted ink, and hides when the list context holds a single record. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
134 lines
4.3 KiB
TypeScript
134 lines
4.3 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import {
|
|
computeNeighbors,
|
|
listContextKey,
|
|
readListContext,
|
|
writeListContext,
|
|
type ListContext,
|
|
} from '@/lib/navigation/list-context'
|
|
|
|
function makeStorage(initial: Record<string, string> = {}) {
|
|
const map = new Map<string, string>(Object.entries(initial))
|
|
return {
|
|
getItem: (key: string) => map.get(key) ?? null,
|
|
setItem: (key: string, value: string) => {
|
|
map.set(key, value)
|
|
},
|
|
}
|
|
}
|
|
|
|
describe('listContextKey', () => {
|
|
it('builds a company-scoped key', () => {
|
|
expect(listContextKey('invoices', 'c-1')).toBe('Accounted:list-context:invoices:c-1')
|
|
})
|
|
|
|
it('falls back to default when no company id exists', () => {
|
|
expect(listContextKey('invoices', null)).toBe('Accounted:list-context:invoices:default')
|
|
expect(listContextKey('invoices', undefined)).toBe('Accounted:list-context:invoices:default')
|
|
})
|
|
})
|
|
|
|
describe('writeListContext / readListContext', () => {
|
|
it('round-trips a context', () => {
|
|
const storage = makeStorage()
|
|
const context: ListContext = { ids: ['a', 'b', 'c'] }
|
|
writeListContext('key', context, storage)
|
|
expect(readListContext('key', storage)).toEqual(context)
|
|
})
|
|
|
|
it('returns null when nothing was written', () => {
|
|
expect(readListContext('missing', makeStorage())).toBeNull()
|
|
})
|
|
|
|
it('returns null on garbage JSON', () => {
|
|
const storage = makeStorage({ key: '{not json' })
|
|
expect(readListContext('key', storage)).toBeNull()
|
|
})
|
|
|
|
it('returns null on valid JSON with the wrong shape', () => {
|
|
expect(readListContext('key', makeStorage({ key: '"a string"' }))).toBeNull()
|
|
expect(readListContext('key', makeStorage({ key: 'null' }))).toBeNull()
|
|
expect(readListContext('key', makeStorage({ key: '{"ids":"nope"}' }))).toBeNull()
|
|
expect(readListContext('key', makeStorage({ key: '{"ids":["a",1]}' }))).toBeNull()
|
|
expect(readListContext('key', makeStorage({ key: '{"other":["a"]}' }))).toBeNull()
|
|
})
|
|
|
|
it('tolerates extra properties, so contexts stored by older builds still parse', () => {
|
|
// Older builds wrote a listPath field alongside ids.
|
|
const stored = makeStorage({ key: '{"ids":["a","b"],"listPath":"/invoices"}' })
|
|
expect(readListContext('key', stored)).toEqual({ ids: ['a', 'b'] })
|
|
})
|
|
|
|
it('keeps keys isolated from each other', () => {
|
|
const storage = makeStorage()
|
|
writeListContext(listContextKey('invoices', 'c-1'), { ids: ['inv-1'] }, storage)
|
|
writeListContext(listContextKey('supplier-invoices', 'c-1'), { ids: ['sup-1'] }, storage)
|
|
writeListContext(listContextKey('invoices', 'c-2'), { ids: ['inv-9'] }, storage)
|
|
expect(readListContext(listContextKey('invoices', 'c-1'), storage)?.ids).toEqual(['inv-1'])
|
|
expect(readListContext(listContextKey('supplier-invoices', 'c-1'), storage)?.ids).toEqual([
|
|
'sup-1',
|
|
])
|
|
expect(readListContext(listContextKey('invoices', 'c-2'), storage)?.ids).toEqual(['inv-9'])
|
|
})
|
|
|
|
it('does not throw when storage is unavailable', () => {
|
|
expect(() => writeListContext('key', { ids: [] }, null)).not.toThrow()
|
|
expect(readListContext('key', null)).toBeNull()
|
|
})
|
|
|
|
it('swallows setItem failures (quota exceeded)', () => {
|
|
const storage = {
|
|
getItem: () => null,
|
|
setItem: () => {
|
|
throw new Error('QuotaExceededError')
|
|
},
|
|
}
|
|
expect(() => writeListContext('key', { ids: ['a'] }, storage)).not.toThrow()
|
|
})
|
|
})
|
|
|
|
describe('computeNeighbors', () => {
|
|
const ids = ['a', 'b', 'c', 'd']
|
|
|
|
it('finds both neighbors in the middle of the list', () => {
|
|
expect(computeNeighbors(ids, 'b')).toEqual({
|
|
prevId: 'a',
|
|
nextId: 'c',
|
|
index: 2,
|
|
total: 4,
|
|
})
|
|
})
|
|
|
|
it('has no prev at the start', () => {
|
|
expect(computeNeighbors(ids, 'a')).toEqual({
|
|
prevId: null,
|
|
nextId: 'b',
|
|
index: 1,
|
|
total: 4,
|
|
})
|
|
})
|
|
|
|
it('has no next at the end', () => {
|
|
expect(computeNeighbors(ids, 'd')).toEqual({
|
|
prevId: 'c',
|
|
nextId: null,
|
|
index: 4,
|
|
total: 4,
|
|
})
|
|
})
|
|
|
|
it('handles a single-record list', () => {
|
|
expect(computeNeighbors(['only'], 'only')).toEqual({
|
|
prevId: null,
|
|
nextId: null,
|
|
index: 1,
|
|
total: 1,
|
|
})
|
|
})
|
|
|
|
it('returns null when the record is not in the context (stale/foreign context)', () => {
|
|
expect(computeNeighbors(ids, 'zzz')).toBeNull()
|
|
expect(computeNeighbors([], 'a')).toBeNull()
|
|
})
|
|
})
|