Nested Drag and Drop using React Beautiful Dnd

Viewed 12

enter image description here

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

0 Answers
Related