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

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

@@ -105,6 +105,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
labhrs
larhrs
partcount
kanbanparent
}
}
`;
@@ -856,3 +857,57 @@ export const QUERY_JOB_CLOSE_DETAILS = gql`
}
}
`;
export const generate_UPDATE_JOB_KANBAN = (
oldChildId,
oldChildNewParent,
movedId,
movedNewParent,
movedNewStatus,
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}" } },
_set: {kanbanparent: ${
oldChildNewParent ? `"${oldChildNewParent}"` : null
}}) {
returning {
id
kanbanparent
}
}`;
const movedQuery = `
updateMovedChild: update_jobs(where: { id: { _eq: "${movedId}" } },
_set: {kanbanparent: ${
movedNewParent ? `"${movedNewParent}"` : null
} , status: "${movedNewStatus}"}) {
returning {
id
status
kanbanparent
}
}`;
const newChildQuery = `
updateNewChild: update_jobs(where: { id: { _eq: "${newChildId}" } },
_set: {kanbanparent: ${newChildParent ? `"${newChildParent}"` : null}}) {
returning {
id
kanbanparent
}
}`;
return gql`
mutation UPDATE_JOB_KANBAN {
${oldChildId ? oldChildQuery : ""}
${movedId ? movedQuery : ""}
${newChildId ? newChildQuery : ""}
}
`;
};

4
client/src/pages/production-board/production-board.component.jsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import ProductionBoardKanbanContainer from "../../components/production-board-kanban/production-board-kanban.container";
export default function ProductionBoardComponent({ columnState }) {
return <ProductionBoardKanbanContainer columnState={columnState} />;
export default function ProductionBoardComponent() {
return <ProductionBoardKanbanContainer />;
}

22
client/src/pages/production-board/production-board.container.jsx
View File

@@ -1,11 +1,10 @@
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ProductionBoardComponent from "./production-board.component";
import ProductionListColumns from "../../components/production-list-columns/production-list-columns.data";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -17,27 +16,18 @@ const mapDispatchToProps = (dispatch) => ({
export function ProductionBoardContainer({ setBreadcrumbs, bodyshop }) {
const { t } = useTranslation();
const columnState = useState(
(bodyshop.production_config &&
bodyshop.production_config.columnKeys.map((k) =>
ProductionListColumns.find((e) => e.key === k)
)) ||
[]
);
// console.log("ProductionListContainer -> columnState", columnState);
useEffect(() => {
document.title = t("titles.productionboard");
setBreadcrumbs([
{ link: "/manage/production/board", label: t("titles.bc.productionboard") },
{
link: "/manage/production/board",
label: t("titles.bc.productionboard"),
},
]);
}, [t, setBreadcrumbs]);
return (
<div>
<ProductionBoardComponent columnState={columnState} />
</div>
);
return <ProductionBoardComponent />;
}
export default connect(
mapStateToProps,

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

@@ -780,6 +780,7 @@
"jobs": "Jobs",
"owners": "Owners",
"payments": "All Payments",
"productionboard": "Production Board",
"productionlist": "Production - List",
"schedule": "Schedule",
"shop": "My Shop",

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

@@ -780,6 +780,7 @@
"jobs": "Trabajos",
"owners": "propietarios",
"payments": "",
"productionboard": "",
"productionlist": "",
"schedule": "Programar",
"shop": "Mi tienda",

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

@@ -780,6 +780,7 @@
"jobs": "Emplois",
"owners": "Propriétaires",
"payments": "",
"productionboard": "",
"productionlist": "",
"schedule": "Programme",
"shop": "Mon magasin",