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

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

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>
);
}

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>
);
}

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} />;
}

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>
);
}

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>
);
}

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>
);
}

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>
);
}

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>
);
}

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>
);
}

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;
}
}

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>
);
}

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>
);
}

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>
);
}

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) {

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

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"
},

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"}
/>
);
}

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" DROP COLUMN "pit_owner_first_name";
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" ADD COLUMN "pit_owner_first_name" text NULL;
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" DROP COLUMN "pit_owner_last_name";
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" ADD COLUMN "pit_owner_last_name" text NULL;
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" DROP COLUMN "pit_owner_phone";
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" ADD COLUMN "pit_owner_phone" text NULL;
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" DROP COLUMN "pit_owner_email";
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" ADD COLUMN "pit_owner_email" text NULL;
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" DROP COLUMN "pit_vehicle_plate_no";
type: run_sql

View File

@@ -0,0 +1,3 @@
- args:
sql: ALTER TABLE "public"."jobs" ADD COLUMN "pit_vehicle_plate_no" text NULL;
type: run_sql

View File

@@ -0,0 +1,86 @@
- args:
role: user
table:
name: jobs
schema: public
type: drop_insert_permission
- args:
permission:
check:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- actual_completion
- actual_delivery
- actual_in
- claim_total
- created_at
- deductible
- est_addr1
- est_addr2
- est_city
- est_co_nm
- est_ct_fn
- est_ct_ln
- est_ctry
- est_ea
- est_number
- est_ph1
- est_st
- est_zip
- federal_tax_rate
- id
- inproduction
- invoice_date
- labor_rate_desc
- labor_rate_id
- local_tax_rate
- ownerid
- rate_atp
- rate_la1
- rate_la2
- rate_la3
- rate_la4
- rate_lab
- rate_lad
- rate_lae
- rate_laf
- rate_lag
- rate_lam
- rate_lar
- rate_las
- rate_lau
- rate_ma2s
- rate_ma2t
- rate_ma3s
- rate_mabl
- rate_macs
- rate_mahw
- rate_mapa
- rate_mash
- rate_matd
- regie_number
- ro_number
- scheduled_completion
- scheduled_delivery
- scheduled_in
- shopid
- state_tax_rate
- statusid
- updated_at
- vehicleid
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: jobs
schema: public
type: create_insert_permission

View File

@@ -0,0 +1,91 @@
- args:
role: user
table:
name: jobs
schema: public
type: drop_insert_permission
- args:
permission:
check:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- id
- created_at
- updated_at
- shopid
- est_number
- ro_number
- ownerid
- vehicleid
- labor_rate_id
- labor_rate_desc
- rate_lab
- rate_lad
- rate_lae
- rate_lar
- rate_las
- rate_laf
- rate_lam
- rate_lag
- rate_atp
- rate_lau
- rate_la1
- rate_la2
- rate_la3
- rate_la4
- rate_mapa
- rate_mash
- rate_mahw
- rate_ma2s
- rate_ma3s
- rate_ma2t
- rate_mabl
- rate_macs
- rate_matd
- federal_tax_rate
- state_tax_rate
- local_tax_rate
- est_co_nm
- est_addr1
- est_addr2
- est_city
- est_st
- est_zip
- est_ctry
- est_ph1
- est_ea
- est_ct_ln
- est_ct_fn
- scheduled_in
- actual_in
- scheduled_completion
- actual_completion
- scheduled_delivery
- actual_delivery
- regie_number
- invoice_date
- claim_total
- deductible
- inproduction
- statusid
- pit_owner_first_name
- pit_owner_last_name
- pit_owner_phone
- pit_owner_email
- pit_vehicle_plate_no
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: jobs
schema: public
type: create_insert_permission

View File

@@ -0,0 +1,84 @@
- args:
role: user
table:
name: jobs
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: false
columns:
- actual_completion
- actual_delivery
- actual_in
- claim_total
- created_at
- deductible
- est_addr1
- est_addr2
- est_city
- est_co_nm
- est_ct_fn
- est_ct_ln
- est_ctry
- est_ea
- est_number
- est_ph1
- est_st
- est_zip
- federal_tax_rate
- id
- inproduction
- invoice_date
- labor_rate_desc
- labor_rate_id
- local_tax_rate
- ownerid
- rate_atp
- rate_la1
- rate_la2
- rate_la3
- rate_la4
- rate_lab
- rate_lad
- rate_lae
- rate_laf
- rate_lag
- rate_lam
- rate_lar
- rate_las
- rate_lau
- rate_ma2s
- rate_ma2t
- rate_ma3s
- rate_mabl
- rate_macs
- rate_mahw
- rate_mapa
- rate_mash
- rate_matd
- regie_number
- ro_number
- scheduled_completion
- scheduled_delivery
- scheduled_in
- shopid
- state_tax_rate
- statusid
- updated_at
- vehicleid
computed_fields: []
filter:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: jobs
schema: public
type: create_select_permission

View File

@@ -0,0 +1,89 @@
- args:
role: user
table:
name: jobs
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: false
columns:
- id
- created_at
- updated_at
- shopid
- est_number
- ro_number
- ownerid
- vehicleid
- labor_rate_id
- labor_rate_desc
- rate_lab
- rate_lad
- rate_lae
- rate_lar
- rate_las
- rate_laf
- rate_lam
- rate_lag
- rate_atp
- rate_lau
- rate_la1
- rate_la2
- rate_la3
- rate_la4
- rate_mapa
- rate_mash
- rate_mahw
- rate_ma2s
- rate_ma3s
- rate_ma2t
- rate_mabl
- rate_macs
- rate_matd
- federal_tax_rate
- state_tax_rate
- local_tax_rate
- est_co_nm
- est_addr1
- est_addr2
- est_city
- est_st
- est_zip
- est_ctry
- est_ph1
- est_ea
- est_ct_ln
- est_ct_fn
- scheduled_in
- actual_in
- scheduled_completion
- actual_completion
- scheduled_delivery
- actual_delivery
- regie_number
- invoice_date
- claim_total
- deductible
- inproduction
- statusid
- pit_owner_first_name
- pit_owner_last_name
- pit_owner_phone
- pit_owner_email
- pit_vehicle_plate_no
computed_fields: []
filter:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: jobs
schema: public
type: create_select_permission

View File

@@ -0,0 +1,86 @@
- args:
role: user
table:
name: jobs
schema: public
type: drop_update_permission
- args:
permission:
columns:
- actual_completion
- actual_delivery
- actual_in
- claim_total
- created_at
- deductible
- est_addr1
- est_addr2
- est_city
- est_co_nm
- est_ct_fn
- est_ct_ln
- est_ctry
- est_ea
- est_number
- est_ph1
- est_st
- est_zip
- federal_tax_rate
- id
- inproduction
- invoice_date
- labor_rate_desc
- labor_rate_id
- local_tax_rate
- ownerid
- rate_atp
- rate_la1
- rate_la2
- rate_la3
- rate_la4
- rate_lab
- rate_lad
- rate_lae
- rate_laf
- rate_lag
- rate_lam
- rate_lar
- rate_las
- rate_lau
- rate_ma2s
- rate_ma2t
- rate_ma3s
- rate_mabl
- rate_macs
- rate_mahw
- rate_mapa
- rate_mash
- rate_matd
- regie_number
- ro_number
- scheduled_completion
- scheduled_delivery
- scheduled_in
- shopid
- state_tax_rate
- statusid
- updated_at
- vehicleid
filter:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: jobs
schema: public
type: create_update_permission

View File

@@ -0,0 +1,91 @@
- args:
role: user
table:
name: jobs
schema: public
type: drop_update_permission
- args:
permission:
columns:
- inproduction
- invoice_date
- claim_total
- deductible
- federal_tax_rate
- local_tax_rate
- rate_atp
- rate_la1
- rate_la2
- rate_la3
- rate_la4
- rate_lab
- rate_lad
- rate_lae
- rate_laf
- rate_lag
- rate_lam
- rate_lar
- rate_las
- rate_lau
- rate_ma2s
- rate_ma2t
- rate_ma3s
- rate_mabl
- rate_macs
- rate_mahw
- rate_mapa
- rate_mash
- rate_matd
- state_tax_rate
- est_addr1
- est_addr2
- est_city
- est_co_nm
- est_ct_fn
- est_ct_ln
- est_ctry
- est_ea
- est_number
- est_ph1
- est_st
- est_zip
- labor_rate_desc
- labor_rate_id
- pit_owner_email
- pit_owner_first_name
- pit_owner_last_name
- pit_owner_phone
- pit_vehicle_plate_no
- regie_number
- ro_number
- actual_completion
- actual_delivery
- actual_in
- scheduled_completion
- scheduled_delivery
- scheduled_in
- created_at
- updated_at
- id
- ownerid
- shopid
- statusid
- vehicleid
filter:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: jobs
schema: public
type: create_update_permission