Merged in feature/IO-2743-Production-Board-GridDND (pull request #1539)

Feature/IO-2743 Production Board GridDND

_reference/productionBoardNotes.md

@@ -0,0 +1,33 @@
+# Production Board Notes:
+
+## General Notes
+
+- You can single click the lane footer to collapse/un-collapse the lane
+- You can double click the lane header to collapse/un-collapse the lane
+- If you need to scroll horizontally, you can hold shift and use the mouse scroll wheel, or press the mouse scroll wheel while scrolling
+
+## Board Settings
+
+#### Layout
+
+- Board Orientation (Vertical or Horizontal) 
+  - This determines the orientation of the card layout on the board.
+  - Horizontal is the default setting, and how the prior board was set up.
+  - Vertical is the new setting and allows lanes to be displayed vertically, with a grid of cards
+- Card Size (Small, Medium, Large)
+  - This determines the size of the cards on the board.
+  - Small is the default setting, and how the prior board was set up.
+  - Medium and Large are new settings and allow for larger cards to be displayed on the board.
+- Compact Cards (Tall or Wide)
+   - Formally called 'Compact'
+   - When on, data is displayed on the card vertically
+   - when turned off, some fields may share horizontal space, tightening the card layout
+- Colored Cards (On or Off)
+  - When on, cards are colored based on the Status color
+- Kiosk Mode (On or Off)
+   - This should be turned on if the shop is using it on a tablet (Ipad)
+
+#### Information
+
+These allow users to turn fields on or off, turning them all off will show the card in the most minimal form
+

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

@@ -210,19 +210,16 @@ const SubletsComponent = ({ metadata, cardSettings }) =>
 const ProductionNoteComponent = ({ metadata, cardSettings, card }) =>
   cardSettings?.production_note && (
     <Col span={24} style={{ margin: "2px 0" }}>
-      {metadata?.production_vars ? (
-        <ProductionListColumnProductionNote
-          record={{
-            production_vars: metadata?.production_vars,
-            id: card?.id,
-            refetch: card?.refetch
-          }}
-        />
-      ) : (
-        <span>&nbsp;</span>
-      )}
+      <ProductionListColumnProductionNote
+        record={{
+          production_vars: metadata?.production_vars,
+          id: card?.id,
+          refetch: card?.refetch
+        }}
+      />
     </Col>
   );
+
 const PartsStatusComponent = ({ metadata, cardSettings }) =>
   cardSettings?.partsstatus && (
     <Col span={24} style={{ textAlign: "center" }}>

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

@@ -149,8 +149,6 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
           )
         });
 
-        // TODO (Note): This is causing the subscription to fire
-
         insertAuditTrail({
           jobid: draggableId,
           operation: AuditTrailMapping.jobstatuschange(targetLane.id),
@@ -259,7 +257,9 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         }
       />
       {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
+
       <ProductionListDetailComponent jobs={data} />
+
       <Board data={boardLanes} onDragEnd={onDragEnd} orientation={orientation} cardSettings={cardSettings} />
     </div>
   );

client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx

@@ -14,6 +14,7 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, item
   const ref = useRef(null);
   const heightMapRef = useRef(new Map());
   const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight);
+  const [devicePixelRatio, setDevicePixelRatio] = useState(window.devicePixelRatio);
 
   useEffect(() => {
     const currentRef = ref.current;
@@ -31,16 +32,30 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, item
     };
 
     const resizeObserver = new ResizeObserver(updateHeight);
+
     if (currentRef?.firstChild) {
       resizeObserver.observe(currentRef.firstChild);
     }
 
+    const resizeHandler = () => {
+      if (Math.abs(window.devicePixelRatio - devicePixelRatio) > 0.1) {
+        // Threshold to detect significant zoom level change
+        heightMapRef.current.clear(); // Clearing the height memory as zoom level has changed significantly
+        setLocalMaxHeight(0); // Reset local max height
+        setDevicePixelRatio(window.devicePixelRatio); // Update the recorded device pixel ratio
+      }
+      updateHeight();
+    };
+
+    window.addEventListener("resize", resizeHandler);
+
     return () => {
       if (currentRef?.firstChild) {
         resizeObserver.unobserve(currentRef.firstChild);
       }
+      window.removeEventListener("resize", resizeHandler);
     };
-  }, [itemKey, setMaxHeight]);
+  }, [itemKey, setMaxHeight, devicePixelRatio]);
 
   useEffect(() => {
     if (itemKey && heightMapRef.current.has(itemKey)) {