Hello, I'm trying to make shifting schedule simple website for my internship project, but I stuck on nested Dnd using react beautiful dnd. I'm stuck for create dnd function for team member (person name in picture). can some one help me to create a dnd function for my nested dnd. I hope I can drag person to other team (ex : person on team A go to team B)
my object:
export const data = {
["MorningShift"]: {
shiftCode: "101",
shift: "Morning Code",
teamInCharge: [
{
teamName: "Team-A",
teamId: "1001",
teamMember: [
{
name: "Johan Pribadi",
personId: "10110",
position: "Leader",
},
{
name: "Adit Kurnia",
personId: "10111",
position: "Front-End",
},
{
name: "Jason Krismawan",
personId: "10112",
position: "Back-End",
},
{
name: "Lauren Kivia",
personId: "10113",
position: "Quality",
},
],
},
{
teamName: "Team-B",
teamId: "1002",
teamMember: [
{
name: "Kurnia Lia",
personId: "10120",
position: "Leader",
},
{
name: "Prikila Lianita",
personId: "10121",
position: "Front-End",
},
{
name: "Prika Riyadi",
personId: "10122",
position: "Back-End",
},
{
name: "Evan Kevin",
personId: "10123",
position: "Quality",
},
],
},
],
},
["AfternoonShift"]: {
shiftCode: "102",
shift: "Afternoon Code",
teamInCharge: [
{
teamName: "Team-C",
teamId: "1003",
teamMember: [
{
name: "Jovan Natanael",
personId: "10230",
position: "Leader",
},
{
name: "Ervan Jovian",
personId: "10231",
position: "Front-End",
},
{
name: "Dionisius Darrel",
personId: "10232",
position: "Back-End",
},
{
name: "Michael Setiawan",
personId: "10233",
position: "Quality",
},
],
},
],
},
};
and my function :
export function DragEnd(res, data, setData) {
if (!res.destination) return;
console.log(res);
if (res.type !== "team") {
if (res.source.droppableId === res.destination.droppableId) {
const column = data[res.source.droppableId];
const copiedItem = [...column.teamInCharge];
const [removed] = copiedItem.splice(res.source.index, 1);
copiedItem.splice(res.destination.index, 0, removed);
setData({
...data,
[res.source.droppableId]: {
...column,
teamInCharge: copiedItem,
},
});
} else if (res.source.droppableId !== res.destination.droppableId) {
const getDataSource = data[res.source.droppableId];
const getDataDestination = data[res.destination.droppableId];
const sourceItem = [...getDataSource.teamInCharge];
const destinationItem = [...getDataDestination.teamInCharge];
const [slicedItem] = sourceItem.splice(res.source.index, 1);
destinationItem.splice(res.destination.index, 0, slicedItem);
setData({
...data,
[res.source.droppableId]: {
...getDataSource,
teamInCharge: sourceItem,
},
[res.destination.droppableId]: {
...getDataDestination,
teamInCharge: destinationItem,
},
});
}
} else if (res.type === "team") {
if (res.source.droppableId === res.destination.droppableId) {
const childData = data["MorningShift"];
console.log(childData);
}
}
}
res.type === "team" is my droppableId type for team person. i've make function for drag and drop team. But for person i'cant create a right function
my full code can be seen on : https://codesandbox.io/s/silly-cherry-r7y33m?file=/src/function.jsx
Thankyou guys!
regards
