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 016f3ad1a..05f29548a 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 @@ -52,7 +52,6 @@ export function ProductionBoardKanbanComponent({ const [filter, setFilter] = useState({ search: "", employeeId: null }); const [loading, setLoading] = useState(true); - const [isMoving, setIsMoving] = useState(false); const orientation = associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal"; @@ -65,42 +64,104 @@ export function ProductionBoardKanbanComponent({ }, [associationSettings]); useEffect(() => { - const boardData = createFakeBoardData( + const boardData = createBoardData( [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])], data, filter ); - boardData.lanes = boardData.lanes.map((d) => { - return { ...d, title: `${d.title} (${d.cards.length})` }; + let idx = 0; + const newCardIndexMappings = {}; + + // 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 }; + newCardIndexMappings[idx] = { laneIndex, cardIndex }; + + idx++; + return cardWithIndex; + }); + + return { + ...lane, + cards: cardsWithIndex, + title: `${lane.title} (${lane.cards.length})`, + laneIndex + }; }); + setBoardLanes(boardData); setIsMoving(false); }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses, filter]); + // + const client = useApolloClient(); - const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => { + const getCardById = (data, cardId) => { + for (const lane of data.lanes) { + for (const card of lane.cards) { + if (card.id === cardId) { + return card; + } + } + } + return null; + }; + + const onDragEnd = async ({ draggableId, type, source, reason, mode, destination, combine }) => { + //cardId, sourceLaneId, targetLaneId, position, cardDetails logImEXEvent("kanban_drag_end"); + + // Early Gate + if (!type || type !== "lane" || !source || !destination) return; + setIsMoving(true); - const sameColumnTransfer = sourceLaneId === targetLaneId; + const sameColumnTransfer = source.droppableId === destination.droppableId; + const targetLane = boardLanes.lanes[Number.parseInt(destination.droppableId)]; + const sourceLane = boardLanes.lanes[Number.parseInt(source.droppableId)]; + const sourceCard = getCardById(boardLanes, draggableId); - const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId); - const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId); + console.dir({ + sameColumnTransfer, + targetLane, + sourceLane, + sourceCard, + destination + }); - const movedCardWillBeFirst = position === 0; - const movedCardWillBeLast = targetLane.cards.length - position < 1; + const movedCardWillBeFirst = destination.index === 0; + const movedCardWillBeLast = destination.index > targetLane.cards.length - 1; + const movedCardIsFirstNewCard = movedCardWillBeFirst && movedCardWillBeLast; + + console.log("movedCardWillBeFirst, movedCardWillBeLast"); + console.dir({ movedCardWillBeFirst, movedCardWillBeLast, movedCardIsFirstNewCard }); const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1]; - const oldChildCard = sourceLane.cards[position + 1]; + const oldChildCard = sourceLane.cards[destination.index + 1]; + // const newChildCard = movedCardWillBeLast ? null - : targetLane.cards[sameColumnTransfer ? (position - position > 0 ? position : position + 1) : position]; + : targetLane.cards[ + sameColumnTransfer + ? destination.index - destination.index > 0 + ? destination.index + : destination.index + 1 + : destination.index + ]; - const oldChildCardNewParent = oldChildCard ? cardDetails.kanbanparent : null; + const oldChildCardNewParent = oldChildCard ? sourceCard.metadata.kanbanparent : null; + + console.dir({ + lastCardInTargetLane, + oldChildCard, + newChildCard, + oldChildCardNewParent + }); let movedCardNewKanbanParent; if (movedCardWillBeFirst) { @@ -108,28 +169,27 @@ export function ProductionBoardKanbanComponent({ } else if (movedCardWillBeLast) { movedCardNewKanbanParent = lastCardInTargetLane.id; } else if (!!newChildCard) { - movedCardNewKanbanParent = newChildCard.kanbanparent; + movedCardNewKanbanParent = newChildCard.metadata.kanbanparent; } else { console.log("==> !!!!!!Couldn't find a parent.!!!! <=="); } - const newChildCardNewParent = newChildCard ? cardId : null; - + const newChildCardNewParent = newChildCard ? draggableId : null; try { const update = await client.mutate({ mutation: generate_UPDATE_JOB_KANBAN( oldChildCard ? oldChildCard.id : null, oldChildCardNewParent, - cardId, + draggableId, movedCardNewKanbanParent, - targetLaneId, + targetLane.id, newChildCard ? newChildCard.id : null, newChildCardNewParent ) }); insertAuditTrail({ - jobid: cardId, - operation: AuditTrailMapping.jobstatuschange(targetLaneId), + jobid: draggableId, + operation: AuditTrailMapping.jobstatuschange(targetLane.id), type: "jobstatuschange" }); @@ -151,11 +211,6 @@ export function ProductionBoardKanbanComponent({ } }; - const onDragEnd = ({ draggableId, type, source, reason, mode, destination, combine }) => { - if (!type || type !== "lane") return; - console.log("onDragEnd", { draggableId, type, source, reason, mode, destination, combine }); - }; - const totalHrs = data .reduce( (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0), diff --git a/client/src/components/trello-board/controllers/BoardContainer.jsx b/client/src/components/trello-board/controllers/BoardContainer.jsx index 5e48507ef..b91336d32 100644 --- a/client/src/components/trello-board/controllers/BoardContainer.jsx +++ b/client/src/components/trello-board/controllers/BoardContainer.jsx @@ -1,9 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; - -// import Container from "../dnd/Container"; -// import Draggable from "../dnd/Draggable"; - import { DragDropContext, Droppable } from "../dnd/lib"; import PropTypes from "prop-types"; @@ -238,8 +234,6 @@ const BoardContainer = ({ ] ); - let cardIndex = 0; - return ( @@ -269,7 +263,7 @@ const BoardContainer = ({ editable={editable && !lane.disallowAddingCard} {...laneOtherProps} {...passThroughProps} - cards={lane.cards.map((card) => ({ ...card, idx: cardIndex++ }))} + cards={lane.cards} /> ); })} diff --git a/client/src/components/trello-board/controllers/Lane.jsx b/client/src/components/trello-board/controllers/Lane.jsx index 5988de089..d5b256ef3 100644 --- a/client/src/components/trello-board/controllers/Lane.jsx +++ b/client/src/components/trello-board/controllers/Lane.jsx @@ -112,7 +112,8 @@ function Lane({ return orientation === "vertical" ? { display: "flex", - flexWrap: "wrap" + flexWrap: "wrap", + minHeight: "100px" } : {}; }, [orientation]); @@ -296,7 +297,7 @@ function Lane({ return (