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

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

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-08 16:56:43 +02:00
parent 786c66fd87
commit 89aa222470
6 changed files with 383 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ArticleDetails.tsx
+2 -97
View File
@@ -1,7 +1,8 @@
import React, { useState, useMemo } from 'react';
import { ExcelRow, COLUMNS } from '../types';
import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X as XIcon, Check } from 'lucide-react';
import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X as XIcon } from 'lucide-react';
import { cn } from '../lib/utils';
import { ColumnFilterPopover } from './ColumnFilterPopover';
interface ArticleDetailsProps {
data: ExcelRow[];
@@ -319,99 +320,3 @@ 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>
);
}