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/ProductDescriptions.tsx
+33 -1
View File
@@ -110,6 +110,11 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
setPage(1);
};
const setBatchColumnFilter = (col: number, values: string[]) => {
setColumnFilters(prev => ({ ...prev, [col]: values }));
setPage(1);
};
const getRowColor = (row: ExcelRow) => {
// EOL Rule: OOC Classification and 0 or negative stock (Item Available)
const classification = String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().trim();
@@ -261,6 +266,7 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
uniqueValues={getUniqueValues(col)}
selectedValues={columnFilters[col] || []}
onToggle={(val) => toggleColumnFilter(col, val)}
onSelectAll={(vals) => setBatchColumnFilter(col, vals)}
onClear={() => {
setColumnFilters(prev => {
const next = { ...prev };
@@ -360,11 +366,12 @@ interface ColumnFilterPopoverProps {
uniqueValues: string[];
selectedValues: string[];
onToggle: (val: string) => void;
onSelectAll: (vals: string[]) => void;
onClear: () => void;
onClose: () => void;
}
function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onClear, onClose }: ColumnFilterPopoverProps) {
function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onSelectAll, onClear, onClose }: ColumnFilterPopoverProps) {
const [search, setSearch] = useState('');
const filteredValues = useMemo(() => {
@@ -385,6 +392,31 @@ function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onClear,
/>
</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 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-1 pr-1 custom-scrollbar">
{filteredValues.map(val => (
<label key={val} className="flex items-center gap-2 p-1.5 hover:bg-slate-700/50 rounded cursor-pointer group">