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

Progress Commit

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-05-17 16:29:46 -04:00
parent c3108a17f4
commit 55d729339f
9 changed files with 440 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/production-board-kanban/production-board-kanban.component.jsx
View File

@@ -55,7 +55,6 @@ export function ProductionBoardKanbanComponent({
const [isMoving, setIsMoving] = useState(false);
const [orientation, setOrientation] = useState("horizontal");
const { t } = useTranslation();
useEffect(() => {
@@ -223,7 +222,7 @@ export function ProductionBoardKanbanComponent({
const components = {
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
LaneHeader: cardSettings.stickyheader ? StickyHeader : NormalHeader
LaneHeader: cardSettings.stickyheader && orientation === "horizontal" ? StickyHeader : NormalHeader
};
return (
@@ -255,9 +254,8 @@ export function ProductionBoardKanbanComponent({
<StickyContainer>
<Board
data={boardLanes}
draggable
handleDragEnd={handleDragEnd}
style={{ height: "100%", backgroundColor: "transparent" }}
style={{ height: "100%", backgroundColor: "transparent", overflowY: "auto" }}
components={components}
orientation={orientation}
collapsibleLanes
@@ -267,9 +265,8 @@ export function ProductionBoardKanbanComponent({
<div>
<Board
data={boardLanes}
draggable
handleDragEnd={handleDragEnd}
style={{ backgroundColor: "transparent" }}
style={{ backgroundColor: "transparent", overflowY: "auto" }}
components={components}
collapsibleLanes
orientation={orientation}

2
client/src/components/trello-board/controllers/Board.jsx
View File

@@ -7,8 +7,8 @@ const Board = ({ id, className, components, orientation, ...additionalProps }) =
const [storeId] = useState(id || v1());
const allClassNames = classNames("react-trello-board", className || "");
const Styles = orientation === "horizontal" ? components.GlobalStyleHorizontal : components.GlobalStyleVertical;
return (
<>
<Styles />

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

@@ -1,6 +1,5 @@
import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import React, { useState, useEffect, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import Container from "../dnd/Container";
import Draggable from "../dnd/Draggable";
import PropTypes from "prop-types";
@@ -8,220 +7,214 @@ import pick from "lodash/pick";
import isEqual from "lodash/isEqual";
import Lane from "./Lane";
import { PopoverWrapper } from "react-popopo";
import * as actions from "../../../redux/trello/trello.actions.js";
class BoardContainer extends Component {
state = {
addLaneMode: false
};
const BoardContainer = (props) => {
const [addLaneMode, setAddLaneMode] = useState(false);
get groupName() {
const { id } = this.props;
return `TrelloBoard${id}`;
}
const {
id,
components,
data,
draggable,
laneDraggable,
laneDragClass,
laneDropClass,
style,
onDataChange,
onCardAdd,
onCardUpdate,
onCardClick,
onBeforeCardDelete,
onCardDelete,
onLaneScroll,
onLaneClick,
onLaneAdd,
onLaneDelete,
onLaneUpdate,
editable,
canAddLanes,
laneStyle,
onCardMoveAcrossLanes,
orientation,
eventBusHandle,
handleLaneDragStart,
handleLaneDragEnd,
...otherProps
} = props;
componentDidMount() {
const { actions, eventBusHandle } = this.props;
actions.loadBoard(this.props.data);
if (eventBusHandle) {
this.wireEventBus();
}
}
const dispatch = useDispatch();
const reducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
componentDidUpdate(prevProps) {
const { data, reducerData, onDataChange, actions } = this.props;
const groupName = `TrelloBoard${id}`;
if (this.props.reducerData && !isEqual(reducerData, prevProps.reducerData)) {
onDataChange(this.props.reducerData);
}
if (data && !isEqual(data, prevProps.data)) {
actions.loadBoard(data);
onDataChange(data);
}
}
onDragStart = ({ payload }) => {
const { handleLaneDragStart } = this.props;
handleLaneDragStart(payload.id);
};
onLaneDrop = ({ removedIndex, addedIndex, payload }) => {
const { actions, handleLaneDragEnd } = this.props;
if (removedIndex !== addedIndex) {
actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex });
handleLaneDragEnd(removedIndex, addedIndex, payload);
}
};
getCardDetails = (laneId, cardIndex) => {
return this.props.reducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
};
getLaneDetails = (index) => {
return this.props.reducerData.lanes[index];
};
wireEventBus = () => {
const { actions, eventBusHandle } = this.props;
let eventBus = {
const wireEventBus = useCallback(() => {
const eventBus = {
publish: (event) => {
switch (event.type) {
case "ADD_CARD":
return actions.addCard({ laneId: event.laneId, card: event.card });
// Note: Removed because there was a duplicate entry
// case "UPDATE_CARD":
// return actions.updateCard({ laneId: event.laneId, card: event.card });
return dispatch(actions.addCard({ laneId: event.laneId, card: event.card }));
case "REMOVE_CARD":
return actions.removeCard({ laneId: event.laneId, cardId: event.cardId });
return dispatch(actions.removeCard({ laneId: event.laneId, cardId: event.cardId }));
case "REFRESH_BOARD":
return actions.loadBoard(event.data);
return dispatch(actions.loadBoard(event.data));
case "MOVE_CARD":
return actions.moveCardAcrossLanes({
fromLaneId: event.fromLaneId,
toLaneId: event.toLaneId,
cardId: event.cardId,
index: event.index
});
return dispatch(
actions.moveCardAcrossLanes({
fromLaneId: event.fromLaneId,
toLaneId: event.toLaneId,
cardId: event.cardId,
index: event.index
})
);
case "UPDATE_CARDS":
return actions.updateCards({ laneId: event.laneId, cards: event.cards });
return dispatch(actions.updateCards({ laneId: event.laneId, cards: event.cards }));
case "UPDATE_CARD":
return actions.updateCard({ laneId: event.laneId, updatedCard: event.card });
return dispatch(actions.updateCard({ laneId: event.laneId, updatedCard: event.card }));
case "UPDATE_LANES":
return actions.updateLanes(event.lanes);
return dispatch(actions.updateLanes(event.lanes));
case "UPDATE_LANE":
return actions.updateLane(event.lane);
return dispatch(actions.updateLane(event.lane));
default:
return;
}
}
};
eventBusHandle(eventBus);
}, [dispatch, eventBusHandle]);
useEffect(() => {
dispatch(actions.loadBoard(data));
if (eventBusHandle) {
wireEventBus();
}
}, [data, eventBusHandle, dispatch, wireEventBus]);
useEffect(() => {
if (!isEqual(reducerData, props.reducerData)) {
onDataChange(reducerData);
}
}, [reducerData, props.reducerData, onDataChange]);
const onDragStart = useCallback(
({ payload }) => {
handleLaneDragStart(payload.id);
},
[handleLaneDragStart]
);
const onLaneDrop = useCallback(
({ removedIndex, addedIndex, payload }) => {
if (removedIndex !== addedIndex) {
dispatch(actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex }));
handleLaneDragEnd(removedIndex, addedIndex, payload);
}
},
[dispatch, handleLaneDragEnd]
);
const getCardDetails = useCallback(
(laneId, cardIndex) => {
return reducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
},
[reducerData]
);
const getLaneDetails = useCallback(
(index) => {
return reducerData.lanes[index];
},
[reducerData]
);
const hideEditableLane = () => {
setAddLaneMode(false);
};
// + add
hideEditableLane = () => {
this.setState({ addLaneMode: false });
const showEditableLane = () => {
setAddLaneMode(true);
};
showEditableLane = () => {
this.setState({ addLaneMode: true });
const addNewLane = (params) => {
hideEditableLane();
dispatch(actions.addLane(params));
onLaneAdd(params);
};
addNewLane = (params) => {
this.hideEditableLane();
this.props.actions.addLane(params);
this.props.onLaneAdd(params);
};
const passThroughProps = pick(props, [
"onCardMoveAcrossLanes",
"onLaneScroll",
"onLaneDelete",
"onLaneUpdate",
"onCardClick",
"onBeforeCardDelete",
"onCardDelete",
"onCardAdd",
"onCardUpdate",
"onLaneClick",
"laneSortFunction",
"draggable",
"laneDraggable",
"cardDraggable",
"collapsibleLanes",
"canAddLanes",
"hideCardDeleteIcon",
"tagStyle",
"handleDragStart",
"handleDragEnd",
"cardDragClass",
"editLaneTitle",
"orientation"
]);
render() {
const {
id,
components,
reducerData,
draggable,
laneDraggable,
laneDragClass,
laneDropClass,
style,
onDataChange,
onCardAdd,
onCardUpdate,
onCardClick,
onBeforeCardDelete,
onCardDelete,
onLaneScroll,
onLaneClick,
onLaneAdd,
onLaneDelete,
onLaneUpdate,
editable,
canAddLanes,
laneStyle,
onCardMoveAcrossLanes,
t,
orientation,
...otherProps
} = this.props;
const { addLaneMode } = this.state;
// Stick to whitelisting attributes to segregate board and lane props
const passThroughProps = pick(this.props, [
"onCardMoveAcrossLanes",
"onLaneScroll",
"onLaneDelete",
"onLaneUpdate",
"onCardClick",
"onBeforeCardDelete",
"onCardDelete",
"onCardAdd",
"onCardUpdate",
"onLaneClick",
"laneSortFunction",
"draggable",
"laneDraggable",
"cardDraggable",
"collapsibleLanes",
"canAddLanes",
"hideCardDeleteIcon",
"tagStyle",
"handleDragStart",
"handleDragEnd",
"cardDragClass",
"editLaneTitle",
"orientation"
]);
return (
<components.BoardWrapper style={style} orientation={orientation} {...otherProps} draggable={false}>
<PopoverWrapper>
<Container
orientation={orientation === "vertical" ? "vertical" : "horizontal"}
onDragStart={this.onDragStart}
dragClass={laneDragClass}
dropClass={laneDropClass}
onDrop={this.onLaneDrop}
lockAxis={orientation === "vertical" ? "y" : "x"}
getChildPayload={(index) => this.getLaneDetails(index)}
groupName={this.groupName}
>
{reducerData.lanes.map((lane, index) => {
const { id, droppable, ...otherProps } = lane;
const laneToRender = (
<Lane
key={id}
boardId={this.groupName}
components={components}
id={id}
getCardDetails={this.getCardDetails}
index={index}
droppable={droppable === undefined ? true : droppable}
style={laneStyle || lane.style || {}}
labelStyle={lane.labelStyle || {}}
cardStyle={this.props.cardStyle || lane.cardStyle}
editable={editable && !lane.disallowAddingCard}
{...otherProps}
{...passThroughProps}
/>
);
return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : laneToRender;
})}
</Container>
</PopoverWrapper>
{canAddLanes && (
<Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>
{editable && !addLaneMode ? (
<components.NewLaneSection onClick={this.showEditableLane} />
) : (
addLaneMode && <components.NewLaneForm onCancel={this.hideEditableLane} onAdd={this.addNewLane} t={t} />
)}
</Container>
)}
</components.BoardWrapper>
);
}
}
return (
<components.BoardWrapper style={style} orientation={orientation} draggable={false}>
<PopoverWrapper>
<Container
orientation={orientation === "vertical" ? "vertical" : "horizontal"}
onDragStart={onDragStart}
dragClass={laneDragClass}
dropClass={laneDropClass}
onDrop={onLaneDrop}
lockAxis={orientation === "vertical" ? "y" : "x"}
getChildPayload={(index) => getLaneDetails(index)}
groupName={groupName}
>
{reducerData.lanes.map((lane, index) => {
const { id, droppable, ...otherProps } = lane;
const laneToRender = (
<Lane
key={id}
boardId={groupName}
components={components}
id={id}
getCardDetails={getCardDetails}
index={index}
droppable={droppable === undefined ? true : droppable}
style={laneStyle || lane.style || {}}
labelStyle={lane.labelStyle || {}}
cardStyle={props.cardStyle || lane.cardStyle}
editable={editable && !lane.disallowAddingCard}
{...otherProps}
{...passThroughProps}
/>
);
return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : laneToRender;
})}
</Container>
</PopoverWrapper>
{canAddLanes && (
<Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>
{editable && !addLaneMode ? (
<components.NewLaneSection onClick={showEditableLane} />
) : (
addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />
)}
</Container>
)}
</components.BoardWrapper>
);
};
BoardContainer.propTypes = {
id: PropTypes.string,
@@ -259,12 +252,10 @@ BoardContainer.propTypes = {
laneDragClass: PropTypes.string,
laneDropClass: PropTypes.string,
onCardMoveAcrossLanes: PropTypes.func.isRequired,
t: PropTypes.func,
orientation: PropTypes.string
};
BoardContainer.defaultProps = {
t: (v) => v,
onDataChange: () => {},
handleDragStart: () => {},
handleDragEnd: () => {},
@@ -284,16 +275,8 @@ BoardContainer.defaultProps = {
cardDraggable: true,
cardDragClass: "react_trello_dragClass",
laneDragClass: "react_trello_dragLaneClass",
laneDropClass: "",
laneDropClass: "react_trello_dragLaneDropClass",
orientation: "horizontal"
};
const mapStateToProps = (state) => {
return state.trello.lanes ? { reducerData: state.trello } : {};
};
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators({ ...actions }, dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(BoardContainer);
export default BoardContainer;

355
client/src/components/trello-board/controllers/Lane.jsx
View File

@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
@@ -12,140 +12,183 @@ import Draggable from "../dnd/Draggable.jsx";
import * as actions from "../../../redux/trello/trello.actions.js";
class Lane extends Component {
state = {
loading: false,
currentPage: this.props.currentPage,
addCardMode: false,
collapsed: false,
isDraggingOver: false
};
const defaultProps = {
style: {},
titleStyle: {},
labelStyle: {},
label: undefined,
editable: false,
onLaneUpdate: () => {},
onCardAdd: () => {},
onCardUpdate: () => {},
onCardDelete: () => {},
onBeforeCardDelete: () => {},
onLaneDelete: () => {},
onLaneClick: () => {},
onLaneScroll: () => {},
onCardClick: () => {},
onCardMoveAcrossLanes: () => {},
draggable: false,
laneDraggable: false,
cardDraggable: true,
collapsibleLanes: false,
droppable: true,
canAddLanes: false,
hideCardDeleteIcon: false,
components: {},
handleDragStart: () => {},
handleDragEnd: () => {},
orientation: "vertical"
};
get groupName() {
const { boardId } = this.props;
return `TrelloBoard${boardId}Lane`;
}
const Lane = (internalProps) => {
const props = useMemo(() => ({ ...defaultProps, ...internalProps }), [internalProps]);
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(props.currentPage);
const [addCardMode, setAddCardMode] = useState(false);
const [collapsed, setCollapsed] = useState(false);
const [isDraggingOver, setIsDraggingOver] = useState(false);
handleScroll = (evt) => {
const node = evt.target;
const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
const { onLaneScroll } = this.props;
// In some browsers and/or screen sizes a decimal rest value between 0 and 1 exists, so it should be checked on < 1 instead of < 0
if (elemScrollPosition < 1 && onLaneScroll && !this.state.loading) {
const { currentPage } = this.state;
this.setState({ loading: true });
const nextPage = currentPage + 1;
onLaneScroll(nextPage, this.props.id).then((moreCards) => {
if ((moreCards || []).length > 0) {
this.props.actions.paginateLane({
laneId: this.props.id,
newCards: moreCards,
nextPage: nextPage
});
}
this.setState({ loading: false });
});
const laneRef = useRef(null);
useEffect(() => {
if (!isEqual(props.cards, currentPage)) {
setCurrentPage(props.currentPage);
}
};
}, [props.cards, props.currentPage, currentPage]);
sortCards(cards, sortFunction) {
const handleScroll = useCallback(
(evt) => {
const node = evt.target;
const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
const { onLaneScroll } = props;
if (elemScrollPosition < 1 && onLaneScroll && !loading) {
const nextPage = currentPage + 1;
setLoading(true);
onLaneScroll(nextPage, props.id).then((moreCards) => {
if ((moreCards || []).length > 0) {
props.actions.paginateLane({
laneId: props.id,
newCards: moreCards,
nextPage: nextPage
});
}
setLoading(false);
});
}
},
[currentPage, loading, props]
);
useEffect(() => {
const node = laneRef.current;
if (node) {
node.addEventListener("scroll", handleScroll);
}
return () => {
if (node) {
node.removeEventListener("scroll", handleScroll);
}
};
}, [handleScroll]);
const sortCards = (cards, sortFunction) => {
if (!cards) return [];
if (!sortFunction) return cards;
return cards.concat().sort(function (card1, card2) {
return sortFunction(card1, card2);
});
}
laneDidMount = (node) => {
if (node) {
node.addEventListener("scroll", this.handleScroll);
}
return cards.concat().sort((card1, card2) => sortFunction(card1, card2));
};
static getDerivedStateFromProps(nextProps, prevState) {
if (!isEqual(prevState.cards, nextProps.cards)) {
return {
currentPage: nextProps.currentPage
};
}
// Return null if the state hasn't changed
return null;
}
removeCard = (cardId) => {
if (this.props.onBeforeCardDelete && typeof this.props.onBeforeCardDelete === "function") {
this.props.onBeforeCardDelete(() => {
this.props.onCardDelete && this.props.onCardDelete(cardId, this.props.id);
this.props.actions.removeCard({ laneId: this.props.id, cardId: cardId });
const removeCard = (cardId) => {
if (props.onBeforeCardDelete && typeof props.onBeforeCardDelete === "function") {
props.onBeforeCardDelete(() => {
props.onCardDelete && props.onCardDelete(cardId, props.id);
props.actions.removeCard({ laneId: props.id, cardId: cardId });
});
} else {
this.props.onCardDelete && this.props.onCardDelete(cardId, this.props.id);
this.props.actions.removeCard({ laneId: this.props.id, cardId: cardId });
props.onCardDelete && props.onCardDelete(cardId, props.id);
props.actions.removeCard({ laneId: props.id, cardId: cardId });
}
};
handleCardClick = (e, card) => {
const { onCardClick } = this.props;
const handleCardClick = (e, card) => {
const { onCardClick } = props;
onCardClick && onCardClick(card.id, card.metadata, card.laneId);
e.stopPropagation();
};
showEditableCard = () => {
this.setState({ addCardMode: true });
const showEditableCard = () => {
setAddCardMode(true);
};
hideEditableCard = () => {
this.setState({ addCardMode: false });
const hideEditableCard = () => {
setAddCardMode(false);
};
addNewCard = (params) => {
const laneId = this.props.id;
const addNewCard = (params) => {
const laneId = props.id;
const id = v1();
this.hideEditableCard();
hideEditableCard();
let card = { id, ...params };
this.props.actions.addCard({ laneId, card });
this.props.onCardAdd(card, laneId);
props.actions.addCard({ laneId, card });
props.onCardAdd(card, laneId);
};
onDragStart = ({ payload }) => {
const { handleDragStart } = this.props;
const onDragStart = ({ payload }) => {
const { handleDragStart } = props;
handleDragStart && handleDragStart(payload.id, payload.laneId);
};
shouldAcceptDrop = (sourceContainerOptions) => {
return this.props.droppable && sourceContainerOptions.groupName === this.groupName;
const shouldAcceptDrop = (sourceContainerOptions) => {
return props.droppable && sourceContainerOptions.groupName === groupName;
};
onDragEnd = (laneId, result) => {
const { handleDragEnd } = this.props;
const onDragEnd = (laneId, result) => {
const { handleDragEnd } = props;
const { addedIndex, payload } = result;
if (this.state.isDraggingOver) {
this.setState({ isDraggingOver: false });
if (isDraggingOver) {
setIsDraggingOver(false);
}
if (addedIndex != null) {
const newCard = { ...cloneDeep(payload), laneId };
const response = handleDragEnd ? handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, newCard) : true;
if (response === undefined || !!response) {
this.props.actions.moveCardAcrossLanes({
props.actions.moveCardAcrossLanes({
fromLaneId: payload.laneId,
toLaneId: laneId,
cardId: payload.id,
index: addedIndex
});
this.props.onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex);
props.onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex);
}
return response;
}
};
updateCard = (updatedCard) => {
this.props.actions.updateCard({ laneId: this.props.id, card: updatedCard });
this.props.onCardUpdate(this.props.id, updatedCard);
const updateCard = (updatedCard) => {
props.actions.updateCard({ laneId: props.id, card: updatedCard });
props.onCardUpdate(props.id, updatedCard);
};
renderDragContainer = (isDraggingOver) => {
const removeLane = () => {
const { id } = props;
props.actions.removeLane({ laneId: id });
props.onLaneDelete(id);
};
const updateTitle = (value) => {
props.actions.updateLane({ id: props.id, title: value });
props.onLaneUpdate(props.id, { title: value });
};
const toggleLaneCollapsed = () => {
props.collapsibleLanes && setCollapsed(!collapsed);
};
const groupName = `TrelloBoard${props.boardId}Lane`;
const renderDragContainer = (isDraggingOver) => {
const {
id,
cards,
@@ -159,13 +202,12 @@ class Lane extends Component {
cardStyle,
components,
orientation
} = this.props;
const { addCardMode, collapsed } = this.state;
} = props;
const stableCards = collapsed ? [] : cards;
const cardList = this.sortCards(stableCards, laneSortFunction).map((card, idx) => {
const onDeleteCard = () => this.removeCard(card.id);
const cardList = sortCards(stableCards, laneSortFunction).map((card, idx) => {
const onDeleteCard = () => removeCard(card.id);
const cardToRender = (
<components.Card
key={card.id}
@@ -173,8 +215,8 @@ class Lane extends Component {
style={card.style || cardStyle}
className="react-trello-card"
onDelete={onDeleteCard}
onClick={(e) => this.handleCardClick(e, card)}
onChange={(updatedCard) => this.updateCard(updatedCard)}
onClick={(e) => handleCardClick(e, card)}
onChange={(updatedCard) => updateCard(updatedCard)}
showDeleteButton={!hideCardDeleteIcon}
tagStyle={tagStyle}
cardDraggable={cardDraggable}
@@ -190,93 +232,59 @@ class Lane extends Component {
});
return (
<components.ScrollableLane ref={this.laneDidMount} isDraggingOver={isDraggingOver}>
<components.ScrollableLane ref={laneRef} isDraggingOver={isDraggingOver}>
<Container
orientation={orientation === "horizontal" ? "vertical" : "horizontal"}
groupName={this.groupName}
groupName={groupName}
dragClass={cardDragClass}
dropClass={cardDropClass}
onDragStart={this.onDragStart}
onDrop={(e) => this.onDragEnd(id, e)}
onDragEnter={() => this.setState({ isDraggingOver: true })}
onDragLeave={() => this.setState({ isDraggingOver: false })}
shouldAcceptDrop={this.shouldAcceptDrop}
getChildPayload={(index) => this.props.getCardDetails(id, index)}
onDragStart={onDragStart}
onDrop={(e) => onDragEnd(id, e)}
onDragEnter={() => setIsDraggingOver(true)}
onDragLeave={() => setIsDraggingOver(false)}
shouldAcceptDrop={shouldAcceptDrop}
getChildPayload={(index) => props.getCardDetails(id, index)}
>
{cardList}
</Container>
{editable && !addCardMode && <components.AddCardLink onClick={this.showEditableCard} laneId={id} />}
{addCardMode && <components.NewCardForm onCancel={this.hideEditableCard} laneId={id} onAdd={this.addNewCard} />}
{editable && !addCardMode && <components.AddCardLink onClick={showEditableCard} laneId={id} />}
{addCardMode && <components.NewCardForm onCancel={hideEditableCard} laneId={id} onAdd={addNewCard} />}
</components.ScrollableLane>
);
};
removeLane = () => {
const { id } = this.props;
this.props.actions.removeLane({ laneId: id });
this.props.onLaneDelete(id);
};
updateTitle = (value) => {
this.props.actions.updateLane({ id: this.props.id, title: value });
this.props.onLaneUpdate(this.props.id, { title: value });
};
renderHeader = (pickedProps) => {
const { components } = this.props;
const renderHeader = (pickedProps) => {
const { components } = props;
return (
<components.LaneHeader
{...pickedProps}
onDelete={this.removeLane}
onDoubleClick={this.toggleLaneCollapsed}
updateTitle={this.updateTitle}
onDelete={removeLane}
onDoubleClick={toggleLaneCollapsed}
updateTitle={updateTitle}
/>
);
};
toggleLaneCollapsed = () => {
this.props.collapsibleLanes && this.setState((state) => ({ collapsed: !state.collapsed }));
};
const { id, cards, collapsibleLanes, components, onLaneClick, orientation, ...otherProps } = props;
const allClassNames = classNames("react-trello-lane", collapsed ? "lane-collapsed" : "", props.className || "");
const showFooter = collapsibleLanes && cards.length > 0;
render() {
const { loading, isDraggingOver, collapsed } = this.state;
const {
id,
cards,
collapsibleLanes,
components,
onLaneClick,
onLaneScroll,
onCardClick,
onCardAdd,
onBeforeCardDelete,
onCardDelete,
onLaneDelete,
onLaneUpdate,
onCardUpdate,
onCardMoveAcrossLanes,
orientation,
...otherProps
} = this.props;
const allClassNames = classNames("react-trello-lane", this.props.className || "");
const showFooter = collapsibleLanes && cards.length > 0;
return (
<components.Section
{...otherProps}
key={id}
onClick={() => onLaneClick && onLaneClick(id)}
draggable={false}
className={allClassNames}
orientation={orientation}
>
{this.renderHeader({ id, cards, ...otherProps })}
{this.renderDragContainer(isDraggingOver)}
{loading && <components.Loader />}
{showFooter && <components.LaneFooter onClick={this.toggleLaneCollapsed} collapsed={collapsed} />}
</components.Section>
);
}
}
// Removed the ...otherProps spread from the components.Section
return (
<components.Section
key={id}
onClick={() => onLaneClick && onLaneClick(id)}
draggable={false}
className={allClassNames}
orientation={orientation}
>
{renderHeader({ id, cards, ...otherProps })}
{renderDragContainer(isDraggingOver)}
{loading && <components.Loader />}
{showFooter && <components.LaneFooter onClick={toggleLaneCollapsed} collapsed={collapsed} />}
</components.Section>
);
};
Lane.propTypes = {
actions: PropTypes.object,
@@ -320,35 +328,6 @@ Lane.propTypes = {
orientation: PropTypes.string
};
Lane.defaultProps = {
style: {},
titleStyle: {},
labelStyle: {},
label: undefined,
editable: false,
onLaneUpdate: () => {},
onCardAdd: () => {},
onCardUpdate: () => {},
onCardDelete: () => {},
onBeforeCardDelete: () => {},
onLaneDelete: () => {},
onLaneClick: () => {},
onLaneScroll: () => {},
onCardClick: () => {},
onCardMoveAcrossLanes: () => {},
draggable: false,
laneDraggable: false,
cardDraggable: true,
collapsibleLanes: false,
droppable: true,
canAddLanes: false,
hideCardDeleteIcon: false,
components: {},
handleDragStart: () => {},
handleDragEnd: () => {},
orientation: "vertical"
};
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(actions, dispatch)
});

63
client/src/components/trello-board/dnd/Container.jsx
View File

@@ -51,52 +51,27 @@ class Container extends Component {
getContainerOptions() {
const functionProps = {};
const propKeys = [
"onDragStart",
"onDragEnd",
"onDrop",
"getChildPayload",
"shouldAnimateDrop",
"shouldAcceptDrop",
"onDragEnter",
"onDragLeave",
"render",
"onDropReady",
"getGhostParent"
];
if (this.props.onDragStart) {
functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
}
propKeys.forEach((key) => {
if (this.props[key]) {
functionProps[key] = (...p) => this.props[key](...p);
}
});
if (this.props.onDragEnd) {
functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
}
if (this.props.onDrop) {
functionProps.onDrop = (...p) => this.props.onDrop(...p);
}
if (this.props.getChildPayload) {
functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
}
if (this.props.shouldAnimateDrop) {
functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
}
if (this.props.shouldAcceptDrop) {
functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
}
if (this.props.onDragEnter) {
functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
}
if (this.props.onDragLeave) {
functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
}
if (this.props.render) {
functionProps.render = (...p) => this.props.render(...p);
}
if (this.props.onDropReady) {
functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
}
if (this.props.getGhostParent) {
functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
}
return Object.assign({}, this.props, functionProps);
return { ...this.props, ...functionProps };
}
}

41
client/src/components/trello-board/dnd/Draggable.jsx
View File

@@ -1,26 +1,35 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {constants} from 'kuika-smooth-dnd'
import React, { Component } from "react";
import PropTypes from "prop-types";
import { constants } from "kuika-smooth-dnd";
const {wrapperClass} = constants
const { wrapperClass } = constants;
class Draggable extends Component {
render() {
if (this.props.render) {
return React.cloneElement(this.props.render(), {className: wrapperClass})
}
const { render, className, children, ...restProps } = this.props;
const clsName = `${this.props.className ? this.props.className + ' ' : ''}`
return (
<div {...this.props} className={`${clsName}${wrapperClass}`}>
{this.props.children}
</div>
)
try {
if (render) {
return React.cloneElement(render(), { className: wrapperClass });
}
const clsName = className ? `${className} ` : "";
return (
<div {...restProps} className={`${clsName}${wrapperClass}`}>
{children}
</div>
);
} catch (error) {
console.error("Error rendering Draggable component:", error);
return null; // Return null if an error occurs to prevent crashing
}
}
}
Draggable.propTypes = {
render: PropTypes.func
}
render: PropTypes.func,
className: PropTypes.string,
children: PropTypes.node
};
export default Draggable
export default Draggable;

83
client/src/components/trello-board/helpers/LaneHelper.js
View File

@@ -1,5 +1,9 @@
import update from "immutability-helper";
const updateLanes = (state, lanes) => update(state, { lanes: { $set: lanes } });
const updateLaneCards = (lane, cards) => update(lane, { cards: { $set: cards } });
const LaneHelper = {
initialiseLanes: (state, { lanes }) => {
const newLanes = lanes.map((lane) => {
@@ -7,13 +11,13 @@ const LaneHelper = {
lane.cards && lane.cards.forEach((c) => (c.laneId = lane.id));
return lane;
});
return update(state, { lanes: { $set: newLanes } });
return updateLanes(state, newLanes);
},
paginateLane: (state, { laneId, newCards, nextPage }) => {
const updatedLanes = LaneHelper.appendCardsToLane(state, { laneId: laneId, newCards: newCards });
updatedLanes.find((lane) => lane.id === laneId).currentPage = nextPage;
return update(state, { lanes: { $set: updatedLanes } });
return updateLanes(state, updatedLanes);
},
appendCardsToLane: (state, { laneId, newCards, index }) => {
@@ -23,12 +27,11 @@ const LaneHelper = {
.filter((c) => lane.cards.find((card) => card.id === c.id) == null);
return state.lanes.map((lane) => {
if (lane.id === laneId) {
if (index !== undefined) {
return update(lane, { cards: { $splice: [[index, 0, ...newCards]] } });
} else {
const cardsToUpdate = [...lane.cards, ...newCards];
return update(lane, { cards: { $set: cardsToUpdate } });
}
const cardsToUpdate =
index !== undefined
? [...lane.cards.slice(0, index), ...newCards, ...lane.cards.slice(index)]
: [...lane.cards, ...newCards];
return updateLaneCards(lane, cardsToUpdate);
} else {
return lane;
}
@@ -37,35 +40,29 @@ const LaneHelper = {
appendCardToLane: (state, { laneId, card, index }) => {
const newLanes = LaneHelper.appendCardsToLane(state, { laneId: laneId, newCards: [card], index });
return update(state, { lanes: { $set: newLanes } });
return updateLanes(state, newLanes);
},
addLane: (state, lane) => {
const newLane = { cards: [], ...lane };
return update(state, { lanes: { $push: [newLane] } });
return updateLanes(state, [...state.lanes, newLane]);
},
updateLane: (state, updatedLane) => {
const newLanes = state.lanes.map((lane) => {
if (updatedLane.id === lane.id) {
return { ...lane, ...updatedLane };
} else {
return lane;
}
});
return update(state, { lanes: { $set: newLanes } });
const newLanes = state.lanes.map((lane) => (updatedLane.id === lane.id ? { ...lane, ...updatedLane } : lane));
return updateLanes(state, newLanes);
},
removeCardFromLane: (state, { laneId, cardId }) => {
const lanes = state.lanes.map((lane) => {
if (lane.id === laneId) {
let newCards = lane.cards.filter((card) => card.id !== cardId);
return update(lane, { cards: { $set: newCards } });
const newCards = lane.cards.filter((card) => card.id !== cardId);
return updateLaneCards(lane, newCards);
} else {
return lane;
}
});
return update(state, { lanes: { $set: lanes } });
return updateLanes(state, lanes);
},
moveCardAcrossLanes: (state, { fromLaneId, toLaneId, cardId, index }) => {
@@ -74,50 +71,36 @@ const LaneHelper = {
if (lane.id === fromLaneId) {
cardToMove = lane.cards.find((card) => card.id === cardId);
const newCards = lane.cards.filter((card) => card.id !== cardId);
return update(lane, { cards: { $set: newCards } });
return updateLaneCards(lane, newCards);
} else {
return lane;
}
});
const updatedState = update(state, { lanes: { $set: interimLanes } });
return LaneHelper.appendCardToLane(updatedState, {
laneId: toLaneId,
card: cardToMove,
index: index
});
return LaneHelper.appendCardToLane(
{ ...state, lanes: interimLanes },
{
laneId: toLaneId,
card: cardToMove,
index: index
}
);
},
updateCardsForLane: (state, { laneId, cards }) => {
const lanes = state.lanes.map((lane) => {
if (lane.id === laneId) {
return update(lane, { cards: { $set: cards } });
} else {
return lane;
}
});
return update(state, { lanes: { $set: lanes } });
const lanes = state.lanes.map((lane) => (lane.id === laneId ? updateLaneCards(lane, cards) : lane));
return updateLanes(state, lanes);
},
updateCardForLane: (state, { laneId, card: updatedCard }) => {
const lanes = state.lanes.map((lane) => {
if (lane.id === laneId) {
const cards = lane.cards.map((card) => {
if (card.id === updatedCard.id) {
return { ...card, ...updatedCard };
} else {
return card;
}
});
return update(lane, { cards: { $set: cards } });
const cards = lane.cards.map((card) => (card.id === updatedCard.id ? { ...card, ...updatedCard } : card));
return updateLaneCards(lane, cards);
} else {
return lane;
}
});
return update(state, { lanes: { $set: lanes } });
},
updateLanes: (state, lanes) => {
return { ...state, ...{ lanes: lanes } };
return updateLanes(state, lanes);
},
moveLane: (state, { oldIndex, newIndex }) => {
@@ -128,7 +111,7 @@ const LaneHelper = {
removeLane: (state, { laneId }) => {
const updatedLanes = state.lanes.filter((lane) => lane.id !== laneId);
return update(state, { lanes: { $set: updatedLanes } });
return updateLanes(state, updatedLanes);
}
};

8
client/src/components/trello-board/styles/Base.js
View File

@@ -60,7 +60,6 @@ export const GlobalStyleHorizontal = createGlobalStyle`
width: 32px;
}
`;
export const GlobalStyleVertical = createGlobalStyle`
.comPlainTextContentEditable {
-webkit-user-modify: read-write-plaintext-only;
@@ -101,7 +100,8 @@ export const GlobalStyleVertical = createGlobalStyle`
}
.smooth-dnd-container {
//min-height: 100px; // Not needed, just for extra landing space
// TODO ? This is the question. We need the same drag-zone we get in horizontal mode
min-height: 50px; // Not needed, just for extra landing space
}
.react-trello-lane {
@@ -186,9 +186,9 @@ export const Header = styled.header`
export const Section = styled.section`
background-color: #e3e3e3;
border-radius: 3px;
margin: 5px 5px;
margin: 2px 2px;
position: relative;
padding: 10px;
padding: 5px;
${getSectionStyles};
flex-direction: column;
`;

7
client/src/components/trello-board/widgets/DeleteButton.jsx
View File

@@ -1,10 +1,13 @@
import React from "react";
import { DelButton, DeleteWrapper } from "../styles/Elements";
import { DeleteWrapper } from "../styles/Elements";
import { Button } from "antd";
const DeleteButton = (props) => {
return (
<DeleteWrapper {...props}>
<DelButton>&#10006;</DelButton>
<Button type="primary" danger>
Delete
</Button>
</DeleteWrapper>
);
};