fix: enable real-time filtering for global search and fix selection bug

This commit is contained in:
Christian Vidal Wolf
2026-04-24 12:43:27 +02:00
parent a0a9fbeb2e
commit b8a960e3e5
+7 -10
View File
@@ -53,7 +53,6 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const COLUMNS = useColumns(); const COLUMNS = useColumns();
const [filterMode, setFilterMode] = useState<FilterMode>('all_errors'); const [filterMode, setFilterMode] = useState<FilterMode>('all_errors');
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [searchMode, setSearchMode] = useState<'all' | 'selected'>('all');
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const pageSize = 100; const pageSize = 100;
const [columnWidths, setColumnWidths] = useState<Record<string, number>>({ const [columnWidths, setColumnWidths] = useState<Record<string, number>>({
@@ -99,7 +98,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
const [isSearchOpen, setIsSearchOpen] = useState(false); const [isSearchOpen, setIsSearchOpen] = useState(false);
const [selectedSearchItems, setSelectedSearchItems] = useState<Set<number>>(new Set()); const [selectedSearchItems, setSelectedSearchItems] = useState<Set<string>>(new Set());
const searchDropdownRef = useRef<HTMLDivElement>(null); const searchDropdownRef = useRef<HTMLDivElement>(null);
// Close search dropdown on click outside // Close search dropdown on click outside
@@ -138,15 +137,11 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
}; };
const handleApplySearch = () => { const handleApplySearch = () => {
if (selectedSearchItems.size > 0) {
setSearchMode('selected');
}
setIsSearchOpen(false); setIsSearchOpen(false);
}; };
const handleClearSearch = () => { const handleClearSearch = () => {
setSelectedSearchItems(new Set()); setSelectedSearchItems(new Set());
setSearchMode('all');
}; };
const handleResizeStart = (e: React.MouseEvent, colKey: string, currentWidth: number) => { const handleResizeStart = (e: React.MouseEvent, colKey: string, currentWidth: number) => {
@@ -343,7 +338,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
} }
// Selected items from search dropdown // Selected items from search dropdown
if (searchMode === 'selected' && selectedSearchItems.size > 0) { if (selectedSearchItems.size > 0) {
result = result.filter(r => { result = result.filter(r => {
const articleNo = String(r.row[COLUMNS.ARTICLE_NO] || ''); const articleNo = String(r.row[COLUMNS.ARTICLE_NO] || '');
return selectedSearchItems.has(articleNo); return selectedSearchItems.has(articleNo);
@@ -415,7 +410,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
} }
return result; return result;
}, [analyzedRows, filterMode, search, nameColFilter, articleNoColFilter, globalAdvancedFilter, lineMultiFilter, classificationFilter, productTypeFilter, unitsOuterFilter, outerWFilter, outerLFilter, outerHFilter, dynamicColFilters, weightIssueFilter, searchMode, selectedSearchItems]); }, [analyzedRows, filterMode, search, nameColFilter, articleNoColFilter, globalAdvancedFilter, lineMultiFilter, classificationFilter, productTypeFilter, unitsOuterFilter, outerWFilter, outerLFilter, outerHFilter, dynamicColFilters, weightIssueFilter, selectedSearchItems]);
// ── Sorted rows ────────────────────────────────────────────────────────── // ── Sorted rows ──────────────────────────────────────────────────────────
const sortedRows = useMemo(() => { const sortedRows = useMemo(() => {
@@ -806,7 +801,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
</button> </button>
) : search ? ( ) : search ? (
<button <button
onClick={() => { setSearch(''); setSearchMode('all'); }} onClick={() => setSearch('')}
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white" className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
@@ -849,7 +844,9 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
return ( return (
<button <button
key={`${row[COLUMNS.ARTICLE_NO]}-${idx}`} key={`${row[COLUMNS.ARTICLE_NO]}-${idx}`}
onClick={() => { onClick={(e) => {
e.preventDefault();
e.stopPropagation();
const key = String(row[COLUMNS.ARTICLE_NO]); const key = String(row[COLUMNS.ARTICLE_NO]);
setSelectedSearchItems(prev => { setSelectedSearchItems(prev => {
const next = new Set(prev); const next = new Set(prev);