- Working Configurable card sizes for both Horizontal and Vertical!

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,6 +1,7 @@
 import { BoardContainer } from "../index";
 import { useMemo } from "react";
 import { StyleHorizontal, StyleVertical } from "../styles/Base.js";
+import { cardSizesVertical } from "../styles/Globals.js";
 
 const Board = ({ id, className, orientation, cardSettings, ...additionalProps }) => {
   const OrientationStyle = useMemo(
@@ -8,9 +9,22 @@ const Board = ({ id, className, orientation, cardSettings, ...additionalProps })
     [orientation]
   );
 
+  const gridItemWidth = useMemo(() => {
+    switch (cardSettings?.cardSize) {
+      case "small":
+        return cardSizesVertical.small;
+      case "large":
+        return cardSizesVertical.large;
+      case "medium":
+        return cardSizesVertical.medium;
+      default:
+        return cardSizesVertical.small;
+    }
+  }, [cardSettings]);
+
   return (
     <>
-      <OrientationStyle>
+      <OrientationStyle {...{ gridItemWidth }}>
         <BoardContainer
           orientation={orientation}
           cardSettings={cardSettings}

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

@@ -8,7 +8,7 @@ import { Virtuoso, VirtuosoGrid } from "react-virtuoso";
 import HeightPreservingItem from "../components/Lane/HeightPreservingItem.jsx";
 import { Section } from "../styles/Base.js";
 import LaneFooter from "../components/Lane/LaneFooter.jsx";
-import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
+import { EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../../redux/user/user.selectors.js";
 import { selectTechnician } from "../../../../redux/tech/tech.selectors.js";
@@ -254,7 +254,7 @@ const Lane = ({
   );
 
   return (
-    <Section key={id} orientation={orientation}>
+    <Section key={id} orientation={orientation} cardSettings={cardSettings}>
       <div onDoubleClick={toggleLaneCollapsed} className="react-trello-column-header">
         <span className="lane-title">
           {collapsed ? <EyeInvisibleOutlined className="icon" /> : <EyeOutlined className="icon" />}

client/src/components/production-board-kanban/trello-board/styles/Base.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { cardSizesHorizontal } from "./Globals.js";
 
 const getBoardWrapperStyles = (props) => {
   if (props.orientation === "vertical") {
@@ -12,13 +13,26 @@ const getBoardWrapperStyles = (props) => {
 };
 
 const getSectionStyles = (props) => {
-  // TODO The min width here is where we will set the size settings for horizontal lanes (card visibility)
-  if (props.orientation === "horizontal") {
+  const { orientation, cardSettings } = props;
+
+  const getMinWidth = () => {
+    switch (cardSettings?.cardSize ?? "small") {
+      case "small":
+        return cardSizesHorizontal.small;
+      case "large":
+        return cardSizesHorizontal.large;
+      case "medium":
+        return cardSizesHorizontal.medium;
+      default:
+        return cardSizesHorizontal.small;
+    }
+  };
+
+  if (orientation === "horizontal") {
     return `
       display: inline-flex;
       flex-direction: column;
-      // overflow-y: none;      
-      min-width: 8%;
+      min-width: ${getMinWidth()};
     `;
   }
   return `
@@ -117,7 +131,7 @@ export const StyleVertical = styled.div`
 
   .grid-item {
     display: flex;
-    width: 150px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
+    width: ${(props) => props.gridItemWidth}; /* Use props to set width */
     align-content: stretch;
     box-sizing: border-box;
   }
@@ -132,6 +146,7 @@ export const StyleVertical = styled.div`
 
   .ant-card-body {
   }
+
   .size-memory-wrapper {
     display: flex; /* This makes it a flex container */
     flex-direction: column; /* Aligns children vertically */
@@ -141,6 +156,7 @@ export const StyleVertical = styled.div`
     flex-grow: 1; /* Allows the card to expand to fill the available space */
     width: 100%; /* Ensures the card stretches to fill the width of its parent */
   }
+
   .react-trello-lane .lane-collapsed {
     min-height: 5px;
   }

client/src/components/production-board-kanban/trello-board/styles/Globals.js

@@ -0,0 +1,19 @@
+/**
+ * @description Card Size mappings for Card Size User Settings in Horizontal Mode
+ * @type {{small: string, large: string, medium: string}}
+ */
+export const cardSizesHorizontal = {
+  small: "150px",
+  medium: "225px",
+  large: "350px"
+};
+
+/**
+ * @description Card Size mappings for Card Size User Settings in Vertical Mode
+ * @type {{small: string, large: string, medium: string}}
+ */
+export const cardSizesVertical = {
+  small: "150px",
+  medium: "225px",
+  large: "350px"
+};