{
- return {
+ const subletCount = useMemo(
+ () => ({
total: subletJobLines.filter((s) => !s.sublet_ignored).length,
outstanding: subletJobLines.filter((s) => !s.sublet_ignored && !s.sublet_completed).length
- };
- }, [subletJobLines]);
+ }),
+ [subletJobLines]
+ );
- const handleSubletMark = async (sublet, action) => {
- setLoading(true);
+ const handleSubletMark = useCallback(
+ async (sublet, action) => {
+ setLoading(true);
- const result = await updateJobLine({
- variables: {
- jobId: sublet.jobid,
- now: new Date(),
- lineId: sublet.id,
- line: {
- sublet_completed: action === "complete" ? !sublet.sublet_completed : false,
- sublet_ignored: action === "ignore" ? !sublet.sublet_ignored : false
+ const result = await updateJobLine({
+ variables: {
+ jobId: sublet.jobid,
+ now: new Date(),
+ lineId: sublet.id,
+ line: {
+ sublet_completed: action === "complete" ? !sublet.sublet_completed : false,
+ sublet_ignored: action === "ignore" ? !sublet.sublet_ignored : false
+ }
}
+ });
+
+ if (result.errors) {
+ notification["error"]({
+ message: t("joblines.errors.updating", {
+ message: JSON.stringify(result.errors)
+ })
+ });
+ } else {
+ notification["success"]({
+ message: t("joblines.successes.updated")
+ });
}
- });
+ setLoading(false);
+ },
+ [updateJobLine, t]
+ );
- if (!!result.errors) {
- notification["error"]({
- message: t("joblines.errors.updating", {
- message: JSON.stringify(result.errors)
- })
- });
- } else {
- notification["success"]({
- message: t("joblines.successes.updated")
- });
- }
- setLoading(false);
- };
-
- const popContent = (
-
+ ),
+ [subletJobLines, loading, handleSubletMark]
);
return (
@@ -93,9 +100,9 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
placement="bottom"
title={t("production.labels.sublets")}
>
-
);
}
diff --git a/client/src/components/trello-board/components/Lane/HeightPreservingItem.jsx b/client/src/components/trello-board/components/Lane/HeightPreservingItem.jsx
index 503f1e4ac..58210c076 100644
--- a/client/src/components/trello-board/components/Lane/HeightPreservingItem.jsx
+++ b/client/src/components/trello-board/components/Lane/HeightPreservingItem.jsx
@@ -2,20 +2,12 @@ import React, { useEffect, useState } from "react";
const HeightPreservingItem = ({ children, ...props }) => {
const [size, setSize] = useState(0);
- const { "data-known-size": knownSize = 0 } = props;
-
+ const knownSize = props["data-known-size"];
useEffect(() => {
- if (knownSize !== 0) {
- setSize(knownSize);
- }
- }, [knownSize]);
- //
- // useEffect(() => {
- // if (knownSize !== 0 && knownSize !== size) {
- // setSize(knownSize);
- // }
- // }, [knownSize, size]);
-
+ setSize((prevSize) => {
+ return knownSize === 0 ? prevSize : knownSize;
+ });
+ }, [setSize, knownSize]);
return (
{
const [storeId] = useState(id || v1());
- const allClassNames = classNames("react-trello-board", className || "");
- const OrientationStyle = orientation === "horizontal" ? components.StyleHorizontal : components.StyleVertical;
+ const allClassNames = useMemo(() => classNames("react-trello-board", className || ""), [className]);
+ const OrientationStyle = useMemo(
+ () => (orientation === "horizontal" ? components.StyleHorizontal : components.StyleVertical),
+ [orientation, components.StyleHorizontal, components.StyleVertical]
+ );
return (
<>
diff --git a/client/src/components/trello-board/controllers/BoardContainer.jsx b/client/src/components/trello-board/controllers/BoardContainer.jsx
index 283234361..849932b82 100644
--- a/client/src/components/trello-board/controllers/BoardContainer.jsx
+++ b/client/src/components/trello-board/controllers/BoardContainer.jsx
@@ -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 (
-
+
{
- const [loading, setLoading] = useState(false);
- const [currentPageFinal, setCurrentPageFinal] = useState(currentPage);
const [addCardMode, setAddCardMode] = useState(false);
const [collapsed, setCollapsed] = useState(false);
-
- const laneRef = useRef(null);
+ const [isVisible, setIsVisible] = useState(true);
useEffect(() => {
- if (!isEqual(cards, currentPageFinal)) {
- setCurrentPageFinal(currentPage);
- }
- }, [cards, currentPage, currentPageFinal]);
-
- const handleScroll = useCallback(
- (evt) => {
- const node = evt.target;
- const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
- if (elemScrollPosition < 1 && onLaneScroll && !loading) {
- const nextPage = currentPageFinal + 1;
- setLoading(true);
- onLaneScroll(nextPage, id).then((moreCards) => {
- if ((moreCards || []).length > 0) {
- actions.paginateLane({
- laneId: id,
- newCards: moreCards,
- nextPage: nextPage
- });
- }
- setLoading(false);
- });
- }
- },
- [currentPageFinal, loading, onLaneScroll, id, actions]
- );
-
- useEffect(() => {
- const node = laneRef.current;
- if (node) {
- node.addEventListener("scroll", handleScroll);
- }
- return () => {
- if (node) {
- node.removeEventListener("scroll", handleScroll);
- }
- };
- }, [handleScroll]);
+ setIsVisible(false);
+ const timer = setTimeout(() => setIsVisible(true), 0);
+ return () => clearTimeout(timer);
+ }, [cards.length]);
const sortCards = useCallback((cards, sortFunction) => {
if (!cards) return [];
@@ -177,7 +138,6 @@ const Lane = ({
const Card = React.memo(({ provided, item: card, isDragging }) => {
const onDeleteCard = () => removeCard(card.id);
-
return (
{
if (!item) {
console.log("null Item");
@@ -217,18 +171,18 @@ const Lane = ({
}
return (
-
+
{(provided, snapshot) => }
);
};
- const renderAddCardLink = useCallback(
+ const renderAddCardLink = useMemo(
() => editable && !addCardMode && ,
[editable, addCardMode, showEditableCard, id]
);
- const renderNewCardForm = useCallback(
+ const renderNewCardForm = useMemo(
() => addCardMode && ,
[addCardMode, hideEditableCard, addNewCard, id]
);
@@ -246,12 +200,6 @@ const Lane = ({
);
- /**
- * Render the droppable component with the provided cards and the provided props from react-beautiful-dnd
- * @param provided
- * @param renderedCards
- * @returns {Element}
- */
const renderDroppable = (provided, renderedCards) => {
const Component = orientation === "vertical" ? VirtuosoGrid : Virtuoso;
const FinalComponent = collapsed ? "div" : Component;
@@ -286,11 +234,8 @@ const Lane = ({
{children}
@@ -306,23 +251,22 @@ const Lane = ({
reverse: 22
},
components: { Item: HeightPreservingItem },
- itemContent: (index, item) => renderDraggable(index, item),
- scrollerRef: provided.innerRef
+ itemContent: (index, item) => renderDraggable(index, item)
};
const finalComponentProps = collapsed ? {} : componentProps;
return (
-
+
-
- {/*{provided.placeholder}*/}
+ {isVisible && }
+ {(orientation === "horizontal" || renderedCards.length === 0 || collapsed) && provided.placeholder}
- {renderAddCardLink()}
- {renderNewCardForm()}
+ {renderAddCardLink}
+ {renderNewCardForm}
);
};
@@ -358,7 +302,6 @@ const Lane = ({
};
const allClassNames = classNames("react-trello-lane", collapsed ? "lane-collapsed" : "", className || "");
- const showFooter = collapsibleLanes && cards.length > 0;
const passedProps = {
actions,
@@ -392,7 +335,6 @@ const Lane = ({
currentPage,
...otherProps
};
-
return (
{renderHeader({ id, cards, ...passedProps })}
{renderDragContainer()}
- {loading && }
- {showFooter && }
+ {collapsibleLanes && }
);
};
diff --git a/client/src/components/trello-board/styles/Base.js b/client/src/components/trello-board/styles/Base.js
index fa988cdbb..4cb18b3e3 100644
--- a/client/src/components/trello-board/styles/Base.js
+++ b/client/src/components/trello-board/styles/Base.js
@@ -21,7 +21,7 @@ const getSectionStyles = (props) => {
display: inline-flex;
flex-direction: column;
white-space: nowrap;
- overflow-y: none;
+ // overflow-y: none;
`;
}
return `
@@ -75,7 +75,6 @@ export const StyleHorizontal = styled.div`
.react-trello-lane {
min-width: 250px;
min-height: 25px;
- margin-bottom: 10px;
}
.react-trello-lane.lane-collapsed {
@@ -84,6 +83,9 @@ export const StyleHorizontal = styled.div`
.ant-card-body {
padding: 4px;
}
+ .react-trello-card {
+ height: auto;
+ }
`;
export const StyleVertical = styled.div`
@@ -167,6 +169,7 @@ export const CustomPopoverContent = styled(PopoverContent)`
export const BoardWrapper = styled.div`
color: #393939;
+ height: 100%;
overflow-x: auto;
overflow-y: hidden;
${getBoardWrapperStyles};
@@ -183,7 +186,7 @@ export const Section = styled.section`
background-color: #e3e3e3;
border-radius: 3px;
margin: 2px 2px;
- padding: 2px;
+ height: 100%;
${getSectionStyles};
`;
@@ -319,7 +322,7 @@ export const LaneSection = styled.section`
position: relative;
padding: 5px;
display: inline-flex;
- height: auto;
+ height: 100%;
flex-direction: column;
`;