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