From 668366e886515e2325e4e23d35df2819b53e722e Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Mon, 15 Jul 2024 13:44:26 -0400 Subject: [PATCH] - Fixed the bug where dragging a item in a 1 item lane in vertical mode and not releasing it in a valid position or the same position, would cause the card the vanish until the lane was refreshed. (One of the three big ones) - Adjusted Small / Medium / Large as per allan Signed-off-by: Dave Richer --- .../controllers/BoardContainer.jsx | 83 +++++++++---------- .../trello-board/controllers/Lane.jsx | 30 ++----- .../trello-board/styles/Globals.js | 8 +- 3 files changed, 52 insertions(+), 69 deletions(-) diff --git a/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx b/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx index 81ce19e2d..e59d92aec 100644 --- a/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx +++ b/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { DragDropContext } from "../dnd/lib"; import PropTypes from "prop-types"; @@ -8,22 +8,20 @@ import { PopoverWrapper } from "react-popopo"; import * as actions from "../../../../redux/trello/trello.actions.js"; import { BoardWrapper } from "../styles/Base.js"; -/** - * BoardContainer is a React component that represents a Trello-like board. - * It uses Redux for state management and provides a variety of props to customize its behavior. - * - * @component - * @param {Object} props - Component props - * @param {Object} props.data - The initial data for the board - * @param {Function} props.onDataChange - Callback function when the data changes - * @param {Function} props.onDragEnd - Callback function when a drag ends - * @param {Function} props.laneSortFunction - Callback function when a drag ends - * @param {string} props.orientation - The orientation of the board ("horizontal" or "vertical") - * @param {Function} props.eventBusHandle - Function to handle events from the event bus - * @param {Object} props.reducerData - The initial data for the Redux reducer - * - * @returns {JSX.Element} A Trello-like board - */ +const useDragMap = () => { + const dragMapRef = useRef(new Map()); + + const setDragTime = (laneId) => { + dragMapRef.current.set(laneId, Date.now()); + }; + + const getLastDragTime = (laneId) => { + return dragMapRef.current.get(laneId); + }; + + return { setDragTime, getLastDragTime }; +}; + const BoardContainer = ({ data, onDataChange = () => {}, @@ -42,6 +40,7 @@ const BoardContainer = ({ const dispatch = useDispatch(); const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {})); + const { setDragTime, getLastDragTime } = useDragMap(); const wireEventBus = useCallback(() => { const eventBus = { @@ -71,7 +70,6 @@ const BoardContainer = ({ event }) ); - default: return; } @@ -95,12 +93,12 @@ const BoardContainer = ({ const onDragStart = useCallback(() => { setIsDragging(true); - }, [setIsDragging]); + }, []); const onLaneDrag = useCallback( async ({ draggableId, type, source, reason, mode, destination, combine }) => { setIsDragging(false); - + setDragTime(source.droppableId); if (!type || type !== "lane" || !source || !destination || isEqual(source, destination)) return; setIsProcessing(true); @@ -122,35 +120,34 @@ const BoardContainer = ({ setIsProcessing(false); } }, - [dispatch, onDragEnd] + [dispatch, onDragEnd, setDragTime] ); return ( - {currentReducerData.lanes.map((lane, index) => { - return ( - - ); - })} + {currentReducerData.lanes.map((lane, index) => ( + + ))} 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 6cabf53fe..dbcefaeeb 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 @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import React, { useCallback, useMemo, useRef, useState } from "react"; import PropTypes from "prop-types"; import { bindActionCreators } from "redux"; import { connect } from "react-redux"; @@ -36,6 +36,7 @@ import objectHash from "object-hash"; * @param setMaxCardHeight * @param maxCardWidth * @param setMaxCardWidth + * @param lastDrag * @param technician -- connected to redux * @param bodyshop -- connected to redux * @returns {Element} @@ -56,19 +57,13 @@ const Lane = ({ setMaxCardHeight, maxCardWidth, setMaxCardWidth, + lastDrag, technician, bodyshop }) => { const [collapsed, setCollapsed] = useState(false); - const [isVisible, setIsVisible] = useState(true); const laneRef = useRef(null); - useEffect(() => { - setIsVisible(false); - const timer = setTimeout(() => setIsVisible(true), 0); - return () => clearTimeout(timer); - }, [cards.length]); - const sortedCards = useMemo(() => { if (!cards) return []; if (!laneSortFunction) return cards; @@ -189,23 +184,13 @@ const Lane = ({ className={`react-trello-lane ${collapsed ? "lane-collapsed" : ""}`} style={{ ...provided.droppableProps.style }} > - {isVisible && } + {shouldRenderPlaceholder && provided.placeholder} ); }, - [ - orientation, - collapsed, - isVisible, - renderDraggable, - maxLaneHeight, - setMaxLaneHeight, - maxCardWidth, - id, - cardSettings - ] + [orientation, collapsed, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth, id, cardSettings] ); const renderDragContainer = useCallback( @@ -262,7 +247,7 @@ const Lane = ({ ); return ( -
+
{collapsed ? : } @@ -289,7 +274,8 @@ Lane.propTypes = { maxCardHeight: PropTypes.number.isRequired, setMaxCardHeight: PropTypes.func.isRequired, maxCardWidth: PropTypes.number.isRequired, - setMaxCardWidth: PropTypes.func.isRequired + setMaxCardWidth: PropTypes.func.isRequired, + lastDrag: PropTypes.number }; const mapDispatchToProps = (dispatch) => ({ diff --git a/client/src/components/production-board-kanban/trello-board/styles/Globals.js b/client/src/components/production-board-kanban/trello-board/styles/Globals.js index ec937ebc4..87cd53cc7 100644 --- a/client/src/components/production-board-kanban/trello-board/styles/Globals.js +++ b/client/src/components/production-board-kanban/trello-board/styles/Globals.js @@ -3,8 +3,8 @@ * @type {{small: string, large: string, medium: string}} */ export const cardSizesHorizontal = { - small: "150px", - medium: "225px", + small: "225px", + medium: "275px", large: "350px" }; @@ -13,7 +13,7 @@ export const cardSizesHorizontal = { * @type {{small: string, large: string, medium: string}} */ export const cardSizesVertical = { - small: "150px", - medium: "225px", + small: "225px", + medium: "275px", large: "350px" };