Further updates on production board + AAMVA decoding built into project BOD-75

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

@@ -10,6 +10,7 @@ import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 import { createBoardData } from "./production-board-kanban.utils.js";
+import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -19,10 +20,14 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   const [boardLanes, setBoardLanes] = useState({
     columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
   });
+
+  const [isMoving, setIsMoving] = useState(false);
+
   const { t } = useTranslation();
   useEffect(() => {
     setBoardLanes(createBoardData(bodyshop.md_ro_statuses.open_statuses, data));
-  }, [data, setBoardLanes, bodyshop.md_ro_statuses.open_statuses]);
+    setIsMoving(false);
+  }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses.open_statuses]);
 
   const findById = (id) => {
     return id;
@@ -32,10 +37,9 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   const client = useApolloClient();
 
   const handleDragEnd = async (card, source, destination) => {
+    setIsMoving(true);
     setBoardLanes(moveCard(boardLanes, source, destination));
-
     const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
-
     const sourceColumn = boardLanes.columns.find(
       (x) => x.id === source.fromColumnId
     );
@@ -67,16 +71,16 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
 
     let movedCardNewKanbanParent;
     if (movedCardWillBeFirst) {
-      console.log("==>New Card is first.");
+      console.log("==> New Card is first.");
       movedCardNewKanbanParent = "-1";
     } else if (movedCardWillBeLast) {
-      console.log("==>New Card is last.");
+      console.log("==> New Card is last.");
       movedCardNewKanbanParent = lastCardInDestinationColumn.id;
     } else if (!!newChildCard) {
-      console.log("==>New Card is somewhere in the middle");
+      console.log("==> New Card is somewhere in the middle");
       movedCardNewKanbanParent = newChildCard.kanbanparent;
     } else {
-      throw new Error("==>!!!!!!Couldn't find a parent.!!!!<==");
+      throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
     const newChildCardNewParent = newChildCard ? card.id : null;
     const update = await client.mutate({
@@ -99,10 +103,15 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     }
   };
 
+  console.log("ismMoving", isMoving);
+
   return (
     <div>
+      <IndefiniteLoading loading={isMoving} />
+      <div>{isMoving}</div>
       <Board
         children={boardLanes}
+        disableCardDrag={isMoving}
         renderCard={ProductionBoardCard}
         onCardDragEnd={handleDragEnd}
       />