- Checkpoint

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

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

@@ -19,8 +19,10 @@ import ProductionBoardCard from "../production-board-kanban-card/production-boar
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
 import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
-import { createBoardData } from "./production-board-kanban.utils.js";
+import { createBoardData, createFakeBoardData } from "./production-board-kanban.utils.js";
 import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
+import cloneDeep from "lodash/cloneDeep";
+import isEqual from "lodash/isEqual";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -63,25 +65,27 @@ export function ProductionBoardKanbanComponent({
   }, [associationSettings]);
 
   useEffect(() => {
-    const boardData = createBoardData(
+    const newBoardData = createFakeBoardData(
       [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
       data,
       filter
     );
 
     // Build Board Lanes Data
-    boardData.lanes = boardData.lanes.map((lane) => {
-      return {
-        ...lane,
-        title: `${lane.title} (${lane.cards.length})`
-      };
+    newBoardData.lanes = newBoardData.lanes.map((lane) => ({
+      ...lane,
+      title: `${lane.title} (${lane.cards.length})`
+    }));
+
+    setBoardLanes((prevBoardLanes) => {
+      const deepClonedData = cloneDeep(newBoardData);
+      if (!isEqual(prevBoardLanes, deepClonedData)) {
+        return deepClonedData;
+      }
+      return prevBoardLanes;
     });
-
-    setBoardLanes(boardData);
     setIsMoving(false);
-  }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses, filter]);
-
-  //
+  }, [data, bodyshop.md_ro_statuses, filter]);
 
   const client = useApolloClient();
 
@@ -102,13 +106,11 @@ export function ProductionBoardKanbanComponent({
     return null;
   };
 
-  // TODO, refine and use action
-  const onDragEnd = async ({ type, source, destination, draggableId, ...args }) => {
-    //   //cardId, sourceLaneId, targetLaneId, position, cardDetails
+  const onDragEnd = async ({ type, source, destination, draggableId }) => {
     logImEXEvent("kanban_drag_end");
 
-    // Early Gate
-    if (!type || type !== "lane" || !source || !destination) return;
+    // Early gate, also if the card is already moving bail
+    if (!type || type !== "lane" || !source || !destination || isMoving) return;
 
     setIsMoving(true);
 
@@ -120,13 +122,11 @@ export function ProductionBoardKanbanComponent({
 
     const movedCardWillBeFirst = destination.index === 0;
     const movedCardWillBeLast = destination.index > targetLane.cards.length - 1;
-    const movedCardIsFirstNewCard = movedCardWillBeFirst && movedCardWillBeLast;
 
     const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
 
     const oldChildCard = sourceLane.cards[destination.index + 1];
 
-    //
     const newChildCard = movedCardWillBeLast
       ? null
       : targetLane.cards[
@@ -138,7 +138,7 @@ export function ProductionBoardKanbanComponent({
         ];
 
     const oldChildCardNewParent = oldChildCard ? sourceCard.metadata.kanbanparent : null;
-    //
+
     let movedCardNewKanbanParent;
     if (movedCardWillBeFirst) {
       movedCardNewKanbanParent = "-1";
@@ -186,6 +186,7 @@ export function ProductionBoardKanbanComponent({
       setIsMoving(false);
     }
   };
+
   const totalHrs = useMemo(
     () =>
       data

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

@@ -51,7 +51,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
 
   const renderCardSettings = () => (
     <>
-      <Card title={t("settings.sections.layout")} style={cardStyle}>
+      <Card title={t("production.settings.layout")} style={cardStyle}>
         <Row gutter={[16, 16]}>
           <Col span={4}>
             <Form.Item name="compact" valuePropName="checked">
@@ -65,8 +65,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
           </Col>
         </Row>
       </Card>
-      <Card title={t("settings.sections.information")} style={cardStyle}>
+      <Card title={t("production.settings.information")} style={cardStyle}>
         <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="model_info" valuePropName="checked">
+              <Checkbox>{t("production.labels.model_info")}</Checkbox>
+            </Form.Item>
+          </Col>
           <Col span={4}>
             <Form.Item name="ownr_nm" valuePropName="checked">
               <Checkbox>{t("production.labels.ownr_nm")}</Checkbox>
@@ -119,21 +124,12 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
           </Col>
         </Row>
       </Card>
-      <Card title={t("settings.sections.beta")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          <Col span={4}>
-            <Form.Item name="stickyheader" valuePropName="checked">
-              <Checkbox>{t("production.labels.stickyheader")}</Checkbox>
-            </Form.Item>
-          </Col>
-        </Row>
-      </Card>
     </>
   );
 
   const renderBoardSettings = () => (
     <>
-      <Card title={t("settings.sections.layout")} style={cardStyle}>
+      <Card title={t("production.settings.layout")} style={cardStyle}>
         <Row gutter={[16, 16]}>
           <Col span={4} style={{ display: "flex", alignItems: "center" }}>
             <span style={{ marginRight: "8px" }}>Orientation</span>
@@ -167,7 +163,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
 
   const renderLaneSettings = () => (
     <>
-      <Card title={t("settings.sections.layout")} style={cardStyle}>
+      <Card title={t("production.settings.layout")} style={cardStyle}>
         <Row gutter={[16, 16]}>
           {/*<Col span={4}>*/}
           {/*  <Form.Item name="lane_setting_1" valuePropName="checked">*/}
@@ -207,13 +203,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     <Card>
       <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
         <Tabs defaultActiveKey="1">
-          <TabPane tab={t("settings.tabs.card")} key="1">
+          <TabPane tab={t("production.settings.tabs.card")} key="1">
             {renderCardSettings()}
           </TabPane>
-          <TabPane tab={t("settings.tabs.board")} key="2">
+          <TabPane tab={t("production.settings.tabs.board")} key="2">
             {renderBoardSettings()}
           </TabPane>
-          <TabPane tab={t("settings.tabs.lane")} key="3">
+          <TabPane tab={t("production.settings.tabs.lane")} key="3">
             {renderLaneSettings()}
           </TabPane>
         </Tabs>
@@ -236,7 +232,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   return (
     <Popover content={overlay} open={open} placement="topRight">
       <Button loading={loading} onClick={() => setOpen(!open)}>
-        {t("settings.buttons.boardSettings")}
+        {t("production.settings.board_settings")}
       </Button>
     </Popover>
   );

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

@@ -1,5 +1,5 @@
 import { groupBy } from "lodash";
-import fakeData from "./testData/board1200.json";
+import fakeData from "./testData/board600.json";
 
 const sortByParentId = (arr) => {
   // return arr.reduce((accumulator, currentValue) => {