- clear stage.

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";
@@ -37,7 +37,7 @@ const mapDispatchToProps = (dispatch) => ({
     )
 });
 
-export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTrail, associationSettings }) {
+function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTrail, associationSettings }) {
   const [boardLanes, setBoardLanes] = useState({ lanes: [] });
   const [filter, setFilter] = useState({ search: "", employeeId: null });
   const [loading, setLoading] = useState(true);
@@ -45,15 +45,18 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
   const [orientation, setOrientation] = useState("vertical");
 
   const { t } = useTranslation();
+  const client = useApolloClient();
 
   useEffect(() => {
     if (associationSettings) {
-      setLoading(false);
+      setLoading(true);
       setOrientation(associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal");
+      setLoading(false);
     }
   }, [associationSettings]);
 
   useEffect(() => {
+    setIsMoving(true);
     const newBoardData = createBoardData(
       [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
       data,
@@ -75,8 +78,6 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
     setIsMoving(false);
   }, [data, bodyshop.md_ro_statuses, filter]);
 
-  const client = useApolloClient();
-
   const getCardByID = useCallback((data, cardId) => {
     for (const lane of data.lanes) {
       for (const card of lane.cards) {
@@ -213,9 +214,11 @@ export function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insert
     [associationSettings]
   );
 
-  const handleSettingsChange = (newSettings) => {
+  const handleSettingsChange = useCallback((newSettings) => {
+    setLoading(true);
     setOrientation(newSettings.orientation ? "vertical" : "horizontal");
-  };
+    setLoading(false);
+  }, []);
 
   if (loading) {
     return <Skeleton active />;

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -1,25 +1,40 @@
 .react-trello-board {
   padding: 5px;
 }
-.item .is-dragging {
-  box-shadow: 2px 2px grey;
-  rotate: 5deg;
-}
 
 .height-preserving-container:empty {
   min-height: calc(var(--child-height));
   box-sizing: border-box;
 }
 
+.height-preserving-container {
+}
+
 .react-trello-column-header {
   font-weight: bold;
-  background-color: #e3e3e3;
+  cursor: pointer;
-  .icon {
+  background-color: #d0d0d0;
-    margin-right: 5px;
+  border-radius: 5px 5px 0 0;
-  } 
 }
 
+
 .production-alert {
   background: transparent;
   border: none;
 }
+.react-trello-footer {
+  background-color: #d0d0d0;
+  border-radius: 0 0 5px 5px;
+}
+
+.grid-item {
+  margin: 1px; // TODO: (Note) THis is where we set the margin for vertical
+}
+
+.lane-title {
+  vertical-align: middle;
+
+  .icon {
+    margin-right: 8px; /* Adjust the spacing as needed */
+  }
+}

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

@@ -3,7 +3,9 @@ import { LaneFooter } from "../../styles/Base";
 import { CollapseBtn, ExpandBtn } from "../../styles/Elements";
 
 const LaneFooterComponent = ({ onClick, collapsed }) => (
-  <LaneFooter onClick={onClick}>{collapsed ? <ExpandBtn /> : <CollapseBtn />}</LaneFooter>
+  <LaneFooter className="react-trello-footer" onClick={onClick}>
+    {collapsed ? <ExpandBtn /> : <CollapseBtn />}
+  </LaneFooter>
 );
 
 export default LaneFooterComponent;

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 { UnorderedListOutlined } from "@ant-design/icons";
+import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../../redux/user/user.selectors.js";
 import { selectTechnician } from "../../../../redux/tech/tech.selectors.js";
@@ -262,7 +262,10 @@ const Lane = ({
   return (
     <Section key={id} orientation={orientation}>
       <div onDoubleClick={toggleLaneCollapsed} className="react-trello-column-header">
-        <UnorderedListOutlined className="icon" /> {title}
+        <span className="lane-title">
+          {collapsed ? <EyeInvisibleOutlined className="icon" /> : <EyeOutlined className="icon" />}
+          {title}
+        </span>
       </div>
       {renderDragContainer()}
       <LaneFooter onClick={toggleLaneCollapsed} collapsed={collapsed} />

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

@@ -5,12 +5,10 @@ const getBoardWrapperStyles = (props) => {
     return ``;
   }
   if (props.orientation === "horizontal") {
-    // TODO: The white-space: nowrap; would be a good place to offer further customization
     return `
           white-space: nowrap;
     `;
   }
-  return "";
 };
 
 const getSectionStyles = (props) => {
@@ -64,7 +62,6 @@ export const StyleHorizontal = styled.div`
   }
 
   .react-trello-column-header {
-    border-radius: 5px;
     min-height: 15px;
     padding: 4px;
     white-space: nowrap;
@@ -90,7 +87,6 @@ export const StyleHorizontal = styled.div`
 
 export const StyleVertical = styled.div`
   .react-trello-column-header {
-    border-radius: 5px;
     min-height: 15px;
     padding: 5px;
     white-space: nowrap;

package-lock.json

@@ -32,7 +32,7 @@
         "graylog2": "^0.2.1",
         "inline-css": "^4.0.2",
         "intuit-oauth": "^4.1.2",
-        "json-2-csv": "^5.5.1",
+        "json-2-csv": "^5.5.4",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.45",
@@ -40,9 +40,9 @@
         "node-mailjet": "^6.0.5",
         "node-persist": "^4.0.1",
         "nodemailer": "^6.9.14",
-        "phone": "^3.1.48",
+        "phone": "^3.1.49",
         "recursive-diff": "^1.0.9",
-        "rimraf": "^5.0.7",
+        "rimraf": "^6.0.0",
         "soap": "^1.0.4",
         "socket.io": "^4.7.5",
         "ssh2-sftp-client": "^10.0.3",
@@ -3959,9 +3959,9 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.1.1",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -4184,6 +4184,42 @@
         "node": ">= 6"
       }
     },
+    "node_modules/glob": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.0.tgz",
+      "integrity": "sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^4.0.1",
+        "minimatch": "^10.0.0",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
+      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -4593,14 +4629,14 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/jackspeak": {
-      "version": "2.3.6",
+      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.0.1.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "integrity": "sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
       "engines": {
-        "node": ">=14"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -4707,9 +4743,9 @@
       }
     },
     "node_modules/json-2-csv": {
-      "version": "5.5.1",
+      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/json-2-csv/-/json-2-csv-5.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-2-csv/-/json-2-csv-5.5.4.tgz",
-      "integrity": "sha512-KgAtAXTQopRwe90gh8SgjRSxgt9bUWbGAPMo9W0TZLA8SqiQH7khtagFfeEUjG3NBPwJu/+9uX5pMvunKaPvrQ==",
+      "integrity": "sha512-gB24IF5SvZn7QhEh6kp9QwFhRnI3FVEEXAGyq0xtPxqOQ4odYU3PU9pFKRoR1SGABxunQlBP6VFv0c8EnLbsLQ==",
       "dependencies": {
         "deeks": "3.1.0",
         "doc-path": "4.1.1"
@@ -5042,9 +5078,9 @@
       }
     },
     "node_modules/minipass": {
-      "version": "7.0.4",
+      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -5345,6 +5381,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -5394,26 +5435,26 @@
       }
     },
     "node_modules/path-scurry": {
-      "version": "1.10.1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
-      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
       "dependencies": {
-        "lru-cache": "^9.1.1 || ^10.0.0",
+        "lru-cache": "^11.0.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.0",
+      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.0.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "integrity": "sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==",
       "engines": {
-        "node": "14 || >=16.14"
+        "node": "20 || >=22"
       }
     },
     "node_modules/path-to-regexp": {
@@ -5422,9 +5463,9 @@
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
     "node_modules/phone": {
-      "version": "3.1.48",
+      "version": "3.1.49",
-      "resolved": "https://registry.npmjs.org/phone/-/phone-3.1.48.tgz",
+      "resolved": "https://registry.npmjs.org/phone/-/phone-3.1.49.tgz",
-      "integrity": "sha512-/yJHHnRkJUwzsOJFrflKyDonacyun5VvUu1ybTSTJv1+dRItjkRNeSL3m8XHmvhsDX9I4i4gtZPZESMFhuy73Q==",
+      "integrity": "sha512-S+rHWXSQrllK5eQwz0sDbwfxQ2PzennWPgsP/jdpEPH3k7P5IBJZYjvYfU8e/RF5AwKCgOtzbTGTGJcBSLJVVw==",
       "engines": {
         "node": ">=12"
       }
@@ -5721,52 +5762,17 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "5.0.7",
+      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.0.0.tgz",
-      "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==",
+      "integrity": "sha512-u+yqhM92LW+89cxUQK0SRyvXYQmyuKHx0jkx4W7KfwLGLqJnQM5031Uv1trE4gB9XEXBM/s6MxKlfW95IidqaA==",
       "dependencies": {
-        "glob": "^10.3.7"
+        "glob": "^11.0.0"
       },
       "bin": {
         "rimraf": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": ">=14.18"
+        "node": "20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"

package.json

@@ -42,7 +42,7 @@
     "graylog2": "^0.2.1",
     "inline-css": "^4.0.2",
     "intuit-oauth": "^4.1.2",
-    "json-2-csv": "^5.5.1",
+    "json-2-csv": "^5.5.4",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.45",
@@ -50,9 +50,9 @@
     "node-mailjet": "^6.0.5",
     "node-persist": "^4.0.1",
     "nodemailer": "^6.9.14",
-    "phone": "^3.1.48",
+    "phone": "^3.1.49",
     "recursive-diff": "^1.0.9",
-    "rimraf": "^5.0.7",
+    "rimraf": "^6.0.0",
     "soap": "^1.0.4",
     "socket.io": "^4.7.5",
     "ssh2-sftp-client": "^10.0.3",