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

Updates to all card components.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-09 15:27:40 -08:00
parent e3357910b9
commit dbe4f47539
46 changed files with 1135 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -3,8 +3,9 @@ import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../alert/alert.component";
import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
import { Row, Col } from "antd";
import { PageHeader, Button, Descriptions, Menu, Icon } from "antd";
import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import JobDetailCardsVehicleComponent from "./job-detail-cards.vehicle.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
@@ -33,39 +34,88 @@ export default function JobDetailCards({ selectedJob }) {
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<section className="job-cards">
<JobDetailCardsCustomerComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsVehicleComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsInsuranceComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsDatesComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsPartsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsNotesComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsDamageComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsDocumentsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</section>
<PageHeader
ghost={false}
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"
extra={[
<Button key="images">
<Icon type="file-image" />
{t("jobs.actions.viewJobImages")}
</Button>,
<Button key="printing">
<Icon type="printer" />
{t("jobs.actions.printCenter")}
</Button>,
<Button key="notes">
<Icon type="edit" />
{t("jobs.actions.notes")}
</Button>,
<Button key="postinvoices">
<Icon type="shopping-cart" />
{t("jobs.actions.postInvoices")}
</Button>,
<Button key="receiveparts">
<Icon type="inbox" />
{t("jobs.actions.receiveParts")}
</Button>,
<Button key="partstatus">
<Icon type="tool" />
{t("jobs.actions.partStatus")}
</Button>
]}
>
<Descriptions size="small" column={3}>
<Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
<Descriptions.Item label="Association">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
<Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
<Descriptions.Item label="Remarks">
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>
<section className="job-cards">
<JobDetailCardsCustomerComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsVehicleComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsInsuranceComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsDatesComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsPartsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsNotesComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsDamageComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsDocumentsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsTotalsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</section>
</PageHeader>
);
}

6
client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
View File

@@ -7,7 +7,11 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.customer")}>
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.customer")}
extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}
>
{data ? (
<span>
<div>{`${data?.pit_owner_first_name ??

5
client/src/components/job-detail-cards/job-detail-cards.dates.component.jsx
View File

@@ -1,6 +1,7 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import Moment from "react-moment";
export default function JobDetailCardsDatesComponent({ loading, data }) {
const { t } = useTranslation();
@@ -9,7 +10,9 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
<CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
{data ? (
<span>
Dates stuff here.
Actual In <Moment format="MM/DD/YYYY">{data?.actual_in}</Moment>
Scheduled Completion
<Moment format="MM/DD/YYYY">{data?.scheduled_completion}</Moment>
</span>
) : null}
</CardTemplate>

74
client/src/components/job-detail-cards/job-detail-cards.header.component.jsx Normal file
View File

@@ -0,0 +1,74 @@
import { Icon, Menu, Row, Col, PageHeader, Button, Descriptions } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function JobDetailCardsHeader({ selectedJob, data }) {
const { t } = useTranslation();
return (
<div>
<PageHeader
ghost={false}
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>
]}
>
<Descriptions size="small" column={3}>
<Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
<Descriptions.Item label="Association">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="Creation Time">
2017-01-10
</Descriptions.Item>
<Descriptions.Item label="Effective Time">
2017-10-10
</Descriptions.Item>
<Descriptions.Item label="Remarks">
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>
The rest of the content can go heare?
</PageHeader>
<Row>
<Col span={4}>Name</Col>
<Col span={18} offset={2}>
<Menu mode="horizontal">
<Menu.Item key="images">
<Icon type="file-image" />
{t("jobs.actions.viewJobImages")}
</Menu.Item>
<Menu.Item key="printing">
<Icon type="printer" />
{t("jobs.actions.printCenter")}
</Menu.Item>
<Menu.Item key="notes">
<Icon type="edit" />
{t("jobs.actions.notes")}
</Menu.Item>
<Menu.Item key="postinvoices">
<Icon type="shopping-cart" />
{t("jobs.actions.postInvoices")}
</Menu.Item>
<Menu.Item key="receiveparts">
<Icon type="inbox" />
{t("jobs.actions.receiveParts")}
</Menu.Item>
<Menu.Item key="partstatus">
<Icon type="tool" />
{t("jobs.actions.partStatus")}
</Menu.Item>
</Menu>
</Col>
</Row>
</div>
);
}

43
client/src/components/job-detail-cards/job-detail-cards.insurance.component.jsx
View File

@@ -1,6 +1,7 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import PhoneFormatter from "../../utils/PhoneFormatter";
export default function JobDetailCardsInsuranceComponent({ loading, data }) {
const { t } = useTranslation();
@@ -9,7 +10,47 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
<CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
{data ? (
<span>
Insurance stuff here.
<div>{data?.ins_co_nm ?? t("general.labels.unknown")}</div>
<div>{data?.clm_no ?? t("general.labels.unknown")}</div>
<div>
{t("jobs.labels.cards.filehandler")}
{data?.ins_ea ? (
<a href={`mailto:${data.ins_ea}`}>
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
</a>
) : (
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
)}
{data?.ins_ph1 ? (
<PhoneFormatter>{data?.ins_ph1}</PhoneFormatter>
) : null}
</div>
<div>
TODO:
{t("jobs.labels.cards.appraiser")}
{data?.est_ea ? (
<a href={`mailto:${data.est_ea}`}>
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
</a>
) : (
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
)}
</div>
<div>
{t("jobs.labels.cards.estimator")}
{data?.est_ea ? (
<a href={`mailto:${data.est_ea}`}>
<div>{`${data?.est_ct_fn ?? ""} ${data?.est_ct_ln ?? ""}`}</div>
</a>
) : (
<div>{`${data?.est_ct_fn ?? ""} ${data?.est_ct_ln ?? ""}`}</div>
)}
{data?.est_ph1 ? (
<PhoneFormatter>{data?.est_ph1}</PhoneFormatter>
) : null}
</div>
</span>
) : null}
</CardTemplate>

39
client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
View File

@@ -1,17 +1,42 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import { Pie } from "react-chartjs-2";
export default function JobDetailCardsPartsComponent({ loading, data }) {
const { t } = useTranslation();
const p = {
labels: ["Not Ordered", "Ordered", "Received", "Backordered"],
datasets: [
{
data: [5, 15, 10, 2],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
borderWidth: 1
}
]
};
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
{data ? (
<span>
Parts stuff here.
</span>
) : null}
</CardTemplate>
<div>
<CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
{data ? <Pie data={p} /> : null}
</CardTemplate>
</div>
);
}

5
client/src/components/job-detail-cards/job-detail-cards.template.component.jsx
View File

@@ -1,11 +1,15 @@
import React from "react";
import { Card } from "antd";
import { Link } from "react-router-dom";
export default function JobDetailCardTemplate({
loading,
title,
extraLink,
...otherProps
}) {
let extra;
if (extraLink) extra = { extra: <Link to={extraLink} >More</Link> };
return (
<Card
size="small"
@@ -13,6 +17,7 @@ export default function JobDetailCardTemplate({
className="job-card"
title={title}
loading={loading}
{...extra}
>
{otherProps.children}
</Card>

10
client/src/components/job-detail-cards/job-detail-cards.vehicle.component.jsx
View File

@@ -6,10 +6,16 @@ export default function JobDetailCardsVehicleComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.vehicle")}>
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.vehicle")}
extraLink={data?.vehicle ? `/manage/vehicles/${data?.vehicle?.id}` : null}
>
{data ? (
<span>
Vehicle stuff here.
{data.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
{data.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
{data.vehicle?.v_model_desc ?? t("general.labels.na")}
</span>
) : null}
</CardTemplate>

39
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -19,28 +19,28 @@ export default function JobsPage({
const actionMenu = (
<Menu>
<Menu.Item key='images'>
<Icon type='file-image' />
<Menu.Item key="images">
<Icon type="file-image" />
{t("jobs.actions.viewJobImages")}
</Menu.Item>
<Menu.Item key='printing'>
<Icon type='printer' />
<Menu.Item key="printing">
<Icon type="printer" />
{t("jobs.actions.printCenter")}
</Menu.Item>
<Menu.Item key='notes'>
<Icon type='edit' />
<Menu.Item key="notes">
<Icon type="edit" />
{t("jobs.actions.notes")}
</Menu.Item>
<Menu.Item key='postinvoices'>
<Icon type='shopping-cart' />
<Menu.Item key="postinvoices">
<Icon type="shopping-cart" />
{t("jobs.actions.postInvoices")}
</Menu.Item>
<Menu.Item key='receiveparts'>
<Icon type='inbox' />
<Menu.Item key="receiveparts">
<Icon type="inbox" />
{t("jobs.actions.receiveParts")}
</Menu.Item>
<Menu.Item key='partstatus'>
<Icon type='tool' />
<Menu.Item key="partstatus">
<Icon type="tool" />
{t("jobs.actions.partStatus")}
</Menu.Item>
</Menu>
@@ -114,7 +114,7 @@ export default function JobsPage({
key: "action",
render: (text, record) => (
<Dropdown overlay={actionMenu} trigger={["click"]}>
<Icon type='ellipsis' />
<Icon type="ellipsis" />
</Dropdown>
)
}
@@ -141,13 +141,20 @@ export default function JobsPage({
return (
<div>
<Input name='searchCriteria' onChange={handleChange} />
<Input.Search
placeholder="Search..."
onSearch={value => console.log(value)}
enterButton
/>
<br />
<Table
loading={loading}
pagination={{ position: "bottom" }}
pagination={{ position: "top" }}
columns={columns.map(item => ({ ...item }))}
rowKey='id'
rowKey="id"
dataSource={jobs}
rowSelection={{ selectedRowKeys: [selectedJob] }}
onChange={handleTableChange}
onRow={(record, rowIndex) => {
return {

82
client/src/graphql/apollo-error-handling.js
View File

@@ -9,51 +9,51 @@ const errorLink = onError(
console.log("networkError", networkError);
console.log("operation", operation);
console.log("forward", forward);
if (graphQLErrors) {
// User access token has expired
if (graphQLErrors[0].message.includes("JWTExpired")) {
console.log("Got to the error check.");
if (access_token && access_token !== "undefined") {
// Let's refresh token through async request
return new Observable(observer => {
auth.currentUser
.getIdToken(true)
.then(function(idToken) {
if (!idToken) {
window.localStorage.removeItem("token");
return console.log("Refresh token has expired");
}
console.log("Got a new token", idToken);
window.localStorage.setItem("token", idToken);
//if (graphQLErrors) {
// User access token has expired
// if (graphQLErrors[0].message.includes("JWTExpired")) {
console.log("Got to the error check.");
if (access_token && access_token !== "undefined") {
// Let's refresh token through async request
return new Observable(observer => {
auth.currentUser
.getIdToken(true)
.then(function(idToken) {
if (!idToken) {
window.localStorage.removeItem("token");
return console.log("Refresh token has expired");
}
console.log("Got a new token", idToken);
window.localStorage.setItem("token", idToken);
// reset the headers
operation.setContext(({ headers = {} }) => ({
headers: {
// Re-add old headers
...headers,
// Switch out old access token for new one
authorization: idToken ? `Bearer ${idToken}` : ""
}
}));
// reset the headers
operation.setContext(({ headers = {} }) => ({
headers: {
// Re-add old headers
...headers,
// Switch out old access token for new one
authorization: idToken ? `Bearer ${idToken}` : ""
}
}));
const subscriber = {
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer)
};
console.log("About to resend the request.");
// Retry last failed request
forward(operation).subscribe(subscriber);
})
.catch(error => {
// No refresh or client token available, we force user to login
console.log("Hit an error.");
observer.error(error);
});
const subscriber = {
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer)
};
console.log("About to resend the request.");
// Retry last failed request
forward(operation).subscribe(subscriber);
})
.catch(error => {
// No refresh or client token available, we force user to login
console.log("Hit an error.");
observer.error(error);
});
}
}
});
}
//}
//}
if (networkError) {
console.log(`[Network error]: ${networkError}`);

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

@@ -7,6 +7,7 @@ export const GET_ALL_OPEN_JOBS = gql`
est_number
ro_number
job_status {
id
name
}
scheduled_completion
@@ -35,6 +36,7 @@ export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
ro_number
job_status {
name
id
}
scheduled_completion
scheduled_delivery
@@ -46,6 +48,7 @@ export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
plate_no
}
owner {
id
first_name
last_name
}
@@ -101,6 +104,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
v_vin
}
owner {
id
first_name
last_name
}
@@ -120,6 +124,7 @@ export const GET_JOB_BY_PK = gql`
id
local_tax_rate
owner {
id
first_name
last_name
phone
@@ -135,6 +140,7 @@ export const GET_JOB_BY_PK = gql`
scheduled_in
scheduled_delivery
job_status {
id
name
}
updated_at
@@ -161,10 +167,12 @@ export const QUERY_JOB_CARD_DETAILS = gql`
pit_owner_phone
pit_owner_email
owner {
id
allow_text_message
preferred_contact
}
vehicle {
id
v_model_yr
v_make_desc
v_model_desc
@@ -175,27 +183,30 @@ export const QUERY_JOB_CARD_DETAILS = gql`
actual_completion
actual_delivery
actual_in
created_at
est_number
id
local_tax_rate
ins_co_nm
ins_ct_fn
ins_ct_ln
ins_ph1
ins_ea
est_co_nm
est_ph1
est_ea
est_ct_fn
est_ct_ln
regie_number
clm_no
ro_number
scheduled_completion
scheduled_in
scheduled_delivery
job_status {
id
name
}
updated_at
claim_total
deductible
ded_amt
vehicle {
id
plate_no

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

@@ -49,7 +49,10 @@
"parts": "Parts",
"notes": "Notes",
"damage": "Area of Damage",
"totals": "Totals"
"totals": "Totals",
"filehandler" : "File Handler",
"appraiser" : "Appraiser",
"estimator" : "Estimator"
},
"no_owner": "No Owner",
"vehicle_info": "Vehicle"