From 906430add588408bb4fadf4fd6f20c97e65e0b9b Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Mon, 15 Jul 2024 12:06:12 -0400 Subject: [PATCH] - 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 --- client/package-lock.json | 9 ++++++ client/package.json | 1 + .../{Lane => }/HeightMemoryWrapper.jsx | 0 .../{Lane => }/HeightPreservingItem.jsx | 0 .../components/{Lane => }/ItemComponent.jsx | 0 .../components/{Lane => }/ItemWrapper.jsx | 0 .../components/{Lane => }/LaneFooter.jsx | 4 +-- .../components/{Lane => }/ListComponent.jsx | 0 .../{Lane => }/SizeMemoryWrapper.jsx | 0 .../trello-board/components/index.js | 14 --------- .../trello-board/controllers/Lane.jsx | 29 +++++++++---------- 11 files changed, 26 insertions(+), 31 deletions(-) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/HeightMemoryWrapper.jsx (100%) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/HeightPreservingItem.jsx (100%) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/ItemComponent.jsx (100%) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/ItemWrapper.jsx (100%) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/LaneFooter.jsx (69%) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/ListComponent.jsx (100%) rename client/src/components/production-board-kanban/trello-board/components/{Lane => }/SizeMemoryWrapper.jsx (100%) delete mode 100644 client/src/components/production-board-kanban/trello-board/components/index.js diff --git a/client/package-lock.json b/client/package-lock.json index 9d5b7850f..a70ac66c9 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 4384f5ccc..05c8d2be5 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx similarity index 100% rename from client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx rename to client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightPreservingItem.jsx b/client/src/components/production-board-kanban/trello-board/components/HeightPreservingItem.jsx similarity index 100% rename from client/src/components/production-board-kanban/trello-board/components/Lane/HeightPreservingItem.jsx rename to client/src/components/production-board-kanban/trello-board/components/HeightPreservingItem.jsx diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/ItemComponent.jsx b/client/src/components/production-board-kanban/trello-board/components/ItemComponent.jsx similarity index 100% rename from client/src/components/production-board-kanban/trello-board/components/Lane/ItemComponent.jsx rename to client/src/components/production-board-kanban/trello-board/components/ItemComponent.jsx diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/ItemWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/ItemWrapper.jsx similarity index 100% rename from client/src/components/production-board-kanban/trello-board/components/Lane/ItemWrapper.jsx rename to client/src/components/production-board-kanban/trello-board/components/ItemWrapper.jsx diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/LaneFooter.jsx b/client/src/components/production-board-kanban/trello-board/components/LaneFooter.jsx similarity index 69% rename from client/src/components/production-board-kanban/trello-board/components/Lane/LaneFooter.jsx rename to client/src/components/production-board-kanban/trello-board/components/LaneFooter.jsx index 802de2c99..b408b6057 100644 --- a/client/src/components/production-board-kanban/trello-board/components/Lane/LaneFooter.jsx +++ b/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 }) => ( diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/ListComponent.jsx b/client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx similarity index 100% rename from client/src/components/production-board-kanban/trello-board/components/Lane/ListComponent.jsx rename to client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/SizeMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx similarity index 100% rename from client/src/components/production-board-kanban/trello-board/components/Lane/SizeMemoryWrapper.jsx rename to client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx diff --git a/client/src/components/production-board-kanban/trello-board/components/index.js b/client/src/components/production-board-kanban/trello-board/components/index.js deleted file mode 100644 index a797ce9d2..000000000 --- a/client/src/components/production-board-kanban/trello-board/components/index.js +++ /dev/null @@ -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; diff --git a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx index c90000d28..6cabf53fe 100644 --- a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx +++ b/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 (