306 lines
10 KiB
TypeScript
306 lines
10 KiB
TypeScript
import { useParams, Link } from 'react-router-dom';
|
|
import { useBoard } from '../hooks/useBoard';
|
|
import { useCardMutations } from '../hooks/useCardMutations';
|
|
import { useListMutations } from '../hooks/useListMutations';
|
|
import { SortableKanbanColumn } from '../components/kanban/SortableKanbanColumn';
|
|
import { CreateListModal } from '../components/kanban/CreateListModal';
|
|
import { CardPreviewModal } from '../components/CardPreviewModal';
|
|
import { useModal } from '../context/modals/useModal';
|
|
import {
|
|
DndContext,
|
|
DragEndEvent,
|
|
DragOverlay,
|
|
DragStartEvent,
|
|
DragOverEvent,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
closestCenter,
|
|
} from '@dnd-kit/core';
|
|
import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
|
|
import { Card as CardType, ListWithCards } from '../types/kanban';
|
|
import { useState } from 'react';
|
|
|
|
export function BoardDetail() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const { board, fetchBoard } = useBoard(parseInt(id || '0'));
|
|
const { createCard, moveCard } = useCardMutations(parseInt(id || '0'), fetchBoard);
|
|
const { createList, updateList, deleteList } = useListMutations(parseInt(id || '0'), fetchBoard);
|
|
const { openModal } = useModal();
|
|
|
|
const [activeCard, setActiveCard] = useState<CardType | null>(null);
|
|
const [activeList, setActiveList] = useState<ListWithCards | null>(null);
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, {
|
|
activationConstraint: {
|
|
distance: 8,
|
|
},
|
|
})
|
|
);
|
|
|
|
const handleDragStart = (event: DragStartEvent) => {
|
|
const { active } = event;
|
|
const [activeType, activeIdStr] = (active.id as string).split('_');
|
|
|
|
if (activeType === 'COLUMN') {
|
|
// Dragging a column
|
|
const listId = parseInt(activeIdStr);
|
|
const list = board?.lists.find((l) => l.id === listId);
|
|
if (list) {
|
|
setActiveList(list);
|
|
}
|
|
} else if (activeType === 'CARD') {
|
|
// Dragging a card
|
|
const cardId = parseInt(activeIdStr);
|
|
if (board) {
|
|
const card = board.lists.flatMap((list) => list.cards).find((c) => c.id === cardId);
|
|
if (card) {
|
|
setActiveCard(card);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (event: DragOverEvent) => {
|
|
const { active, over } = event;
|
|
|
|
// console.log('---handleDragOver', event);
|
|
if (!over) return;
|
|
|
|
// const activeId = parseInt(active.id as string);
|
|
// const overId = parseInt(over.id as string);
|
|
|
|
const overIdStr = (over.id as string).split('_')[1];
|
|
const overId = parseInt(overIdStr, 10);
|
|
const activeIdStr = (active.id as string).split('_')[1];
|
|
const activeId = parseInt(activeIdStr, 10);
|
|
if (activeId === overId) return;
|
|
|
|
// Find active card and its current list
|
|
if (!board) return;
|
|
|
|
const activeList = board.lists.find((list) => list.cards.some((card) => card.id === activeId));
|
|
|
|
// If we're hovering over a card in same list, do nothing
|
|
if (activeList) {
|
|
const overCard = activeList.cards.find((card) => card.id === overId);
|
|
if (overCard) return;
|
|
}
|
|
};
|
|
|
|
const handleDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
setActiveCard(null);
|
|
setActiveList(null);
|
|
|
|
if (!over || !board) return;
|
|
|
|
const [activeType, activeIdStr] = (active.id as string).split('_');
|
|
const [overType, overIdStr] = (over.id as string).split('_');
|
|
const activeId = parseInt(activeIdStr, 10);
|
|
const overId = parseInt(overIdStr, 10);
|
|
|
|
if (active.id === over.id) return;
|
|
|
|
// Handle column reordering
|
|
if (activeType === 'COLUMN') {
|
|
// todo find over column id,
|
|
|
|
let overListIndex = -1;
|
|
const activeList = board.lists.find((l) => l.id === activeId);
|
|
if (overType === 'CARD') {
|
|
overListIndex = board.lists.findIndex((l) => {
|
|
const foundIndex = l.cards.findIndex((card) => card.id === overId);
|
|
return foundIndex >= 0;
|
|
});
|
|
} else if (overType === 'LIST') {
|
|
overListIndex = board.lists.findIndex((l) => l.id === overId);
|
|
}
|
|
|
|
// console.log('-------active.id', active.id)
|
|
// console.log('-------overType.id', overType)
|
|
// console.log('-------overListIndex', overListIndex)
|
|
|
|
const activeListIndex = board.lists.findIndex((l) => l.id === activeId);
|
|
// overListIndex = board.lists.findIndex((l) => l.id === overId);
|
|
|
|
if (activeListIndex === -1 || overListIndex === -1 || !activeList) return;
|
|
|
|
// Calculate new positions for all lists
|
|
const reorderedLists = [...board.lists];
|
|
const [movedList] = reorderedLists.splice(activeListIndex, 1);
|
|
reorderedLists.splice(overListIndex, 0, movedList);
|
|
|
|
await updateList(activeList.id, { name: activeList.name, pos: overListIndex });
|
|
|
|
// // Update all list positions
|
|
// for (let i = 0; i < reorderedLists.length; i++) {
|
|
// const list = reorderedLists[i];
|
|
// if (list.pos !== i) {
|
|
// await updateList(list.id, { name: list.name, pos: i });
|
|
// }
|
|
// }
|
|
|
|
return;
|
|
}
|
|
|
|
// Handle card reordering (existing logic)
|
|
// Find active card
|
|
let activeCard: CardType | undefined;
|
|
let activeList: (typeof board.lists)[0] | undefined;
|
|
|
|
for (const list of board.lists) {
|
|
const card = list.cards.find((c) => c.id === activeId);
|
|
if (card) {
|
|
activeCard = card;
|
|
activeList = list;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!activeCard || !activeList) return;
|
|
|
|
// Check if we're dropping on a list or a card
|
|
if (overType.toLowerCase() === 'list') {
|
|
const overList = board.lists.find((list) => list.id === overId);
|
|
// Dropping on a list - append to end
|
|
|
|
if (!overList || overList.id === activeList.id) return; // Same list, do nothing
|
|
|
|
await moveCard(activeCard, activeList.id, overList.id, overList.cards.length);
|
|
return;
|
|
}
|
|
|
|
// Dropping on a card - find which list it belongs to
|
|
let overCard: CardType | undefined;
|
|
let overListContainingCard: (typeof board.lists)[0] | undefined;
|
|
|
|
for (const list of board.lists) {
|
|
const card = list.cards.find((c) => c.id === overId);
|
|
if (card) {
|
|
overCard = card;
|
|
overListContainingCard = list;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!overCard || !overListContainingCard) return;
|
|
|
|
// Calculate new position
|
|
const overCardIndex = overListContainingCard.cards.findIndex((c) => c.id === overId);
|
|
|
|
await moveCard(activeCard, activeList.id, overListContainingCard.id, overCardIndex);
|
|
};
|
|
|
|
const handleOpenCardModal = (card: CardType) => {
|
|
openModal((props) => <CardPreviewModal card={card as any} onClose={props.onClose} />);
|
|
};
|
|
|
|
const handleAddList = () => {
|
|
openModal((props) => (
|
|
<CreateListModal
|
|
{...props}
|
|
onCreate={async (name) => {
|
|
await createList(name, board ? board.lists.length : 0);
|
|
fetchBoard(); // Refresh board data
|
|
}}
|
|
/>
|
|
));
|
|
};
|
|
|
|
const handleEditList = async (listId: number, name: string) => {
|
|
const list = board?.lists.find((l) => l.id === listId);
|
|
if (list) {
|
|
await updateList(listId, { name, pos: list.pos });
|
|
}
|
|
};
|
|
|
|
const handleDeleteList = async (listId: number) => {
|
|
await deleteList(listId);
|
|
};
|
|
|
|
const handleAddCard =
|
|
(listId: number) => async (data: { name: string; description?: string }) => {
|
|
await createCard(listId, {
|
|
name: data.name,
|
|
description: data.description,
|
|
pos: board ? board.lists.find((list) => list.id === listId)?.cards.length || 0 : 0,
|
|
});
|
|
fetchBoard(); // Refresh board data
|
|
};
|
|
|
|
if (!board) {
|
|
return <div className="text-white">Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<Link to="/boards" className="text-gray-400 hover:text-white transition-colors text-sm">
|
|
← Back to Boards
|
|
</Link>
|
|
<h1 className="text-3xl font-bold text-white mt-2">{board.name}</h1>
|
|
{board.description && <p className="text-gray-400 mt-1">{board.description}</p>}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Link
|
|
to={`/boards/${id}/edit`}
|
|
className="bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
|
|
>
|
|
Edit Board
|
|
</Link>
|
|
<button
|
|
onClick={handleAddList}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
|
|
>
|
|
+ Add List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragStart={handleDragStart}
|
|
onDragOver={handleDragOver}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<SortableContext
|
|
items={board.lists.map((list) => `COLUMN_${list.id}`)}
|
|
strategy={horizontalListSortingStrategy}
|
|
>
|
|
<div className="flex gap-4 overflow-x-auto pb-4">
|
|
{board.lists.map((list) => (
|
|
<SortableKanbanColumn
|
|
key={list.id}
|
|
list={list}
|
|
cards={list.cards}
|
|
onOpenCardModal={handleOpenCardModal}
|
|
onCardCreate={handleAddCard(list.id)}
|
|
onListEdit={(name) => handleEditList(list.id, name)}
|
|
onListDelete={() => handleDeleteList(list.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
|
|
<DragOverlay>
|
|
{activeCard ? (
|
|
<div className="bg-gray-700 rounded-lg p-4 cursor-grabbing border border-gray-600 shadow-lg opacity-80">
|
|
<h3 className="text-white font-medium">{activeCard.name}</h3>
|
|
</div>
|
|
) : activeList ? (
|
|
<div className="bg-gray-800 rounded-lg p-4 cursor-grabbing border border-gray-700 shadow-lg opacity-80 min-w-[300px] max-w-[300px]">
|
|
<h2 className="text-white font-bold text-lg">{activeList.name}</h2>
|
|
<span className="bg-gray-600 text-gray-300 text-xs px-2 py-1 rounded-full inline-block mt-2">
|
|
{activeList.cards.length} cards
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
</DragOverlay>
|
|
</DndContext>
|
|
</div>
|
|
);
|
|
}
|