Fixed disappearing cards on production board.

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

@@ -2,25 +2,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";
+import { EyeFilled } from "@ant-design/icons";
+import { Link } from "react-router-dom";
 
 export default function ProductionBoardCard(card) {
-  console.log("card", card);
+  // console.log("card", card);
   return (
     <Card
-      className="react-kanban-card"
+      className='react-kanban-card'
       style={{ margin: ".2rem 0rem" }}
-      actions={
-        <div>
-          <ProductionAlert record={card} />
-        </div>
-      }
-      size="small"
+      actions={[
+        <ProductionAlert record={card} key='alert' />,
+        <Link to={`/manage/jobs/${card.id}`}>
+          <EyeFilled key='setting' />
+        </Link>,
+      ]}
+      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 || ""}`}
-    >
+      } ${card.v_make_desc.substring(0, 4) || ""} ${card.v_model_desc || ""}`}>
       <Row>
-        <Col span={12}></Col>
+        <Col span={12}>
+          <div>{`B: ${card.labhrs || "?"}`}</div>
+          <div>{`R: ${card.labhrs || "?"}`}</div>
+        </Col>
         <Col span={12}>
           <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
         </Col>

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

@@ -1,16 +1,15 @@
 import { useApolloClient } from "@apollo/react-hooks";
 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 { notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { createBoardData } from "./production-board-kanban.utils.js";
 import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
-import { useTranslation } from "react-i18next";
+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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,25 +24,45 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     setBoardLanes(createBoardData(bodyshop.md_ro_statuses.open_statuses, data));
   }, [data, setBoardLanes, bodyshop.md_ro_statuses.open_statuses]);
 
+  const findById = (id) => {
+    return id;
+    //return (data && data.find((x) => x.id === id).ro_number) || null;
+  };
+
   const client = useApolloClient();
 
   const handleDragEnd = async (card, source, destination) => {
     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 movedCardWillBeLast =
-      destinationColumn.cards.length - destination.toPosition <= 1;
+      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];
+      : destinationColumn.cards[
+          sameColumnTransfer
+            ? source.fromPosition - destination.toPosition > 0
+              ? destination.toPosition
+              : destination.toPosition + 1
+            : destination.toPosition
+        ];
+
     const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
 
     let movedCardNewKanbanParent;
@@ -59,9 +78,7 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     } 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,

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

@@ -15,7 +15,7 @@ const sortByParentId = (arr) => {
   var parentId = "-1";
   var sortedList = [];
   var byParentsIdsList = _.groupBy(arr, "kanbanparent"); // Create a new array with objects indexed by parentId
-  console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
+  //console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
 
   while (byParentsIdsList[parentId]) {
     sortedList.push(byParentsIdsList[parentId][0]);
@@ -24,7 +24,7 @@ const sortByParentId = (arr) => {
 
   if (byParentsIdsList["null"])
     byParentsIdsList["null"].map((i) => sortedList.push(i));
-    
+
   return sortedList;
 };
 
@@ -45,6 +45,7 @@ export const createBoardData = (AllStatuses, Jobs) => {
     boardLanes.columns.find(
       (l) => l.id === statusGroupKey
     ).cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
+    return null;
   });
 
   return boardLanes;