From 7f75eeadb9141705e91ded529267bf0d1497aa07 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Sun, 30 Jun 2024 21:58:08 -0400 Subject: [PATCH] - LaneDrag / DragEnd, fixed to support Virtual Lists. Signed-off-by: Dave Richer --- .../production-board-kanban.component.jsx | 16 +--- .../controllers/BoardContainer.jsx | 7 +- .../trello-board/helpers/LaneHelper.js | 95 ++++++++++--------- .../components/trello-board/styles/Base.js | 1 - 4 files changed, 58 insertions(+), 61 deletions(-) diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx index 871fe7c8d..761b646f0 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx +++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx @@ -19,7 +19,7 @@ import ProductionBoardCard from "../production-board-kanban-card/production-boar import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component"; import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component"; import "./production-board-kanban.styles.scss"; -import { createFakeBoardData, createBoardData } from "./production-board-kanban.utils.js"; +import { createBoardData } from "./production-board-kanban.utils.js"; import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx"; const mapStateToProps = createStructuredSelector({ @@ -69,21 +69,11 @@ export function ProductionBoardKanbanComponent({ filter ); - let idx = 0; - // Build Board Lanes Data - boardData.lanes = boardData.lanes.map((lane, laneIndex) => { - const cardsWithIndex = lane.cards.map((card, cardIndex) => { - const cardWithIndex = { ...card, idx, lane: lane.id, cardIndex, laneIndex }; - idx++; - return cardWithIndex; - }); - + boardData.lanes = boardData.lanes.map((lane) => { return { ...lane, - cards: cardsWithIndex, - title: `${lane.title} (${lane.cards.length})`, - laneIndex + title: `${lane.title} (${lane.cards.length})` }; }); diff --git a/client/src/components/trello-board/controllers/BoardContainer.jsx b/client/src/components/trello-board/controllers/BoardContainer.jsx index eaa3d8504..7754ae10a 100644 --- a/client/src/components/trello-board/controllers/BoardContainer.jsx +++ b/client/src/components/trello-board/controllers/BoardContainer.jsx @@ -95,7 +95,8 @@ const BoardContainer = ({ fromLaneId: event.fromLaneId, toLaneId: event.toLaneId, cardId: event.cardId, - index: event.index + index: event.index, + event }) ); case "UPDATE_CARDS": @@ -239,8 +240,8 @@ const BoardContainer = ({ if (!type || type !== "lane" || !source || !destination) return; dispatch( actions.moveCardAcrossLanes({ - fromLaneId: Number.parseInt(source.droppableId), - toLaneId: Number.parseInt(destination.droppableId), + fromLaneId: source.droppableId, + toLaneId: destination.droppableId, cardId: draggableId, index: destination.index }) diff --git a/client/src/components/trello-board/helpers/LaneHelper.js b/client/src/components/trello-board/helpers/LaneHelper.js index d84d1c16c..501a09019 100644 --- a/client/src/components/trello-board/helpers/LaneHelper.js +++ b/client/src/components/trello-board/helpers/LaneHelper.js @@ -53,7 +53,6 @@ const LaneHelper = { return updateLanes(state, newLanes); }, - // TODO: Unverified, needs to be hoisted. removeCardFromLane: (state, { laneId, cardId }) => { // Clone the state to avoid mutation const newLanes = cloneDeep(state.lanes); @@ -88,50 +87,58 @@ const LaneHelper = { }); }, - // TODO: This has been updated to new DND Lib, verified. - moveCardAcrossLanes: (state, ...args) => { - return state; - // console.dir({ - // state, - // args: { fromLaneId, toLaneId, cardId, index } - // }); - // // Clone the state to avoid mutation - // const newLanes = cloneDeep(state.lanes); - // - // // Find the source and destination lanes using the lane indices - // const fromLane = newLanes[fromLaneId]; - // const toLane = newLanes[toLaneId]; - // - // // Find the card in the source lane - // const cardIndex = fromLane.cards.findIndex((card) => card.id === cardId); - // if (cardIndex === -1) { - // throw new Error("Card not found in the source lane"); - // } - // - // // Remove the card from the source lane - // const [card] = fromLane.cards.splice(cardIndex, 1); - // - // // Insert the card into the destination lane at the specified index - // toLane.cards.splice(index, 0, card); - // - // let idx = 0; - // - // // Update the lane and card indexes for all lanes - // newLanes.forEach((lane, laneIndex) => { - // lane.cards.forEach((card, cardIndex) => { - // card.idx = idx; - // card.laneIndex = laneIndex; - // card.cardIndex = cardIndex; - // card.laneId = lane.id; - // idx++; - // }); - // }); - // - // return update(state, { - // lanes: { $set: newLanes } - // }); - }, + /** + * Move a card from one lane to another + * @param state + * @param fromLaneId + * @param toLaneId + * @param cardId + * @param index + * @returns {unknown} + */ + moveCardAcrossLanes: (state, { fromLaneId, toLaneId, cardId, index }) => { + // Clone the state to avoid mutation + const newLanes = cloneDeep(state.lanes); + console.dir({ fromLaneId, toLaneId, cardId, index }); + + // Find the source and destination lanes using the lane IDs + const fromLane = newLanes.find((lane) => lane.id === fromLaneId); + const toLane = newLanes.find((lane) => lane.id === toLaneId); + + if (!fromLane || !toLane) { + throw new Error("Source or destination lane not found"); + } + + // Find the card in the source lane + const cardIndex = fromLane.cards.findIndex((card) => card.id === cardId); + if (cardIndex === -1) { + throw new Error("Card not found in the source lane"); + } + + // Remove the card from the source lane + const [card] = fromLane.cards.splice(cardIndex, 1); + + // Insert the card into the destination lane at the specified index + toLane.cards.splice(index, 0, card); + + let idx = 0; + + // Update the lane and card indexes for all lanes + newLanes.forEach((lane, laneIndex) => { + lane.cards.forEach((card, cardIndex) => { + card.idx = idx; + card.laneIndex = laneIndex; + card.cardIndex = cardIndex; + card.laneId = lane.id; + idx++; + }); + }); + + return update(state, { + lanes: { $set: newLanes } + }); + }, updateCardsForLane: (state, { laneId, cards }) => { const lanes = state.lanes.map((lane) => (lane.id === laneId ? updateLaneCards(lane, cards) : lane)); return updateLanes(state, lanes); diff --git a/client/src/components/trello-board/styles/Base.js b/client/src/components/trello-board/styles/Base.js index 525848e30..dd8d9683c 100644 --- a/client/src/components/trello-board/styles/Base.js +++ b/client/src/components/trello-board/styles/Base.js @@ -73,7 +73,6 @@ export const GlobalStyle = createGlobalStyle` export const StyleHorizontal = styled.div` .react-trello-lane { - // TODO: This will need to be changed min-width: 250px; min-height: 25px; margin-bottom: 10px;