72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from 'react-query';
|
|
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
|
|
import { Tarefa } from '../../types/entities';
|
|
import { TarefaCard } from './TarefaCard';
|
|
import api from '../../services/api';
|
|
|
|
interface TarefaKanbanProps {
|
|
onEdit: (tarefa: Tarefa) => void;
|
|
onStatusChange: (id: string, status: string, progresso?: number) => void;
|
|
}
|
|
|
|
const colunas = [
|
|
{ id: 'PENDENTE', titulo: 'Pendentes' },
|
|
{ id: 'EM_ANDAMENTO', titulo: 'Em Andamento' },
|
|
{ id: 'CONCLUIDA', titulo: 'Concluídas' },
|
|
];
|
|
|
|
export const TarefaKanban: React.FC<TarefaKanbanProps> = ({ onEdit, onStatusChange }) => {
|
|
const { data: tarefas = [], refetch } = useQuery('tarefas', async () => {
|
|
const response = await api.get('/tarefas');
|
|
return response.data;
|
|
});
|
|
|
|
const handleDragEnd = async (result: any) => {
|
|
if (!result.destination) return;
|
|
|
|
const { draggableId, source, destination } = result;
|
|
|
|
if (source.droppableId !== destination.droppableId) {
|
|
onStatusChange(draggableId, destination.droppableId);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DragDropContext onDragEnd={handleDragEnd}>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{colunas.map((coluna) => (
|
|
<div key={coluna.id} className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
|
|
{coluna.titulo}
|
|
</h3>
|
|
|
|
<Droppable droppableId={coluna.id}>
|
|
{(provided) => (
|
|
<div
|
|
ref={provided.innerRef}
|
|
{...provided.droppableProps}
|
|
className="space-y-4 min-h-[200px]"
|
|
>
|
|
{tarefas
|
|
.filter((tarefa: Tarefa) => tarefa.status === coluna.id)
|
|
.map((tarefa: Tarefa, index: number) => (
|
|
<TarefaCard
|
|
key={tarefa.id}
|
|
tarefa={tarefa}
|
|
index={index}
|
|
onEdit={onEdit}
|
|
onStatusChange={onStatusChange}
|
|
/>
|
|
))}
|
|
{provided.placeholder}
|
|
</div>
|
|
)}
|
|
</Droppable>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DragDropContext>
|
|
);
|
|
};
|