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> <folder_node>
<name>forms</name> <name>forms</name>
<children> <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> <concept_node>
<name>appraiserinfo</name> <name>appraiserinfo</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -10796,6 +10817,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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> <concept_node>
<name>inscoinfo</name> <name>inscoinfo</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -10859,6 +10901,48 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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> </children>
</folder_node> </folder_node>
<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 React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; 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 { checkUserSession } from "../redux/user/user.actions";
import { selectCurrentUser } from "../redux/user/user.selectors"; import { selectCurrentUser } from "../redux/user/user.selectors";
import PrivateRoute from "../utils/private-route"; import PrivateRoute from "../utils/private-route";
import "antd/dist/antd.css";
import "./App.styles.scss"; import "./App.styles.scss";
import { Grid } from "antd";
const LandingPage = lazy(() => import("../pages/landing/landing.page")); const LandingPage = lazy(() => import("../pages/landing/landing.page"));
const ManagePage = lazy(() => import("../pages/manage/manage.page.container")); const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -32,6 +33,9 @@ export function App({ checkUserSession, currentUser }) {
checkUserSession(); checkUserSession();
}, [checkUserSession]); }, [checkUserSession]);
const b = Grid.useBreakpoint();
console.log("Breakpoints:", b);
const { t } = useTranslation(); const { t } = useTranslation();
if (currentUser.authorized === null) { if (currentUser.authorized === null) {

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

@@ -4,6 +4,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
&__search { &__search {
flex: 1; flex: 1;
} }
@@ -21,4 +22,7 @@
&__margin { &__margin {
margin: 0.2rem 0.2rem; 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 { import { PrinterFilled } from "@ant-design/icons";
EditFilled,
FileImageFilled,
PrinterFilled,
ShoppingFilled
} from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks"; 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 React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; 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 { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
import { setModalContext } from "../../redux/modals/modals.actions"; import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container"; import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component"; import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component"; import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component"; import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component"; import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component"; import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component"; import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component"; import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component"; import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
setNoteUpsertContext: (context) =>
dispatch(setModalContext({ context: context, modal: "noteUpsert" })),
setPrintCenterContext: (context) => setPrintCenterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "printCenter" })), dispatch(setModalContext({ context: context, modal: "printCenter" })),
}); });
export function JobDetailCards({ const colBreakPoints = {
selectedJob, xs: {
setInvoiceEnterContext, span: 24,
setNoteUpsertContext, },
setPrintCenterContext, 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, { const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only", fetchPolicy: "network-only",
variables: { id: selectedJob }, variables: { id: selected },
skip: !selectedJob, skip: !selected,
}); });
const { t } = useTranslation(); const { t } = useTranslation();
const handleDrawerClose = () => {
if (!selectedJob) { delete searchParams.selected;
return <div>{t("jobs.errors.nojobselected")}</div>; history.push({
} search: queryString.stringify({
if (loading) return <LoadingSpinner />; ...searchParams,
if (error) return <AlertComponent message={error.message} type='error' />; }),
});
};
return ( return (
<div className='job-cards-container'> <Drawer
<NoteUpsertModal /> visible={!!selected}
<PageHeader destroyOnClose
ghost={false} width={drawerPercentage}
tags={ placement='right'
<span key='job-status'> onClose={handleDrawerClose}
{data.jobs_by_pk.status ? ( footer={<div>The footer.</div>}>
<Tag color='blue'>{data.jobs_by_pk.status}</Tag> {loading ? <LoadingSpinner /> : null}
) : null} {error ? <AlertComponent message={error.message} type='error' /> : null}
</span> {data ? (
} <PageHeader
title={ ghost={true}
loading ? ( tags={[
t("general.labels.loading") <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}`}> <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
{data.jobs_by_pk.ro_number {data.jobs_by_pk.ro_number
? `${t("jobs.fields.ro_number")} ${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 data.jobs_by_pk.est_number
}`} }`}
</Link> </Link>
) }
} subTitle={data.jobs_by_pk.status}
extra={[ extra={
<Button <Button
key='schedule' onClick={() => {
//TODO Enabled logic based on status. setPrintCenterContext({
onClick={() => {}}> actions: { refetch: refetch },
{t("jobs.actions.schedule")} context: {
</Button>, id: data.jobs_by_pk.id,
<Link type: "job",
key='documents' },
to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}> });
<Button> }}>
<FileImageFilled /> <PrinterFilled />
{t("jobs.actions.addDocuments")} {t("jobs.actions.printCenter")}
</Button> </Button>
</Link>, }>
<Button <Row gutter={[16, 16]}>
onClick={() => { <Col {...colBreakPoints}>
setPrintCenterContext({ <JobDetailCardsInsuranceComponent
actions: { refetch: refetch }, loading={loading}
context: { data={data ? data.jobs_by_pk : null}
id: data.jobs_by_pk.id, />
type: "job", </Col>
}, <Col {...colBreakPoints}>
}); <JobDetailCardsTotalsComponent
}} loading={loading}
key='printing'> data={data ? data.jobs_by_pk : null}
<PrinterFilled /> />
{t("jobs.actions.printCenter")} </Col>
</Button>, <Col {...colBreakPoints}>
<Button <JobDetailCardsDatesComponent
key='notes' loading={loading}
actiontype='addNote' data={data ? data.jobs_by_pk : null}
onClick={() => { />
setNoteUpsertContext({ </Col>
actions: { refetch: refetch }, <Col {...colBreakPoints}>
context: { <JobDetailCardsPartsComponent
jobId: data.jobs_by_pk.id, loading={loading}
}, data={data ? data.jobs_by_pk : null}
}); />
}}> </Col>
<EditFilled /> <Col {...colBreakPoints}>
{t("jobs.actions.addNote")} <JobDetailCardsNotesComponent
</Button>, loading={loading}
<Button data={data ? data.jobs_by_pk : null}
key='postinvoices' />
onClick={() => { </Col>
setInvoiceEnterContext({ <Col {...colBreakPoints}>
actions: { refetch: refetch }, <JobDetailCardsDocumentsComponent
context: { loading={loading}
job: data.jobs_by_pk, data={data ? data.jobs_by_pk : null}
}, />
}); </Col>
}}> <Col span={24}>
<ShoppingFilled /> <JobDetailCardsDamageComponent
{t("jobs.actions.postInvoices")} loading={loading}
</Button>, data={data ? data.jobs_by_pk : null}
]}> />
<section className='job-cards'> </Col>
<JobDetailCardsCustomerComponent </Row>
loading={loading} </PageHeader>
data={data ? data.jobs_by_pk : null} ) : null}
/> </Drawer>
<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>
); );
} }
export default connect(null, mapDispatchToProps)(JobDetailCards); 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> <div>{t("jobs.errors.nodates")}</div>
) : null} ) : 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 ? ( {data.actual_in ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.actual_in")} <label>{t("jobs.fields.actual_in")}: </label>
<DateFormatter>{data.actual_in}</DateFormatter> <DateFormatter>{data.actual_in}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : null}
{data.scheduled_completion ? ( {data.scheduled_completion ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.scheduled_completion")} <label>{t("jobs.fields.scheduled_completion")}: </label>
<DateFormatter>{data.scheduled_completion}</DateFormatter> <DateFormatter>{data.scheduled_completion}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : null}
{data.scheduled_in ? (
<Timeline.Item>
{t("jobs.fields.scheduled_in")}
<DateFormatter>{data.scheduled_in}</DateFormatter>
</Timeline.Item>
) : null}
{data.actual_completion ? ( {data.actual_completion ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.actual_completion")} <label>{t("jobs.fields.actual_completion")}: </label>
<DateFormatter>{data.actual_completion}</DateFormatter> <DateFormatter>{data.actual_completion}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : null}
{data.scheduled_delivery ? ( {data.scheduled_delivery ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.scheduled_delivery")} <label>{t("jobs.fields.scheduled_delivery")}: </label>
<DateFormatter>{data.scheduled_delivery}</DateFormatter> <DateFormatter>{data.scheduled_delivery}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : null}
{data.actual_delivery ? ( {data.actual_delivery ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.actual_delivery")} <label>{t("jobs.fields.actual_delivery")}: </label>
<DateFormatter>{data.actual_delivery}</DateFormatter> <DateFormatter>{data.actual_delivery}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : 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 ? ( {data.date_invoiced ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.date_invoiced")} <label>{t("jobs.fields.date_invoiced")}: </label>
<DateFormatter>{data.date_invoiced}</DateFormatter> <DateFormatter>{data.date_invoiced}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : null}
{data.date_closed ? ( {data.date_closed ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.date_closed")} <label>{t("jobs.fields.date_closed")}: </label>
<DateFormatter>{data.date_closed}</DateFormatter> <DateFormatter>{data.date_closed}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : null}
{data.date_exported ? ( {data.date_exported ? (
<Timeline.Item> <Timeline.Item>
{t("jobs.fields.date_exported")} <label>{t("jobs.fields.date_exported")}: </label>
<DateFormatter>{data.date_exported}</DateFormatter> <DateFormatter>{data.date_exported}</DateFormatter>
</Timeline.Item> </Timeline.Item>
) : null} ) : 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 { Carousel } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import "./job-detail-cards.styles.scss";
import CardTemplate from "./job-detail-cards.template.component"; import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsDocumentsComponent({ loading, data }) { 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 React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import DataLabel from "../data-label/data-label.component";
import CardTemplate from "./job-detail-cards.template.component"; import CardTemplate from "./job-detail-cards.template.component";
import PhoneFormatter from "../../utils/PhoneFormatter";
export default function JobDetailCardsInsuranceComponent({ loading, data }) { export default function JobDetailCardsInsuranceComponent({ loading, data }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -10,10 +9,15 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
<CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}> <CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
{data ? ( {data ? (
<span> <span>
<div>{data.ins_co_nm || t("general.labels.unknown")}</div> <DataLabel label={t("jobs.fields.ins_co_nm")} hideIfNull>
<div>{data.clm_no || t("general.labels.unknown")}</div> {data.ins_co_nm}
<div> </DataLabel>
{t("jobs.labels.cards.filehandler")} <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 ? ( {data.ins_ea ? (
<a href={`mailto:${data.ins_ea}`}> <a href={`mailto:${data.ins_ea}`}>
<div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div> <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> <div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
)} )}
{data.ins_ph1 ? ( </DataLabel>
<PhoneFormatter>{data.ins_ph1}</PhoneFormatter> <DataLabel
) : null} label={t("jobs.labels.cards.estimator")}
</div> visible={data.est_ct_fn && data.est_ct_ln}>
{data.ins_ea ? (
<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 ? (
<a href={`mailto:${data.est_ea}`}> <a href={`mailto:${data.est_ea}`}>
<div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div> <div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div>
</a> </a>
) : ( ) : (
<div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div> <div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div>
)} )}
{data.est_ph1 ? ( </DataLabel>
<PhoneFormatter>{data.est_ph1}</PhoneFormatter>
) : null}
</div>
</span> </span>
) : null} ) : null}
</CardTemplate> </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 ...otherProps
}) { }) {
let extra; let extra;
if (extraLink) extra = { extra: <Link to={extraLink} >More</Link> }; if (extraLink) extra = { extra: <Link to={extraLink}>More</Link> };
return ( return (
<Card <Card
size="small" size='small'
style={{ width: 290 }} className='job-card'
className="job-card"
title={title} title={title}
loading={loading} loading={loading}
{...extra} {...extra}>
>
{otherProps.children} {otherProps.children}
</Card> </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 React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component"; import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsTotalsComponent({ loading, data }) { export default function JobDetailCardsTotalsComponent({ loading, data }) {
const { t } = useTranslation(); const { t } = useTranslation();
let totals;
try {
totals = JSON.parse(data.job_totals);
} catch (error) {
console.log("Error in CardsTotal component", error);
}
return ( return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}> <CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}>
{data ? ( {totals ? (
<span> <div className='imex-flex-row'>
Totals stuff here. <Statistic
</span> className='imex-flex-row__margin-large'
) : null} 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> </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 React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { setModalContext } from "../../redux/modals/modals.actions"; import { setModalContext } from "../../redux/modals/modals.actions";
import { onlyUnique } from "../../utils/arrayHelper";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container"; import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container"; import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container"; import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container"; import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
import { onlyUnique } from "../../utils/arrayHelper";
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
setJobLineEditContext: (context) => 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]); }, [bodyshop, job]);
if (!!!totals) { if (!!!totals) {
console.log("Totals was falsey.");
return <LoadingSkeleton />; return <LoadingSkeleton />;
} }
@@ -179,7 +178,17 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
</tbody> </tbody>
</table> </table>
</div> </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 <Statistic
title={t("jobs.labels.subtotal")} title={t("jobs.labels.subtotal")}
value={totals.totals.subtotal.toFormat()} 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'> <Form.Item label={t("jobs.fields.unitnumber")} name='unit_number'>
<Input /> <Input />
</Form.Item> </Form.Item>
</FormRow>
<FormRow>
<Form.Item label={t("jobs.fields.kmin")} name='kmin'> <Form.Item label={t("jobs.fields.kmin")} name='kmin'>
<InputNumber precision={1} /> <InputNumber precision={1} />
</Form.Item> </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 React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component"; 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 }) { export default function JobsDetailDatesComponent({ job }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <div>
<Form.Item label={t("jobs.fields.loss_date")} name='loss_date'> <FormRow header={t("jobs.forms.estdates")}>
<DatePicker /> <Form.Item
</Form.Item> label={t("jobs.fields.date_estimated")}
CAA # seems not correct based on field mapping Class seems not correct name='date_estimated'>
based on field mapping <DateTimePicker />
<Form.Item label={t("jobs.fields.date_estimated")} name='date_estimated'> </Form.Item>
<DateTimePicker /> <Form.Item label={t("jobs.fields.date_open")} name='date_open'>
</Form.Item> <DateTimePicker />
<Form.Item label={t("jobs.fields.date_open")} name='date_open'> </Form.Item>
<DateTimePicker /> </FormRow>
</Form.Item>
<Form.Item label={t("jobs.fields.date_scheduled")} name='date_scheduled'> <FormRow header={t("jobs.forms.scheddates")}>
<DateTimePicker /> <Form.Item
</Form.Item> label={t("jobs.fields.date_scheduled")}
<Form.Item label={t("jobs.fields.scheduled_in")} name='scheduled_in'> name='date_scheduled'>
<DateTimePicker /> <DateTimePicker />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.actual_in")} name='actual_in'> <Form.Item label={t("jobs.fields.scheduled_in")} name='scheduled_in'>
<DateTimePicker /> <DateTimePicker />
</Form.Item> </Form.Item>
<Form.Item <Form.Item label={t("jobs.fields.actual_in")} name='actual_in'>
label={t("jobs.fields.scheduled_completion")} <DateTimePicker />
name='scheduled_completion'> </Form.Item>
<DateTimePicker /> </FormRow>
</Form.Item> <FormRow header={t("jobs.forms.repairdates")}>
<Form.Item <Form.Item
label={t("jobs.fields.actual_completion")} label={t("jobs.fields.scheduled_completion")}
name='actual_completion'> name='scheduled_completion'>
<DateTimePicker /> <DateTimePicker />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("jobs.fields.scheduled_delivery")} label={t("jobs.fields.actual_completion")}
name='scheduled_delivery'> name='actual_completion'>
<DateTimePicker /> <DateTimePicker />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("jobs.fields.actual_delivery")} label={t("jobs.fields.scheduled_delivery")}
name='actual_delivery'> name='scheduled_delivery'>
<DateTimePicker /> <DateTimePicker />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.date_invoiced")} name='date_invoiced'> <Form.Item
<DateTimePicker /> label={t("jobs.fields.actual_delivery")}
</Form.Item> name='actual_delivery'>
<Form.Item label={t("jobs.fields.date_closed")} name='date_closed'> <DateTimePicker />
<DateTimePicker /> </Form.Item>
</Form.Item> </FormRow>
<Form.Item label={t("jobs.fields.date_exported")} name='date_exported'> <FormRow header={t("jobs.forms.admindates")}>
<DateTimePicker /> <Form.Item label={t("jobs.fields.date_invoiced")} name='date_invoiced'>
</Form.Item> <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> </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'> <Form.Item label={t("jobs.fields.ins_city")} name='ins_city'>
<Input /> <Input />
</Form.Item> </Form.Item>
</FormRow>
<FormRow>
<Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'> <Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'>
<Input /> <Input />
</Form.Item> </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 { 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 React, { useState } from "react";
import { useTranslation } from "react-i18next"; 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 CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter"; import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
import AlertComponent from "../alert/alert.component";
import StartChatButton from "../chat-open-button/chat-open-button.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({ const mapStateToProps = createStructuredSelector({
searchTextState, bodyshop: selectBodyshop,
refetch, });
loading,
jobs, export function JobsList({ bodyshop }) {
searchParams, const searchParams = queryString.parse(useLocation().search);
}) {
const { selected } = searchParams; 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({ const [state, setState] = useState({
sortedInfo: {}, sortedInfo: {},
filteredInfo: { text: "" }, filteredInfo: { text: "" },
@@ -26,7 +37,55 @@ export default withRouter(function JobsList({
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory(); 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 = [ const columns = [
{ {
title: t("jobs.fields.ro_number"), title: t("jobs.fields.ro_number"),
@@ -91,6 +150,19 @@ export default withRouter(function JobsList({
sorter: (a, b) => alphaSort(a.status, b.status), sorter: (a, b) => alphaSort(a.status, b.status),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order, 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) => { render: (text, record) => {
return record.status || t("general.labels.na"); 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 ( return (
<div> <Table
<Table loading={loading}
loading={loading} size='small'
title={() => { pagination={false}
return ( columns={columns}
<div style={{ display: "flex" }}> rowKey='id'
<Button onClick={() => refetch()}> dataSource={jobs}
<SyncOutlined /> style={{ height: "100%" }}
</Button> scroll={{ x: true }}
<Input.Search title={() => {
placeholder={t("general.labels.search")} return (
onChange={(e) => { <div className='imex-table-header'>
setSearchText(e.target.value); <Button onClick={() => refetch()}>
}} <SyncOutlined />
enterButton </Button>
/> <Input.Search
</div> className='imex-table-header__search'
); placeholder={t("general.labels.search")}
}} onChange={(e) => {
size='small' setSearchText(e.target.value);
pagination={{ position: "top" }} }}
columns={columns.map((item) => ({ ...item }))} vale={searchText}
rowKey='id' enterButton
dataSource={jobs} />
rowSelection={{ </div>
onSelect: (record) => { );
}}
rowSelection={{
onSelect: (record) => {
handleOnRowClick(record);
},
selectedRowKeys: [selected],
type: "radio",
}}
onChange={handleTableChange}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record); 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. //We have only one element. It's going to get the whole thing.
return children; return children;
} }
const rowGutter = { gutter: [32, 32] }; const rowGutter = { gutter: [16, 16] };
const colSpan = (maxspan) => {
const colSpan = (spanOverride) => {
return { return {
xs: { xs: {
span: 24, span: 24,
}, },
sm: {
span: 12,
},
md: { md: {
span: !!maxspan ? Math.min(12, maxspan) : 12, span: 8,
}, },
lg: { lg: {
span: !!maxspan span: 6,
? Math.min(Math.max(24 / children.length, 6), maxspan) },
: Math.max(24 / children.length, 6), xl: {
span: 4,
}, },
}; };
}; };
@@ -29,7 +34,7 @@ export default function LayoutFormRow({ header, children }) {
{header ? <Typography.Title level={4}>{header}</Typography.Title> : null} {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
<Row {...rowGutter}> <Row {...rowGutter}>
{children.map((c, idx) => ( {children.map((c, idx) => (
<Col key={idx} {...colSpan(c.props && c.props.maxspan)}> <Col key={idx} {...colSpan(c.props && c.props.span)}>
{c} {c}
</Col> </Col>
))} ))}
@@ -37,3 +42,40 @@ export default function LayoutFormRow({ header, children }) {
</div> </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 { .imex-form-row {
.ant-row { .ant-row {
margin-bottom: 0rem; 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"; import ProductionListTable from "./production-list-table.component";
export default function ProductionListTableContainer({ columnState }) { export default function ProductionListTableContainer({ columnState }) {
// const { loading, data, refetch } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
// pollInterval: 30000,
// });
const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION); const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
return ( return (
<ProductionListTable
<ProductionListTable loading={loading}
loading={loading} data={data ? data.productionview : []}
data={data ? data.productionview : []} columnState={columnState}
refetch={null} />
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 est_ct_ln
clm_no clm_no
status status
job_totals
area_of_damage area_of_damage
ro_number ro_number
scheduled_completion scheduled_completion
scheduled_in scheduled_in
scheduled_delivery scheduled_delivery
date_invoiced
date_open
date_exported
date_closed
date_scheduled
date_estimated
notes { notes {
id id
text text
@@ -336,7 +343,6 @@ export const QUERY_JOB_CARD_DETAILS = gql`
private private
created_at created_at
} }
updated_at updated_at
clm_total clm_total
ded_amt ded_amt

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

@@ -1,88 +1,30 @@
import { useQuery } from "@apollo/react-hooks"; import React, { useEffect } from "react";
import queryString from "query-string";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; 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 JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
import JobsList from "../../components/jobs-list/jobs-list.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"; import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
}); });
export function JobsPage({ location, bodyshop, setBreadcrumbs }) { export function JobsPage({ setBreadcrumbs }) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
},
});
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => { useEffect(() => {
document.title = t("titles.jobs"); 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]); }, [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 ( return (
<div> <div className='jobs-list-container'>
<EnterInvoiceModalContainer /> <JobsList />
<JobsList <JobDetailCards />
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> </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" "vehicle": "Vehicle"
}, },
"forms": { "forms": {
"admindates": "Administrative Dates",
"appraiserinfo": "Appraiser Info", "appraiserinfo": "Appraiser Info",
"claiminfo": "Claim Information", "claiminfo": "Claim Information",
"dedinfo": "Deductible Info", "dedinfo": "Deductible Info",
"estdates": "Estimate Dates",
"inscoinfo": "Insurance Company Information", "inscoinfo": "Insurance Company Information",
"laborrates": "Labor Rates", "laborrates": "Labor Rates",
"lossinfo": "Loss Information" "lossinfo": "Loss Information",
"repairdates": "Repair Dates",
"scheddates": "Schedule Dates"
}, },
"labels": { "labels": {
"allocations": "Allocations", "allocations": "Allocations",

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

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

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

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