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

Jobs datamodel updates + creation of cards for jobs detail screen.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-09 11:47:18 -08:00
parent 16eceb192f
commit e3357910b9
33 changed files with 907 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,71 @@
import React from "react";
import JobDetailCardsCustomerContainer from "./job-detail-cards.customer.container";
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 JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import JobDetailCardsVehicleComponent from "./job-detail-cards.vehicle.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import "./job-detail-cards.styles.scss";
export default function JobDetailCards({ selectedJob }) {
const { loading, error, data } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only",
variables: { id: selectedJob },
skip: !selectedJob
});
const { t } = useTranslation();
if (!selectedJob) {
return <div>{t("jobs.errors.nojobselected")}</div>;
}
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<JobDetailCardsCustomerContainer selectedJob={selectedJob} />
</div>
<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>
);
}

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

@@ -1,8 +1,29 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Card } from "antd";
import CardTemplate from "./job-detail-cards.template.component";
import PhoneFormatter from "../../utils/PhoneFormatter";
export default function JobDetailCardsCustomerComponent({ loading, data }) {
const { t } = useTranslation();
return <Card loading={loading}>Card has loaded.</Card>;
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.customer")}>
{data ? (
<span>
<div>{`${data?.pit_owner_first_name ??
""} ${data.pit_owner_last_name ?? ""}`}</div>
<div>
<PhoneFormatter>{`${data?.pit_owner_phone ?? ""}`}</PhoneFormatter>
</div>
{data?.pit_owner_email ? (
<a href={`mailto:${data.pit_owner_email}`}>
<div>{`${data?.pit_owner_email ?? ""}`}</div>
</a>
) : null}
<div>{`${data?.owner.preferred_contact ?? ""}`}</div>
</span>
) : null}
</CardTemplate>
);
}

15
client/src/components/job-detail-cards/job-detail-cards.customer.container.jsx
View File

@@ -1,15 +0,0 @@
import React from "react";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../alert/alert.component";
import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
export default function JobDetailCardsCustomerContainer({ selectedJob }) {
const { loading, error, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
fetchPolicy: "network-only"
});
if (error) return <AlertComponent message={error.message} type='error' />;
return <JobDetailCardsCustomerComponent loading={loading} data={data} />;
}

17
client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsDamageComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.damage")}>
{data ? (
<span>
Damage stuff here.
</span>
) : null}
</CardTemplate>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.dates.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsDatesComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
{data ? (
<span>
Dates stuff here.
</span>
) : null}
</CardTemplate>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsDocumentsComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
{data ? (
<span>
Documents stuff here.
</span>
) : null}
</CardTemplate>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.insurance.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsInsuranceComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
{data ? (
<span>
Insurance stuff here.
</span>
) : null}
</CardTemplate>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsNotesComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.notes")}>
{data ? (
<span>
notes stuff here.
</span>
) : null}
</CardTemplate>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsPartsComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
{data ? (
<span>
Parts stuff here.
</span>
) : null}
</CardTemplate>
);
}

32
client/src/components/job-detail-cards/job-detail-cards.styles.scss Normal file
View File

@@ -0,0 +1,32 @@
.job-cards {
display: flex;
flex-wrap: wrap;
}
.job-card {
margin: .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;
}
}

20
client/src/components/job-detail-cards/job-detail-cards.template.component.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
import { Card } from "antd";
export default function JobDetailCardTemplate({
loading,
title,
...otherProps
}) {
return (
<Card
size="small"
style={{ width: 300 }}
className="job-card"
title={title}
loading={loading}
>
{otherProps.children}
</Card>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.totals.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
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();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}>
{data ? (
<span>
Totals stuff here.
</span>
) : null}
</CardTemplate>
);
}

17
client/src/components/job-detail-cards/job-detail-cards.vehicle.component.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsVehicleComponent({ loading, data }) {
const { t } = useTranslation();
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.vehicle")}>
{data ? (
<span>
Vehicle stuff here.
</span>
) : null}
</CardTemplate>
);
}

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

@@ -153,6 +153,62 @@ export const GET_JOB_BY_PK = gql`
}
`;
export const QUERY_JOB_CARD_DETAILS = gql`
query QUERY_JOB_CARD_DETAILS($id: uuid!) {
jobs_by_pk(id: $id) {
pit_owner_first_name
pit_owner_last_name
pit_owner_phone
pit_owner_email
owner {
allow_text_message
preferred_contact
}
vehicle {
v_model_yr
v_make_desc
v_model_desc
v_color
plate_no
}
pit_vehicle_plate_no
actual_completion
actual_delivery
actual_in
created_at
est_number
id
local_tax_rate
est_co_nm
est_ph1
est_ea
est_ct_fn
est_ct_ln
regie_number
ro_number
scheduled_completion
scheduled_in
scheduled_delivery
job_status {
name
}
updated_at
claim_total
deductible
vehicle {
id
plate_no
v_vin
v_model_yr
v_model_desc
v_make_desc
v_color
}
}
}
`;
export const UPDATE_JOB = gql`
mutation UPDATE_JOB($jobId: uuid!, $job: jobs_set_input!) {
update_jobs(where: { id: { _eq: $jobId } }, _set: $job) {

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

@@ -21,7 +21,6 @@ export default function JobsPage() {
const [selectedJob, setSelectedJob] = useState(null);
if (error) return <AlertComponent message={error.message} />;
console.log(selectedJob);
return (
<Col span={22} offset={1}>
<JobsList

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

@@ -40,6 +40,17 @@
"jobs": {
"labels": {
"cards": {
"customer": "Customer Information",
"vehicle": "Vehicle",
"insurance": "Insurance Details",
"dates": "Dates",
"documents": "Documents",
"parts": "Parts",
"notes": "Notes",
"damage": "Area of Damage",
"totals": "Totals"
},
"no_owner": "No Owner",
"vehicle_info": "Vehicle"
},

13
client/src/utils/PhoneFormatter.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from "react";
import NumberFormat from "react-number-format";
export default function PhoneNumberFormatter(props) {
return (
<NumberFormat
value={props.children}
type="tel"
format="###-###-####"
displayType={"text"}
/>
);
}