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

BOD-21 Added some custom components to render CT, BP, PP to production. Schema changes for view to include body and refinish hrs.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-22 11:09:47 -07:00
parent 9c84024a08
commit 400dfabcec
25 changed files with 703 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,29 +42,28 @@ function Header({
//TODO Add
return (
<Row type="flex" justify="space-around" align="middle">
<Row type='flex' justify='space-around' align='middle'>
{logo ? (
<Col span={3}>
<img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
<img alt='Shop Logo' src={logo} style={{ height: "40px" }} />
</Col>
) : null}
<Col span={21}>
{landingHeader ? (
<Menu
theme="dark"
className="header"
theme='dark'
className='header'
selectedKeys={selectedNavItem}
mode="horizontal"
onClick={handleMenuClick}
>
mode='horizontal'
onClick={handleMenuClick}>
<ManageSignInButton />
<Menu.SubMenu
title={
<div>
<Avatar
size="medium"
alt="Avatar"
size='medium'
alt='Avatar'
src={
currentUser.photoURL ? currentUser.photoURL : UserImage
}
@@ -72,13 +71,12 @@ function Header({
/>
{currentUser.displayName || t("general.labels.unknown")}
</div>
}
>
}>
<Menu.Item onClick={() => signOutStart()}>
{t("user.actions.signout")}
</Menu.Item>
<Menu.Item>
<Link to="/manage/profile">
<Link to='/manage/profile'>
{t("menus.currentuser.profile")}
</Link>
</Menu.Item>
@@ -88,15 +86,14 @@ function Header({
<GlobalOutlined />
<span>{t("menus.currentuser.languageselector")}</span>
</span>
}
>
<Menu.Item actiontype="lang-select" key="en-US">
}>
<Menu.Item actiontype='lang-select' key='en-US'>
{t("general.languages.english")}
</Menu.Item>
<Menu.Item actiontype="lang-select" key="fr-CA">
<Menu.Item actiontype='lang-select' key='fr-CA'>
{t("general.languages.french")}
</Menu.Item>
<Menu.Item actiontype="lang-select" key="es-MX">
<Menu.Item actiontype='lang-select' key='es-MX'>
{t("general.languages.spanish")}
</Menu.Item>
</Menu.SubMenu>
@@ -104,14 +101,13 @@ function Header({
</Menu>
) : (
<Menu
theme="dark"
className="header"
theme='dark'
className='header'
selectedKeys={selectedNavItem}
mode="horizontal"
onClick={handleMenuClick}
>
<Menu.Item key="home">
<Link to="/manage">
mode='horizontal'
onClick={handleMenuClick}>
<Menu.Item key='home'>
<Link to='/manage'>
<HomeFilled />
{t("menus.header.home")}
</Link>
@@ -122,32 +118,37 @@ function Header({
<Icon component={FaCarCrash} />
<span>{t("menus.header.jobs")}</span>
</span>
}
>
<Menu.Item key="schedule">
<Link to="/manage/schedule">
}>
<Menu.Item key='schedule'>
<Link to='/manage/schedule'>
<Icon component={FaCalendarAlt} />
{t("menus.header.schedule")}
</Link>
</Menu.Item>
<Menu.Item key="activejobs">
<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
<Menu.Item key='production'>
<Link to='/manage/production/list'>
<Icon component={FaCalendarAlt} />
{t("menus.header.productionlist")}
</Link>
</Menu.Item>
<Menu.Item key="availablejobs">
<Link to="/manage/available">
<Menu.Item key='activejobs'>
<Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
</Menu.Item>
<Menu.Item key='availablejobs'>
<Link to='/manage/available'>
{t("menus.header.availablejobs")}
</Link>
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title={t("menus.header.customers")}>
<Menu.Item key="owners">
<Link to="/manage/owners">
<Menu.Item key='owners'>
<Link to='/manage/owners'>
<TeamOutlined />
{t("menus.header.owners")}
</Link>
</Menu.Item>
<Menu.Item key="vehicles">
<Link to="/manage/vehicles">
<Menu.Item key='vehicles'>
<Link to='/manage/vehicles'>
<CarFilled />
{t("menus.header.vehicles")}
</Link>
@@ -160,22 +161,21 @@ function Header({
<CarFilled />
<span>{t("menus.header.courtesycars")}</span>
</span>
}
>
<Menu.Item key="courtesycarsall">
<Link to="/manage/courtesycars">
}>
<Menu.Item key='courtesycarsall'>
<Link to='/manage/courtesycars'>
<CarFilled />
{t("menus.header.courtesycars-all")}
</Link>
</Menu.Item>
<Menu.Item key="contracts">
<Link to="/manage/courtesycars/contracts">
<Menu.Item key='contracts'>
<Link to='/manage/courtesycars/contracts'>
<FileFilled />
{t("menus.header.courtesycars-contracts")}
</Link>
</Menu.Item>
<Menu.Item key="newcontract">
<Link to="/manage/courtesycars/contracts/new">
<Menu.Item key='newcontract'>
<Link to='/manage/courtesycars/contracts/new'>
<FileAddFilled />
{t("menus.header.courtesycars-newcontract")}
</Link>
@@ -188,41 +188,38 @@ function Header({
<DollarCircleFilled />
<span>{t("menus.header.accounting")}</span>
</span>
}
>
}>
<Menu.Item
key="enterinvoices"
key='enterinvoices'
onClick={() => {
setInvoiceEnterContext({
actions: {},
context: {},
});
}}
>
}}>
{t("menus.header.enterinvoices")}
</Menu.Item>
<Menu.Item key="invoices">
<Link to="/manage/invoices">{t("menus.header.invoices")}</Link>
<Menu.Item key='invoices'>
<Link to='/manage/invoices'>{t("menus.header.invoices")}</Link>
</Menu.Item>
<Menu.Item
key="entertimetickets"
key='entertimetickets'
onClick={() => {
setTimeTicketContext({
actions: {},
context: {},
});
}}
>
}}>
{t("menus.header.entertimeticket")}
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title={t("menus.header.shop")}>
<Menu.Item key="shop">
<Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
<Menu.Item key='shop'>
<Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
</Menu.Item>
<Menu.Item key="shop-vendors">
<Link to="/manage/shop/vendors">
<Menu.Item key='shop-vendors'>
<Link to='/manage/shop/vendors'>
{t("menus.header.shop_vendors")}
</Link>
</Menu.Item>
@@ -232,8 +229,8 @@ function Header({
title={
<div>
<Avatar
size="medium"
alt="Avatar"
size='medium'
alt='Avatar'
src={
currentUser.photoURL ? currentUser.photoURL : UserImage
}
@@ -241,13 +238,12 @@ function Header({
/>
{currentUser.displayName || t("general.labels.unknown")}
</div>
}
>
}>
<Menu.Item onClick={() => signOutStart()}>
{t("user.actions.signout")}
</Menu.Item>
<Menu.Item>
<Link to="/manage/profile">
<Link to='/manage/profile'>
{t("menus.currentuser.profile")}
</Link>
</Menu.Item>
@@ -257,15 +253,14 @@ function Header({
<GlobalOutlined />
<span>{t("menus.currentuser.languageselector")}</span>
</span>
}
>
<Menu.Item actiontype="lang-select" key="en-US">
}>
<Menu.Item actiontype='lang-select' key='en-US'>
{t("general.languages.english")}
</Menu.Item>
<Menu.Item actiontype="lang-select" key="fr-CA">
<Menu.Item actiontype='lang-select' key='fr-CA'>
{t("general.languages.french")}
</Menu.Item>
<Menu.Item actiontype="lang-select" key="es-MX">
<Menu.Item actiontype='lang-select' key='es-MX'>
{t("general.languages.spanish")}
</Menu.Item>
</Menu.SubMenu>

48
client/src/components/production-list-columns/production-list-columns.alert.component.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { ExclamationCircleFilled } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "@apollo/react-hooks";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
export default function ProductionListColumnAlert({ record }) {
const { t } = useTranslation();
const [updateAlert] = useMutation(UPDATE_JOB);
const handleAlertToggle = () => {
updateAlert({
variables: {
jobId: record.id,
job: {
production_vars: {
...record.production_vars,
alert: !record.production_vars.alert,
},
},
},
}).then(() => {
if (record.refetch) record.refetch();
});
};
return (
<Dropdown
overlay={
<Menu>
<Menu.Item key='toggleAlert' onClick={handleAlertToggle}>
{record.production_vars && record.production_vars.alert
? t("production.labels.alertoff")
: t("production.labels.alerton")}
</Menu.Item>
</Menu>
}
trigger={["contextMenu"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className='production-alert' />
) : null}
</div>
</Dropdown>
);
}

51
client/src/components/production-list-columns/production-list-columns.bodypriority.component.jsx Normal file
View File

@@ -0,0 +1,51 @@
import { useMutation } from "@apollo/react-hooks";
import { Dropdown, Menu } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
export default function ProductionListColumnBodyPriority({ record }) {
const { t } = useTranslation();
const [updateAlert] = useMutation(UPDATE_JOB);
const handleSetBodyPriority = (e) => {
const { key } = e;
updateAlert({
variables: {
jobId: record.id,
job: {
production_vars: {
...record.production_vars,
bodypriority: key === "clearBodyPriority" ? null : key,
},
},
},
}).then(() => {
if (record.refetch) record.refetch();
});
};
return (
<Dropdown
overlay={
<Menu onClick={handleSetBodyPriority}>
<Menu.Item key='clearBodyPriority'>
{t("production.actions.bodypriority-clear")}
</Menu.Item>
<Menu.SubMenu
key='set'
title={t("production.actions.bodypriority-set")}>
{new Array(9).fill().map((value, index) => (
<Menu.Item key={index + 1}>{index + 1}</Menu.Item>
))}
</Menu.SubMenu>
</Menu>
}
trigger={["contextMenu"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.bodypriority}
</div>
</Dropdown>
);
}

73
client/src/components/production-list-columns/production-list-columns.data.js
View File

@@ -5,8 +5,9 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateFormatter } from "../../utils/DateFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { Menu, Dropdown } from "antd";
import ProductionListColumnAlert from "./production-list-columns.alert.component";
import ProductionListColumnBodyPriority from "./production-list-columns.bodypriority.component";
import ProductionListColumnPaintPriority from "./production-list-columns.paintpriority.component";
export default [
{
@@ -133,32 +134,25 @@ export default [
dataIndex: "status",
key: "status",
ellipsis: true,
sorter: (a, b) => alphaSort(a.status, b.status),
},
{
title: i18n.t("jobs.labels.bodyhours"),
dataIndex: "labhrs",
key: "labhrs",
sorter: (a, b) => a.labhrs - b.labhrs,
},
{
title: i18n.t("jobs.labels.refinishhours"),
dataIndex: "larhrs",
key: "larhrs",
sorter: (a, b) => a.larhrs - b.larhrs,
},
{
title: i18n.t("production.labels.alert"),
dataIndex: "alert",
key: "alert",
render: (text, record) => (
<Dropdown
overlay={
<Menu>
<Menu.Item key="1">1st menu item {text}</Menu.Item>
<Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
}
trigger={["contextMenu"]}
>
<div
onClick={() => console.log("Hi")}
style={{ width: "100%", height: "19px" }}
>
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert" />
) : null}
</div>
</Dropdown>
),
render: (text, record) => <ProductionListColumnAlert record={record} />,
},
{
title: i18n.t("production.labels.note"),
@@ -175,11 +169,34 @@ export default [
dataIndex: "ct",
key: "ct",
render: (text, record) => {
return (
<span>
{(record.production_vars && record.production_vars.note) || ""}
</span>
);
let ct = 0;
if (!!record.actual_in) {
const totalHrs = record.larhrs + record.labhrs;
const Difference_In_Time = new Date() - new Date(record.actual_in);
const Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
ct = (totalHrs / Difference_In_Days).toFixed(2);
}
return <span>{ct || 0}</span>;
},
},
{
title: i18n.t("production.labels.bodypriority"),
dataIndex: "bodypriority",
key: "bodypriority",
sorter: (a, b) =>
a.production_vars.bodypriority - b.production_vars.bodypriority,
render: (text, record) => (
<ProductionListColumnBodyPriority record={record} />
),
},
{
title: i18n.t("production.labels.paintpriority"),
dataIndex: "paintpriority",
key: "paintpriority",
sorter: (a, b) =>
a.production_vars.paintpriority - b.production_vars.paintpriority,
render: (text, record) => (
<ProductionListColumnPaintPriority record={record} />
),
},
];

51
client/src/components/production-list-columns/production-list-columns.paintpriority.component.jsx Normal file
View File

@@ -0,0 +1,51 @@
import { useMutation } from "@apollo/react-hooks";
import { Dropdown, Menu } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
export default function ProductionListColumnPaintPriority({ record }) {
const { t } = useTranslation();
const [updateAlert] = useMutation(UPDATE_JOB);
const handleSetPaintPriority = (e) => {
const { key } = e;
updateAlert({
variables: {
jobId: record.id,
job: {
production_vars: {
...record.production_vars,
paintpriority: key === "clearPaintPriority" ? null : key,
},
},
},
}).then(() => {
if (record.refetch) record.refetch();
});
};
return (
<Dropdown
overlay={
<Menu onClick={handleSetPaintPriority}>
<Menu.Item key='clearPaintPriority'>
{t("production.actions.paintpriority-clear")}
</Menu.Item>
<Menu.SubMenu
key='set'
title={t("production.actions.paintpriority-set")}>
{new Array(9).fill().map((value, index) => (
<Menu.Item key={index + 1}>{index + 1}</Menu.Item>
))}
</Menu.SubMenu>
</Menu>
}
trigger={["contextMenu"]}>
<div style={{ width: "100%", height: "19px" }}>
{record.production_vars && record.production_vars.paintpriority}
</div>
</Dropdown>
);
}

8
client/src/components/production-list-table/production-list-table.component.jsx
View File

@@ -45,9 +45,10 @@ export function ProductionListTable({
if (!!!columns) return <div>No columns found.</div>;
return (
<ReactDragListView.DragColumn onDragEnd={onDragEnd} nodeSelector="th">
<ReactDragListView.DragColumn onDragEnd={onDragEnd} nodeSelector='th'>
<Table
size="small"
size='small'
pagination={false}
title={() => (
<div>
<ProductionListSaveConfigButton
@@ -67,11 +68,12 @@ export function ProductionListTable({
state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
};
})}
rowKey="id"
rowKey='id'
loading={loading}
dataSource={data}
onChange={handleTableChange}
rowClassName={(record, index) => (index % 2 === 0 ? "red" : "blue")} //TODO What could be good usage here?
onRow={(record, index) => (record.refetch = refetch)}
/>
</ReactDragListView.DragColumn>
);

2
client/src/components/production-list-table/production-list-table.container.jsx
View File

@@ -12,7 +12,7 @@ export default function ProductionListTableContainer({ columnState }) {
<div>
<ProductionListTable
loading={loading}
data={data ? data.jobs : []}
data={data ? data.productionview : []}
refetch={refetch}
columnState={columnState}
/>

3
client/src/components/production-list-table/production-list-table.styles.scss
View File

@@ -1,9 +1,10 @@
.production-alert {
animation: alertBlinker 2s linear infinite;
animation: alertBlinker 1s linear infinite;
}
@keyframes alertBlinker {
50% {
color: red;
opacity: 100;
//opacity: 0;
}
}

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

@@ -52,7 +52,7 @@ export const QUERY_ALL_ACTIVE_JOBS = gql`
export const QUERY_JOBS_IN_PRODUCTION = gql`
query QUERY_JOBS_IN_PRODUCTION {
jobs {
productionview {
id
status
ro_number
@@ -72,8 +72,9 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
clm_total
ownr_ph1
special_coverage_policy
status
production_vars
labhrs
larhrs
}
}
`;

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

@@ -528,6 +528,7 @@
"audit": "Audit Trail",
"availablenew": "Available New Jobs",
"availablesupplements": "Available Supplements",
"bodyhours": "Body Hrs",
"cards": {
"appraiser": "Appraiser",
"customer": "Customer Information",
@@ -565,6 +566,7 @@
"ratetotals": {
"lab": "Body Total"
},
"refinishhours": "Refinish Hrs",
"vehicle_info": "Vehicle"
},
"successes": {
@@ -600,6 +602,7 @@
"invoices": "Invoices",
"jobs": "Jobs",
"owners": "Owners",
"productionlist": "Production - List",
"schedule": "Schedule",
"shop": "My Shop",
"shop_config": "Configuration",
@@ -719,11 +722,20 @@
},
"production": {
"actions": {
"bodypriority-clear": "Clear Body Priority",
"bodypriority-set": "Set Body Priority",
"paintpriority-clear": "Clear Paint Priority",
"paintpriority-set": "Set Paint Priority",
"saveconfig": "Save Configuration"
},
"labels": {
"alert": "Alert",
"note": "Production Note"
"alertoff": "Remove alert from job",
"alerton": "Add alert to job",
"bodypriority": "B/P",
"cycletime": "C/T",
"note": "Production Note",
"paintpriority": "P/P"
}
},
"profile": {

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

@@ -528,6 +528,7 @@
"audit": "",
"availablenew": "",
"availablesupplements": "",
"bodyhours": "",
"cards": {
"appraiser": "Tasador",
"customer": "Información al cliente",
@@ -565,6 +566,7 @@
"ratetotals": {
"lab": ""
},
"refinishhours": "",
"vehicle_info": "Vehículo"
},
"successes": {
@@ -600,6 +602,7 @@
"invoices": "",
"jobs": "Trabajos",
"owners": "propietarios",
"productionlist": "",
"schedule": "Programar",
"shop": "Mi tienda",
"shop_config": "Configuración",
@@ -719,11 +722,20 @@
},
"production": {
"actions": {
"bodypriority-clear": "",
"bodypriority-set": "",
"paintpriority-clear": "",
"paintpriority-set": "",
"saveconfig": ""
},
"labels": {
"alert": "",
"note": ""
"alertoff": "",
"alerton": "",
"bodypriority": "",
"cycletime": "",
"note": "",
"paintpriority": ""
}
},
"profile": {

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

@@ -528,6 +528,7 @@
"audit": "",
"availablenew": "",
"availablesupplements": "",
"bodyhours": "",
"cards": {
"appraiser": "Expert",
"customer": "Informations client",
@@ -565,6 +566,7 @@
"ratetotals": {
"lab": ""
},
"refinishhours": "",
"vehicle_info": "Véhicule"
},
"successes": {
@@ -600,6 +602,7 @@
"invoices": "",
"jobs": "Emplois",
"owners": "Propriétaires",
"productionlist": "",
"schedule": "Programme",
"shop": "Mon magasin",
"shop_config": "Configuration",
@@ -719,11 +722,20 @@
},
"production": {
"actions": {
"bodypriority-clear": "",
"bodypriority-set": "",
"paintpriority-clear": "",
"paintpriority-set": "",
"saveconfig": ""
},
"labels": {
"alert": "",
"note": ""
"alertoff": "",
"alerton": "",
"bodypriority": "",
"cycletime": "",
"note": "",
"paintpriority": ""
}
},
"profile": {