146 lines
4.4 KiB
TypeScript
146 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { Search, X, SlidersHorizontal, Download, Plus } from "lucide-react";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { ProjectStatus, STATUS_CONFIG } from "@/types/project";
|
|
|
|
interface DataTableToolbarProps {
|
|
searchValue: string;
|
|
onSearchChange: (value: string) => void;
|
|
statusFilter: string;
|
|
onStatusFilterChange: (value: string) => void;
|
|
selectedCount: number;
|
|
onClearFilters: () => void;
|
|
}
|
|
|
|
export function DataTableToolbar({
|
|
searchValue,
|
|
onSearchChange,
|
|
statusFilter,
|
|
onStatusFilterChange,
|
|
selectedCount,
|
|
onClearFilters,
|
|
}: DataTableToolbarProps) {
|
|
const isFiltered = searchValue !== "" || statusFilter !== "all";
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex flex-1 items-center gap-2">
|
|
{/* Búsqueda */}
|
|
<div className="relative w-full sm:w-[300px]">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Buscar proyectos..."
|
|
value={searchValue}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filtro por estado */}
|
|
<Select value={statusFilter} onValueChange={onStatusFilterChange}>
|
|
<SelectTrigger className="w-[150px]">
|
|
<SelectValue placeholder="Estado" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos</SelectItem>
|
|
{(Object.entries(STATUS_CONFIG) as [ProjectStatus, { label: string }][]).map(
|
|
([value, { label }]) => (
|
|
<SelectItem key={value} value={value}>
|
|
{label}
|
|
</SelectItem>
|
|
)
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* Botón limpiar filtros */}
|
|
{isFiltered && (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onClearFilters}
|
|
className="h-9 px-2 lg:px-3"
|
|
>
|
|
Limpiar
|
|
<X className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{/* Contador de seleccionados */}
|
|
{selectedCount > 0 && (
|
|
<Badge variant="secondary" className="rounded-sm px-2 font-normal">
|
|
{selectedCount} seleccionado(s)
|
|
</Badge>
|
|
)}
|
|
|
|
{/* Opciones de vista */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" className="h-9">
|
|
<SlidersHorizontal className="mr-2 h-4 w-4" />
|
|
Vista
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-[180px]">
|
|
<DropdownMenuLabel>Columnas visibles</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem checked>
|
|
Referencia
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked>
|
|
Nombre
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked>
|
|
Cliente
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked>
|
|
Estado
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked>
|
|
Progreso
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked>
|
|
Presupuesto
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked>
|
|
Fechas
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Exportar */}
|
|
<Button variant="outline" size="sm" className="h-9">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Exportar
|
|
</Button>
|
|
|
|
{/* Nuevo proyecto */}
|
|
<Button size="sm" className="h-9">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Nuevo
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|