mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 12:55:23 +02:00
247 lines
12 KiB
TypeScript
247 lines
12 KiB
TypeScript
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>
|
|
);
|