Refactor production board with new component BOD-71

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { Card, Row, Col } from "antd";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
+
+export default function ProductionBoardCard(card) {
+  console.log("card", card);
+  return (
+    <Card
+      className="react-kanban-card"
+      style={{ margin: ".2rem 0rem" }}
+      actions={
+        <div>
+          <ProductionAlert record={card} />
+        </div>
+      }
+      size="small"
+      title={`${card.ro_number || card.est_number} - ${card.ownr_ln} - ${
+        card.v_model_yr
+      } ${card.v_make_desc.substring(0, 4) || ""} ${card.v_model_desc || ""}`}
+    >
+      <Row>
+        <Col span={12}></Col>
+        <Col span={12}>
+          <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
+        </Col>
+      </Row>
+    </Card>
+  );
+}

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

@@ -1,122 +1,93 @@
 import { useApolloClient } from "@apollo/react-hooks";
-import { Card } from "antd";
-import React from "react";
+import Board, { moveCard } from "@lourenci/react-kanban";
+import "@lourenci/react-kanban/dist/styles.css";
+import { Card, notification } from "antd";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import Board from "react-trello";
 import { createStructuredSelector } from "reselect";
-import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { createBoardData } from "./production-board-kanban.utils.js";
-import _ from "lodash";
+import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
+import { useTranslation } from "react-i18next";
+import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
-export function ProductionBoardKanbanComponent({ loading, data, bodyshop }) {
-  const boardLanes = createBoardData(
-    bodyshop.md_ro_statuses.open_statuses,
-    data
-  );
-  console.log("ProductionBoardKanbanComponent -> boardLanes", boardLanes);
+export function ProductionBoardKanbanComponent({ data, bodyshop }) {
+  const [boardLanes, setBoardLanes] = useState({
+    columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
+  });
+  const { t } = useTranslation();
+  useEffect(() => {
+    setBoardLanes(createBoardData(bodyshop.md_ro_statuses.open_statuses, data));
+  }, [data, setBoardLanes, bodyshop.md_ro_statuses.open_statuses]);
 
   const client = useApolloClient();
 
-  const handleDataChange = async (data) => {
-    console.log("data", data);
-  };
-
-  const handleDragEnd = async (
-    cardId,
-    sourceLaneId,
-    targetLaneId,
-    position,
-    cardDetails
-  ) => {
-    const oldChildCard = boardLanes.lanes
-      .find((l) => l.id === sourceLaneId)
-      .cards.find((card) => card.kanbanparent === cardId); //.id;
-
-    const newChildCard =
-      sourceLaneId !== targetLaneId
-        ? boardLanes.lanes.find((l) => l.id === targetLaneId).cards[position]
-        : null;
-
-    const lastCardInTargetLane = _.last(
-      boardLanes.lanes.find((l) => l.id === targetLaneId).cards
+  const handleDragEnd = async (card, source, destination) => {
+    setBoardLanes(moveCard(boardLanes, source, destination));
+    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 movedCardWillBeLast =
+      destinationColumn.cards.length - destination.toPosition <= 1;
+    const lastCardInDestinationColumn =
+      destinationColumn.cards[destinationColumn.cards.length - 1];
+    const oldChildCard = sourceColumn.cards[source.fromPosition + 1];
+    const newChildCard = movedCardWillBeLast
+      ? null
+      : destinationColumn.cards[destination.toPosition];
+    const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
 
-    await client.mutate({
+    let movedCardNewKanbanParent;
+    if (movedCardWillBeFirst) {
+      console.log("==>New Card is first.");
+      movedCardNewKanbanParent = "-1";
+    } else if (movedCardWillBeLast) {
+      console.log("==>New Card is last.");
+      movedCardNewKanbanParent = lastCardInDestinationColumn.id;
+    } else if (!!newChildCard) {
+      console.log("==>New Card is somewhere in the middle");
+      movedCardNewKanbanParent = newChildCard.kanbanparent;
+    } else {
+      throw new Error("==>!!!!!!Couldn't find a parent.!!!!<==");
+    }
+
+    const newChildCardNewParent = newChildCard ? card.id : null;
+
+    const update = await client.mutate({
       mutation: generate_UPDATE_JOB_KANBAN(
         oldChildCard ? oldChildCard.id : null,
-        oldChildCard ? cardDetails.kanbanparent : null,
-        cardDetails.id,
-        (newChildCard && newChildCard.kanbanparent) ||
-          sourceLaneId !== targetLaneId
-          ? lastCardInTargetLane.id
-          : null,
-        targetLaneId,
+        oldChildCardNewParent,
+        card.id,
+        movedCardNewKanbanParent,
+        destination.toColumnId,
         newChildCard ? newChildCard.id : null,
-        newChildCard ? cardDetails.id : null
+        newChildCardNewParent
       ),
-      //optimisticResponse,
     });
-
-    // const optimisticResponse = {
-    //   updateMovedChild: {
-    //     __typename: "jobs_mutation_response",
-    //     returning: {
-    //       id: cardDetails.id,
-    //       status: targetLaneId,
-    //       kanbanparent: newChildCard.kanbanparent,
-    //       __typename: "jobs",
-    //     },
-    //   },
-    // };
-    // if (oldChildCard) {
-    //   optimisticResponse["updateNewChild"] = {
-    //     __typename: "jobs_mutation_response",
-    //     returning: {
-    //       id: oldChildCard.id,
-    //       kanbanparent: cardDetails.kanbanparent,
-    //       __typename: "jobs",
-    //     },
-    //   };
-    // }
-    // if (newChildCard) {
-    //   optimisticResponse["updateOldChild"] = {
-    //     __typename: "jobs_mutation_response",
-    //     returning: {
-    //       id: newChildCard.id,
-    //       kanbanparent: cardDetails.id,
-    //       __typename: "jobs",
-    //     },
-    //   };
-    // }
-
-    // console.log("optimisticResponse", optimisticResponse);
+    if (update.errors) {
+      notification["error"]({
+        message: t("production.errors.boardupdate", {
+          message: JSON.stringify(update.errors),
+        }),
+      });
+    }
   };
 
-  const kanbanCard = (card) => {
-    return (
-      <Card
-        style={{ margin: ".2rem 0rem" }}
-        size="small"
-        title={card.ro_number}
-      >{`${card.ownr_fn} ${card.ownr_ln}`}</Card>
-    );
-  };
-
-  if (loading) return <LoadingSpinner />;
-
   return (
     <div>
       <Board
-        data={boardLanes}
-        onDataChange={handleDataChange}
-        handleDragEnd={handleDragEnd}
-        components={{ Card: kanbanCard }}
+        children={boardLanes}
+        renderCard={ProductionBoardCard}
+        onCardDragEnd={handleDragEnd}
       />
     </div>
   );

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

@@ -12,25 +12,29 @@ const sortByParentId = (arr) => {
   //   return accumulator;
   // }, []);
 
-  var parentId = null;
+  var parentId = "-1";
   var sortedList = [];
   var byParentsIdsList = _.groupBy(arr, "kanbanparent"); // Create a new array with objects indexed by parentId
+  console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
 
   while (byParentsIdsList[parentId]) {
     sortedList.push(byParentsIdsList[parentId][0]);
     parentId = byParentsIdsList[parentId][0].id;
   }
+
+  if (byParentsIdsList["null"])
+    byParentsIdsList["null"].map((i) => sortedList.push(i));
+    
   return sortedList;
 };
 
 export const createBoardData = (AllStatuses, Jobs) => {
   console.log("==========GENERATING BOARD DATA=============");
   const boardLanes = {
-    lanes: AllStatuses.map((s) => {
+    columns: AllStatuses.map((s) => {
       return {
         id: s,
         title: s,
-        //label: "0",
         cards: [],
       };
     }),
@@ -38,10 +42,29 @@ export const createBoardData = (AllStatuses, Jobs) => {
   const DataGroupedByStatus = _.groupBy(Jobs, (d) => d.status);
 
   Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
-    boardLanes.lanes.find(
+    boardLanes.columns.find(
       (l) => l.id === statusGroupKey
     ).cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
   });
 
   return boardLanes;
 };
+
+// export const updateBoardOnMove = (board, card, source, destination) => {
+//   //Slice from source
+
+//   const sourceCardList = board.columns.find((x) => x.id === source.fromColumnId)
+//     .cards;
+//   sourceCardList.slice(source.fromPosition, 0);
+
+//   //Splice into destination.
+//   const destCardList = board.columns.find(
+//     (x) => x.id === destination.toColumnId
+//   ).cards;
+//   console.log("updateBoardOnMove -> destCardList", destCardList);
+
+//   destCardList.splice(destination.toPosition, 0, card);
+//   console.log("updateBoardOnMove -> destCardList", destCardList);
+//   console.log("board", board);
+//   return board;
+// };