- 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>