- 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/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" ? (
-        <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]