admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Optimization and Edgecases

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-07-02 20:50:34 -04:00
parent 61569d97cb
commit 162d8bfffe
10 changed files with 394 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
client/src/components/trello-board/controllers/BoardContainer.jsx
View File

@@ -1,7 +1,6 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useState, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { DragDropContext, Droppable } from "../dnd/lib";
import PropTypes from "prop-types";
import pick from "lodash/pick";
import isEqual from "lodash/isEqual";
@@ -35,7 +34,6 @@ import * as actions from "../../../redux/trello/trello.actions.js";
* @param {boolean} props.editable - Whether the board is editable
* @param {boolean} props.canAddLanes - Whether lanes can be added to the board
* @param {Object} props.laneStyle - The CSS styles to apply to the lanes
* @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
* @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
@@ -64,7 +62,6 @@ const BoardContainer = ({
editable = false,
canAddLanes = false,
laneStyle,
onCardMoveAcrossLanes = () => {},
orientation = "horizontal",
eventBusHandle,
reducerData,
@@ -129,43 +126,15 @@ const BoardContainer = ({
}
}, [currentReducerData, reducerData, onDataChange]);
/**
* onDragUpdate
* @param draggableId
* @param type
* @param source
* @param mode
* @param combine
* @param destination
*/
const onDragUpdate = ({ draggableId, type, source, mode, combine, destination }) => {};
const onDragUpdate = () => {};
/**
* onDragStart
* @type {(function({draggableId: *, type: *, source: *, mode: *}): void)|*}
*/
const onDragStart = useCallback(
({ draggableId, type, source, mode }) => {
setIsDragging(true);
},
[setIsDragging]
);
const onDragStart = useCallback(() => {
setIsDragging(true);
}, []);
/**
* onBeforeDragStart
* @param draggableId
* @param type
* @param source
* @param mode
*/
const onBeforeDragStart = ({ draggableId, type, source, mode }) => {};
const onBeforeDragStart = () => {};
/**
* onBeforeCapture
* @param draggableId
* @param mode
*/
const onBeforeCapture = ({ draggableId, mode }) => {};
const onBeforeCapture = () => {};
const getCardDetails = useCallback(
(laneId, cardIndex) => {
@@ -174,22 +143,77 @@ const BoardContainer = ({
[currentReducerData]
);
const hideEditableLane = () => {
const hideEditableLane = useCallback(() => {
setAddLaneMode(false);
};
}, []);
const showEditableLane = () => {
const showEditableLane = useCallback(() => {
setAddLaneMode(true);
};
}, []);
const addNewLane = (params) => {
hideEditableLane();
dispatch(actions.addLane(params));
onLaneAdd(params);
};
const addNewLane = useCallback(
(params) => {
hideEditableLane();
dispatch(actions.addLane(params));
onLaneAdd(params);
},
[dispatch, hideEditableLane, onLaneAdd]
);
const passThroughProps = pick(
{
const passThroughProps = useMemo(
() =>
pick(
{
id,
components,
data,
draggable,
style,
onDataChange,
onCardAdd,
onCardUpdate,
onCardClick,
onBeforeCardDelete,
onCardDelete,
onLaneScroll,
onLaneClick,
onLaneAdd,
onLaneDelete,
onLaneUpdate,
editable,
canAddLanes,
laneStyle,
orientation,
eventBusHandle,
reducerData,
cardStyle,
...otherProps
},
[
"onLaneScroll",
"onLaneDelete",
"onLaneUpdate",
"onCardClick",
"onBeforeCardDelete",
"onCardDelete",
"onCardAdd",
"onCardUpdate",
"onLaneClick",
"laneSortFunction",
"draggable",
"cardDraggable",
"collapsibleLanes",
"canAddLanes",
"hideCardDeleteIcon",
"tagStyle",
"handleDragStart",
"handleDragEnd",
"cardDragClass",
"editLaneTitle",
"orientation"
]
),
[
id,
components,
data,
@@ -209,66 +233,44 @@ const BoardContainer = ({
editable,
canAddLanes,
laneStyle,
onCardMoveAcrossLanes,
orientation,
eventBusHandle,
reducerData,
cardStyle,
...otherProps
},
[
// "onCardMoveAcrossLanes",
"onLaneScroll",
"onLaneDelete",
"onLaneUpdate",
"onCardClick",
"onBeforeCardDelete",
"onCardDelete",
"onCardAdd",
"onCardUpdate",
"onLaneClick",
"laneSortFunction",
"draggable",
"cardDraggable",
"collapsibleLanes",
"canAddLanes",
"hideCardDeleteIcon",
"tagStyle",
"handleDragStart",
"handleDragEnd",
"cardDragClass",
"editLaneTitle",
"orientation"
otherProps
]
);
const onLaneDrag = async ({ draggableId, type, source, reason, mode, destination, combine }) => {
setIsDragging(false);
const onLaneDrag = useCallback(
async ({ draggableId, type, source, reason, mode, destination, combine }) => {
setIsDragging(false);
if (!type || type !== "lane" || !source || !destination) return;
if (!type || type !== "lane" || !source || !destination) return;
setIsProcessing(true);
setIsProcessing(true);
dispatch(
actions.moveCardAcrossLanes({
fromLaneId: source.droppableId,
toLaneId: destination.droppableId,
cardId: draggableId,
index: destination.index
})
);
dispatch(
actions.moveCardAcrossLanes({
fromLaneId: source.droppableId,
toLaneId: destination.droppableId,
cardId: draggableId,
index: destination.index
})
);
onDragEnd({ draggableId, type, source, reason, mode, destination, combine })
.catch((err) => {
try {
await onDragEnd({ draggableId, type, source, reason, mode, destination, combine });
} catch (err) {
console.error("Error in onLaneDrag", err);
})
.finally(() => {
} finally {
setIsProcessing(false);
});
};
}
},
[dispatch, onDragEnd]
);
return (
<components.BoardWrapper style={style} orientation={orientation} draggable={false}>
<components.BoardWrapper style={style} orientation={orientation}>
<PopoverWrapper>
<DragDropContext
onDragEnd={onLaneDrag}
@@ -346,7 +348,6 @@ BoardContainer.propTypes = {
tagStyle: PropTypes.object,
cardDraggable: PropTypes.bool,
cardDragClass: PropTypes.string,
onCardMoveAcrossLanes: PropTypes.func,
orientation: PropTypes.string,
cardStyle: PropTypes.object
};