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 {