- Checkpoint (Major Bug Fixed)

Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-07-02 15:34:03 -04:00
parent 7524d06126
commit 975622a31c
4 changed files with 109 additions and 125 deletions
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
@@ -6,7 +6,7 @@ import {
  PauseCircleOutlined
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tooltip } from "antd";
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -26,14 +26,7 @@ import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.c
 */
 const cardColor = (ssbuckets, totalHrs) => {
  const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
-
-  let color = { r: 255, g: 255, b: 255 };
-
-  if (bucket && bucket.color) {
-    color = bucket.color.rgb || bucket.color;
-  }
-
-  return color;
+  return bucket && bucket.color ? bucket.color.rgb || bucket.color : { r: 255, g: 255, b: 255 };
 };

 /**
@@ -56,31 +49,32 @@ const getContrastYIQ = (bgColor) =>
 export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
  const { t } = useTranslation();

-  let employee_body, employee_prep, employee_refinish, employee_csr;
-
-  // Destructure metadata
  const { metadata } = card;

-  if (metadata?.employee_body) {
-    employee_body = bodyshop.employees.find((e) => e.id === metadata.employee_body);
-  }
-  if (metadata?.employee_prep) {
-    employee_prep = bodyshop.employees.find((e) => e.id === metadata.employee_prep);
-  }
-  if (metadata?.employee_refinish) {
-    employee_refinish = bodyshop.employees.find((e) => e.id === metadata.employee_refinish);
-  }
-  if (metadata?.employee_csr) {
-    employee_csr = bodyshop.employees.find((e) => e.id === metadata.employee_csr);
-  }
-  // if (metadata.?employee_csr) {
-  //   employee_csr = bodyshop.employees.find((e) => e.id === metadata.employee_csr);
-  // }
+  const employee_body = useMemo(
+    () => metadata?.employee_body && bodyshop.employees.find((e) => e.id === metadata.employee_body),
+    [metadata?.employee_body, bodyshop.employees]
+  );
+  const employee_prep = useMemo(
+    () => metadata?.employee_prep && bodyshop.employees.find((e) => e.id === metadata.employee_prep),
+    [metadata?.employee_prep, bodyshop.employees]
+  );
+  const employee_refinish = useMemo(
+    () => metadata?.employee_refinish && bodyshop.employees.find((e) => e.id === metadata.employee_refinish),
+    [metadata?.employee_refinish, bodyshop.employees]
+  );
+  const employee_csr = useMemo(
+    () => metadata?.employee_csr && bodyshop.employees.find((e) => e.id === metadata.employee_csr),
+    [metadata?.employee_csr, bodyshop.employees]
+  );

-  const pastDueAlert =
-    !!metadata?.scheduled_completion &&
-    ((dayjs().isSameOrAfter(dayjs(metadata.scheduled_completion), "day") && "production-completion-past") ||
-      (dayjs().add(1, "day").isSame(dayjs(metadata.scheduled_completion), "day") && "production-completion-soon"));
+  const pastDueAlert = useMemo(() => {
+    if (!metadata?.scheduled_completion) return null;
+    const completionDate = dayjs(metadata.scheduled_completion);
+    if (dayjs().isSameOrAfter(completionDate, "day")) return "production-completion-past";
+    if (dayjs().add(1, "day").isSame(completionDate, "day")) return "production-completion-soon";
+    return null;
+  }, [metadata?.scheduled_completion]);

  const totalHrs = useMemo(() => {
    return metadata?.labhrs && metadata?.larhrs
@@ -125,9 +119,9 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
      }
    >
      <Row>
-        {cardSettings && cardSettings.ownr_nm && (
+        {cardSettings?.ownr_nm && (
          <Col span={24}>
-            {cardSettings && cardSettings.compact ? (
+            {cardSettings.compact ? (
              <div className="ellipses">{`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}</div>
            ) : (
              <div className="ellipses">
@@ -136,97 +130,79 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
            )}
          </Col>
        )}
-        {cardSettings && cardSettings.model_info && (
+        {cardSettings?.model_info && (
          <Col span={24}>
-            <div className="ellipses">{`${metadata.v_model_yr || ""} ${
-              metadata.v_make_desc || ""
-            } ${metadata.v_model_desc || ""}`}</div>
+            <div className="ellipses">{`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}</div>
          </Col>
        )}
-
-        {cardSettings && cardSettings.ins_co_nm && metadata.ins_co_nm && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+        {cardSettings?.ins_co_nm && metadata.ins_co_nm && (
+          <Col span={cardSettings.compact ? 24 : 12}>
            <div className="ellipses">{metadata.ins_co_nm || ""}</div>
          </Col>
        )}
-        {cardSettings && cardSettings.clm_no && metadata.clm_no && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+        {cardSettings?.clm_no && metadata.clm_no && (
+          <Col span={cardSettings.compact ? 24 : 12}>
            <div className="ellipses">{metadata.clm_no || ""}</div>
          </Col>
        )}
-
-        {cardSettings && cardSettings.employeeassignments && (
+        {cardSettings?.employeeassignments && (
          <Col span={24}>
            <Row>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
+              <Col span={cardSettings.compact ? 24 : 12}>{`B: ${
                employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""
              } ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
+              <Col span={cardSettings.compact ? 24 : 12}>{`P: ${
                employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""
              }`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
+              <Col span={cardSettings.compact ? 24 : 12}>{`R: ${
                employee_refinish
                  ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}`
                  : ""
              } ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
+              <Col span={cardSettings.compact ? 24 : 12}>{`C: ${
                employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""
              }`}</Col>
            </Row>
          </Col>
        )}
-        {/* {cardSettings && cardSettings.laborhrs && (
-          <Col span={24}>
-            <Row>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
-                metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"
-              } hrs`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
-                metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"
-              } hrs`}</Col>
-            </Row>
-          </Col>
-        )} */}
-        {cardSettings && cardSettings.actual_in && metadata.actual_in && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+        {cardSettings?.actual_in && metadata.actual_in && (
+          <Col span={cardSettings.compact ? 24 : 12}>
            <Space>
              <DownloadOutlined />
              <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
            </Space>
          </Col>
        )}
-        {cardSettings && cardSettings.scheduled_completion && metadata.scheduled_completion && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+        {cardSettings?.scheduled_completion && metadata.scheduled_completion && (
+          <Col span={cardSettings.compact ? 24 : 12}>
            <Space className={pastDueAlert}>
              <CalendarOutlined />
              <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
            </Space>
          </Col>
        )}
-        {cardSettings && cardSettings.ats && metadata.alt_transport && (
+        {cardSettings?.ats && metadata.alt_transport && (
          <Col span={12}>
            <div>{metadata.alt_transport || ""}</div>
          </Col>
        )}
-        {cardSettings && cardSettings.sublets && (
+        {cardSettings?.sublets && (
          <Col span={12}>
            <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
          </Col>
        )}
-        {cardSettings && cardSettings.production_note && (
+        {cardSettings?.production_note && (
          <Col span={24}>
-            {cardSettings && cardSettings.production_note && (
-              <ProductionListColumnProductionNote
-                record={{
-                  production_vars: card?.metadata.production_vars,
-                  id: card?.id,
-                  refetch: card?.refetch
-                }}
-              />
-            )}
+            <ProductionListColumnProductionNote
+              record={{
+                production_vars: card?.metadata.production_vars,
+                id: card?.id,
+                refetch: card?.refetch
+              }}
+            />
          </Col>
        )}
-        {cardSettings && cardSettings.partsstatus && (
+        {cardSettings?.partsstatus && (
          <Col span={24}>
            <JobPartsQueueCount parts={metadata.joblines_status} />
          </Col>
--- a/client/src/components/production-board-kanban/production-board-kanban.utils.js
+++ b/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) => {
--- a/client/src/components/trello-board/controllers/Lane.jsx
+++ b/client/src/components/trello-board/controllers/Lane.jsx
@@ -177,6 +177,7 @@ const Lane = ({

  const Card = React.memo(({ provided, item: card, isDragging }) => {
    const onDeleteCard = () => removeCard(card.id);
+
    return (
      <div
        {...provided.draggableProps}
@@ -209,11 +210,18 @@ const Lane = ({
   * @param item
   * @returns {React.JSX.Element}
   */
-  const renderDraggable = (index, item) => (
-    <Draggable draggableId={item.id} index={index} key={item.id}>
-      {(provided, snapshot) => <Card provided={provided} item={item} isDragging={snapshot.isDragging} />}
-    </Draggable>
-  );
+  const renderDraggable = (index, item) => {
+    if (!item) {
+      console.log("null Item");
+      return null;
+    }
+
+    return (
+      <Draggable draggableId={item.id} index={index} key={item.id}>
+        {(provided, snapshot) => <Card provided={provided} item={item} isDragging={snapshot.isDragging} />}
+      </Draggable>
+    );
+  };

  const renderAddCardLink = useCallback(
    () => editable && !addCardMode && <components.AddCardLink onClick={showEditableCard} laneId={id} />,
@@ -231,44 +239,13 @@ const Lane = ({
      style={{
        display: "flex",
        flex: 1,
-        whiteSpace: "wrap"
+        whiteSpace: "nowrap"
      }}
    >
      {children}
    </div>
  );

-  /**
-   * Components for the grid layout
-   * @type {{Item: (function({children: *, [p: string]: *}): *), List: React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly children?: *, readonly style?: *}> & React.RefAttributes<unknown>>}}
-   */
-  const gridComponents = {
-    List: forwardRef(({ style, children, ...props }, ref) => (
-      <div
-        ref={ref}
-        {...props}
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          ...style
-        }}
-      >
-        {children}
-      </div>
-    )),
-    Item: ({ children, ...props }) => (
-      <div
-        {...props}
-        style={{
-          alignContent: "stretch",
-          boxSizing: "border-box"
-        }}
-      >
-        {children}
-      </div>
-    )
-  };
-
  /**
   * Render the droppable component with the provided cards and the provided props from react-beautiful-dnd
   * @param provided
@@ -291,7 +268,35 @@ const Lane = ({
            scrollerRef: provided.innerRef,
            listClassName: "grid-container",
            itemClassName: "grid-item",
-            components: gridComponents,
+            components: {
+              List: forwardRef(({ style, children, ...props }, ref) => (
+                <div
+                  ref={ref}
+                  {...props}
+                  style={{
+                    display: "flex",
+                    flexWrap: "wrap",
+                    ...style
+                  }}
+                >
+                  {children}
+                </div>
+              )),
+              Item: ({ children, ...props }) => (
+                <div
+                  {...props}
+                  style={{
+                    width: 252, // TODO: THIS IS THE LINE THAT CONTROLS IT ALL
+                    display: "flex",
+                    flex: "none",
+                    alignContent: "stretch",
+                    boxSizing: "border-box"
+                  }}
+                >
+                  {children}
+                </div>
+              )
+            },
            itemContent: (index, item) => <ItemWrapper>{renderDraggable(index, item)}</ItemWrapper>
          }
        : {
@@ -306,16 +311,18 @@ const Lane = ({
          };
    const finalComponentProps = collapsed ? {} : componentProps;
    return (
-      <div
-        {...provided.droppableProps}
-        ref={provided.innerRef}
-        className={allClassNames}
-        style={{ ...provided.droppableProps.style }}
-      >
-        <FinalComponent {...finalComponentProps} />
+      <div>
+        <div
+          {...provided.droppableProps}
+          ref={provided.innerRef}
+          className={allClassNames}
+          style={{ ...provided.droppableProps.style }}
+        >
+          <FinalComponent {...finalComponentProps} />
+          {provided.placeholder}
+        </div>
        {renderAddCardLink()}
        {renderNewCardForm()}
-        {provided.placeholder}
      </div>
    );
  };
--- a/client/src/components/trello-board/styles/Base.js
+++ b/client/src/components/trello-board/styles/Base.js
@@ -101,7 +101,8 @@ export const StyleVertical = styled.div`

  .react-trello-card {
    flex: 0 1 auto;
-    min-width: 120px;
+    width: auto;
+    height: auto;
  }

  .react-trello-board {