- Finish adjusting the Board Settings component.

- Extract some components out of Lane.jsx into their own files
- Fix misc bugs around preserving lane height in Vertical mode
- Add missing non english translation strings

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

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

@@ -4,23 +4,26 @@ 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, onSettingsChange }) {
+export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
-  const [orientation, setOrientation] = useState(true); // Default to vertical
-
+  const [orientation, setOrientation] = useState(true);
+  const [compact, setCompact] = useState(false);
+  const [colored, setColored] = useState(false);
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (associationSettings?.kanban_settings) {
+      const { orientation = true, compact = true, cardcolor = true } = associationSettings.kanban_settings;
       form.setFieldsValue(associationSettings.kanban_settings);
-      setOrientation(associationSettings.kanban_settings?.orientation ?? true);
+      setOrientation(orientation);
+      setCompact(compact);
+      setColored(cardcolor);
     }
-  }, [form, associationSettings, open]);
-
-  const { t } = useTranslation();
+  }, [form, associationSettings]);
 
   const handleFinish = async (values) => {
     setLoading(true);
@@ -29,9 +32,10 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     const result = await updateKbSettings({
       variables: {
         id: associationSettings?.id,
-        ks: { ...values, orientation }
+        ks: { ...values, orientation, compact, cardcolor: colored }
       }
     });
+
     if (result.errors) {
       notification.open({
         type: "error",
@@ -40,40 +44,56 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
         })
       });
     }
+
     setOpen(false);
     setLoading(false);
     parentLoading(false);
     setHasChanges(false);
   };
 
-  const handleValuesChange = () => {
-    setHasChanges(true);
-  };
+  const handleValuesChange = () => setHasChanges(true);
 
-  const handleOrientationChange = (checked) => {
-    setOrientation(checked);
+  const handleCheckedChanges = (checked, callback) => {
+    callback(checked);
     setHasChanges(true);
   };
 
   const cardStyle = { minWidth: "50vw", marginTop: 10 };
 
+  const renderSwitchItem = (name, checked, callback, labelKey, checkedChildrenKey, unCheckedChildrenKey) => (
+    <Col span={4} key={name}>
+      <Form.Item name={name} valuePropName="checked" label={t(labelKey)}>
+        <Switch
+          checkedChildren={t(checkedChildrenKey)}
+          unCheckedChildren={t(unCheckedChildrenKey)}
+          checked={checked}
+          onChange={(checked) => handleCheckedChanges(checked, callback)}
+        />
+      </Form.Item>
+    </Col>
+  );
+
+  const renderCheckboxItem = (name, labelKey) => (
+    <Col span={4} key={name}>
+      <Form.Item name={name} valuePropName="checked">
+        <Checkbox>{t(labelKey)}</Checkbox>
+      </Form.Item>
+    </Col>
+  );
+
   const renderCardSettings = () => (
     <>
       <Card title={t("production.settings.layout")} style={cardStyle}>
         <Row gutter={[16, 16]}>
+          {renderSwitchItem(
+            "orientation",
+            orientation,
+            setOrientation,
+            "production.labels.orientation",
+            "production.labels.vertical",
+            "production.labels.horizontal"
+          )}
           <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>
@@ -82,77 +102,39 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
               </Radio.Group>
             </Form.Item>
           </Col>
-        </Row>
-        <Row gutter={[16, 16]}>
-          <Col span={4}>
-            <Form.Item name="compact" valuePropName="checked">
-              <Checkbox>{t("production.labels.compact")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="cardcolor" valuePropName="checked">
-              <Checkbox>{t("production.labels.cardcolor")}</Checkbox>
-            </Form.Item>
-          </Col>
+          {renderSwitchItem(
+            "compact",
+            compact,
+            setCompact,
+            "production.labels.compact",
+            "production.labels.tall",
+            "production.labels.wide"
+          )}
+          {renderSwitchItem(
+            "cardcolor",
+            colored,
+            setColored,
+            "production.labels.cardcolor",
+            "production.labels.on",
+            "production.labels.off"
+          )}
         </Row>
       </Card>
       <Card title={t("production.settings.information")} style={cardStyle}>
         <Row gutter={[16, 16]}>
-          <Col span={4}>
-            <Form.Item name="model_info" valuePropName="checked">
-              <Checkbox>{t("production.labels.model_info")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="ownr_nm" valuePropName="checked">
-              <Checkbox>{t("production.labels.ownr_nm")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="clm_no" valuePropName="checked">
-              <Checkbox>{t("production.labels.clm_no")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="ins_co_nm" valuePropName="checked">
-              <Checkbox>{t("production.labels.ins_co_nm")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="employeeassignments" valuePropName="checked">
-              <Checkbox>{t("production.labels.employeeassignments")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="actual_in" valuePropName="checked">
-              <Checkbox>{t("production.labels.actual_in")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="scheduled_completion" valuePropName="checked">
-              <Checkbox>{t("production.labels.scheduled_completion")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="ats" valuePropName="checked">
-              <Checkbox>{t("production.labels.ats")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="production_note" valuePropName="checked">
-              <Checkbox>{t("production.labels.production_note")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="sublets" valuePropName="checked">
-              <Checkbox>{t("production.labels.sublets")}</Checkbox>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="partsstatus" valuePropName="checked">
-              <Checkbox>{t("production.labels.partsstatus")}</Checkbox>
-            </Form.Item>
-          </Col>
+          {[
+            "model_info",
+            "ownr_nm",
+            "clm_no",
+            "ins_co_nm",
+            "employeeassignments",
+            "actual_in",
+            "scheduled_completion",
+            "ats",
+            "production_note",
+            "sublets",
+            "partsstatus"
+          ].map((item) => renderCheckboxItem(item, `production.labels.${item}`))}
         </Row>
       </Card>
     </>
@@ -172,7 +154,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
             </Button>
           </Col>
           <Col span={8}>
-            <Button block onClick={() => form.submit()} loading={loading} type="primary" disabled={!hasChanges}>
+            <Button block onClick={form.submit} loading={loading} type="primary" disabled={!hasChanges}>
               {t("general.actions.save")}
             </Button>
           </Col>

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ItemComponent = ({ children, maxCardHeight, maxCardWidth, ...props }) => (
+  <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
+    {children}
+  </div>
+);
+
+export default ItemComponent;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ItemWrapper = React.memo(({ children, ...props }) => (
+  <div {...props} className="item-wrapper">
+    {children}
+  </div>
+));
+
+export default ItemWrapper;

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

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+
+const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
+  <div ref={ref} {...props} style={{ ...style }}>
+    {children}
+  </div>
+));
+
+export default ListComponent;

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
@@ -15,24 +15,9 @@ import { selectTechnician } from "../../../../redux/tech/tech.selectors.js";
 import ProductionBoardCard from "../../../production-board-kanban-card/production-board-kanban-card.component.jsx";
 import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
 import SizeMemoryWrapper from "../components/Lane/SizeMemoryWrapper.jsx";
-
-const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
-  <div ref={ref} {...props} style={{ ...style }}>
-    {children}
-  </div>
-));
-
-const ItemComponent = ({ children, maxCardHeight, maxCardWidth, ...props }) => (
-  <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
-    {children}
-  </div>
-);
-
-const ItemWrapper = React.memo(({ children, ...props }) => (
-  <div {...props} className="item-wrapper">
-    {children}
-  </div>
-));
+import ListComponent from "../components/Lane/ListComponent.jsx";
+import ItemComponent from "../components/Lane/ItemComponent.jsx";
+import ItemWrapper from "../components/Lane/ItemWrapper.jsx";
 
 /**
  * Lane is a React component that represents a lane in a Trello-like board.
@@ -170,6 +155,8 @@ const Lane = ({
 
       const componentProps = orientation === "vertical" ? verticalProps : horizontalProps;
 
+      // If the lane is collapsed, we want to render a div instead of the virtualized list, and we want to set the height to the max height of the lane so that
+      // the lane doesn't shrink when collapsed (in horizontal mode)
       const finalComponentProps = collapsed
         ? orientation === "horizontal"
           ? {
@@ -180,19 +167,19 @@ const Lane = ({
           : {}
         : componentProps;
 
+      // If the lane is horizontal and collapsed, we want to override the minHeight style so that the lane doesn't shrink to 0 height
       const shouldOverride = orientation !== "horizontal" && (collapsed || !renderedCards.length);
+
+      // If the lane is horizontal and collapsed, we want to render a placeholder so that the lane doesn't shrink to 0 height and grows when
+      // a card is dragged over it
       const shouldRenderPlaceholder = orientation !== "horizontal" && (collapsed || renderedCards.length === 0);
 
-      const hasKey =
-        orientation === "vertical"
-          ? {
-              key: id
-            }
-          : {};
+      // Super magic key to maintain max height on the lane when cards are added / removed / resized / etc
+      const itemKey = `${id}-${orientation}-${cardSettings?.compact}-${renderedCards.length}-${cardSettings?.cardSize}`;
 
       return (
         <HeightMemoryWrapper
-          {...hasKey}
+          itemKey={itemKey}
           maxHeight={maxLaneHeight}
           setMaxHeight={setMaxLaneHeight}
           override={shouldOverride}
@@ -209,7 +196,17 @@ const Lane = ({
         </HeightMemoryWrapper>
       );
     },
-    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth, id]
+    [
+      orientation,
+      collapsed,
+      isVisible,
+      renderDraggable,
+      maxLaneHeight,
+      setMaxLaneHeight,
+      maxCardWidth,
+      id,
+      cardSettings
+    ]
   );
 
   const renderDragContainer = useCallback(

client/src/translations/en_us/common.json

@@ -2759,7 +2759,13 @@
 				"settings": "Error saving board settings: {{error}}"
 			},
 			"labels": {
-        "orientation": "Orientation",
+        "on": "On",
+        "off": "Off",
+        "wide": "Wide",
+        "tall": "Tall",
+        "vertical": "Vertical",
+        "horizontal": "Horizontal",
+        "orientation": "Board Orientation",
         "card_size": "Card Size",
         "model_info": "Model Info",
 				"actual_in": "Actual In",
@@ -2775,11 +2781,11 @@
 						"qbo_usa": "QBO USA"
 					}
 				},
-				"cardcolor": "Card Colors",
+				"cardcolor": "Colored Cards",
 				"cardsettings": "Card Settings",
 				"clm_no": "Claim Number",
 				"comment": "Comment",
-				"compact": "Compact",
+				"compact": "Compact Cards",
 				"detailpriority": "D/P",
 				"employeeassignments": "Employee Assignments",
 				"employeesearch": "Employee Search",

client/src/translations/es/common.json

@@ -2742,6 +2742,14 @@
 				"settings": ""
 			},
 			"labels": {
+        "on": "",
+        "off": "",
+        "wide": "",
+        "tall": "",
+        "vertical": "",
+        "horizontal": "",
+        "orientation": "",
+        "card_size": "",
         "model_info": "",
         "actual_in": "",
 				"alert": "",