- 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/package-lock.json

@@ -42,6 +42,7 @@
         "markerjs2": "^2.32.1",
         "memoize-one": "^6.0.0",
         "normalize-url": "^8.0.1",
+        "object-hash": "^3.0.0",
         "prop-types": "^15.8.1",
         "query-string": "^9.0.0",
         "raf-schd": "^4.0.3",
@@ -13229,6 +13230,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",

client/package.json

@@ -42,6 +42,7 @@
     "markerjs2": "^2.32.1",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.0.1",
+    "object-hash": "^3.0.0",
     "prop-types": "^15.8.1",
     "query-string": "^9.0.0",
     "raf-schd": "^4.0.3",

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { LaneFooter } from "../../styles/Base";
-import { CollapseBtn, ExpandBtn } from "../../styles/Elements";
+import { LaneFooter } from "../styles/Base.js";
+import { CollapseBtn, ExpandBtn } from "../styles/Elements.js";
 
 const LaneFooterComponent = ({ onClick, collapsed }) => (
   <LaneFooter className="react-trello-footer" onClick={onClick}>

client/src/components/production-board-kanban/trello-board/components/index.js

@@ -1,14 +0,0 @@
-import LaneFooter from "./Lane/LaneFooter";
-
-import { BoardWrapper, StyleHorizontal, StyleVertical, ScrollableLane, Section } from "../styles/Base";
-
-const exports = {
-  StyleHorizontal,
-  StyleVertical,
-  BoardWrapper,
-  ScrollableLane,
-  LaneFooter,
-  Section
-};
-
-export default exports;

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

@@ -5,19 +5,20 @@ import { connect } from "react-redux";
 import * as actions from "../../../../redux/trello/trello.actions.js";
 import { Draggable, Droppable } from "../dnd/lib";
 import { Virtuoso, VirtuosoGrid } from "react-virtuoso";
-import HeightPreservingItem from "../components/Lane/HeightPreservingItem.jsx";
+import HeightPreservingItem from "../components/HeightPreservingItem.jsx";
 import { Section } from "../styles/Base.js";
-import LaneFooter from "../components/Lane/LaneFooter.jsx";
+import LaneFooter from "../components/LaneFooter.jsx";
 import { EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../../redux/user/user.selectors.js";
 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";
-import ListComponent from "../components/Lane/ListComponent.jsx";
-import ItemComponent from "../components/Lane/ItemComponent.jsx";
-import ItemWrapper from "../components/Lane/ItemWrapper.jsx";
+import HeightMemoryWrapper from "../components/HeightMemoryWrapper.jsx";
+import SizeMemoryWrapper from "../components/SizeMemoryWrapper.jsx";
+import ListComponent from "../components/ListComponent.jsx";
+import ItemComponent from "../components/ItemComponent.jsx";
+import ItemWrapper from "../components/ItemWrapper.jsx";
+import objectHash from "object-hash";
 
 /**
  * Lane is a React component that represents a lane in a Trello-like board.
@@ -167,22 +168,20 @@ 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);
 
-      // 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
-          itemKey={itemKey}
+          itemKey={objectHash({
+            id,
+            orientation,
+            cardSettings
+          })}
           maxHeight={maxLaneHeight}
           setMaxHeight={setMaxLaneHeight}
-          override={shouldOverride}
+          override={orientation !== "horizontal" && (collapsed || !renderedCards.length)}
         >
           <div
             {...provided.droppableProps}