- LaneDrag / DragEnd, fixed to support Virtual Lists.

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -19,7 +19,7 @@ import ProductionBoardCard from "../production-board-kanban-card/production-boar
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
 import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
-import { createFakeBoardData, createBoardData } from "./production-board-kanban.utils.js";
+import { createBoardData } from "./production-board-kanban.utils.js";
 import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
@@ -69,21 +69,11 @@ export function ProductionBoardKanbanComponent({
       filter
     );
 
-    let idx = 0;
-
     // Build Board Lanes Data
-    boardData.lanes = boardData.lanes.map((lane, laneIndex) => {
+    boardData.lanes = boardData.lanes.map((lane) => {
-      const cardsWithIndex = lane.cards.map((card, cardIndex) => {
-        const cardWithIndex = { ...card, idx, lane: lane.id, cardIndex, laneIndex };
-        idx++;
-        return cardWithIndex;
-      });
-
       return {
         ...lane,
-        cards: cardsWithIndex,
+        title: `${lane.title} (${lane.cards.length})`
-        title: `${lane.title} (${lane.cards.length})`,
-        laneIndex
       };
     });
 

client/src/components/trello-board/controllers/BoardContainer.jsx

@@ -95,7 +95,8 @@ const BoardContainer = ({
                 fromLaneId: event.fromLaneId,
                 toLaneId: event.toLaneId,
                 cardId: event.cardId,
-                index: event.index
+                index: event.index,
+                event
               })
             );
           case "UPDATE_CARDS":
@@ -239,8 +240,8 @@ const BoardContainer = ({
     if (!type || type !== "lane" || !source || !destination) return;
     dispatch(
       actions.moveCardAcrossLanes({
-        fromLaneId: Number.parseInt(source.droppableId),
+        fromLaneId: source.droppableId,
-        toLaneId: Number.parseInt(destination.droppableId),
+        toLaneId: destination.droppableId,
         cardId: draggableId,
         index: destination.index
       })

client/src/components/trello-board/helpers/LaneHelper.js

@@ -53,7 +53,6 @@ const LaneHelper = {
     return updateLanes(state, newLanes);
   },
 
-  // TODO: Unverified, needs to be hoisted.
   removeCardFromLane: (state, { laneId, cardId }) => {
     // Clone the state to avoid mutation
     const newLanes = cloneDeep(state.lanes);
@@ -88,50 +87,58 @@ const LaneHelper = {
     });
   },
 
-  // TODO: This has been updated to new DND Lib, verified.
+  /**
-  moveCardAcrossLanes: (state, ...args) => {
+   * Move a card from one lane to another
-    return state;
+   * @param state
-    // console.dir({
+   * @param fromLaneId
-    //   state,
+   * @param toLaneId
-    //   args: { fromLaneId, toLaneId, cardId, index }
+   * @param cardId
-    // });
+   * @param index
-    // // Clone the state to avoid mutation
+   * @returns {unknown}
-    // const newLanes = cloneDeep(state.lanes);
+   */
-    //
+  moveCardAcrossLanes: (state, { fromLaneId, toLaneId, cardId, index }) => {
-    // // Find the source and destination lanes using the lane indices
+    // Clone the state to avoid mutation
-    // const fromLane = newLanes[fromLaneId];
+    const newLanes = cloneDeep(state.lanes);
-    // const toLane = newLanes[toLaneId];
-    //
-    // // Find the card in the source lane
-    // const cardIndex = fromLane.cards.findIndex((card) => card.id === cardId);
-    // if (cardIndex === -1) {
-    //   throw new Error("Card not found in the source lane");
-    // }
-    //
-    // // Remove the card from the source lane
-    // const [card] = fromLane.cards.splice(cardIndex, 1);
-    //
-    // // Insert the card into the destination lane at the specified index
-    // toLane.cards.splice(index, 0, card);
-    //
-    // let idx = 0;
-    //
-    // // Update the lane and card indexes for all lanes
-    // newLanes.forEach((lane, laneIndex) => {
-    //   lane.cards.forEach((card, cardIndex) => {
-    //     card.idx = idx;
-    //     card.laneIndex = laneIndex;
-    //     card.cardIndex = cardIndex;
-    //     card.laneId = lane.id;
-    //     idx++;
-    //   });
-    // });
-    //
-    // return update(state, {
-    //   lanes: { $set: newLanes }
-    // });
-  },
 
+    console.dir({ fromLaneId, toLaneId, cardId, index });
+
+    // Find the source and destination lanes using the lane IDs
+    const fromLane = newLanes.find((lane) => lane.id === fromLaneId);
+    const toLane = newLanes.find((lane) => lane.id === toLaneId);
+
+    if (!fromLane || !toLane) {
+      throw new Error("Source or destination lane not found");
+    }
+
+    // Find the card in the source lane
+    const cardIndex = fromLane.cards.findIndex((card) => card.id === cardId);
+    if (cardIndex === -1) {
+      throw new Error("Card not found in the source lane");
+    }
+
+    // Remove the card from the source lane
+    const [card] = fromLane.cards.splice(cardIndex, 1);
+
+    // Insert the card into the destination lane at the specified index
+    toLane.cards.splice(index, 0, card);
+
+    let idx = 0;
+
+    // Update the lane and card indexes for all lanes
+    newLanes.forEach((lane, laneIndex) => {
+      lane.cards.forEach((card, cardIndex) => {
+        card.idx = idx;
+        card.laneIndex = laneIndex;
+        card.cardIndex = cardIndex;
+        card.laneId = lane.id;
+        idx++;
+      });
+    });
+
+    return update(state, {
+      lanes: { $set: newLanes }
+    });
+  },
   updateCardsForLane: (state, { laneId, cards }) => {
     const lanes = state.lanes.map((lane) => (lane.id === laneId ? updateLaneCards(lane, cards) : lane));
     return updateLanes(state, lanes);

client/src/components/trello-board/styles/Base.js

@@ -73,7 +73,6 @@ export const GlobalStyle = createGlobalStyle`
 
 export const StyleHorizontal = styled.div`
   .react-trello-lane {
-    // TODO: This will need to be changed
     min-width: 250px;
     min-height: 25px;
     margin-bottom: 10px;