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

1
client/package.json
View File

@@ -4,6 +4,7 @@
"private": true,
"proxy": "https://localhost:5000",
"dependencies": {
"@lourenci/react-kanban": "^2.0.0",
"@nivo/pie": "^0.62.0",
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.7.0",

30
client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React from "react";
import { Card, Row, Col } from "antd";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
export default function ProductionBoardCard(card) {
console.log("card", card);
return (
<Card
className="react-kanban-card"
style={{ margin: ".2rem 0rem" }}
actions={
<div>
<ProductionAlert record={card} />
</div>
}
size="small"
title={`${card.ro_number || card.est_number} - ${card.ownr_ln} - ${
card.v_model_yr
} ${card.v_make_desc.substring(0, 4) || ""} ${card.v_model_desc || ""}`}
>
<Row>
<Col span={12}></Col>
<Col span={12}>
<DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
</Col>
</Row>
</Card>
);
}

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

31
client/src/components/production-board-kanban/production-board-kanban.utils.js
View File

@@ -12,25 +12,29 @@ const sortByParentId = (arr) => {
// return accumulator;
// }, []);
var parentId = null;
var parentId = "-1";
var sortedList = [];
var byParentsIdsList = _.groupBy(arr, "kanbanparent"); // Create a new array with objects indexed by parentId
console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
while (byParentsIdsList[parentId]) {
sortedList.push(byParentsIdsList[parentId][0]);
parentId = byParentsIdsList[parentId][0].id;
}
if (byParentsIdsList["null"])
byParentsIdsList["null"].map((i) => sortedList.push(i));
return sortedList;
};
export const createBoardData = (AllStatuses, Jobs) => {
console.log("==========GENERATING BOARD DATA=============");
const boardLanes = {
lanes: AllStatuses.map((s) => {
columns: AllStatuses.map((s) => {
return {
id: s,
title: s,
//label: "0",
cards: [],
};
}),
@@ -38,10 +42,29 @@ export const createBoardData = (AllStatuses, Jobs) => {
const DataGroupedByStatus = _.groupBy(Jobs, (d) => d.status);
Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
boardLanes.lanes.find(
boardLanes.columns.find(
(l) => l.id === statusGroupKey
).cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
});
return boardLanes;
};
// export const updateBoardOnMove = (board, card, source, destination) => {
// //Slice from source
// const sourceCardList = board.columns.find((x) => x.id === source.fromColumnId)
// .cards;
// sourceCardList.slice(source.fromPosition, 0);
// //Splice into destination.
// const destCardList = board.columns.find(
// (x) => x.id === destination.toColumnId
// ).cards;
// console.log("updateBoardOnMove -> destCardList", destCardList);
// destCardList.splice(destination.toPosition, 0, card);
// console.log("updateBoardOnMove -> destCardList", destCardList);
// console.log("board", board);
// return board;
// };

6
client/src/graphql/jobs.queries.js
View File

@@ -867,9 +867,9 @@ export const generate_UPDATE_JOB_KANBAN = (
newChildId,
newChildParent
) => {
console.log("oldChildId", oldChildId, "oldChildNewParent", oldChildNewParent);
console.log("Moved", movedId, movedNewParent, movedNewStatus);
console.log("new", newChildId, newChildParent);
// console.log("oldChildId", oldChildId, "oldChildNewParent", oldChildNewParent);
// console.log("Moved", movedId, movedNewParent, movedNewStatus);
// console.log("new", newChildId, newChildParent);
const oldChildQuery = `
updateOldChild: update_jobs(where: { id: { _eq: "${oldChildId}" } },

1
client/src/translations/en_us/common.json
View File

@@ -966,6 +966,7 @@
"saveconfig": "Save Configuration"
},
"errors": {
"boardupdate": "Error encountered updating job. {{message}}",
"removing": "Error removing from production board. {{error}}"
},
"labels": {

1
client/src/translations/es/common.json
View File

@@ -966,6 +966,7 @@
"saveconfig": ""
},
"errors": {
"boardupdate": "",
"removing": ""
},
"labels": {

1
client/src/translations/fr/common.json
View File

@@ -966,6 +966,7 @@
"saveconfig": ""
},
"errors": {
"boardupdate": "",
"removing": ""
},
"labels": {

41
client/yarn.lock
View File

@@ -1829,6 +1829,13 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0"
"@lourenci/react-kanban@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@lourenci/react-kanban/-/react-kanban-2.0.0.tgz#1acc8d83f5d9eaa2e2fa0c227229dd687cd3983c"
integrity sha512-ieNi7d/01wgT9t8kN7Z/RBubyZq9VvKXyU/5sj+UlrY8h4GPRNrN11jLV/ykg55lhyXGKgXDk3ObYurOfrmu3w==
dependencies:
react-beautiful-dnd "^13.0.0"
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4417,6 +4424,13 @@ css-blank-pseudo@^0.1.4:
dependencies:
postcss "^7.0.5"
css-box-model@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
dependencies:
tiny-invariant "^1.0.6"
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -10513,6 +10527,11 @@ querystringify@^2.1.1:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
raf-schd@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
raf@^3.1.0, raf@^3.4.0, raf@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -11020,6 +11039,19 @@ react-barcode@^1.4.0:
jsbarcode "^3.8.0"
prop-types "^15.6.2"
react-beautiful-dnd@^13.0.0:
version "13.0.0"
resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#f70cc8ff82b84bc718f8af157c9f95757a6c3b40"
integrity sha512-87It8sN0ineoC3nBW0SbQuTFXM6bUqM62uJGY4BtTf0yzPl8/3+bHMWkgIe0Z6m8e+gJgjWxefGRVfpE3VcdEg==
dependencies:
"@babel/runtime" "^7.8.4"
css-box-model "^1.2.0"
memoize-one "^5.1.1"
raf-schd "^4.0.2"
react-redux "^7.1.1"
redux "^4.0.4"
use-memo-one "^1.1.1"
react-big-calendar@^0.25.0:
version "0.25.0"
resolved "https://registry.yarnpkg.com/react-big-calendar/-/react-big-calendar-0.25.0.tgz#19dc3b8eaebe8aac1ba7b9b9a93d47c8431e2126"
@@ -11275,7 +11307,7 @@ react-redux@^5.0.7:
react-is "^16.6.0"
react-lifecycles-compat "^3.0.0"
react-redux@^7.2.0:
react-redux@^7.1.1, react-redux@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
@@ -13094,7 +13126,7 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-invariant@^1.0.2:
tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
version "1.1.0"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
@@ -13466,6 +13498,11 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
use-memo-one@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"