Introduce React-Trello in place of React-Kanban

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

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

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import Board, { moveCard } from "@asseinfo/react-kanban";
+import Board from "../../components/trello-board/index";
 import { Button, Grid, notification, Space, Statistic } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import React, { useEffect, useState } from "react";
@@ -42,9 +42,7 @@ export function ProductionBoardKanbanComponent({
   insertAuditTrail,
   associationSettings
 }) {
-  const [boardLanes, setBoardLanes] = useState({
-    columns: [{ id: "Loading...", title: "Loading...", cards: [] }]
-  });
+  const [boardLanes, setBoardLanes] = useState({ lanes: [] });
 
   const [filter, setFilter] = useState({ search: "", employeeId: null });
 
@@ -58,7 +56,7 @@ export function ProductionBoardKanbanComponent({
       filter
     );
 
-    boardData.columns = boardData.columns.map((d) => {
+    boardData.lanes = boardData.lanes.map((d) => {
       return { ...d, title: `${d.title} (${d.cards.length})` };
     });
     setBoardLanes(boardData);
@@ -67,63 +65,55 @@ export function ProductionBoardKanbanComponent({
 
   const client = useApolloClient();
 
-  const handleDragEnd = async (card, source, destination) => {
+  const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
     logImEXEvent("kanban_drag_end");
 
     setIsMoving(true);
-    setBoardLanes(moveCard(boardLanes, source, destination));
-    const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
-    const sourceColumn = boardLanes.columns.find((x) => x.id === source.fromColumnId);
-    const destinationColumn = boardLanes.columns.find((x) => x.id === destination.toColumnId);
 
-    const movedCardWillBeFirst = destination.toPosition === 0;
+    const sameColumnTransfer = sourceLaneId === targetLaneId;
+    const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId);
+    const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId);
 
-    const movedCardWillBeLast = destinationColumn.cards.length - destination.toPosition < 1;
+    const movedCardWillBeFirst = position === 0;
+    const movedCardWillBeLast = targetLane.cards.length - position < 1;
 
-    const lastCardInDestinationColumn = destinationColumn.cards[destinationColumn.cards.length - 1];
+    const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
 
-    const oldChildCard = sourceColumn.cards[source.fromPosition + 1];
+    const oldChildCard = sourceLane.cards[position + 1];
 
     const newChildCard = movedCardWillBeLast
       ? null
-      : destinationColumn.cards[
-          sameColumnTransfer
-            ? source.fromPosition - destination.toPosition > 0
-              ? destination.toPosition
-              : destination.toPosition + 1
-            : destination.toPosition
-        ];
+      : targetLane.cards[sameColumnTransfer ? (position - position > 0 ? position : position + 1) : position];
 
-    const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
+    const oldChildCardNewParent = oldChildCard ? cardDetails.kanbanparent : null;
 
     let movedCardNewKanbanParent;
     if (movedCardWillBeFirst) {
-      //console.log("==> New Card is first.");
       movedCardNewKanbanParent = "-1";
     } else if (movedCardWillBeLast) {
-      // console.log("==> New Card is last.");
-      movedCardNewKanbanParent = lastCardInDestinationColumn.id;
+      movedCardNewKanbanParent = lastCardInTargetLane.id;
     } else if (!!newChildCard) {
-      // console.log("==> New Card is somewhere in the middle");
       movedCardNewKanbanParent = newChildCard.kanbanparent;
     } else {
       console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
-    const newChildCardNewParent = newChildCard ? card.id : null;
+    const newChildCardNewParent = newChildCard ? cardId : null;
+
     const update = await client.mutate({
       mutation: generate_UPDATE_JOB_KANBAN(
         oldChildCard ? oldChildCard.id : null,
         oldChildCardNewParent,
-        card.id,
+        cardId,
         movedCardNewKanbanParent,
-        destination.toColumnId,
+        targetLaneId,
         newChildCard ? newChildCard.id : null,
         newChildCardNewParent
       )
     });
+
     insertAuditTrail({
-      jobid: card.id,
-      operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
+      jobid: cardId,
+      operation: AuditTrailMapping.jobstatuschange(targetLaneId),
       type: "jobstatuschange"
     });
 
@@ -134,6 +124,8 @@ export function ProductionBoardKanbanComponent({
         })
       });
     }
+
+    setIsMoving(false);
   };
 
   const totalHrs = data
@@ -214,7 +206,6 @@ export function ProductionBoardKanbanComponent({
   return (
     <Container width={width}>
       <IndefiniteLoading loading={isMoving} />
-
       <PageHeader
         title={
           <Space>
@@ -234,18 +225,20 @@ export function ProductionBoardKanbanComponent({
           </Space>
         }
       />
-
       {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
-
       <ProductionListDetailComponent jobs={data} />
       <StickyContainer>
         <Board
-          style={{ height: "100%" }}
-          children={boardLanes}
-          disableCardDrag={isMoving}
-          {...(cardSettings.stickyheader && stickyHeader)}
-          renderCard={(card) => ProductionBoardCard(technician, card, bodyshop, cardSettings)}
-          onCardDragEnd={handleDragEnd}
+          data={boardLanes}
+          draggable
+          canAddLanes
+          handleDragEnd={handleDragEnd}
+          editable
+          style={{ height: "100%", backgroundColor: "transparent" }}
+          renameLane
+          components={{
+            Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings })
+          }}
         />
       </StickyContainer>
     </Container>

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -18,8 +18,8 @@ const sortByParentId = (arr) => {
   //console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
 
   while (byParentsIdsList[parentId]) {
-    sortedList.push(...byParentsIdsList[parentId]); //Spread in the whole list in case several items have the same parents. 
-    parentId = byParentsIdsList[parentId][byParentsIdsList[parentId].length -1].id; //Grab the ID from the last one.
+    sortedList.push(...byParentsIdsList[parentId]); //Spread in the whole list in case several items have the same parents.
+    parentId = byParentsIdsList[parentId][byParentsIdsList[parentId].length - 1].id; //Grab the ID from the last one.
   }
 
   if (byParentsIdsList["null"]) byParentsIdsList["null"].map((i) => sortedList.push(i));
@@ -40,15 +40,13 @@ const sortByParentId = (arr) => {
 
 export const createBoardData = (AllStatuses, Jobs, filter) => {
   const { search, employeeId } = filter;
-  const boardLanes = {
-    columns: AllStatuses.map((s) => {
-      return {
-        id: s,
-        title: s,
-        cards: []
-      };
-    })
-  };
+  const lanes = AllStatuses.map((s) => {
+    return {
+      id: s,
+      title: s,
+      cards: []
+    };
+  });
 
   const filteredJobs =
     (search === "" || !search) && !employeeId
@@ -75,16 +73,25 @@ export const createBoardData = (AllStatuses, Jobs, filter) => {
 
   Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
     try {
-      const needle = boardLanes.columns.find((l) => l.id === statusGroupKey);
-      if (!needle?.cards) return null;
-      needle.cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
+      const lane = lanes.find((l) => l.id === statusGroupKey);
+      if (!lane?.cards) return null;
+      lane.cards = sortByParentId(DataGroupedByStatus[statusGroupKey]).map((job) => {
+        const { id, title, description, due_date, ...metadata } = job;
+        return {
+          id,
+          title,
+          description,
+          label: job.due_date || "",
+          metadata
+        };
+      });
     } catch (error) {
       console.log("Error while creating board card", error);
     }
     return null;
   });
 
-  return boardLanes;
+  return { lanes };
 };
 
 const CheckSearch = (search, job) => {