- clear stage.

Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-07-09 15:57:51 -04:00
parent 8a4fee7aea
commit cdf7bcf839
7 changed files with 119 additions and 94 deletions
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/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 />;
--- a/client/src/components/production-board-kanban/production-board-kanban.styles.scss
+++ b/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;
-  .icon {
-    margin-right: 5px;
-  } 
+  cursor: pointer;
+  background-color: #d0d0d0;
+  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 */
+  }
+}
--- a/client/src/components/production-board-kanban/trello-board/components/Lane/LaneFooter.jsx
+++ b/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;
--- a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
+++ b/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} />
--- a/client/src/components/production-board-kanban/trello-board/styles/Base.js
+++ b/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;
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.0.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/json-2-csv/-/json-2-csv-5.5.1.tgz",
-      "integrity": "sha512-KgAtAXTQopRwe90gh8SgjRSxgt9bUWbGAPMo9W0TZLA8SqiQH7khtagFfeEUjG3NBPwJu/+9uX5pMvunKaPvrQ==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/json-2-csv/-/json-2-csv-5.5.4.tgz",
+      "integrity": "sha512-gB24IF5SvZn7QhEh6kp9QwFhRnI3FVEEXAGyq0xtPxqOQ4odYU3PU9pFKRoR1SGABxunQlBP6VFv0c8EnLbsLQ==",
      "dependencies": {
        "deeks": "3.1.0",
        "doc-path": "4.1.1"
@@ -5042,9 +5078,9 @@
      }
    },
    "node_modules/minipass": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
-      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
      "dependencies": {
-        "lru-cache": "^9.1.1 || ^10.0.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "lru-cache": "^11.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",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.0.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/phone/-/phone-3.1.48.tgz",
-      "integrity": "sha512-/yJHHnRkJUwzsOJFrflKyDonacyun5VvUu1ybTSTJv1+dRItjkRNeSL3m8XHmvhsDX9I4i4gtZPZESMFhuy73Q==",
+      "version": "3.1.49",
+      "resolved": "https://registry.npmjs.org/phone/-/phone-3.1.49.tgz",
+      "integrity": "sha512-S+rHWXSQrllK5eQwz0sDbwfxQ2PzennWPgsP/jdpEPH3k7P5IBJZYjvYfU8e/RF5AwKCgOtzbTGTGJcBSLJVVw==",
      "engines": {
        "node": ">=12"
      }
@@ -5721,52 +5762,17 @@
      }
    },
    "node_modules/rimraf": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
-      "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.0.0.tgz",
+      "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"
-      },
-      "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"
+        "node": "20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
--- a/package.json
+++ b/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",