- Center RO / Justify Alerts

- Prevent Height redraw in Vertical mode - add default setting for model_info - cleanup renderDroppable Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-07-09 16:52:23 -04:00
parent cdf7bcf839
commit 870878d151
5 changed files with 91 additions and 50 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
@@ -68,39 +68,62 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
  const bgColor = useMemo(() => cardColor(bodyshop.ssbuckets, totalHrs), [bodyshop.ssbuckets, totalHrs]);
  const contrastYIQ = useMemo(() => getContrastYIQ(bgColor), [bgColor]);

+  const isBodyEmpty = !(
+    cardSettings?.ownr_nm ||
+    cardSettings?.model_info ||
+    (cardSettings?.ins_co_nm && metadata.ins_co_nm) ||
+    (cardSettings?.clm_no && metadata.clm_no) ||
+    cardSettings?.employeeassignments ||
+    (cardSettings?.actual_in && metadata.actual_in) ||
+    (cardSettings?.scheduled_completion && metadata.scheduled_completion) ||
+    (cardSettings?.ats && metadata.alt_transport) ||
+    cardSettings?.sublets ||
+    cardSettings?.production_note ||
+    cardSettings?.partsstatus
+  );
+
  const headerContent = (
-    <Space>
-      <ProductionAlert
-        record={{
-          id: card.id,
-          production_vars: card?.metadata.production_vars,
-          refetch: card?.refetch
-        }}
-        key="alert"
-      />
-      {metadata?.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
-      {metadata?.iouparent && (
-        <EllipsesToolTip title={t("jobs.labels.iou")}>
-          <BranchesOutlined style={{ color: "orangered" }} />
-        </EllipsesToolTip>
-      )}
-      <span style={{ fontWeight: "bolder" }}>
+    <div className="header-content-container">
+      <div className="inner-container">
+        <ProductionAlert
+          record={{
+            id: card.id,
+            production_vars: card?.metadata.production_vars,
+            refetch: card?.refetch
+          }}
+          key="alert"
+        />
+        {metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
+        {metadata?.iouparent && (
+          <EllipsesToolTip title={t("jobs.labels.iou")} key="iouparent" className="iouparent">
+            <BranchesOutlined className="branches-outlined" />
+          </EllipsesToolTip>
+        )}
+      </div>
+      <span className="tech-container">
        <Link to={technician ? `/tech/joblookup?selected=${card.id}` : `/manage/jobs/${card.id}`}>
          {metadata?.ro_number || t("general.labels.na")}
        </Link>
      </span>
-    </Space>
+      {isBodyEmpty && (
+        <div className="body-empty-container">
+          <Link to={{ search: `?selected=${card.id}` }}>
+            <EyeFilled />
+          </Link>
+        </div>
+      )}
+    </div>
  );

  const bodyContent = (
    <Row>
      {cardSettings?.ownr_nm && (
        <Col span={24}>
-          <EllipsesToolTip title={`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}>
+          <EllipsesToolTip title={<OwnerNameDisplay ownerObject={metadata} />}>
            {cardSettings.compact ? (
              `${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
            ) : (
-              <OwnerNameDisplay ownerObject={card} />
+              <OwnerNameDisplay ownerObject={metadata} />
            )}
          </EllipsesToolTip>
        </Col>
@@ -192,7 +215,7 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
        <Col span={24}>
          <ProductionListColumnProductionNote
            record={{
-              production_vars: card?.metadata.production_vars,
+              production_vars: metadata?.production_vars,
              id: card?.id,
              refetch: card?.refetch
            }}
@@ -207,19 +230,6 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
    </Row>
  );

-  const isBodyEmpty = !(
-    cardSettings?.ownr_nm ||
-    cardSettings?.model_info ||
-    (cardSettings?.ins_co_nm && metadata.ins_co_nm) ||
-    (cardSettings?.clm_no && metadata.clm_no) ||
-    cardSettings?.employeeassignments ||
-    (cardSettings?.actual_in && metadata.actual_in) ||
-    (cardSettings?.scheduled_completion && metadata.scheduled_completion) ||
-    (cardSettings?.ats && metadata.alt_transport) ||
-    cardSettings?.sublets ||
-    cardSettings?.production_note ||
-    cardSettings?.partsstatus
-  );
  return (
    <Card
      className="react-trello-card"
@@ -228,7 +238,7 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
        backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
        color: cardSettings?.cardcolor && contrastYIQ
      }}
-      title={isBodyEmpty ? null : headerContent}
+      title={!isBodyEmpty ? headerContent : null}
      extra={
        !isBodyEmpty && (
          <Link to={{ search: `?selected=${card.id}` }}>
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -209,7 +209,8 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
            employeeassignments: true,
            scheduled_completion: true,
            cardcolor: false,
-            orientation: false
+            orientation: false,
+            model_info: true
          },
    [associationSettings]
  );
--- a/client/src/components/production-board-kanban/production-board-kanban.styles.scss
+++ b/client/src/components/production-board-kanban/production-board-kanban.styles.scss
@@ -38,3 +38,35 @@
    margin-right: 8px; /* Adjust the spacing as needed */
  }
 }
+
+.header-content-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  .body-empty-container {
+    position: absolute;
+    right: 0;
+  }
+  .tech-container {
+    font-weight: bolder;
+    text-align: center;
+    flex: 1;
+    .branches-outlined {
+      color: orangered;
+    }
+  }
+  .inner-container {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    .circle-outline {
+      color: orangered;
+      margin-left: 8px;
+    }
+    .iou-parent {
+      margin-left: 8px;
+    }
+  }
+}
--- a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx
+++ b/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx
@@ -6,10 +6,11 @@ import PropTypes from "prop-types";
 * @param children
 * @param maxHeight
 * @param setMaxHeight
+ * @param override - Override the minHeight style from being set
 * @returns {Element}
 * @constructor
 */
-const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight }) => {
+const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override }) => {
  const ref = useRef(null);

  useEffect(() => {
@@ -33,8 +34,10 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight }) => {
    };
  }, [setMaxHeight]);

+  const style = override ? {} : { minHeight: maxHeight };
+
  return (
-    <div ref={ref} style={{ minHeight: maxHeight }}>
+    <div ref={ref} style={style}>
      {children}
    </div>
  );
@@ -43,7 +46,8 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight }) => {
 HeightMemoryWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  maxHeight: PropTypes.number.isRequired,
-  setMaxHeight: PropTypes.func.isRequired
+  setMaxHeight: PropTypes.func.isRequired,
+  override: PropTypes.bool
 };

 export default HeightMemoryWrapper;
--- a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
+++ b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
@@ -180,8 +180,11 @@ const Lane = ({
          : {}
        : componentProps;

-      return orientation === "horizontal" ? (
-        <HeightMemoryWrapper maxHeight={maxLaneHeight} setMaxHeight={setMaxLaneHeight}>
+      const shouldOverride = orientation !== "horizontal" && (collapsed || !renderedCards.length);
+      const shouldRenderPlaceholder = orientation !== "horizontal" && (collapsed || renderedCards.length === 0);
+
+      return (
+        <HeightMemoryWrapper maxHeight={maxLaneHeight} setMaxHeight={setMaxLaneHeight} override={shouldOverride}>
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
@@ -189,18 +192,9 @@ const Lane = ({
            style={{ ...provided.droppableProps.style }}
          >
            {isVisible && <FinalComponent {...finalComponentProps} />}
+            {shouldRenderPlaceholder && provided.placeholder}
          </div>
        </HeightMemoryWrapper>
-      ) : (
-        <div
-          {...provided.droppableProps}
-          ref={provided.innerRef}
-          className={`react-trello-lane ${collapsed ? "lane-collapsed" : ""}`}
-          style={{ ...provided.droppableProps.style }}
-        >
-          {isVisible && <FinalComponent {...finalComponentProps} />}
-          {(collapsed || renderedCards.length === 0) && provided.placeholder}
-        </div>
      );
    },
    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth]