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

Metadata + data transformation for production board. Breaking changes. BOD-71

Browse Source
This commit is contained in:
Patrick Fic
2020-06-16 17:29:56 -07:00
parent 9cce792d72
commit 053e69a624
25 changed files with 1943 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/header/header.component.jsx
View File

@@ -6,12 +6,12 @@ import Icon, {
GlobalOutlined,
HomeFilled,
TeamOutlined,
UserOutlined
UserOutlined,
} from "@ant-design/icons";
import { Avatar, Col, Layout, Menu, Row } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
import { FaCalendarAlt, FaCarCrash, FaCreditCard } from "react-icons/fa";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
@@ -19,7 +19,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
import { signOutStart } from "../../redux/user/user.actions";
import {
selectBodyshop,
selectCurrentUser
selectCurrentUser,
} from "../../redux/user/user.selectors";
import "./header.styles.scss";
@@ -117,12 +117,17 @@ function Header({
{t("menus.header.schedule")}
</Link>
</Menu.Item>
<Menu.Item key="production">
<Menu.Item key="productionlist">
<Link to="/manage/production/list">
<Icon component={FaCalendarAlt} />
{t("menus.header.productionlist")}
</Link>
</Menu.Item>
<Menu.Item key="productionboard">
<Link to="/manage/production/board">
{t("menus.header.productionboard")}
</Link>
</Menu.Item>
<Menu.Item key="activejobs">
<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
</Menu.Item>
@@ -193,6 +198,7 @@ function Header({
});
}}
>
<Icon component={FaCreditCard} />
{t("menus.header.enterpayment")}
</Menu.Item>

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

@@ -1,49 +1,123 @@
import React, { useState, useEffect } from "react";
import Board from "react-trello";
import { useApolloClient } from "@apollo/react-hooks";
import { Card } from "antd";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
import React 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";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function ProductionBoardKanbanComponent({
loading,
data,
columnState,
bodyshop,
}) {
console.log("data", data);
export function ProductionBoardKanbanComponent({ loading, data, bodyshop }) {
const boardLanes = createBoardData(
bodyshop.md_ro_statuses.open_statuses,
data
);
console.log("ProductionBoardKanbanComponent -> boardLanes", boardLanes);
const [cards, setCards] = useState([]);
const client = useApolloClient();
useEffect(() => {
const cols = bodyshop.md_ro_statuses.open_statuses.map((s) => {
return {
id: s,
title: s,
cards: [],
};
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
);
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,
newChildCard ? newChildCard.id : null,
newChildCard ? cardDetails.id : null
),
//optimisticResponse,
});
if (data)
data.forEach((d) =>
cols
.find((c) => c.id === d.status)
.cards.push({ id: d.id, title: d.est_number, description: d.ownr_fn })
);
setCards(cols);
}, [data, bodyshop.md_ro_statuses.open_statuses, setCards]);
// 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",
// },
// };
// }
const kanbanCard = (card) => <Card>{card.title}</Card>;
// console.log("optimisticResponse", optimisticResponse);
};
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={{ lanes: cards }} components={{ Card: kanbanCard }} />
<Board
data={boardLanes}
onDataChange={handleDataChange}
handleDragEnd={handleDragEnd}
components={{ Card: kanbanCard }}
/>
</div>
);
}

2
client/src/components/production-board-kanban/production-board-kanban.container.jsx
View File

@@ -10,8 +10,6 @@ export default function ProductionBoardKanbanContainer({ columnState }) {
<ProductionBoardKanbanComponent
loading={loading}
data={data ? data.productionview : []}
refetch={null}
columnState={columnState}
/>
);
}

47
client/src/components/production-board-kanban/production-board-kanban.utils.js Normal file
View File

@@ -0,0 +1,47 @@
import _ from "lodash/";
const sortByParentId = (arr) => {
// return arr.reduce((accumulator, currentValue) => {
// //Find the parent item.
// let item = accumulator.find((x) => x.id === currentValue.kanbanparent);
// //Get index of praent item
// let index = accumulator.indexOf(item);
// index = index !== -1 ? index + 1 : 0;
// accumulator.splice(index, 0, currentValue);
// return accumulator;
// }, []);
var parentId = null;
var sortedList = [];
var byParentsIdsList = _.groupBy(arr, "kanbanparent"); // Create a new array with objects indexed by parentId
while (byParentsIdsList[parentId]) {
sortedList.push(byParentsIdsList[parentId][0]);
parentId = byParentsIdsList[parentId][0].id;
}
return sortedList;
};
export const createBoardData = (AllStatuses, Jobs) => {
console.log("==========GENERATING BOARD DATA=============");
const boardLanes = {
lanes: AllStatuses.map((s) => {
return {
id: s,
title: s,
//label: "0",
cards: [],
};
}),
};
const DataGroupedByStatus = _.groupBy(Jobs, (d) => d.status);
Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
boardLanes.lanes.find(
(l) => l.id === statusGroupKey
).cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
});
return boardLanes;
};

5
client/src/components/schedule-event/schedule-event.component.jsx
View File

@@ -1,13 +1,12 @@
import { Button, Popover } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { setModalContext } from "../../redux/modals/modals.actions";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import DataLabel from "../data-label/data-label.component";
import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
import { connect } from "react-redux";
const mapDispatchToProps = (dispatch) => ({
setScheduleContext: (context) =>