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

feat: add Select All to column filters and refine views

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-08 16:50:53 +02:00
parent 71af4e1915
commit 786c66fd87
3 changed files with 241 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingView.tsx
+30 -1
View File
@@ -387,6 +387,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
uniqueValues={uniqueLines}
selectedValues={lineMultiFilter}
onToggle={val => setLineMultiFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
onSelectAll={vals => setLineMultiFilter(vals)}
onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
/>
@@ -411,6 +412,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }
uniqueValues={uniqueClassifications}
selectedValues={classificationFilter}
onToggle={val => setClassificationFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
onSelectAll={vals => setClassificationFilter(vals)}
onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
/>
@@ -647,10 +649,11 @@ function TextFilterPopover({ value, onChange, onClose }: {
}
// ── Multi-select column filter popover ────────────────────────────────────────
function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onClear, onClose }: {
function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onSelectAll, onClear, onClose }: {
uniqueValues: string[];
selectedValues: string[];
onToggle: (val: string) => void;
onSelectAll: (vals: string[]) => void;
onClear: () => void;
onClose: () => void;
}) {
@@ -670,6 +673,32 @@ function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onClear,
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500"
/>
</div>
<div className="flex items-center justify-between px-1">
<label className="flex items-center gap-2 py-1 px-1.5 hover:bg-slate-700/50 rounded cursor-pointer group">
<div className={cn(
"w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
selectedValues.length === uniqueValues.length ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
)}>
{selectedValues.length === uniqueValues.length && <Check className="w-3 h-3 text-white" />}
</div>
<input
type="checkbox"
className="hidden"
checked={selectedValues.length === uniqueValues.length}
onChange={() => {
if (selectedValues.length === uniqueValues.length) {
onSelectAll([]);
} else {
onSelectAll(uniqueValues);
}
}}
/>
<span className="text-[11px] font-semibold text-slate-300">Select All</span>
</label>
<span className="text-[10px] text-slate-500">{selectedValues.length} selected</span>
</div>
<div className="max-h-48 overflow-y-auto space-y-0.5">
{filtered.map(val => (
<label key={val} className="flex items-center gap-2 px-1.5 py-1 hover:bg-slate-700/50 rounded cursor-pointer group">