- Daily checkpoint, speed (grid), and presentation

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

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

@@ -17,7 +17,7 @@ import ProductionBoardFilters from "../production-board-filters/production-board
 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";

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

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

client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
@@ -16,6 +16,24 @@ import ProductionBoardCard from "../../../production-board-kanban-card/productio
 import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
 import SizeMemoryWrapper from "../components/Lane/SizeMemoryWrapper.jsx";
 
+const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
+  <div ref={ref} {...props} style={{ ...style }}>
+    {children}
+  </div>
+));
+
+const ItemComponent = ({ children, maxCardHeight, maxCardWidth, ...props }) => (
+  <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
+    {children}
+  </div>
+);
+
+const ItemWrapper = React.memo(({ children, ...props }) => (
+  <div {...props} className="item-wrapper">
+    {children}
+  </div>
+));
+
 /**
  * Lane is a React component that represents a lane in a Trello-like board.
  * @param id
@@ -57,6 +75,7 @@ const Lane = ({
 }) => {
   const [collapsed, setCollapsed] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
+  const laneRef = useRef(null);
 
   useEffect(() => {
     setIsVisible(false);
@@ -115,15 +134,6 @@ const Lane = ({
     [isProcessing, technician, bodyshop, cardSettings, maxCardHeight, setMaxCardHeight, maxCardWidth, setMaxCardWidth]
   );
 
-  const ItemWrapper = useCallback(
-    ({ children, ...props }) => (
-      <div {...props} className="item-wrapper">
-        {children}
-      </div>
-    ),
-    []
-  );
-
   const renderDroppable = useCallback(
     (provided, renderedCards) => {
       const Component = orientation === "vertical" ? VirtuosoGrid : Virtuoso;
@@ -137,17 +147,10 @@ const Lane = ({
         ...commonProps,
         listClassName: "grid-container",
         itemClassName: "grid-item",
+        customScrollParent: laneRef.current,
         components: {
-          List: forwardRef(({ style, children, ...props }, ref) => (
-            <div ref={ref} {...props} style={{ ...style }}>
-              {children}
-            </div>
-          )),
-          Item: ({ children, ...props }) => (
-            <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
-              {children}
-            </div>
-          )
+          List: ListComponent,
+          Item: ItemComponent
         },
         itemContent: (index, item) => <ItemWrapper>{renderDraggable(index, item)}</ItemWrapper>,
         overscan: { main: 10, reverse: 10 }
@@ -200,7 +203,7 @@ const Lane = ({
         </div>
       );
     },
-    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardHeight, maxCardWidth]
+    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth]
   );
 
   const renderDragContainer = useCallback(
@@ -226,27 +229,15 @@ const Lane = ({
               className={`clone ${snapshot.isDragging ? "is-dragging" : ""}`}
               key={card.id}
             >
-              {/*<SizeMemoryWrapper*/}
-              {/*  maxHeight={maxCardHeight}*/}
-              {/*  setMaxHeight={setMaxCardHeight}*/}
-              {/*  maxWidth={maxCardWidth}*/}
-              {/*  setMaxWidth={setMaxCardWidth}*/}
-              {/*>*/}
               <ProductionBoardCard
                 technician={technician}
                 bodyshop={bodyshop}
                 cardSettings={cardSettings}
                 key={card.id}
                 className="react-trello-card"
-                style={{
-                  minHeight: maxCardHeight,
-                  minWidth: maxCardWidth,
-                  background_color: "red !important"
-                }}
                 card={card}
                 clone={false}
               />
-              {/*</SizeMemoryWrapper>*/}
             </div>
           );
         }}