Index is incorrect when a card is moved to another column

[stevegnr]

Hello everyone,

First, thank you for this tool, it seems very easy and efficient.

I'm new with it so maybe it is a config problem, but I couldn't find a solution online for my problem :

I am working on a Kanban projet.

Visually, the kanban works perfectly : I can sort my cards in their column, or move a card to another column.

But, I need to save these changes in my database. So I need to get the new index value, and the id of the column where the card arrived.

Here is my code :

import { CardInterface } from "@/Interfaces/Card";
import { ColumnInterface } from "@/Interfaces/Column";
import React from "react";
import styled from "styled-components";
import Card from "./Card";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";
import { animations, swap } from "@formkit/drag-and-drop";

type Props = {
  column: ColumnInterface;
};
const Column = ({ column }: Props) => {
  const cards = column.kanbanCards;
  cards.sort((a, b) => a.index - b.index);
  const [parent, dragCards] = useDragAndDrop<HTMLUListElement, CardInterface>(
    cards,
    {
      group: "kanban",
      plugins: [animations()],
      handleEnd(data) {
        updateCard(data);
      },
    }
  );

  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;
    console.log("tasksOfParentColumn", tasksOfParentColumn);
  };

  return (
    <StyledColumn>
      <ColumnTitle>{column.name}</ColumnTitle>
      <Cards ref={parent}>
        {dragCards.map((card) => (
          <Card
            key={card.id}
            card={card}
          />
        ))}
      </Cards>
    </StyledColumn>
  );
};

export default Column;

const StyledColumn = styled.div`
  width: 20vw;
  height: 70vh;
  border: 1px solid black;
  border-radius: 10px;
`;

const ColumnTitle = styled.h2`
  color: white;
  background-color: lightblue;
  height: 10%;
  margin: 0;
  border-radius: 10px 10px 0 0;
  text-align: center;
`;

const Cards = styled.ul`
  padding: 0;
`;

As you can see in the updateCard function, the handleEnd function gives the index in the data object. This index is always correct when a card is moved within the same column (order changed), but when the card is moved to another column, the index is almost always incorrect. Then, if the card is moved in the same column, the index is correct. It seems it is incorrect at the time the card is changed from a column to another.

I can get the index information within the "tasksOfParentColumn", as it sends the list of cards within the column, but it seems unecessarily complicated.

Thanks in advance for your help !