christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 13:45:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: ensure filter popovers appear above pinned columns

Browse Source 
- Add zIndex prop to ColumnFilterPopover and TextFilterPopover
- Pass higher zIndex to popovers when column is pinned (zIndex + 100)
- Filter popovers now display correctly over sticky columns
This commit is contained in:
Christian Vidal Wolf
2026-04-24 14:06:32 +02:00
parent b5e8c2fe22
commit 29d5994d6a
2 changed files with 49 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColumnFilterPopover.tsx
+5 -2
View File
@@ -19,6 +19,7 @@ interface ColumnFilterPopoverProps {
onClose: () => void; onClose: () => void;
title?: string; title?: string;
className?: string; className?: string;
zIndex?: number;
} }
export function ColumnFilterPopover({ export function ColumnFilterPopover({
@@ -29,7 +30,8 @@ export function ColumnFilterPopover({
onClear, onClear,
onClose, onClose,
title, title,
className className,
zIndex = 50
}: ColumnFilterPopoverProps) { }: ColumnFilterPopoverProps) {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values'); const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values');
@@ -157,9 +159,10 @@ export function ColumnFilterPopover({
return ( return (
<div <div
className={cn( className={cn(
"absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100", "absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
className className
)} )}
style={{ zIndex }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<button <button
src/components/PricingView.tsx
+44 -32
View File
@@ -1167,6 +1167,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
value={articleNoColFilter} value={articleNoColFilter}
onChange={setArticleNoColFilter} onChange={setArticleNoColFilter}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('articleNo') ? (getStickyRank('articleNo') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleNo', columnWidths.articleNo); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleNo', columnWidths.articleNo); }} />
@@ -1194,6 +1195,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
value={nameColFilter} value={nameColFilter}
onChange={setNameColFilter} onChange={setNameColFilter}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('articleName') ? (getStickyRank('articleName') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleName', columnWidths.articleName); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleName', columnWidths.articleName); }} />
@@ -1224,6 +1226,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setLineMultiFilter(vals)} onSelectAll={vals => setLineMultiFilter(vals)}
onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }} onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('line') ? (getStickyRank('line') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'line', columnWidths.line); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'line', columnWidths.line); }} />
@@ -1254,6 +1257,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setClassificationFilter(vals)} onSelectAll={vals => setClassificationFilter(vals)}
onClear={() => { setClassificationFilter([]); setOpenFilter(null); }} onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('classification') ? (getStickyRank('classification') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'classification', columnWidths.classification); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'classification', columnWidths.classification); }} />
@@ -1281,6 +1285,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setProductTypeFilter(vals)} onSelectAll={vals => setProductTypeFilter(vals)}
onClear={() => { setProductTypeFilter([]); setOpenFilter(null); }} onClear={() => { setProductTypeFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('productType') ? (getStickyRank('productType') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'productType', columnWidths.productType); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'productType', columnWidths.productType); }} />
@@ -1321,21 +1326,22 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<Filter className="w-3 h-3" /> <Filter className="w-3 h-3" />
</button> </button>
</div> </div>
{openFilter === `prc_${col.index}` && ( {openFilter === `prc_${col.index}` && (
<ColumnFilterPopover <ColumnFilterPopover
uniqueValues={dynamicColUniqueValues[col.index] || []} uniqueValues={dynamicColUniqueValues[col.index] || []}
selectedValues={dynamicColFilters[col.index] || []} selectedValues={dynamicColFilters[col.index] || []}
onToggle={val => setDynamicColFilters(prev => { onToggle={val => setDynamicColFilters(prev => {
const current = prev[col.index] || []; const current = prev[col.index] || [];
return current.includes(val) return current.includes(val)
? { ...prev, [col.index]: current.filter(v => v !== val) } ? { ...prev, [col.index]: current.filter(v => v !== val) }
: { ...prev, [col.index]: [...current, val] }; : { ...prev, [col.index]: [...current, val] };
})} })}
onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))} onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }} onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
/> zIndex={isPinned(colKey) ? (getStickyRank(colKey) ?? 0) + 100 : 50}
)} />
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, colKey, width); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, colKey, width); }} />
</th> </th>
); );
@@ -1367,6 +1373,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setUnitsOuterFilter(vals)} onSelectAll={vals => setUnitsOuterFilter(vals)}
onClear={() => { setUnitsOuterFilter([]); setOpenFilter(null); }} onClear={() => { setUnitsOuterFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('unitsOuter') ? (getStickyRank('unitsOuter') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter); }} />
@@ -1398,6 +1405,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterWFilter(vals)} onSelectAll={vals => setOuterWFilter(vals)}
onClear={() => { setOuterWFilter([]); setOpenFilter(null); }} onClear={() => { setOuterWFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerW') ? (getStickyRank('outerW') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerW', columnWidths.outerW); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerW', columnWidths.outerW); }} />
@@ -1429,6 +1437,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterLFilter(vals)} onSelectAll={vals => setOuterLFilter(vals)}
onClear={() => { setOuterLFilter([]); setOpenFilter(null); }} onClear={() => { setOuterLFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerL') ? (getStickyRank('outerL') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerL', columnWidths.outerL); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerL', columnWidths.outerL); }} />
@@ -1460,6 +1469,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterHFilter(vals)} onSelectAll={vals => setOuterHFilter(vals)}
onClear={() => { setOuterHFilter([]); setOpenFilter(null); }} onClear={() => { setOuterHFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerH') ? (getStickyRank('outerH') ?? 0) + 100 : 50}
/> />
)} )}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerH', columnWidths.outerH); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerH', columnWidths.outerH); }} />
@@ -1490,21 +1500,22 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<Filter className="w-3 h-3" /> <Filter className="w-3 h-3" />
</button> </button>
</div> </div>
{openFilter === `con_${col.index}` && ( {openFilter === `con_${col.index}` && (
<ColumnFilterPopover <ColumnFilterPopover
uniqueValues={dynamicColUniqueValues[col.index] || []} uniqueValues={dynamicColUniqueValues[col.index] || []}
selectedValues={dynamicColFilters[col.index] || []} selectedValues={dynamicColFilters[col.index] || []}
onToggle={val => setDynamicColFilters(prev => { onToggle={val => setDynamicColFilters(prev => {
const current = prev[col.index] || []; const current = prev[col.index] || [];
return current.includes(val) return current.includes(val)
? { ...prev, [col.index]: current.filter(v => v !== val) } ? { ...prev, [col.index]: current.filter(v => v !== val) }
: { ...prev, [col.index]: [...current, val] }; : { ...prev, [col.index]: [...current, val] };
})} })}
onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))} onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }} onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)} onClose={() => setOpenFilter(null)}
/> zIndex={isPinned(colKey) ? (getStickyRank(colKey) ?? 0) + 100 : 50}
)} />
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, colKey, width); }} /> <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, colKey, width); }} />
</th> </th>
); );
@@ -1928,10 +1939,11 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
} }
// ── Text filter popover ─────────────────────────────────────────────────────── // ── Text filter popover ───────────────────────────────────────────────────────
function TextFilterPopover({ value, onChange, onClose }: { function TextFilterPopover({ value, onChange, onClose, zIndex = 50 }: {
value: { terms: string[]; op: 'and' | 'or' }; value: { terms: string[]; op: 'and' | 'or' };
onChange: (v: { terms: string[]; op: 'and' | 'or' }) => void; onChange: (v: { terms: string[]; op: 'and' | 'or' }) => void;
onClose: () => void; onClose: () => void;
zIndex?: number;
}) { }) {
const addTerm = () => { const addTerm = () => {
if (value.terms.length < 5) { if (value.terms.length < 5) {
@@ -1956,7 +1968,7 @@ function TextFilterPopover({ value, onChange, onClose }: {
}; };
return ( return (
<div className="absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-4 flex flex-col gap-4 animate-in fade-in zoom-in-95 duration-100" onClick={e => e.stopPropagation()}> <div className="absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl p-4 flex flex-col gap-4 animate-in fade-in zoom-in-95 duration-100" style={{ zIndex }} onClick={e => e.stopPropagation()}>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Show rows where field contains:</label> <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Show rows where field contains:</label>