80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import { DragDropContext, Droppable } from "react-beautiful-dnd";
|
|
import { useQuery } from "react-query";
|
|
|
|
import api from "../../services/api";
|
|
import { Tarefa } from "../../types/entities";
|
|
|
|
import { TarefaCard } from "./TarefaCard";
|
|
|
|
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>
|
|
);
|
|
};
|