feat: standardize ColumnFilterPopover and add SELECT ALL to all views/tabs

2026-08-03 14:35:23 +02:00 · 2026-04-08 16:56:43 +02:00
parent 786c66fd87
commit 89aa222470
6 changed files with 383 additions and 303 deletions
@@ -0,0 +1,119 @@
+import React, { useState, useMemo } from 'react';
+import { Search, Check, X } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface ColumnFilterPopoverProps {
+  uniqueValues: string[];
+  selectedValues: string[];
+  onToggle: (val: string) => void;
+  onSelectAll: (vals: string[]) => void;
+  onClear: () => void;
+  onClose: () => void;
+  title?: string;
+  className?: string;
+}
+
+export function ColumnFilterPopover({
+  uniqueValues,
+  selectedValues,
+  onToggle,
+  onSelectAll,
+  onClear,
+  onClose,
+  title,
+  className
+}: ColumnFilterPopoverProps) {
+  const [search, setSearch] = useState('');
+  
+  const filteredValues = useMemo(() => {
+    return uniqueValues.filter(v => 
+      String(v || '').toLowerCase().includes(search.toLowerCase())
+    );
+  }, [uniqueValues, search]);
+
+  const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;
+
+  return (
+    <div className={cn(
+      "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",
+      className
+    )}>
+      {title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
+      
+      <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-blue-500"
+          autoFocus
+        />
+      </div>
+
+      <div className="flex items-center justify-between px-1 border-b border-slate-700/50 pb-2">
+        <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",
+            isAllSelected ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
+          )}>
+            {isAllSelected && <Check className="w-3 h-3 text-white" />}
+          </div>
+          <input
+            type="checkbox"
+            className="hidden"
+            checked={isAllSelected}
+            onChange={() => {
+              if (isAllSelected) {
+                onSelectAll([]);
+              } else {
+                onSelectAll(uniqueValues);
+              }
+            }}
+          />
+          <span className="text-[11px] font-bold text-slate-200">SELECT ALL</span>
+        </label>
+        <span className="text-[10px] text-slate-500 font-medium">{selectedValues.length} selected</span>
+      </div>
+
+      <div className="max-h-48 overflow-y-auto space-y-0.5 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 shrink-0 transition-colors",
+              selectedValues.includes(val) ? "bg-blue-600 border-blue-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-4 italic">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-bold text-slate-400 hover:text-white transition-colors uppercase"
+        >
+          Clear
+        </button>
+        <button
+          onClick={onClose}
+          className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95"
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  );
+}