- Progress Check

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

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

@@ -52,7 +52,6 @@ export function ProductionBoardKanbanComponent({
 
   const [filter, setFilter] = useState({ search: "", employeeId: null });
   const [loading, setLoading] = useState(true);
-
   const [isMoving, setIsMoving] = useState(false);
 
   const orientation = associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal";
@@ -65,42 +64,104 @@ export function ProductionBoardKanbanComponent({
   }, [associationSettings]);
 
   useEffect(() => {
-    const boardData = createFakeBoardData(
+    const boardData = createBoardData(
       [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
       data,
       filter
     );
 
-    boardData.lanes = boardData.lanes.map((d) => {
-      return { ...d, title: `${d.title} (${d.cards.length})` };
+    let idx = 0;
+    const newCardIndexMappings = {};
+
+    // Build Board Lanes Data
+    boardData.lanes = boardData.lanes.map((lane, laneIndex) => {
+      const cardsWithIndex = lane.cards.map((card, cardIndex) => {
+        const cardWithIndex = { ...card, idx, lane: lane.id, cardIndex, laneIndex };
+        newCardIndexMappings[idx] = { laneIndex, cardIndex };
+
+        idx++;
+        return cardWithIndex;
+      });
+
+      return {
+        ...lane,
+        cards: cardsWithIndex,
+        title: `${lane.title} (${lane.cards.length})`,
+        laneIndex
+      };
     });
+
     setBoardLanes(boardData);
     setIsMoving(false);
   }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses, filter]);
 
+  //
+
   const client = useApolloClient();
 
-  const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
+  const getCardById = (data, cardId) => {
+    for (const lane of data.lanes) {
+      for (const card of lane.cards) {
+        if (card.id === cardId) {
+          return card;
+        }
+      }
+    }
+    return null;
+  };
+
+  const onDragEnd = async ({ draggableId, type, source, reason, mode, destination, combine }) => {
+    //cardId, sourceLaneId, targetLaneId, position, cardDetails
     logImEXEvent("kanban_drag_end");
+
+    // Early Gate
+    if (!type || type !== "lane" || !source || !destination) return;
+
     setIsMoving(true);
 
-    const sameColumnTransfer = sourceLaneId === targetLaneId;
+    const sameColumnTransfer = source.droppableId === destination.droppableId;
+    const targetLane = boardLanes.lanes[Number.parseInt(destination.droppableId)];
+    const sourceLane = boardLanes.lanes[Number.parseInt(source.droppableId)];
+    const sourceCard = getCardById(boardLanes, draggableId);
 
-    const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId);
-    const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId);
+    console.dir({
+      sameColumnTransfer,
+      targetLane,
+      sourceLane,
+      sourceCard,
+      destination
+    });
 
-    const movedCardWillBeFirst = position === 0;
-    const movedCardWillBeLast = targetLane.cards.length - position < 1;
+    const movedCardWillBeFirst = destination.index === 0;
+    const movedCardWillBeLast = destination.index > targetLane.cards.length - 1;
+    const movedCardIsFirstNewCard = movedCardWillBeFirst && movedCardWillBeLast;
+
+    console.log("movedCardWillBeFirst, movedCardWillBeLast");
+    console.dir({ movedCardWillBeFirst, movedCardWillBeLast, movedCardIsFirstNewCard });
 
     const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
 
-    const oldChildCard = sourceLane.cards[position + 1];
+    const oldChildCard = sourceLane.cards[destination.index + 1];
 
+    //
     const newChildCard = movedCardWillBeLast
       ? null
-      : targetLane.cards[sameColumnTransfer ? (position - position > 0 ? position : position + 1) : position];
+      : targetLane.cards[
+          sameColumnTransfer
+            ? destination.index - destination.index > 0
+              ? destination.index
+              : destination.index + 1
+            : destination.index
+        ];
 
-    const oldChildCardNewParent = oldChildCard ? cardDetails.kanbanparent : null;
+    const oldChildCardNewParent = oldChildCard ? sourceCard.metadata.kanbanparent : null;
+
+    console.dir({
+      lastCardInTargetLane,
+      oldChildCard,
+      newChildCard,
+      oldChildCardNewParent
+    });
 
     let movedCardNewKanbanParent;
     if (movedCardWillBeFirst) {
@@ -108,28 +169,27 @@ export function ProductionBoardKanbanComponent({
     } else if (movedCardWillBeLast) {
       movedCardNewKanbanParent = lastCardInTargetLane.id;
     } else if (!!newChildCard) {
-      movedCardNewKanbanParent = newChildCard.kanbanparent;
+      movedCardNewKanbanParent = newChildCard.metadata.kanbanparent;
     } else {
       console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
-    const newChildCardNewParent = newChildCard ? cardId : null;
-
+    const newChildCardNewParent = newChildCard ? draggableId : null;
     try {
       const update = await client.mutate({
         mutation: generate_UPDATE_JOB_KANBAN(
           oldChildCard ? oldChildCard.id : null,
           oldChildCardNewParent,
-          cardId,
+          draggableId,
           movedCardNewKanbanParent,
-          targetLaneId,
+          targetLane.id,
           newChildCard ? newChildCard.id : null,
           newChildCardNewParent
         )
       });
 
       insertAuditTrail({
-        jobid: cardId,
-        operation: AuditTrailMapping.jobstatuschange(targetLaneId),
+        jobid: draggableId,
+        operation: AuditTrailMapping.jobstatuschange(targetLane.id),
         type: "jobstatuschange"
       });
 
@@ -151,11 +211,6 @@ export function ProductionBoardKanbanComponent({
     }
   };
 
-  const onDragEnd = ({ draggableId, type, source, reason, mode, destination, combine }) => {
-    if (!type || type !== "lane") return;
-    console.log("onDragEnd", { draggableId, type, source, reason, mode, destination, combine });
-  };
-
   const totalHrs = data
     .reduce(
       (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),

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

@@ -1,9 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-
-// import Container from "../dnd/Container";
-// import Draggable from "../dnd/Draggable";
-
 import { DragDropContext, Droppable } from "../dnd/lib";
 
 import PropTypes from "prop-types";
@@ -238,8 +234,6 @@ const BoardContainer = ({
     ]
   );
 
-  let cardIndex = 0;
-
   return (
     <components.BoardWrapper style={style} orientation={orientation} draggable={false}>
       <PopoverWrapper>
@@ -269,7 +263,7 @@ const BoardContainer = ({
                 editable={editable && !lane.disallowAddingCard}
                 {...laneOtherProps}
                 {...passThroughProps}
-                cards={lane.cards.map((card) => ({ ...card, idx: cardIndex++ }))}
+                cards={lane.cards}
               />
             );
           })}

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

@@ -112,7 +112,8 @@ function Lane({
     return orientation === "vertical"
       ? {
           display: "flex",
-          flexWrap: "wrap"
+          flexWrap: "wrap",
+          minHeight: "100px"
         }
       : {};
   }, [orientation]);
@@ -296,7 +297,7 @@ function Lane({
     return (
       <Droppable
         direction={orientation === "horizontal" ? "vertical" : "grid"}
-        droppableId={`lane-${index}`}
+        droppableId={`${index}`}
         type="lane"
         // dragClass={cardDragClass}
         // dropClass={cardDropClass}

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

@@ -78,7 +78,7 @@ export const StyleVertical = styled.div`
     text-align: left;
   }
 
-  .smooth-dnd-container {
+  .react-trello-lane {
     // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
     min-height: 50px; // Not needed, just for extra landing space
   }