125 lines
No EOL
3.4 KiB
TypeScript
125 lines
No EOL
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Models } from 'appwrite';
|
|
import SearchBar from './SearchBar';
|
|
import DataTable, { Column } from './DataTable';
|
|
import Pagination from './Pagination';
|
|
import TableActions from './TableActions';
|
|
|
|
interface CategoriaListProps {
|
|
categorias: Models.Document[];
|
|
loading: boolean;
|
|
isChangingPage?: boolean;
|
|
error: string | null;
|
|
totalCategorias: number;
|
|
currentPage: number;
|
|
pageSize: number;
|
|
onEdit: (lab: Models.Document) => void;
|
|
onDelete: (id: string) => Promise<boolean>;
|
|
onPrevPage: () => void;
|
|
onNextPage: () => void;
|
|
onSearch: (nome: string) => void;
|
|
}
|
|
|
|
const CategoriaList: React.FC<CategoriaListProps> = ({
|
|
categorias,
|
|
loading,
|
|
isChangingPage = false,
|
|
error,
|
|
totalCategorias,
|
|
currentPage,
|
|
pageSize,
|
|
onEdit,
|
|
onDelete,
|
|
onPrevPage,
|
|
onNextPage,
|
|
onSearch
|
|
}) => {
|
|
const totalPages = Math.ceil(totalCategorias / pageSize);
|
|
const startItem = (currentPage - 1) * pageSize + 1;
|
|
const endItem = Math.min(currentPage * pageSize, totalCategorias);
|
|
|
|
const [search, setSearch] = React.useState('');
|
|
|
|
const handleSearch = () => {
|
|
onSearch(search);
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (confirm('Tem certeza que deseja deletar esta categoria?')) {
|
|
await onDelete(id);
|
|
}
|
|
};
|
|
|
|
const columns: Column<Models.Document>[] = [
|
|
{ key: 'nome', header: 'Nome' },
|
|
{ key: '$id', header: 'ID' },
|
|
{ key: '$createdAt', header: 'Data de Criação', render: row => new Date(row.$createdAt).toLocaleDateString('pt-BR') },
|
|
];
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="search-container px-6 py-4 border-b border-gray-200">
|
|
<SearchBar
|
|
value={search}
|
|
onChange={setSearch}
|
|
onSearch={handleSearch}
|
|
placeholder="Buscar categoria"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{isChangingPage && (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-md p-3 mb-4">
|
|
<div className="flex items-center">
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
|
|
<span className="text-blue-800 text-sm">Carregando página...</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center items-center min-h-screen">
|
|
<div className="text-lg">Carregando categorias...</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<DataTable
|
|
columns={columns}
|
|
data={categorias}
|
|
actions={(lab) => (
|
|
<TableActions
|
|
onEdit={() => onEdit(lab)}
|
|
onDelete={() => handleDelete(lab.$id)}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<div className="pagination-container">
|
|
<div className="text-sm text-gray-600">
|
|
{totalCategorias > 0 ? (
|
|
<>Mostrando {startItem} - {endItem} de {totalCategorias} categorias</>
|
|
) : (
|
|
'Total de categorias: 0'
|
|
)}
|
|
</div>
|
|
|
|
<Pagination
|
|
page={currentPage}
|
|
total={totalPages}
|
|
onPrev={onPrevPage}
|
|
onNext={onNextPage}
|
|
isChangingPage={isChangingPage}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategoriaList; |