- Fix bug where changing the card settings would default the orientation back to horizontal despite showing vertical mode on the toggle.

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

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

@@ -17,7 +17,7 @@ import ProductionBoardFilters from "../production-board-filters/production-board
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
 import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
-import { createBoardData, createFakeBoardData } from "./production-board-kanban.utils.js";
+import { createBoardData } from "./production-board-kanban.utils.js";
 import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
@@ -42,16 +42,14 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
   const [filter, setFilter] = useState({ search: "", employeeId: null });
   const [loading, setLoading] = useState(true);
   const [isMoving, setIsMoving] = useState(false);
+  const [orientation, setOrientation] = useState("vertical");
 
-  const orientation = useMemo(
-    () => (associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal"),
-    [associationSettings]
-  );
   const { t } = useTranslation();
 
   useEffect(() => {
     if (associationSettings) {
       setLoading(false);
+      setOrientation(associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal");
     }
   }, [associationSettings]);
 
@@ -215,6 +213,10 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
     [associationSettings]
   );
 
+  const handleSettingsChange = (newSettings) => {
+    setOrientation(newSettings.orientation ? "vertical" : "horizontal");
+  };
+
   if (loading) {
     return <Skeleton active />;
   }
@@ -237,7 +239,11 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
               <SyncOutlined />
             </Button>
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
-            <ProductionBoardKanbanSettings parentLoading={setLoading} associationSettings={associationSettings} />
+            <ProductionBoardKanbanSettings
+              parentLoading={setLoading}
+              associationSettings={associationSettings}
+              onSettingsChange={handleSettingsChange}
+            />
           </Space>
         }
       />

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

@@ -9,10 +9,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
+  const [orientation, setOrientation] = useState(true); // Default to vertical
+
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
 
   useEffect(() => {
     form.setFieldsValue(associationSettings?.kanban_settings);
+    setOrientation(associationSettings?.kanban_settings?.orientation ?? true);
   }, [form, associationSettings, open]);
 
   const { t } = useTranslation();
@@ -24,7 +27,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     const result = await updateKbSettings({
       variables: {
         id: associationSettings?.id,
-        ks: values
+        ks: { ...values, orientation }
       }
     });
     if (result.errors) {
@@ -45,6 +48,11 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     setHasChanges(true);
   };
 
+  const handleOrientationChange = (checked) => {
+    setOrientation(checked);
+    setHasChanges(true);
+  };
+
   const cardStyle = { minWidth: "50vw", marginTop: 10 };
 
   const renderCardSettings = () => (
@@ -131,8 +139,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
         <Row gutter={[16, 16]}>
           <Col span={4} style={{ display: "flex", alignItems: "center" }}>
             <span style={{ marginRight: "8px" }}>Orientation</span>
-            <Form.Item name="orientation" valuePropName="checked" style={{ marginBottom: 0 }}>
+            <Form.Item valuePropName="checked" style={{ marginBottom: 0 }}>
-              <Switch checkedChildren="Vertical" unCheckedChildren="Horizontal" defaultChecked />
+              <Switch
+                checkedChildren="Vertical"
+                unCheckedChildren="Horizontal"
+                checked={orientation}
+                onChange={handleOrientationChange}
+              />
             </Form.Item>
           </Col>
         </Row>

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -1,5 +1,5 @@
 import { groupBy } from "lodash";
-import fakeData from "./testData/board300.json";
+import fakeData from "./testData/board600.json";
 
 const sortByParentId = (arr) => {
   // return arr.reduce((accumulator, currentValue) => {

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

@@ -124,16 +124,7 @@ const BoardContainer = ({
     },
     [dispatch, onDragEnd]
   );
-  //  id: PropTypes.string.isRequired,
+
-  //   title: PropTypes.node,
-  //   index: PropTypes.number,
-  //   laneSortFunction: PropTypes.func,
-  //   cards: PropTypes.array,
-  //   orientation: PropTypes.string,
-  //   isProcessing: PropTypes.bool,
-  //   cardSettings: PropTypes.object,
-  //   technician: PropTypes.object,
-  //   bodyshop: PropTypes.object
   return (
     <PopoverWrapper>
       <BoardWrapper orientation={orientation}>