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

- LaneDrag / DragEnd, fixed to support Virtual Lists.

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-06-30 21:58:08 -04:00
parent 4db2b73397
commit 7f75eeadb9
4 changed files with 58 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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})`
};
});

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

@@ -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
})

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

@@ -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);

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

@@ -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;