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

fix: ensure filter dropdowns are not covered by pinned columns

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-24 17:08:23 +02:00
parent 6057a16229
commit e96d245f59
2 changed files with 309 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingView.tsx
+75 -20
View File
@@ -1151,7 +1151,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<table ref={tableRef} className="w-full text-sm border-collapse table-fixed">
<thead className="sticky top-0 z-10 bg-slate-900 border-b border-slate-700">
<tr>
<th style={{ width: columnWidths.articleNo, ...(isPinned('articleNo') ? { left: getStickyLeft('articleNo') ?? 0, zIndex: getHeaderStickyRank('articleNo') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.articleNo,
...(isPinned('articleNo')
? { left: getStickyLeft('articleNo') ?? 0, zIndex: openFilter === 'sku' ? 500 : (getHeaderStickyRank('articleNo') ?? 0) }
: (openFilter === 'sku' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('articleNo') && "sticky bg-slate-900"
)} onClick={() => handleSort('articleNo')}>
@@ -1175,12 +1180,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
value={articleNoColFilter}
onChange={setArticleNoColFilter}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('articleNo') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleNo', columnWidths.articleNo); }} />
</th>
<th style={{ width: columnWidths.articleName, ...(isPinned('articleName') ? { left: getStickyLeft('articleName') ?? 0, zIndex: getHeaderStickyRank('articleName') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.articleName,
...(isPinned('articleName')
? { left: getStickyLeft('articleName') ?? 0, zIndex: openFilter === 'name' ? 500 : (getHeaderStickyRank('articleName') ?? 0) }
: (openFilter === 'name' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('articleName') && "sticky bg-slate-900"
)} onClick={() => handleSort('articleName')}>
@@ -1203,12 +1213,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
value={nameColFilter}
onChange={setNameColFilter}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('articleName') ? 200 : 50}
zIndex={500}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleName', columnWidths.articleName); }} />
</th>
<th style={{ width: columnWidths.line, ...(isPinned('line') ? { left: getStickyLeft('line') ?? 0, zIndex: getHeaderStickyRank('line') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.line,
...(isPinned('line')
? { left: getStickyLeft('line') ?? 0, zIndex: openFilter === 'line' ? 500 : (getHeaderStickyRank('line') ?? 0) }
: (openFilter === 'line' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('line') && "sticky bg-slate-900"
)} onClick={() => handleSort('line')}>
@@ -1234,12 +1249,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setLineMultiFilter(vals)}
onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('line') ? 200 : 50}
zIndex={500}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'line', columnWidths.line); }} />
</th>
<th style={{ width: columnWidths.classification, ...(isPinned('classification') ? { left: getStickyLeft('classification') ?? 0, zIndex: getHeaderStickyRank('classification') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.classification,
...(isPinned('classification')
? { left: getStickyLeft('classification') ?? 0, zIndex: openFilter === 'classification' ? 500 : (getHeaderStickyRank('classification') ?? 0) }
: (openFilter === 'classification' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('classification') && "sticky bg-slate-900"
)} onClick={() => handleSort('classification')}>
@@ -1265,7 +1285,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setClassificationFilter(vals)}
onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('classification') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'classification', columnWidths.classification); }} />
@@ -1293,13 +1313,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setProductTypeFilter(vals)}
onClear={() => { setProductTypeFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('productType') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'productType', columnWidths.productType); }} />
</th>
<th style={{ width: columnWidths.itemToLogistic, ...(isPinned('itemToLogistic') ? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: getHeaderStickyRank('itemToLogistic') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.itemToLogistic,
...(isPinned('itemToLogistic')
? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: openFilter === 'logistic' ? 500 : (getHeaderStickyRank('itemToLogistic') ?? 0) }
: (openFilter === 'logistic' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-pink-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('itemToLogistic') && "sticky bg-slate-900"
)} onClick={() => handleSort('itemToLogistic')}>
@@ -1313,7 +1338,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const colKey = `prc_${col.index}`;
const width = columnWidths[colKey] ?? 100;
return (
<th key={col.index} style={{ width, ...(isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getHeaderStickyRank(colKey) ?? 0 } : {}) }} className={cn(
<th key={col.index} style={{
width,
...(isPinned(colKey)
? { left: getStickyLeft(colKey) ?? 0, zIndex: openFilter === colKey ? 500 : (getHeaderStickyRank(colKey) ?? 0) }
: (openFilter === colKey ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned(colKey) && "sticky bg-slate-900"
)} onClick={() => handleSort(col.index)}>
@@ -1355,7 +1385,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
);
})}
<th style={{ width: columnWidths.unitsOuter, ...(isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: getHeaderStickyRank('unitsOuter') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.unitsOuter,
...(isPinned('unitsOuter')
? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: openFilter === 'unitsOuter' ? 500 : (getHeaderStickyRank('unitsOuter') ?? 0) }
: (openFilter === 'unitsOuter' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('unitsOuter') && "sticky bg-slate-900"
)} onClick={() => handleSort('unitsOuter')}>
@@ -1381,13 +1416,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setUnitsOuterFilter(vals)}
onClear={() => { setUnitsOuterFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('unitsOuter') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter); }} />
</th>
<th style={{ width: columnWidths.outerW, ...(isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0, zIndex: getHeaderStickyRank('outerW') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.outerW,
...(isPinned('outerW')
? { left: getStickyLeft('outerW') ?? 0, zIndex: openFilter === 'outerW' ? 500 : (getHeaderStickyRank('outerW') ?? 0) }
: (openFilter === 'outerW' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('outerW') && "sticky bg-slate-900"
)} onClick={() => handleSort('outerW')}>
@@ -1413,13 +1453,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterWFilter(vals)}
onClear={() => { setOuterWFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerW') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerW', columnWidths.outerW); }} />
</th>
<th style={{ width: columnWidths.outerL, ...(isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0, zIndex: getHeaderStickyRank('outerL') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.outerL,
...(isPinned('outerL')
? { left: getStickyLeft('outerL') ?? 0, zIndex: openFilter === 'outerL' ? 500 : (getHeaderStickyRank('outerL') ?? 0) }
: (openFilter === 'outerL' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('outerL') && "sticky bg-slate-900"
)} onClick={() => handleSort('outerL')}>
@@ -1445,13 +1490,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterLFilter(vals)}
onClear={() => { setOuterLFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerL') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerL', columnWidths.outerL); }} />
</th>
<th style={{ width: columnWidths.outerH, ...(isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0, zIndex: getHeaderStickyRank('outerH') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.outerH,
...(isPinned('outerH')
? { left: getStickyLeft('outerH') ?? 0, zIndex: openFilter === 'outerH' ? 500 : (getHeaderStickyRank('outerH') ?? 0) }
: (openFilter === 'outerH' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('outerH') && "sticky bg-slate-900"
)} onClick={() => handleSort('outerH')}>
@@ -1477,7 +1527,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterHFilter(vals)}
onClear={() => { setOuterHFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerH') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerH', columnWidths.outerH); }} />
@@ -1487,7 +1537,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const colKey = `con_${col.index}`;
const width = columnWidths[colKey] ?? 110;
return (
<th key={col.index} style={{ width, ...(isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getHeaderStickyRank(colKey) ?? 0 } : {}) }} className={cn(
<th key={col.index} style={{
width,
...(isPinned(colKey)
? { left: getStickyLeft(colKey) ?? 0, zIndex: openFilter === colKey ? 500 : (getHeaderStickyRank(colKey) ?? 0) }
: (openFilter === colKey ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned(colKey) && "sticky bg-slate-900"
)} onClick={() => handleSort(col.index)}>