diff --git a/src/lib/components/wizard/StepRowFilter.svelte b/src/lib/components/wizard/StepRowFilter.svelte index 163c5f7..8a6d9ce 100644 --- a/src/lib/components/wizard/StepRowFilter.svelte +++ b/src/lib/components/wizard/StepRowFilter.svelte @@ -17,6 +17,7 @@ let sortColumn = $state(null); let sortDirection = $state<'asc' | 'desc'>('asc'); + let lastCheckedId: string | null = $state(null); const ROW_LIMIT = 200; @@ -85,20 +86,52 @@ } finally { isLoading = false; } - } // Run on component mount + } + + function handleRowClick(event: MouseEvent, clickedId: string) { + const clickedRow = rows.find((r) => r.id === clickedId); + if (!clickedRow || !clickedRow._valid) return; + + // Handle shift-clicking for range selection + if (event.shiftKey && lastCheckedId) { + const lastIndex = displayData.findIndex((r) => r.id === lastCheckedId); + const currentIndex = displayData.findIndex((r) => r.id === clickedId); + + if (lastIndex !== -1 && currentIndex !== -1) { + const start = Math.min(lastIndex, currentIndex); + const end = Math.max(lastIndex, currentIndex); + const isChecked = !clickedRow._checked; // The state to apply to the range + + for (let i = start; i <= end; i++) { + const rowToSelect = displayData[i]; + if (rowToSelect && rowToSelect._valid) { + // Prevent checking more than the limit + if (isChecked && selectedCount >= ROW_LIMIT && !rowToSelect._checked) { + continue; + } + rowToSelect._checked = isChecked; + } + } + } + } else { + // Normal click, just toggle the state + if (!clickedRow._checked && selectedCount >= ROW_LIMIT) { + // Do not allow checking more than the limit + } else { + clickedRow._checked = !clickedRow._checked; + } + } + + // Update the last checked ID for the next shift-click + lastCheckedId = clickedId; + } + + // Run on component mount onMount(() => { ensureToken(); fetchAndProcessData(); }); - // Function to toggle a single row's checked state - function toggleRow(id: string) { - const row = rows.find((r) => r.id === id); - if (row && row._valid) { - row._checked = !row._checked; - } - } - // Function to toggle select-all: selects first 200 eligible items in current view function toggleSelectAll(event: Event) { const target = event.target as HTMLInputElement; @@ -169,56 +202,62 @@

Filter and Select Rows

- Review your data and select which rows to include. Select a batch of max 200 items by using the top checkbox. + Review your data and select which rows to include. Select a batch of max 200 items by using + the top checkbox.

-

+

+ Tip: Hold Shift and click two checkboxes to select a range of rows. +

+

Already printed or invalid data is marked in the status column.

- {#if $selectedSheet?.id} -

- Need to make changes? - - Open the spreadsheet - -

- {/if}
- + + {#if isLoading} @@ -313,7 +352,7 @@ class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-200" checked={row._checked} disabled={!row._valid || (selectedCount >= ROW_LIMIT && !row._checked)} - onchange={() => toggleRow(row.id)} + onclick={(e) => handleRowClick(e, row.id)} /> {row._rowIndex}