121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
import { useApolloClient } from "@apollo/react-hooks";
|
|
import Board, { moveCard } from "@lourenci/react-kanban";
|
|
import "@lourenci/react-kanban/dist/styles.css";
|
|
import { notification } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
|
|
import { createBoardData } from "./production-board-kanban.utils.js";
|
|
import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
export function ProductionBoardKanbanComponent({ data, bodyshop }) {
|
|
const [boardLanes, setBoardLanes] = useState({
|
|
columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
|
|
});
|
|
|
|
const [isMoving, setIsMoving] = useState(false);
|
|
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
setBoardLanes(
|
|
createBoardData(bodyshop.md_ro_statuses.production_statuses, data)
|
|
);
|
|
setIsMoving(false);
|
|
}, [
|
|
data,
|
|
setBoardLanes,
|
|
setIsMoving,
|
|
bodyshop.md_ro_statuses.production_statuses,
|
|
]);
|
|
|
|
const client = useApolloClient();
|
|
|
|
const handleDragEnd = async (card, source, destination) => {
|
|
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 movedCardWillBeLast =
|
|
destinationColumn.cards.length - destination.toPosition < 1;
|
|
|
|
const lastCardInDestinationColumn =
|
|
destinationColumn.cards[destinationColumn.cards.length - 1];
|
|
|
|
const oldChildCard = sourceColumn.cards[source.fromPosition + 1];
|
|
|
|
const newChildCard = movedCardWillBeLast
|
|
? null
|
|
: destinationColumn.cards[
|
|
sameColumnTransfer
|
|
? source.fromPosition - destination.toPosition > 0
|
|
? destination.toPosition
|
|
: destination.toPosition + 1
|
|
: destination.toPosition
|
|
];
|
|
|
|
const oldChildCardNewParent = oldChildCard ? card.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;
|
|
} else if (!!newChildCard) {
|
|
console.log("==> New Card is somewhere in the middle");
|
|
movedCardNewKanbanParent = newChildCard.kanbanparent;
|
|
} else {
|
|
throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
|
|
}
|
|
const newChildCardNewParent = newChildCard ? card.id : null;
|
|
const update = await client.mutate({
|
|
mutation: generate_UPDATE_JOB_KANBAN(
|
|
oldChildCard ? oldChildCard.id : null,
|
|
oldChildCardNewParent,
|
|
card.id,
|
|
movedCardNewKanbanParent,
|
|
destination.toColumnId,
|
|
newChildCard ? newChildCard.id : null,
|
|
newChildCardNewParent
|
|
),
|
|
});
|
|
if (update.errors) {
|
|
notification["error"]({
|
|
message: t("production.errors.boardupdate", {
|
|
message: JSON.stringify(update.errors),
|
|
}),
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<IndefiniteLoading loading={isMoving} />
|
|
<Board
|
|
children={boardLanes}
|
|
disableCardDrag={isMoving}
|
|
renderCard={ProductionBoardCard}
|
|
onCardDragEnd={handleDragEnd}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, null)(ProductionBoardKanbanComponent);
|