Open
Description
I try to create dynamics board and reuseable component in nextJS depend on RestAPI then I have a some problem and question.
- When board empty, I'm recieve "The number of enabled nodes does not match the number of values." in console web dev tools.
- I don't know how to classifie board when move card and drop end. In docs example that so hard to apply for me.
This coding in component
'use client'
import { animations, handleEnd as coreHandleEnd, handleEnd,
parents,
parentValues,
dragValues,
setParentValues,
} from '@formkit/drag-and-drop';
import { useDragAndDrop } from "@formkit/drag-and-drop/react";
import IssueCard from "./IssueCard";
import { useEffect, useRef } from "react";
interface CardBoardProps {
data: any[];
group: string;
target: string;
value: string;
}
export default function CardBoard(params: CardBoardProps) {
const [itemList, items, setItems] = useDragAndDrop<HTMLUListElement, any>( params.data,
{
group: params.group,
plugins: [animations()],
handleEnd: (data) => {
const targetParentValues = parentValues(
data.targetData.parent.el,
data.targetData.parent.data
);
updateCard(data);
coreHandleEnd(data);
},
}
);
useEffect(() => {
if (params.data && params.data.length > 0) {
params.data.sort((a, b) => a.seq - b.seq);
setItems(params.data);
} else {
setItems([]);
}
}, [params.data, setItems]);
const updateCard = async (data: any) => {
console.log("data", data);
const card = data.targetData.node.data.value;
console.log("card", card);
const newIndex = data.targetData.node.data.index;
console.log("newIndex", newIndex);
const parent = data.targetData.parent;
console.log("parent", parent);
console.log("parent.data.getValues()", parent.data.getValues());
const tasksOfParentColumn = parent.data.enabledNodes.length;
console.log("tasksOfParentColumn", tasksOfParentColumn);
};
return (
<ul ref={itemList} className={`${params.target}Board value${params.value} item-list flex flex-col gap-3 bg-white p-4 rounded-lg border border-purple-500`}>
{items.length > 0 ? (
items
.map((item) => (
<IssueCard key={item.id} {...item} />
))
) : (
<div className="flex items-center justify-center bg-white py-10 rounded-lg border border-gray-500 border-dotted min-w-72 max-w-72">
<p className="text-xs font-bold text-gray-500">Drop Here!</p>
</div>
)}
</ul>
);
}
Example use my project
'use client';
import React, { useEffect, useState } from "react";
import CardBoard from "@/components/CardBoard"; // Adjust the path if needed
export default function MyComponent() {
const [ticketData, setTicketData] = useState<any[]>([]);
const [doneData, setDoneData] = useState<any[]>([]);
useEffect(() => {
const fetchTickets = async () => {
try {
const response = await fetch("http://localhost:3001/api/ticket/");
const result = await response.json();
if (Array.isArray(result.data)) {
const openTickets = result.data.filter((ticket: any) => ticket.status.name === 'Open');
const doneTickets = result.data.filter((ticket: any) => ticket.status.name === 'Done');
setTicketData(openTickets);
setDoneData(doneTickets);
}
} catch (error) {
console.error("Error fetching tickets:", error);
}
};
fetchTickets();
}, []);
return (
<div className="board flex h-screen p-4 gap-4">
{/* Open tickets board */}
<CardBoard data={ticketData} target="status" value="Open" group="adminList"/>
{/* Done tickets board */}
<CardBoard data={doneData} target="status" value="Done" group="adminList"/>
</div>
);
}
Metadata
Metadata
Assignees
Labels
No labels