- Working Configurable card sizes for both Horizontal and Vertical!

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

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

@@ -210,6 +210,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
             scheduled_completion: true,
             cardcolor: false,
             orientation: false,
+            cardSize: "small",
             model_info: true
           },
     [associationSettings]

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

@@ -1,10 +1,10 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Tabs, Switch } from "antd";
+import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Radio, Input, Switch } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
 
-export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
+export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading, onSettingsChange }) {
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -14,8 +14,10 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
 
   useEffect(() => {
-    form.setFieldsValue(associationSettings?.kanban_settings);
-    setOrientation(associationSettings?.kanban_settings?.orientation ?? true);
+    if (associationSettings?.kanban_settings) {
+      form.setFieldsValue(associationSettings.kanban_settings);
+      setOrientation(associationSettings.kanban_settings?.orientation ?? true);
+    }
   }, [form, associationSettings, open]);
 
   const { t } = useTranslation();
@@ -58,6 +60,29 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   const renderCardSettings = () => (
     <>
       <Card title={t("production.settings.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item valuePropName="checked" label={t("production.labels.orientation")}>
+              <Switch
+                checkedChildren="Vertical"
+                unCheckedChildren="Horizontal"
+                checked={orientation}
+                onChange={handleOrientationChange}
+              />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <Form.Item name="cardSize" label={t("production.labels.card_size")}>
+              <Radio.Group>
+                <Radio.Button value="compact">{t("production.options.small")}</Radio.Button>
+                <Radio.Button value="medium">{t("production.options.medium")}</Radio.Button>
+                <Radio.Button value="large">{t("production.options.large")}</Radio.Button>
+              </Radio.Group>
+            </Form.Item>
+          </Col>
+        </Row>
         <Row gutter={[16, 16]}>
           <Col span={4}>
             <Form.Item name="compact" valuePropName="checked">
@@ -133,56 +158,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     </>
   );
 
-  const renderBoardSettings = () => (
-    <>
-      <Card title={t("production.settings.layout")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          <Col span={4} style={{ display: "flex", alignItems: "center" }}>
-            <span style={{ marginRight: "8px" }}>Orientation</span>
-            <Form.Item valuePropName="checked" style={{ marginBottom: 0 }}>
-              <Switch
-                checkedChildren="Vertical"
-                unCheckedChildren="Horizontal"
-                checked={orientation}
-                onChange={handleOrientationChange}
-              />
-            </Form.Item>
-          </Col>
-        </Row>
-      </Card>
-    </>
-  );
-
-  const renderLaneSettings = () => (
-    <>
-      <Card title={t("production.settings.layout")} style={cardStyle}>
-        <Row gutter={[16, 16]}></Row>
-      </Card>
-    </>
-  );
-
-  const items = [
-    {
-      key: "1",
-      label: t("production.settings.tabs.card"),
-      children: renderCardSettings()
-    },
-    {
-      key: "2",
-      label: t("production.settings.tabs.board"),
-      children: renderBoardSettings()
-    },
-    {
-      key: "3",
-      label: t("production.settings.tabs.lane"),
-      children: renderLaneSettings()
-    }
-  ];
-
   const overlay = (
     <Card>
       <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
-        <Tabs defaultActiveKey="1" items={items} />
+        {renderCardSettings()}
+        <Form.Item name="orientation" style={{ display: "none" }}>
+          <Input type="hidden" value={orientation} />
+        </Form.Item>
         <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
           <Col span={8}>
             <Button block onClick={() => setOpen(false)}>

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

client/src/translations/en_us/common.json

@@ -2722,6 +2722,13 @@
 			}
 		},
 		"production": {
+      "options": {
+        "small": "Small",
+        "medium": "Medium",
+        "large": "Large",
+        "vertical": "Vertical",
+        "horizontal": "Horizontal"
+      },
       "settings": {
         "layout":  "Layout",
         "information": "Information",
@@ -2752,6 +2759,8 @@
 				"settings": "Error saving board settings: {{error}}"
 			},
 			"labels": {
+        "orientation": "Orientation",
+        "card_size": "Card Size",
         "model_info": "Model Info",
 				"actual_in": "Actual In",
 				"alert": "Alert",
@@ -2770,7 +2779,7 @@
 				"cardsettings": "Card Settings",
 				"clm_no": "Claim Number",
 				"comment": "Comment",
-				"compact": "Compact Cards",
+				"compact": "Compact",
 				"detailpriority": "D/P",
 				"employeeassignments": "Employee Assignments",
 				"employeesearch": "Employee Search",