- 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 <dave@imexsystems.ca>

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 (
     <PopoverWrapper>
       <BoardWrapper orientation={orientation}>
         <DragDropContext onDragEnd={onLaneDrag} onDragStart={onDragStart} contextId="production-board">
-          {currentReducerData.lanes.map((lane, index) => {
-            return (
-              <Lane
-                key={lane.id}
-                id={lane.id}
-                title={lane.title}
-                index={index}
-                laneSortFunction={laneSortFunction}
-                orientation={orientation}
-                cards={lane.cards}
-                isDragging={isDragging}
-                isProcessing={isProcessing}
-                cardSettings={cardSettings}
-                maxLaneHeight={maxLaneHeight}
-                setMaxLaneHeight={setMaxLaneHeight}
-                maxCardHeight={maxCardHeight}
-                setMaxCardHeight={setMaxCardHeight}
-                maxCardWidth={maxCardWidth}
-                setMaxCardWidth={setMaxCardWidth}
-              />
-            );
-          })}
+          {currentReducerData.lanes.map((lane, index) => (
+            <Lane
+              key={lane.id}
+              id={lane.id}
+              title={lane.title}
+              index={index}
+              laneSortFunction={laneSortFunction}
+              orientation={orientation}
+              cards={lane.cards}
+              isDragging={isDragging}
+              isProcessing={isProcessing}
+              cardSettings={cardSettings}
+              maxLaneHeight={maxLaneHeight}
+              setMaxLaneHeight={setMaxLaneHeight}
+              maxCardHeight={maxCardHeight}
+              setMaxCardHeight={setMaxCardHeight}
+              maxCardWidth={maxCardWidth}
+              setMaxCardWidth={setMaxCardWidth}
+              lastDrag={getLastDragTime(lane.id)}
+            />
+          ))}
         </DragDropContext>
       </BoardWrapper>
     </PopoverWrapper>

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 && <FinalComponent {...finalComponentProps} />}
+            <FinalComponent {...finalComponentProps} />
             {shouldRenderPlaceholder && provided.placeholder}
           </div>
         </HeightMemoryWrapper>
       );
     },
-    [
-      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 (
-    <Section key={id} orientation={orientation} cardSettings={cardSettings}>
+    <Section key={`lane-${id}-${lastDrag}`} orientation={orientation} cardSettings={cardSettings}>
       <div onDoubleClick={toggleLaneCollapsed} className="react-trello-column-header">
         <span className="lane-title">
           {collapsed ? <EyeInvisibleOutlined className="icon" /> : <EyeOutlined className="icon" />}
@@ -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) => ({

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"
 };