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

23
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2">
<babeledit_project version="1.2" be_version="2.6.1">
<!--
BabelEdit project file
@@ -15421,6 +15421,27 @@
<folder_node>
<name>errors</name>
<children>
<concept_node>
<name>boardupdate</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>removing</name>
<definition_loaded>false</definition_loaded>

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"

1
hasura/migrations/1592417299712_drop_view_public_productionview/down.yaml Normal file
View File

@@ -0,0 +1 @@
[]

5
hasura/migrations/1592417299712_drop_view_public_productionview/up.yaml Normal file
View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: DROP VIEW "public"."productionview";
type: run_sql

5
hasura/migrations/1592417338944_alter_table_public_jobs_alter_column_kanbanparent/down.yaml Normal file
View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."jobs" ALTER COLUMN "kanbanparent" TYPE uuid;
type: run_sql

5
hasura/migrations/1592417338944_alter_table_public_jobs_alter_column_kanbanparent/up.yaml Normal file
View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."jobs" ALTER COLUMN "kanbanparent" TYPE text;
type: run_sql

1
hasura/migrations/1592417343599_run_sql_migration/down.yaml Normal file
View File

@@ -0,0 +1 @@
[]

24
hasura/migrations/1592417343599_run_sql_migration/up.yaml Normal file
View File

@@ -0,0 +1,24 @@
- args:
cascade: true
read_only: false
sql: "CREATE OR REPLACE VIEW \"public\".\"productionview\" AS \n SELECT j.id,\n
\ j.status,\n j.ro_number,\n j.est_number,\n j.ownr_fn,\n j.ownr_ln,\n
\ j.v_model_yr,\n j.v_model_desc,\n j.clm_no,\n j.v_make_desc,\n
\ j.v_color,\n j.plate_no,\n j.actual_in,\n j.scheduled_completion,\n
\ j.scheduled_delivery,\n j.ins_co_nm,\n j.clm_total,\n j.ownr_ph1,\n
\ j.special_coverage_policy,\n j.production_vars,\n lab.labhrs,\n lar.larhrs,\n
\ j.shopid,\n parts.partcount,\n j.kanbanparent\n FROM (((jobs j\n
\ LEFT JOIN ( SELECT l.jobid,\n sum(l.mod_lb_hrs) AS labhrs\n
\ FROM joblines l\n WHERE (l.mod_lbr_ty = 'LAB'::text)\n GROUP
BY l.jobid) lab ON ((lab.jobid = j.id)))\n LEFT JOIN ( SELECT l2.jobid,\n
\ sum(l2.mod_lb_hrs) AS larhrs\n FROM joblines l2\n WHERE
(l2.mod_lbr_ty = 'LAR'::text)\n GROUP BY l2.jobid) lar ON ((lar.jobid
= j.id)))\n LEFT JOIN ( SELECT l3.jobid,\n json_agg(l3.status)
AS partcount\n FROM joblines l3\n WHERE (l3.part_type IS
NOT NULL)\n GROUP BY l3.jobid) parts ON ((parts.jobid = j.id)))\n WHERE
(j.inproduction = true);"
type: run_sql
- args:
name: productionview
schema: public
type: add_existing_table_or_view

6
hasura/migrations/1592417407401_create_relationship_bodyshop_public_table_productionview/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
relationship: bodyshop
table:
name: productionview
schema: public
type: drop_relationship

13
hasura/migrations/1592417407401_create_relationship_bodyshop_public_table_productionview/up.yaml Normal file
View File

@@ -0,0 +1,13 @@
- args:
name: bodyshop
table:
name: productionview
schema: public
using:
manual_configuration:
column_mapping:
shopid: id
remote_table:
name: bodyshops
schema: public
type: create_object_relationship

6
hasura/migrations/1592417440460_update_permission_user_public_table_productionview/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: productionview
schema: public
type: drop_select_permission

45
hasura/migrations/1592417440460_update_permission_user_public_table_productionview/up.yaml Normal file
View File

@@ -0,0 +1,45 @@
- args:
permission:
allow_aggregations: true
columns:
- id
- status
- ro_number
- est_number
- ownr_fn
- ownr_ln
- v_model_yr
- v_model_desc
- clm_no
- v_make_desc
- v_color
- plate_no
- actual_in
- scheduled_completion
- scheduled_delivery
- ins_co_nm
- clm_total
- ownr_ph1
- special_coverage_policy
- production_vars
- labhrs
- larhrs
- shopid
- partcount
- kanbanparent
computed_fields: []
filter:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
limit: null
role: user
table:
name: productionview
schema: public
type: create_select_permission

36
hasura/migrations/metadata.yaml
View File

@@ -3306,31 +3306,31 @@ tables:
- role: user
permission:
columns:
- actual_in
- clm_no
- clm_total
- est_number
- id
- ins_co_nm
- kanbanparent
- labhrs
- larhrs
- status
- ro_number
- est_number
- ownr_fn
- ownr_ln
- ownr_ph1
- partcount
- v_model_yr
- v_model_desc
- clm_no
- v_make_desc
- v_color
- plate_no
- production_vars
- ro_number
- actual_in
- scheduled_completion
- scheduled_delivery
- shopid
- ins_co_nm
- clm_total
- ownr_ph1
- special_coverage_policy
- status
- v_color
- v_make_desc
- v_model_desc
- v_model_yr
- production_vars
- labhrs
- larhrs
- shopid
- partcount
- kanbanparent
filter:
bodyshop:
associations: