- 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>

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>
+    <div className="header-content-container">
-      <ProductionAlert
+      <div className="inner-container">
-        record={{
+        <ProductionAlert
-          id: card.id,
+          record={{
-          production_vars: card?.metadata.production_vars,
+            id: card.id,
-          refetch: card?.refetch
+            production_vars: card?.metadata.production_vars,
-        }}
+            refetch: card?.refetch
-        key="alert"
+          }}
-      />
+          key="alert"
-      {metadata?.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+        />
-      {metadata?.iouparent && (
+        {metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
-        <EllipsesToolTip title={t("jobs.labels.iou")}>
+        {metadata?.iouparent && (
-          <BranchesOutlined style={{ color: "orangered" }} />
+          <EllipsesToolTip title={t("jobs.labels.iou")} key="iouparent" className="iouparent">
-        </EllipsesToolTip>
+            <BranchesOutlined className="branches-outlined" />
-      )}
+          </EllipsesToolTip>
-      <span style={{ fontWeight: "bolder" }}>
+        )}
+      </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}` }}>

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]
   );

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;
+    }
+  }
+}

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;

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

@@ -180,8 +180,11 @@ const Lane = ({
           : {}
         : componentProps;
 
-      return orientation === "horizontal" ? (
+      const shouldOverride = orientation !== "horizontal" && (collapsed || !renderedCards.length);
-        <HeightMemoryWrapper maxHeight={maxLaneHeight} setMaxHeight={setMaxLaneHeight}>
+      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]