feat(ui): shift-click range selection on list row checkboxes (#2117)
* feat(ui): shift-click range selection on list row checkboxes Click one checkbox, shift-click another, and every row between them takes the clicked row's new state, the way mail clients work. Turns a 20-row bulk selection into two clicks. New useRangeSelect hook (lib/hooks/use-range-select.ts) keeps the anchor and applies the range over the rows as currently rendered, so it follows filtering, sorting and paging rather than the underlying data order. A shift-click with no valid anchor (first click, or the anchor filtered away) degrades to a plain toggle. Select-all and clear reset the anchor. Wired into the 8 selection surfaces: transaction inbox and skattekonto inbox (separate ranges, since the two row types book through different endpoints), journal entry list, invoices, supplier invoices, orders, pending operations, invoice inbox workspace. Radix' onCheckedChange carries no mouse event, so each row records shiftKey from the click that precedes it; the checkbox cells get select-none so shift-clicking does not smear a text selection. The pure range rule is unit tested (10 cases: both directions, range unselect, anchor invalidation, rendered-order independence). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015n8vUx9Nukr8mHC7CVNF7y * fix(ui): void the range anchor on an empty selection, keep placeholders out Review findings from CodeRabbit and the skeptic pass, all in the new range-selection feature: - Clearing a selection left the anchor behind, so the next shift-click extended from a row the user could no longer see selected (click a row, press "Rensa markering", shift-click 30 rows down, get 30 rows). The explicit resetAnchor() calls only covered the clear paths that were wired by hand; several others (period change, filter change, post-bulk success, "Avmarkera") were not. An empty selection now counts as having no anchor, which covers every clear path including ones added later. - The invoice inbox passed optimistic upload placeholders into visibleIds even though they render no checkbox. Safe today only because placeholders are always prepended; filtering them out makes the invariant local instead of depending on insert order elsewhere. - pending: "Godkänn alla" pre-selects a non-empty set, so it resets the anchor explicitly. Two existing tests used a fixture the UI cannot reach (an anchor with an empty selection); they now start from the state a real anchor implies. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015n8vUx9Nukr8mHC7CVNF7y --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Mattsson
co-authored by
Claude Fable 5
Claude Fable 5
parent
237bdd0366
commit
43341aa55c
@@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useRef } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
@@ -42,7 +43,7 @@ export default function SkattekontoInboxCard({
|
||||
processing: boolean
|
||||
selectable?: boolean
|
||||
isSelected?: boolean
|
||||
onToggleSelect?: (id: string) => void
|
||||
onToggleSelect?: (id: string, extend?: boolean) => void
|
||||
onBokfor: (row: StoredSkattekontoTransaction) => void
|
||||
onMatch: (row: StoredSkattekontoTransaction) => void
|
||||
/** Optional "Ignorera" affordance: hides the row from the work list without
|
||||
@@ -51,6 +52,9 @@ export default function SkattekontoInboxCard({
|
||||
onIgnore?: (row: StoredSkattekontoTransaction) => void
|
||||
}) {
|
||||
const t = useTranslations('tx_skattekonto_card')
|
||||
// See TransactionInboxCard: onCheckedChange has no event, so shift is
|
||||
// captured from the preceding click.
|
||||
const shiftHeld = useRef(false)
|
||||
const amount = Number(row.belopp_skatteverket)
|
||||
const isIncome = amount > 0
|
||||
|
||||
@@ -79,11 +83,14 @@ export default function SkattekontoInboxCard({
|
||||
{/* Always-visible selection checkbox (concept .cb) */}
|
||||
{/* Zero-width cell: the checkbox hangs in the left page margin so
|
||||
the date column can sit flush with the page edge. */}
|
||||
<td className={cn(TD_CLASS, 'relative w-0 !p-0')}>
|
||||
<td className={cn(TD_CLASS, 'relative w-0 !p-0 select-none')}>
|
||||
{selectable && (
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => onToggleSelect?.(row.id)}
|
||||
onClick={(e) => {
|
||||
shiftHeld.current = e.shiftKey
|
||||
}}
|
||||
onCheckedChange={() => onToggleSelect?.(row.id, shiftHeld.current)}
|
||||
aria-label={t('select_row')}
|
||||
className={cn(
|
||||
'absolute -left-5 top-1/2 -translate-y-1/2 border-foreground duration-150 md:-left-6',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { useDocumentExtraction } from '@/lib/hooks/use-document-extraction'
|
||||
import ExtractionStatus from '@/components/ui/extraction-status'
|
||||
@@ -85,7 +85,7 @@ interface TransactionInboxCardProps {
|
||||
/** The company's enabled cash accounts (the page's ?enabled_only=true fetch):
|
||||
* gates the move action, which is pointless with a single account. */
|
||||
cashAccounts?: CashAccount[]
|
||||
onToggleSelect: (id: string) => void
|
||||
onToggleSelect: (id: string, extend?: boolean) => void
|
||||
/** End date of the company's completed SIE-import coverage. Rows on or
|
||||
* before it are pre-migration history: they most likely correspond to an
|
||||
* already-imported verifikat, so the row carries a quiet marker steering
|
||||
@@ -123,6 +123,10 @@ export default function TransactionInboxCard({
|
||||
}: TransactionInboxCardProps) {
|
||||
const t = useTranslations('tx_inbox_card')
|
||||
const tMethod = useTranslations('tx_method')
|
||||
// Radix' onCheckedChange carries no mouse event, so the shift state is
|
||||
// captured from the click that precedes it (Radix composes our onClick
|
||||
// before its own handler) and read back when the toggle fires.
|
||||
const shiftHeld = useRef(false)
|
||||
// Attaching underlag is a write: hide the affordance from viewers so they
|
||||
// don't dead-end on a 403 (mirrors the gate in TransactionHistoryList).
|
||||
const { canWrite } = useCanWrite()
|
||||
@@ -288,13 +292,16 @@ export default function TransactionInboxCard({
|
||||
{/* Zero-width cell: the checkbox hangs in the left page margin so
|
||||
the date column can sit flush with the page edge. */}
|
||||
<td
|
||||
className={cn(TD_CLASS, 'relative w-0 !p-0')}
|
||||
className={cn(TD_CLASS, 'relative w-0 !p-0 select-none')}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{selectable && (
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => onToggleSelect(transaction.id)}
|
||||
onClick={(e) => {
|
||||
shiftHeld.current = e.shiftKey
|
||||
}}
|
||||
onCheckedChange={() => onToggleSelect(transaction.id, shiftHeld.current)}
|
||||
aria-label="Välj transaktion"
|
||||
className={cn(
|
||||
'absolute -left-5 top-1/2 -translate-y-1/2 border-foreground duration-150 md:-left-6',
|
||||
|
||||
Reference in New Issue
Block a user