diff --git a/app/(dashboard)/clients/clients-client.tsx b/app/(dashboard)/clients/clients-client.tsx index f176bfe..816c693 100644 --- a/app/(dashboard)/clients/clients-client.tsx +++ b/app/(dashboard)/clients/clients-client.tsx @@ -44,19 +44,6 @@ import Link from "next/link"; import { useState } from "react"; import { format, isPast, isToday } from "date-fns"; import { tr } from "date-fns/locale"; -import { - DndContext, - DragEndEvent, - DragOverlay, - DragStartEvent, - PointerSensor, - useSensor, - useSensors, - closestCorners, - useDroppable, - useDraggable, -} from "@dnd-kit/core"; -import { CSS } from "@dnd-kit/utilities"; import { useEffect } from "react"; import { cn } from "@/lib/utils"; @@ -117,35 +104,24 @@ export function ClientsClient({ const [query, setQuery] = useState(""); const normalizedQuery = query.trim().toLowerCase(); - const [activeDragClient, setActiveDragClient] = useState(null); + const [draggedClientId, setDraggedClientId] = useState(null); const [localClients, setLocalClients] = useState(clients); useEffect(() => { setLocalClients(clients); }, [clients]); - const sensors = useSensors( - useSensor(PointerSensor, { - activationConstraint: { - distance: 5, - }, - }) - ); - - function handleDragStart(event: DragStartEvent) { - const { active } = event; - const client = localClients.find(c => c.id === active.id); - if (client) setActiveDragClient(client); + function handleDragStart(event: React.DragEvent, clientId: string) { + setDraggedClientId(clientId); + event.dataTransfer.effectAllowed = "move"; + event.dataTransfer.setData("text/plain", clientId); } - async function handleDragEnd(event: DragEndEvent) { - const { active, over } = event; - setActiveDragClient(null); + async function handleDrop(newStage: string) { + if (!draggedClientId) return; - if (!over) return; - - const clientId = active.id as string; - const newStage = over.id as string; + const clientId = draggedClientId; + setDraggedClientId(null); const client = localClients.find(c => c.id === clientId); if (!client || client.pipeline_stage === newStage) return; @@ -155,7 +131,7 @@ export function ClientsClient({ ); try { - await updateClientPipelineStage(clientId, newStage); + await updateClientPipelineStage(clientId, newStage as any); } catch (error) { setLocalClients(clients); } @@ -241,41 +217,35 @@ export function ClientsClient({ - -
- {pipelineStages.map(stage => { - const stageClients = filteredClients.filter(c => c.pipeline_stage === stage.id && c.status !== 'archived'); - return ( - - {stageClients.map(client => ( - - ))} - {stageClients.length === 0 && ( -
- Boş -
- )} -
- ); - })} -
- - {activeDragClient ? ( - - ) : null} - -
+
+ {pipelineStages.map(stage => { + const stageClients = filteredClients.filter(c => c.pipeline_stage === stage.id && c.status !== 'archived'); + return ( + handleDrop(stage.id)} + > + {stageClients.map(client => ( + setDraggedClientId(null)} + /> + ))} + {stageClients.length === 0 && ( +
+ Boş +
+ )} +
+ ); + })} +
@@ -304,15 +274,17 @@ export function ClientsClient({ ); } -function DroppableColumn({ id, title, count, color, children }: { id: string, title: string, count: number, color: string, children: React.ReactNode }) { - const { isOver, setNodeRef } = useDroppable({ id }); +function DroppableColumn({ title, count, color, onDrop, children }: { title: string, count: number, color: string, onDrop: () => void, children: React.ReactNode }) { return (
{ + event.preventDefault(); + event.dataTransfer.dropEffect = "move"; + }} + onDrop={onDrop} >

@@ -328,20 +300,26 @@ function DroppableColumn({ id, title, count, color, children }: { id: string, ti ); } -function DraggableClientCard({ client, isOverlay }: { client: ClientListItem, isOverlay?: boolean }) { - const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ - id: client.id, - data: client, - }); - - const style = { - transform: CSS.Translate.toString(transform), - opacity: isDragging && !isOverlay ? 0.3 : 1, - zIndex: isDragging ? 999 : "auto", - }; +function DraggableClientCard({ + client, + draggedClientId, + onDragStart, + onDragEnd +}: { + client: ClientListItem, + draggedClientId: string | null, + onDragStart: (e: React.DragEvent, id: string) => void, + onDragEnd: () => void +}) { + const isDragging = draggedClientId === client.id; return ( -
+
onDragStart(e, client.id)} + onDragEnd={onDragEnd} + className={cn("touch-none", isDragging ? "cursor-grabbing opacity-50 ring-2 ring-primary/20 transition" : "cursor-grab transition active:cursor-grabbing")} + >