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

Introduce React-Trello in place of React-Kanban

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-05-09 13:22:58 -04:00
parent f77a16648f
commit f647e1ff11
49 changed files with 2632 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { SyncOutlined } from "@ant-design/icons";
import { useApolloClient } from "@apollo/client";
import Board, { moveCard } from "@asseinfo/react-kanban";
import Board from "../../components/trello-board/index";
import { Button, Grid, notification, Space, Statistic } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import React, { useEffect, useState } from "react";
@@ -42,9 +42,7 @@ export function ProductionBoardKanbanComponent({
insertAuditTrail,
associationSettings
}) {
const [boardLanes, setBoardLanes] = useState({
columns: [{ id: "Loading...", title: "Loading...", cards: [] }]
});
const [boardLanes, setBoardLanes] = useState({ lanes: [] });
const [filter, setFilter] = useState({ search: "", employeeId: null });
@@ -58,7 +56,7 @@ export function ProductionBoardKanbanComponent({
filter
);
boardData.columns = boardData.columns.map((d) => {
boardData.lanes = boardData.lanes.map((d) => {
return { ...d, title: `${d.title} (${d.cards.length})` };
});
setBoardLanes(boardData);
@@ -67,63 +65,55 @@ export function ProductionBoardKanbanComponent({
const client = useApolloClient();
const handleDragEnd = async (card, source, destination) => {
const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
logImEXEvent("kanban_drag_end");
setIsMoving(true);
setBoardLanes(moveCard(boardLanes, source, destination));
const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
const sourceColumn = boardLanes.columns.find((x) => x.id === source.fromColumnId);
const destinationColumn = boardLanes.columns.find((x) => x.id === destination.toColumnId);
const movedCardWillBeFirst = destination.toPosition === 0;
const sameColumnTransfer = sourceLaneId === targetLaneId;
const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId);
const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId);
const movedCardWillBeLast = destinationColumn.cards.length - destination.toPosition < 1;
const movedCardWillBeFirst = position === 0;
const movedCardWillBeLast = targetLane.cards.length - position < 1;
const lastCardInDestinationColumn = destinationColumn.cards[destinationColumn.cards.length - 1];
const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
const oldChildCard = sourceColumn.cards[source.fromPosition + 1];
const oldChildCard = sourceLane.cards[position + 1];
const newChildCard = movedCardWillBeLast
? null
: destinationColumn.cards[
sameColumnTransfer
? source.fromPosition - destination.toPosition > 0
? destination.toPosition
: destination.toPosition + 1
: destination.toPosition
];
: targetLane.cards[sameColumnTransfer ? (position - position > 0 ? position : position + 1) : position];
const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
const oldChildCardNewParent = oldChildCard ? cardDetails.kanbanparent : null;
let movedCardNewKanbanParent;
if (movedCardWillBeFirst) {
//console.log("==> New Card is first.");
movedCardNewKanbanParent = "-1";
} else if (movedCardWillBeLast) {
// console.log("==> New Card is last.");
movedCardNewKanbanParent = lastCardInDestinationColumn.id;
movedCardNewKanbanParent = lastCardInTargetLane.id;
} else if (!!newChildCard) {
// console.log("==> New Card is somewhere in the middle");
movedCardNewKanbanParent = newChildCard.kanbanparent;
} else {
console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
}
const newChildCardNewParent = newChildCard ? card.id : null;
const newChildCardNewParent = newChildCard ? cardId : null;
const update = await client.mutate({
mutation: generate_UPDATE_JOB_KANBAN(
oldChildCard ? oldChildCard.id : null,
oldChildCardNewParent,
card.id,
cardId,
movedCardNewKanbanParent,
destination.toColumnId,
targetLaneId,
newChildCard ? newChildCard.id : null,
newChildCardNewParent
)
});
insertAuditTrail({
jobid: card.id,
operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
jobid: cardId,
operation: AuditTrailMapping.jobstatuschange(targetLaneId),
type: "jobstatuschange"
});
@@ -134,6 +124,8 @@ export function ProductionBoardKanbanComponent({
})
});
}
setIsMoving(false);
};
const totalHrs = data
@@ -214,7 +206,6 @@ export function ProductionBoardKanbanComponent({
return (
<Container width={width}>
<IndefiniteLoading loading={isMoving} />
<PageHeader
title={
<Space>
@@ -234,18 +225,20 @@ export function ProductionBoardKanbanComponent({
</Space>
}
/>
{cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
<ProductionListDetailComponent jobs={data} />
<StickyContainer>
<Board
style={{ height: "100%" }}
children={boardLanes}
disableCardDrag={isMoving}
{...(cardSettings.stickyheader && stickyHeader)}
renderCard={(card) => ProductionBoardCard(technician, card, bodyshop, cardSettings)}
onCardDragEnd={handleDragEnd}
data={boardLanes}
draggable
canAddLanes
handleDragEnd={handleDragEnd}
editable
style={{ height: "100%", backgroundColor: "transparent" }}
renameLane
components={{
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings })
}}
/>
</StickyContainer>
</Container>