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

UI Fixes on Job list page. Refactored form row component. BOD-155

Browse Source
This commit is contained in:
Patrick Fic
2020-06-12 15:04:16 -07:00
parent 12924fe13a
commit a88785fc43
26 changed files with 634 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
bodyshop_translations.babel
View File

@@ -10733,6 +10733,27 @@
<folder_node>
<name>forms</name>
<children>
<concept_node>
<name>admindates</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>appraiserinfo</name>
<definition_loaded>false</definition_loaded>
@@ -10796,6 +10817,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>estdates</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>inscoinfo</name>
<definition_loaded>false</definition_loaded>
@@ -10859,6 +10901,48 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>repairdates</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>scheddates</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>
</children>
</folder_node>
<folder_node>

6
client/src/App/App.js
View File

@@ -1,3 +1,4 @@
import "antd/dist/antd.css";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -9,8 +10,8 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
import { checkUserSession } from "../redux/user/user.actions";
import { selectCurrentUser } from "../redux/user/user.selectors";
import PrivateRoute from "../utils/private-route";
import "antd/dist/antd.css";
import "./App.styles.scss";
import { Grid } from "antd";
const LandingPage = lazy(() => import("../pages/landing/landing.page"));
const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -32,6 +33,9 @@ export function App({ checkUserSession, currentUser }) {
checkUserSession();
}, [checkUserSession]);
const b = Grid.useBreakpoint();
console.log("Breakpoints:", b);
const { t } = useTranslation();
if (currentUser.authorized === null) {

4
client/src/App/App.styles.scss
View File

@@ -4,6 +4,7 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
&__search {
flex: 1;
}
@@ -21,4 +22,7 @@
&__margin {
margin: 0.2rem 0.2rem;
}
&__margin-large {
margin: 0.5rem 0.5rem;
}
}

25
client/src/components/data-label/data-label.component.jsx Normal file
View File

@@ -0,0 +1,25 @@
import React from "react";
export default function DataLabel({
label,
hideIfNull,
children,
vertical,
visible = true,
...props
}) {
if (!visible || (hideIfNull && !!!children)) return null;
return (
<div {...props}>
<div
style={{
display: vertical ? "block" : "inline-block",
marginRight: ".2rem",
}}>{`${label}: `}</div>
<div style={{ display: vertical ? "block" : "inline-block" }}>
{children}
</div>
</div>
);
}

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

@@ -1,75 +1,99 @@
import {
EditFilled,
FileImageFilled,
PrinterFilled,
ShoppingFilled
} from "@ant-design/icons";
import { PrinterFilled } from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks";
import { Button, PageHeader, Tag } from "antd";
import { Button, Col, Drawer, Grid, PageHeader, Row, Tag } from "antd";
import queryString from "query-string";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Link, useHistory, useLocation } from "react-router-dom";
import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
const mapDispatchToProps = (dispatch) => ({
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
setNoteUpsertContext: (context) =>
dispatch(setModalContext({ context: context, modal: "noteUpsert" })),
setPrintCenterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "printCenter" })),
});
export function JobDetailCards({
selectedJob,
setInvoiceEnterContext,
setNoteUpsertContext,
setPrintCenterContext,
}) {
const colBreakPoints = {
xs: {
span: 24,
},
sm: {
span: 12,
},
};
export function JobDetailCards({ setPrintCenterContext }) {
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const bpoints = {
xs: "100%",
sm: "100%",
md: "100%",
lg: "50%",
xl: "50%",
xxl: "45%",
};
const drawerPercentage = selectedBreakpoint
? bpoints[selectedBreakpoint[0]]
: "100%";
const searchParams = queryString.parse(useLocation().search);
const { selected } = searchParams;
const history = useHistory();
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only",
variables: { id: selectedJob },
skip: !selectedJob,
variables: { id: selected },
skip: !selected,
});
const { t } = useTranslation();
if (!selectedJob) {
return <div>{t("jobs.errors.nojobselected")}</div>;
}
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type='error' />;
const handleDrawerClose = () => {
delete searchParams.selected;
history.push({
search: queryString.stringify({
...searchParams,
}),
});
};
return (
<div className='job-cards-container'>
<NoteUpsertModal />
<PageHeader
ghost={false}
tags={
<span key='job-status'>
{data.jobs_by_pk.status ? (
<Tag color='blue'>{data.jobs_by_pk.status}</Tag>
) : null}
</span>
}
title={
loading ? (
t("general.labels.loading")
) : (
<Drawer
visible={!!selected}
destroyOnClose
width={drawerPercentage}
placement='right'
onClose={handleDrawerClose}
footer={<div>The footer.</div>}>
{loading ? <LoadingSpinner /> : null}
{error ? <AlertComponent message={error.message} type='error' /> : null}
{data ? (
<PageHeader
ghost={true}
tags={[
<OwnerTagPopoverComponent key='owner' job={data.jobs_by_pk} />,
<VehicleTagPopoverComponent key='vehicle' job={data.jobs_by_pk} />,
<Tag
color='#f50'
key='production'
style={{ display: data.jobs_by_pk.inproduction ? "" : "none" }}>
{t("jobs.labels.inproduction")}
</Tag>,
]}
title={
<Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
{data.jobs_by_pk.ro_number
? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
@@ -77,102 +101,70 @@ export function JobDetailCards({
data.jobs_by_pk.est_number
}`}
</Link>
)
}
extra={[
<Button
key='schedule'
//TODO Enabled logic based on status.
onClick={() => {}}>
{t("jobs.actions.schedule")}
</Button>,
<Link
key='documents'
to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}>
<Button>
<FileImageFilled />
{t("jobs.actions.addDocuments")}
}
subTitle={data.jobs_by_pk.status}
extra={
<Button
onClick={() => {
setPrintCenterContext({
actions: { refetch: refetch },
context: {
id: data.jobs_by_pk.id,
type: "job",
},
});
}}>
<PrinterFilled />
{t("jobs.actions.printCenter")}
</Button>
</Link>,
<Button
onClick={() => {
setPrintCenterContext({
actions: { refetch: refetch },
context: {
id: data.jobs_by_pk.id,
type: "job",
},
});
}}
key='printing'>
<PrinterFilled />
{t("jobs.actions.printCenter")}
</Button>,
<Button
key='notes'
actiontype='addNote'
onClick={() => {
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: data.jobs_by_pk.id,
},
});
}}>
<EditFilled />
{t("jobs.actions.addNote")}
</Button>,
<Button
key='postinvoices'
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: refetch },
context: {
job: data.jobs_by_pk,
},
});
}}>
<ShoppingFilled />
{t("jobs.actions.postInvoices")}
</Button>,
]}>
<section className='job-cards'>
<JobDetailCardsCustomerComponent
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>
</div>
}>
<Row gutter={[16, 16]}>
<Col {...colBreakPoints}>
<JobDetailCardsInsuranceComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col {...colBreakPoints}>
<JobDetailCardsTotalsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col {...colBreakPoints}>
<JobDetailCardsDatesComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col {...colBreakPoints}>
<JobDetailCardsPartsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col {...colBreakPoints}>
<JobDetailCardsNotesComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col {...colBreakPoints}>
<JobDetailCardsDocumentsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col span={24}>
<JobDetailCardsDamageComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
</Col>
</Row>
</PageHeader>
) : null}
</Drawer>
);
}
export default connect(null, mapDispatchToProps)(JobDetailCards);

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

@@ -1,58 +0,0 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import PhoneFormatter from "../../utils/PhoneFormatter";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsCustomerComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.customer")}
extraLink={data && data.owner ? `/manage/owners/${data.owner.id}` : null}
>
{data ? (
<span>
<div>
<Link to={`/manage/owners/${data.owner.id}`}>{`${data.ownr_fn ||
""} ${data.ownr_ln || ""}`}</Link>
</div>
<div>
{t("jobs.fields.phoneshort")}:
<PhoneFormatter>{`${data.ownr_ph1 ||
t("general.labels.na")}`}</PhoneFormatter>
</div>
<div>
{t("jobs.fields.ownr_ea")}:
{data.ownr_ea ? (
<a href={`mailto:${data.ownr_ea}`}>
<span>{`${data.ownr_ea || ""}`}</span>
</a>
) : (
t("general.labels.na")
)}
</div>
<div>{`${(data.owner && data.owner.preferred_contact) || ""}`}</div>
<div>
{data.vehicle ? (
<Link to={`/manage/vehicles/${data.vehicleid}`}>
{`${data.v_model_yr || ""} ${data.v_make_desc ||
""} ${data.v_model_desc || ""}`}
a
</Link>
) : (
<span>
{`${data.v_model_yr || ""} ${data.v_make_desc ||
""} ${data.v_model_desc || ""}`}
b
</span>
)}
e
</div>
</span>
) : null}
</CardTemplate>
);
}

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

@@ -27,87 +27,86 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
) ? (
<div>{t("jobs.errors.nodates")}</div>
) : null}
{data.date_open ? (
<Timeline.Item>
<label>{t("jobs.fields.date_open")}: </label>
<DateFormatter>{data.date_open}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_estimated ? (
<Timeline.Item>
<label>{t("jobs.fields.date_estimated")}: </label>
<DateFormatter>{data.date_estimated}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_scheduled ? (
<Timeline.Item>
<label>{t("jobs.fields.date_scheduled")}: </label>
<DateFormatter>{data.date_scheduled}</DateFormatter>
</Timeline.Item>
) : null}
{data.scheduled_in ? (
<Timeline.Item>
<label>{t("jobs.fields.scheduled_in")}: </label>
<DateFormatter>{data.scheduled_in}</DateFormatter>
</Timeline.Item>
) : null}
{data.actual_in ? (
<Timeline.Item>
{t("jobs.fields.actual_in")}
<label>{t("jobs.fields.actual_in")}: </label>
<DateFormatter>{data.actual_in}</DateFormatter>
</Timeline.Item>
) : null}
{data.scheduled_completion ? (
<Timeline.Item>
{t("jobs.fields.scheduled_completion")}
<label>{t("jobs.fields.scheduled_completion")}: </label>
<DateFormatter>{data.scheduled_completion}</DateFormatter>
</Timeline.Item>
) : null}
{data.scheduled_in ? (
<Timeline.Item>
{t("jobs.fields.scheduled_in")}
<DateFormatter>{data.scheduled_in}</DateFormatter>
</Timeline.Item>
) : null}
{data.actual_completion ? (
<Timeline.Item>
{t("jobs.fields.actual_completion")}
<label>{t("jobs.fields.actual_completion")}: </label>
<DateFormatter>{data.actual_completion}</DateFormatter>
</Timeline.Item>
) : null}
{data.scheduled_delivery ? (
<Timeline.Item>
{t("jobs.fields.scheduled_delivery")}
<label>{t("jobs.fields.scheduled_delivery")}: </label>
<DateFormatter>{data.scheduled_delivery}</DateFormatter>
</Timeline.Item>
) : null}
{data.actual_delivery ? (
<Timeline.Item>
{t("jobs.fields.actual_delivery")}
<label>{t("jobs.fields.actual_delivery")}: </label>
<DateFormatter>{data.actual_delivery}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_estimated ? (
<Timeline.Item>
{t("jobs.fields.date_estimated")}
<DateFormatter>{data.date_estimated}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_open ? (
<Timeline.Item>
{t("jobs.fields.date_open")}
<DateFormatter>{data.date_open}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_scheduled ? (
<Timeline.Item>
{t("jobs.fields.date_scheduled")}
<DateFormatter>{data.date_scheduled}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_invoiced ? (
<Timeline.Item>
{t("jobs.fields.date_invoiced")}
<label>{t("jobs.fields.date_invoiced")}: </label>
<DateFormatter>{data.date_invoiced}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_closed ? (
<Timeline.Item>
{t("jobs.fields.date_closed")}
<label>{t("jobs.fields.date_closed")}: </label>
<DateFormatter>{data.date_closed}</DateFormatter>
</Timeline.Item>
) : null}
{data.date_exported ? (
<Timeline.Item>
{t("jobs.fields.date_exported")}
<label>{t("jobs.fields.date_exported")}: </label>
<DateFormatter>{data.date_exported}</DateFormatter>
</Timeline.Item>
) : null}

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

@@ -1,7 +1,6 @@
import { Carousel } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import "./job-detail-cards.styles.scss";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsDocumentsComponent({ loading, data }) {

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

@@ -1,8 +1,7 @@
import React from "react";
import { useTranslation } from "react-i18next";
import DataLabel from "../data-label/data-label.component";
import CardTemplate from "./job-detail-cards.template.component";
import PhoneFormatter from "../../utils/PhoneFormatter";
export default function JobDetailCardsInsuranceComponent({ loading, data }) {
const { t } = useTranslation();
@@ -10,10 +9,15 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
<CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
{data ? (
<span>
<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")}
<DataLabel label={t("jobs.fields.ins_co_nm")} hideIfNull>
{data.ins_co_nm}
</DataLabel>
<DataLabel label={t("jobs.fields.clm_no")} hideIfNull>
{data.clm_no}
</DataLabel>
<DataLabel
label={t("jobs.labels.cards.filehandler")}
visible={data.ins_ct_fn && data.ins_ct_ln}>
{data.ins_ea ? (
<a href={`mailto:${data.ins_ea}`}>
<div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
@@ -21,35 +25,18 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
) : (
<div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
)}
{data.ins_ph1 ? (
<PhoneFormatter>{data.ins_ph1}</PhoneFormatter>
) : null}
</div>
<div>
{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 ? (
</DataLabel>
<DataLabel
label={t("jobs.labels.cards.estimator")}
visible={data.est_ct_fn && data.est_ct_ln}>
{data.ins_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>
</DataLabel>
</span>
) : null}
</CardTemplate>

31
client/src/components/job-detail-cards/job-detail-cards.styles.scss
View File

@@ -1,31 +0,0 @@
.job-cards {
display: flex;
flex-wrap: wrap;
}
.job-card {
margin: 0.5em;
}
@media screen and (min-width: 40em) {
.card {
max-width: calc(50% - 1em);
}
}
@media screen and (min-width: 60em) {
.card {
max-width: calc(25% - 1em);
}
}
.centered {
margin: 0 auto;
padding: 0 1em;
}
@media screen and (min-width: 52em) {
.centered {
max-width: 52em;
}
}

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

@@ -9,16 +9,14 @@ export default function JobDetailCardTemplate({
...otherProps
}) {
let extra;
if (extraLink) extra = { extra: <Link to={extraLink} >More</Link> };
if (extraLink) extra = { extra: <Link to={extraLink}>More</Link> };
return (
<Card
size="small"
style={{ width: 290 }}
className="job-card"
size='small'
className='job-card'
title={title}
loading={loading}
{...extra}
>
{...extra}>
{otherProps.children}
</Card>
);

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

@@ -1,17 +1,44 @@
import { Statistic } from "antd";
import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsTotalsComponent({ loading, data }) {
const { t } = useTranslation();
let totals;
try {
totals = JSON.parse(data.job_totals);
} catch (error) {
console.log("Error in CardsTotal component", error);
}
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}>
{data ? (
<span>
Totals stuff here.
</span>
) : null}
{totals ? (
<div className='imex-flex-row'>
<Statistic
className='imex-flex-row__margin-large'
title={t("jobs.labels.total_repairs")}
value={Dinero(totals.totals.total_repairs).toFormat()}
/>
<Statistic
className='imex-flex-row__margin-large'
title={t("jobs.fields.ded_amt")}
value={Dinero({
amount: Math.round((data.ded_amt || 0) * 100),
}).toFormat()}
/>
<Statistic
className='imex-flex-row__margin-large'
title={t("jobs.labels.net_repairs")}
value={Dinero(totals.totals.net_repairs).toFormat()}
/>
</div>
) : (
t("jobs.errors.nofinancial")
)}
</CardTemplate>
);
}

4
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -1,16 +1,16 @@
import { Button, Input, Table, Dropdown, Menu } from "antd";
import { Button, Dropdown, Input, Menu, Table } from "antd";
import React, { useState } 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 { onlyUnique } from "../../utils/arrayHelper";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
import { onlyUnique } from "../../utils/arrayHelper";
const mapDispatchToProps = (dispatch) => ({
setJobLineEditContext: (context) =>

13
client/src/components/job-totals-table/job-totals-table.component.jsx
View File

@@ -22,7 +22,6 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
}, [bodyshop, job]);
if (!!!totals) {
console.log("Totals was falsey.");
return <LoadingSkeleton />;
}
@@ -179,7 +178,17 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
</tbody>
</table>
</div>
<div className='job-totals-stats'>
<div
className='job-totals-stats'
onClick={(e) => {
if (e.detail === 3) {
try {
console.log("Job", job);
} catch {
console.log("Unable to show job.");
}
}
}}>
<Statistic
title={t("jobs.labels.subtotal")}
value={totals.totals.subtotal.toFormat()}

3
client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx
View File

@@ -18,9 +18,6 @@ export default function JobsDetailClaims({ job }) {
<Form.Item label={t("jobs.fields.unitnumber")} name='unit_number'>
<Input />
</Form.Item>
</FormRow>
<FormRow>
<Form.Item label={t("jobs.fields.kmin")} name='kmin'>
<InputNumber precision={1} />
</Form.Item>

107
client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
View File

@@ -2,61 +2,70 @@ import { DatePicker, Form } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import FormRow from "../layout-form-row/layout-form-row.component";
export default function JobsDetailDatesComponent({ job }) {
const { t } = useTranslation();
return (
<div>
<Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
<DatePicker />
</Form.Item>
CAA # seems not correct based on field mapping Class seems not correct
based on field mapping
<Form.Item label={t("jobs.fields.date_estimated")} name='date_estimated'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_open")} name='date_open'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_scheduled")} name='date_scheduled'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.scheduled_in")} name='scheduled_in'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.actual_in")} name='actual_in'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.scheduled_completion")}
name='scheduled_completion'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.actual_completion")}
name='actual_completion'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.scheduled_delivery")}
name='scheduled_delivery'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.actual_delivery")}
name='actual_delivery'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_invoiced")} name='date_invoiced'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_closed")} name='date_closed'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_exported")} name='date_exported'>
<DateTimePicker />
</Form.Item>
<FormRow header={t("jobs.forms.estdates")}>
<Form.Item
label={t("jobs.fields.date_estimated")}
name='date_estimated'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_open")} name='date_open'>
<DateTimePicker />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.scheddates")}>
<Form.Item
label={t("jobs.fields.date_scheduled")}
name='date_scheduled'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.scheduled_in")} name='scheduled_in'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.actual_in")} name='actual_in'>
<DateTimePicker />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.repairdates")}>
<Form.Item
label={t("jobs.fields.scheduled_completion")}
name='scheduled_completion'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.actual_completion")}
name='actual_completion'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.scheduled_delivery")}
name='scheduled_delivery'>
<DateTimePicker />
</Form.Item>
<Form.Item
label={t("jobs.fields.actual_delivery")}
name='actual_delivery'>
<DateTimePicker />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.admindates")}>
<Form.Item label={t("jobs.fields.date_invoiced")} name='date_invoiced'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_closed")} name='date_closed'>
<DateTimePicker />
</Form.Item>
<Form.Item label={t("jobs.fields.date_exported")} name='date_exported'>
<DateTimePicker />
</Form.Item>
</FormRow>
</div>
);
}

2
client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx
View File

@@ -25,8 +25,6 @@ export default function JobsDetailInsurance({ job, form }) {
<Form.Item label={t("jobs.fields.ins_city")} name='ins_city'>
<Input />
</Form.Item>
</FormRow>
<FormRow>
<Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'>
<Input />
</Form.Item>

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

@@ -1,24 +1,35 @@
import { Button, Input, Table } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks";
import { Button, Input, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { Link, useHistory, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { onlyUnique } from "../../utils/arrayHelper";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters";
import AlertComponent from "../alert/alert.component";
import StartChatButton from "../chat-open-button/chat-open-button.component";
import { useHistory } from "react-router-dom";
import queryString from "query-string";
export default withRouter(function JobsList({
searchTextState,
refetch,
loading,
jobs,
searchParams,
}) {
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function JobsList({ bodyshop }) {
const searchParams = queryString.parse(useLocation().search);
const { selected } = searchParams;
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open", "Open*"],
},
});
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" },
@@ -26,7 +37,55 @@ export default withRouter(function JobsList({
const { t } = useTranslation();
const history = useHistory();
const setSearchText = searchTextState[1];
const [searchText, setSearchText] = useState("");
if (error) return <AlertComponent message={error.message} type='error' />;
const jobs = data
? searchText === ""
? data.jobs
: data.jobs.filter(
(j) =>
(j.ro_number || "")
.toString()
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_fn || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_ln || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
(j.plate_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.v_model_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.v_make_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase())
)
: [];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const handleOnRowClick = (record) => {
if (record) {
if (record.id) {
history.push({
search: queryString.stringify({
...searchParams,
selected: record.id,
}),
});
}
}
};
const columns = [
{
title: t("jobs.fields.ro_number"),
@@ -91,6 +150,19 @@ export default withRouter(function JobsList({
sorter: (a, b) => alphaSort(a.status, b.status),
sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
filters:
(jobs &&
jobs
.map((j) => j.status)
.filter(onlyUnique)
.map((s) => {
return {
text: s || "No Status*",
value: [s],
};
})) ||
[],
onFilter: (value, record) => value.includes(record.status),
render: (text, record) => {
return record.status || t("general.labels.na");
},
@@ -167,69 +239,51 @@ export default withRouter(function JobsList({
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const handleOnRowClick = (record) => {
if (record) {
if (record.id) {
console.log("searchParams", searchParams);
history.push({
search: queryString.stringify({
...searchParams,
selected: record.id,
}),
});
}
}
};
return (
<div>
<Table
loading={loading}
title={() => {
return (
<div style={{ display: "flex" }}>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.target.value);
}}
enterButton
/>
</div>
);
}}
size='small'
pagination={{ position: "top" }}
columns={columns.map((item) => ({ ...item }))}
rowKey='id'
dataSource={jobs}
rowSelection={{
onSelect: (record) => {
<Table
loading={loading}
size='small'
pagination={false}
columns={columns}
rowKey='id'
dataSource={jobs}
style={{ height: "100%" }}
scroll={{ x: true }}
title={() => {
return (
<div className='imex-table-header'>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
className='imex-table-header__search'
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.target.value);
}}
vale={searchText}
enterButton
/>
</div>
);
}}
rowSelection={{
onSelect: (record) => {
handleOnRowClick(record);
},
selectedRowKeys: [selected],
type: "radio",
}}
onChange={handleTableChange}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record);
},
selectedRowKeys: [selected],
type: "radio",
}}
onChange={handleTableChange}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record);
}, // click row
onDoubleClick: (event) => {}, // double click row
onContextMenu: (event) => {}, // right button click row
onMouseEnter: (event) => {}, // mouse enter row
onMouseLeave: (event) => {}, // mouse leave row
};
}}
/>
</div>
};
}}
/>
);
});
}
export default connect(mapStateToProps, null)(JobsList);

56
client/src/components/layout-form-row/layout-form-row.component.jsx
View File

@@ -7,19 +7,24 @@ export default function LayoutFormRow({ header, children }) {
//We have only one element. It's going to get the whole thing.
return children;
}
const rowGutter = { gutter: [32, 32] };
const colSpan = (maxspan) => {
const rowGutter = { gutter: [16, 16] };
const colSpan = (spanOverride) => {
return {
xs: {
span: 24,
},
sm: {
span: 12,
},
md: {
span: !!maxspan ? Math.min(12, maxspan) : 12,
span: 8,
},
lg: {
span: !!maxspan
? Math.min(Math.max(24 / children.length, 6), maxspan)
: Math.max(24 / children.length, 6),
span: 6,
},
xl: {
span: 4,
},
};
};
@@ -29,7 +34,7 @@ export default function LayoutFormRow({ header, children }) {
{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
<Row {...rowGutter}>
{children.map((c, idx) => (
<Col key={idx} {...colSpan(c.props && c.props.maxspan)}>
<Col key={idx} {...colSpan(c.props && c.props.span)}>
{c}
</Col>
))}
@@ -37,3 +42,40 @@ export default function LayoutFormRow({ header, children }) {
</div>
);
}
// export default function LayoutFormRow({ header, children }) {
// if (!!!children.length) {
// //We have only one element. It's going to get the whole thing.
// return children;
// }
// const rowGutter = { gutter: [16, 16] };
// const colSpan = (maxspan) => {
// return {
// xs: {
// span: 24,
// },
// md: {
// span: !!maxspan ? Math.min(12, maxspan) : 12,
// },
// lg: {
// span: !!maxspan
// ? Math.min(Math.max(24 / children.length, 6), maxspan)
// : Math.max(24 / children.length, 6),
// },
// };
// };
// return (
// <div className='imex-form-row'>
// {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
// <Row {...rowGutter}>
// {children.map((c, idx) => (
// <Col key={idx} {...colSpan(c.props && c.props.maxspan)}>
// {c}
// </Col>
// ))}
// </Row>
// </div>
// );
// }

14
client/src/components/layout-form-row/layout-form-row.styles.scss
View File

@@ -2,5 +2,19 @@
.imex-form-row {
.ant-row {
margin-bottom: 0rem;
.ant-form-item-label {
padding: 0rem;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: inline-block;
padding: 0rem;
margin: 0rem;
}
}
}

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

@@ -4,20 +4,13 @@ import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import ProductionListTable from "./production-list-table.component";
export default function ProductionListTableContainer({ columnState }) {
// const { loading, data, refetch } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
// pollInterval: 30000,
// });
const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
return (
<ProductionListTable
loading={loading}
data={data ? data.productionview : []}
refetch={null}
columnState={columnState}
/>
<ProductionListTable
loading={loading}
data={data ? data.productionview : []}
columnState={columnState}
/>
);
}

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

@@ -324,11 +324,18 @@ export const QUERY_JOB_CARD_DETAILS = gql`
est_ct_ln
clm_no
status
job_totals
area_of_damage
ro_number
scheduled_completion
scheduled_in
scheduled_delivery
date_invoiced
date_open
date_exported
date_closed
date_scheduled
date_estimated
notes {
id
text
@@ -336,7 +343,6 @@ export const QUERY_JOB_CARD_DETAILS = gql`
private
created_at
}
updated_at
clm_total
ded_amt

76
client/src/pages/jobs/jobs.page.jsx
View File

@@ -1,88 +1,30 @@
import { useQuery } from "@apollo/react-hooks";
import queryString from "query-string";
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 AlertComponent from "../../components/alert/alert.component";
import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
import JobsList from "../../components/jobs-list/jobs-list.component";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function JobsPage({ location, bodyshop, setBreadcrumbs }) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
},
});
export function JobsPage({ setBreadcrumbs }) {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.jobs");
setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-active") }]);
setBreadcrumbs([
{ link: "/manage/jobs", label: t("titles.bc.jobs-active") },
]);
}, [t, setBreadcrumbs]);
const search = queryString.parse(location.search);
const searchTextState = useState("");
const searchText = searchTextState[0];
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<EnterInvoiceModalContainer />
<JobsList
searchTextState={searchTextState}
refetch={refetch}
loading={loading}
searchParams={search}
//setSelectedJob={setSelectedJob}
jobs={
data
? searchText === ""
? data.jobs
: data.jobs.filter(
(j) =>
(j.ro_number || "")
.toString()
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_fn || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_ln || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.clm_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.plate_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.v_model_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.v_make_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase())
)
: null
}
/>
<JobDetailCards selectedJob={search.selected} />
<div className='jobs-list-container'>
<JobsList />
<JobDetailCards />
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsPage);
export default connect(null, mapDispatchToProps)(JobsPage);

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

@@ -667,12 +667,16 @@
"vehicle": "Vehicle"
},
"forms": {
"admindates": "Administrative Dates",
"appraiserinfo": "Appraiser Info",
"claiminfo": "Claim Information",
"dedinfo": "Deductible Info",
"estdates": "Estimate Dates",
"inscoinfo": "Insurance Company Information",
"laborrates": "Labor Rates",
"lossinfo": "Loss Information"
"lossinfo": "Loss Information",
"repairdates": "Repair Dates",
"scheddates": "Schedule Dates"
},
"labels": {
"allocations": "Allocations",

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

@@ -667,12 +667,16 @@
"vehicle": "Vehículo"
},
"forms": {
"admindates": "",
"appraiserinfo": "",
"claiminfo": "",
"dedinfo": "",
"estdates": "",
"inscoinfo": "",
"laborrates": "",
"lossinfo": ""
"lossinfo": "",
"repairdates": "",
"scheddates": ""
},
"labels": {
"allocations": "",

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

@@ -667,12 +667,16 @@
"vehicle": "Véhicule"
},
"forms": {
"admindates": "",
"appraiserinfo": "",
"claiminfo": "",
"dedinfo": "",
"estdates": "",
"inscoinfo": "",
"laborrates": "",
"lossinfo": ""
"lossinfo": "",
"repairdates": "",
"scheddates": ""
},
"labels": {
"allocations": "",