feat: add Select All to column filters and refine views

2026-08-03 14:25:23 +02:00 · 2026-04-08 16:50:53 +02:00
parent 71af4e1915
commit 786c66fd87
3 changed files with 241 additions and 10 deletions
@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { ExcelRow, COLUMNS } from '../types';
-import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package } from 'lucide-react';
+import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X as XIcon, Check } from 'lucide-react';
 import { cn } from '../lib/utils';

 interface ArticleDetailsProps {
@@ -18,6 +18,8 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
  const [sortDesc, setSortDesc] = useState(false);
  const [pageSize, setPageSize] = useState(25);
  const [page, setPage] = useState(1);
+  const [columnFilters, setColumnFilters] = useState<Record<number, string[]>>({});
+  const [openFilterCol, setOpenFilterCol] = useState<number | null>(null);

  const lines = useMemo(() => Array.from(new Set(data.map(r => r[COLUMNS.LINE]).filter(Boolean))), [data]);

@@ -42,6 +44,14 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
    // Dropdown filters
    if (lineFilter) result = result.filter(r => r.row[COLUMNS.LINE] === lineFilter);

+    // Column-specific filters (Excel-like)
+    Object.entries(columnFilters).forEach(([colIdx, selectedValues]) => {
+      const vals = selectedValues as string[];
+      if (vals.length > 0) {
+        result = result.filter(r => vals.includes(String(r.row[Number(colIdx)] || '')));
+      }
+    });
+
    // Sorting
    if (sortCol !== null) {
      result.sort((a, b) => {
@@ -77,6 +87,27 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
    }
  };

+  const getUniqueValues = (col: number) => {
+    const values = data.map(r => String(r[col] || ''));
+    return Array.from(new Set(values)).sort();
+  };
+
+  const toggleColumnFilter = (col: number, value: string) => {
+    setColumnFilters(prev => {
+      const current = prev[col] || [];
+      const next = current.includes(value)
+        ? current.filter(v => v !== value)
+        : [...current, value];
+      return { ...prev, [col]: next };
+    });
+    setPage(1);
+  };
+
+  const setBatchColumnFilter = (col: number, values: string[]) => {
+    setColumnFilters(prev => ({ ...prev, [col]: values }));
+    setPage(1);
+  };
+
  const getBadge = (val: any, type: 'success' | 'warning' | 'error' | 'info' = 'info') => {
    if (!val) return <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-500/10 text-red-400 border border-red-500/20">Empty</span>;
    
@@ -128,6 +159,18 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
            className="w-full pl-9 pr-4 py-2 bg-slate-900/50 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
          />
        </div>
+        {(Object.values(columnFilters) as string[][]).some(v => v.length > 0) && (
+          <button
+            onClick={() => {
+              setColumnFilters({});
+              setPage(1);
+            }}
+            className="flex items-center gap-2 px-4 py-2 bg-red-600/10 text-red-400 hover:bg-red-600 hover:text-white rounded-md text-sm font-medium transition-colors border border-red-600/20"
+          >
+            <XIcon className="w-4 h-4" />
+            Clear All Column Filters
+          </button>
+        )}
        <select
          value={lineFilter}
          onChange={e => { setLineFilter(e.target.value); setPage(1); }}
@@ -153,15 +196,46 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
                ].map(({ col, label }) => (
                  <th 
                    key={col} 
-                    className="px-3 py-3 font-medium cursor-pointer hover:text-white transition-colors"
-                    onClick={() => handleSort(col)}
+                    className="px-3 py-3 font-medium transition-colors select-none group relative"
                  >
-                    <div className="flex items-center gap-1">
-                      {label}
-                      {sortCol === col && (
-                        sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
-                      )}
+                    <div className="flex items-center justify-between gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer hover:text-white" onClick={() => handleSort(col)}>
+                        {label}
+                        {sortCol === col && (
+                          sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
+                        )}
+                      </div>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setOpenFilterCol(openFilterCol === col ? null : col);
+                        }}
+                        className={cn(
+                          "p-1 rounded hover:bg-slate-700 transition-colors",
+                          (columnFilters[col]?.length || 0) > 0 ? "text-indigo-400 bg-indigo-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100"
+                        )}
+                      >
+                        <Filter className="w-3.5 h-3.5" />
+                      </button>
                    </div>
+
+                    {openFilterCol === col && (
+                      <ColumnFilterPopover
+                        uniqueValues={getUniqueValues(col)}
+                        selectedValues={columnFilters[col] || []}
+                        onToggle={(val) => toggleColumnFilter(col, val)}
+                        onSelectAll={(vals) => setBatchColumnFilter(col, vals)}
+                        onClear={() => {
+                          setColumnFilters(prev => {
+                            const next = { ...prev };
+                            delete next[col];
+                            return next;
+                          });
+                          setOpenFilterCol(null);
+                        }}
+                        onClose={() => setOpenFilterCol(null)}
+                      />
+                    )}
                  </th>
                ))}
                <th className="px-3 py-3 font-medium text-right">Edit</th>
@@ -245,3 +319,99 @@ export function ArticleDetails({ data, onEdit }: ArticleDetailsProps) {
    </div>
  );
 }
+
+interface ColumnFilterPopoverProps {
+  uniqueValues: string[];
+  selectedValues: string[];
+  onToggle: (val: string) => void;
+  onSelectAll: (vals: string[]) => void;
+  onClear: () => void;
+  onClose: () => void;
+}
+
+function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onSelectAll, onClear, onClose }: ColumnFilterPopoverProps) {
+  const [search, setSearch] = useState('');
+  
+  const filteredValues = useMemo(() => {
+    return uniqueValues.filter(v => v.toLowerCase().includes(search.toLowerCase()));
+  }, [uniqueValues, search]);
+
+  return (
+    <div className="absolute top-full left-0 mt-1 w-64 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">
+      <div className="relative">
+        <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
+        <input
+          type="text"
+          placeholder="Filter values..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          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-indigo-500"
+          autoFocus
+        />
+      </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-indigo-600 border-indigo-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">
+            <div className={cn(
+              "w-4 h-4 rounded border flex items-center justify-center transition-colors",
+              selectedValues.includes(val) ? "bg-indigo-600 border-indigo-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
+            )}>
+              {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
+            </div>
+            <input
+              type="checkbox"
+              className="hidden"
+              checked={selectedValues.includes(val)}
+              onChange={() => onToggle(val)}
+            />
+            <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
+          </label>
+        ))}
+        {filteredValues.length === 0 && (
+          <div className="text-[10px] text-slate-500 text-center py-2">No values found</div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
+        <button
+          onClick={onClear}
+          className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors"
+        >
+          Clear Current
+        </button>
+        <button
+          onClick={onClose}
+          className="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-bold rounded transition-colors shadow-sm"
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -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">
@@ -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">