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

Refactor production board with new component BOD-71

Browse Source
This commit is contained in:
Patrick Fic
2020-06-17 16:29:35 -07:00
parent 053e69a624
commit 5cf3b26bb3
21 changed files with 318 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,122 +1,93 @@
import { useApolloClient } from "@apollo/react-hooks";
import { Card } from "antd";
import React from "react";
import Board, { moveCard } from "@lourenci/react-kanban";
import "@lourenci/react-kanban/dist/styles.css";
import { Card, notification } from "antd";
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import Board from "react-trello";
import { createStructuredSelector } from "reselect";
import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import { createBoardData } from "./production-board-kanban.utils.js";
import _ from "lodash";
import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
import { useTranslation } from "react-i18next";
import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function ProductionBoardKanbanComponent({ loading, data, bodyshop }) {
const boardLanes = createBoardData(
bodyshop.md_ro_statuses.open_statuses,
data
);
console.log("ProductionBoardKanbanComponent -> boardLanes", boardLanes);
export function ProductionBoardKanbanComponent({ data, bodyshop }) {
const [boardLanes, setBoardLanes] = useState({
columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
});
const { t } = useTranslation();
useEffect(() => {
setBoardLanes(createBoardData(bodyshop.md_ro_statuses.open_statuses, data));
}, [data, setBoardLanes, bodyshop.md_ro_statuses.open_statuses]);
const client = useApolloClient();
const handleDataChange = async (data) => {
console.log("data", data);
};
const handleDragEnd = async (
cardId,
sourceLaneId,
targetLaneId,
position,
cardDetails
) => {
const oldChildCard = boardLanes.lanes
.find((l) => l.id === sourceLaneId)
.cards.find((card) => card.kanbanparent === cardId); //.id;
const newChildCard =
sourceLaneId !== targetLaneId
? boardLanes.lanes.find((l) => l.id === targetLaneId).cards[position]
: null;
const lastCardInTargetLane = _.last(
boardLanes.lanes.find((l) => l.id === targetLaneId).cards
const handleDragEnd = async (card, source, destination) => {
setBoardLanes(moveCard(boardLanes, source, destination));
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[destination.toPosition];
const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
await client.mutate({
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,
oldChildCard ? cardDetails.kanbanparent : null,
cardDetails.id,
(newChildCard && newChildCard.kanbanparent) ||
sourceLaneId !== targetLaneId
? lastCardInTargetLane.id
: null,
targetLaneId,
oldChildCardNewParent,
card.id,
movedCardNewKanbanParent,
destination.toColumnId,
newChildCard ? newChildCard.id : null,
newChildCard ? cardDetails.id : null
newChildCardNewParent
),
//optimisticResponse,
});
// const optimisticResponse = {
// updateMovedChild: {
// __typename: "jobs_mutation_response",
// returning: {
// id: cardDetails.id,
// status: targetLaneId,
// kanbanparent: newChildCard.kanbanparent,
// __typename: "jobs",
// },
// },
// };
// if (oldChildCard) {
// optimisticResponse["updateNewChild"] = {
// __typename: "jobs_mutation_response",
// returning: {
// id: oldChildCard.id,
// kanbanparent: cardDetails.kanbanparent,
// __typename: "jobs",
// },
// };
// }
// if (newChildCard) {
// optimisticResponse["updateOldChild"] = {
// __typename: "jobs_mutation_response",
// returning: {
// id: newChildCard.id,
// kanbanparent: cardDetails.id,
// __typename: "jobs",
// },
// };
// }
// console.log("optimisticResponse", optimisticResponse);
if (update.errors) {
notification["error"]({
message: t("production.errors.boardupdate", {
message: JSON.stringify(update.errors),
}),
});
}
};
const kanbanCard = (card) => {
return (
<Card
style={{ margin: ".2rem 0rem" }}
size="small"
title={card.ro_number}
>{`${card.ownr_fn} ${card.ownr_ln}`}</Card>
);
};
if (loading) return <LoadingSpinner />;
return (
<div>
<Board
data={boardLanes}
onDataChange={handleDataChange}
handleDragEnd={handleDragEnd}
components={{ Card: kanbanCard }}
children={boardLanes}
renderCard={ProductionBoardCard}
onCardDragEnd={handleDragEnd}
/>
</div>
);