mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 13:55:23 +02:00
Implement Excel-style filters (SKU, ASIN, Title, Line) across GRID, WEEKLY SALES, and FC26 tabs
This commit is contained in:
Christian Vidal Wolf
@@ -0,0 +1,246 @@
|
||||
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { ColumnFilterCondition } from '../types';
|
||||
import { CloseIcon, FunnelIcon } from './Icons';
|
||||
|
||||
interface ExcelFilterProps {
|
||||
columnKey: string;
|
||||
title: string;
|
||||
uniqueValues: string[];
|
||||
currentFilter?: ColumnFilterCondition;
|
||||
onFilterChange: (columnKey: string, condition: ColumnFilterCondition | undefined) => void;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
const OPERATORS = [
|
||||
{ label: 'Elija uno', value: '' },
|
||||
{ label: 'Es igual a', value: 'equals' },
|
||||
{ label: 'No es igual a', value: 'notEquals' },
|
||||
{ label: 'Contiene', value: 'contains' },
|
||||
{ label: 'No contiene', value: 'notContains' },
|
||||
{ label: 'Comienza por', value: 'startsWith' },
|
||||
{ label: 'No comienza por', value: 'notStartsWith' },
|
||||
{ label: 'Termina con', value: 'endsWith' },
|
||||
{ label: 'No termina con', value: 'notEndsWith' },
|
||||
] as const;
|
||||
|
||||
export const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||
columnKey,
|
||||
title,
|
||||
uniqueValues,
|
||||
currentFilter,
|
||||
onFilterChange,
|
||||
icon
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [operator, setOperator] = useState<typeof OPERATORS[number]['value']>(currentFilter?.textFilter?.operator || '');
|
||||
const [textValue, setTextValue] = useState(currentFilter?.textFilter?.value || '');
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [tempSelectedValues, setTempSelectedValues] = useState<string[]>(currentFilter?.selectedValues || []);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Synchronization with currentFilter prop
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setOperator(currentFilter?.textFilter?.operator || '');
|
||||
setTextValue(currentFilter?.textFilter?.value || '');
|
||||
setTempSelectedValues(currentFilter?.selectedValues || []);
|
||||
}
|
||||
}, [isOpen, currentFilter]);
|
||||
|
||||
// Close when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const filteredValues = useMemo(() => {
|
||||
if (!searchValue) return uniqueValues;
|
||||
const lowerSearch = searchValue.toLowerCase();
|
||||
return uniqueValues.filter(v => String(v).toLowerCase().includes(lowerSearch));
|
||||
}, [uniqueValues, searchValue]);
|
||||
|
||||
const handleToggleSelectAll = () => {
|
||||
if (tempSelectedValues.length === uniqueValues.length) {
|
||||
setTempSelectedValues([]);
|
||||
} else {
|
||||
setTempSelectedValues([...uniqueValues]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleValue = (val: string) => {
|
||||
setTempSelectedValues(prev =>
|
||||
prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val]
|
||||
);
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
const newCondition: ColumnFilterCondition = {
|
||||
...currentFilter,
|
||||
selectedValues: tempSelectedValues.length > 0 ? tempSelectedValues : undefined,
|
||||
textFilter: operator ? { operator: operator as any, value: textValue } : undefined
|
||||
};
|
||||
|
||||
// Remove empty properties
|
||||
if (!newCondition.selectedValues) delete newCondition.selectedValues;
|
||||
if (!newCondition.textFilter) delete newCondition.textFilter;
|
||||
|
||||
onFilterChange(columnKey, Object.keys(newCondition).length > 0 ? newCondition : undefined);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
onFilterChange(columnKey, undefined);
|
||||
setOperator('');
|
||||
setTextValue('');
|
||||
setTempSelectedValues([]);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const handleSort = (direction: 'asc' | 'desc') => {
|
||||
onFilterChange(columnKey, { ...currentFilter, sort: direction });
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const hasActiveFilter = !!(currentFilter?.textFilter || currentFilter?.selectedValues);
|
||||
|
||||
return (
|
||||
<div className="relative inline-block ml-1" ref={containerRef}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
className={`flex flex-col items-center gap-0.5 p-1 rounded hover:bg-white/10 transition-all ${hasActiveFilter ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
|
||||
title={`Filter by ${title}`}
|
||||
>
|
||||
{icon || <FunnelIcon className="w-3 h-3" />}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute left-0 mt-2 w-72 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] overflow-hidden animate-in fade-in zoom-in duration-150">
|
||||
<div className="bg-slate-950 px-4 py-3 border-b border-slate-800 flex justify-between items-center">
|
||||
<span className="text-xs font-black text-slate-300 uppercase tracking-widest">{title}</span>
|
||||
<button onClick={() => setIsOpen(false)} className="text-slate-500 hover:text-white">
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4 max-h-[80vh] overflow-y-auto custom-scrollbar">
|
||||
{/* Sort Section */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleSort('asc')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'asc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
|
||||
>
|
||||
<span className="text-lg">A↓Z</span> Ascendente
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSort('desc')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'desc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
|
||||
>
|
||||
<span className="text-lg">Z↓A</span> Descendente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Condition Filter Section */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
|
||||
<div className="space-y-2">
|
||||
<select
|
||||
value={operator}
|
||||
onChange={(e) => setOperator(e.target.value as any)}
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
{OPERATORS.map(op => (
|
||||
<option key={op.value} value={op.value}>{op.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{operator && (
|
||||
<input
|
||||
type="text"
|
||||
value={textValue}
|
||||
onChange={(e) => setTextValue(e.target.value)}
|
||||
placeholder="Valor..."
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List Selection Section */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar en la lista..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 mb-2"
|
||||
/>
|
||||
|
||||
<div className="bg-slate-950 border border-slate-800 rounded-lg p-1 max-h-48 overflow-y-auto custom-scrollbar">
|
||||
<div
|
||||
onClick={handleToggleSelectAll}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs font-bold text-indigo-400"
|
||||
>
|
||||
<div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${tempSelectedValues.length === uniqueValues.length ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
|
||||
{tempSelectedValues.length === uniqueValues.length && <CheckMark />}
|
||||
</div>
|
||||
(Seleccionar todo)
|
||||
</div>
|
||||
{filteredValues.map(val => {
|
||||
const isSelected = tempSelectedValues.includes(val);
|
||||
return (
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => handleToggleValue(val)}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs text-slate-300"
|
||||
>
|
||||
<div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${isSelected ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
|
||||
{isSelected && <CheckMark />}
|
||||
</div>
|
||||
<span className="truncate">{val}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950 p-4 border-t border-slate-800 flex gap-2">
|
||||
<button
|
||||
onClick={handleApply}
|
||||
className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
>
|
||||
Aplicar filtro
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
>
|
||||
Borrar filtro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CheckMark = () => (
|
||||
<svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={4}>
|
||||
<path d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
);
|
||||
Reference in New Issue
Block a user