116 lines
4.2 KiB
JavaScript
116 lines
4.2 KiB
JavaScript
import React from "react";
|
|
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 { PageHeader, Button, Descriptions, Tag, Icon } from "antd";
|
|
|
|
//import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
|
|
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" />;
|
|
console.log("data", data);
|
|
return (
|
|
<PageHeader
|
|
ghost={false}
|
|
onBack={() => window.history.back()}
|
|
tags={<Tag color="blue">{data?.jobs_by_pk.job_status?.name}</Tag>}
|
|
title={
|
|
data?.jobs_by_pk.ro_number
|
|
? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
|
|
: `${t("jobs.fields.est_number")} ${data?.jobs_by_pk.est_number}`
|
|
}
|
|
extra={[
|
|
<Button key="documents">
|
|
<Icon type="file-image" />
|
|
{t("jobs.actions.addDocuments")}
|
|
</Button>,
|
|
<Button key="printing">
|
|
<Icon type="printer" />
|
|
{t("jobs.actions.printCenter")}
|
|
</Button>,
|
|
<Button key="notes">
|
|
<Icon type="edit" />
|
|
{t("jobs.actions.addNote")}
|
|
</Button>,
|
|
<Button key="postinvoices">
|
|
<Icon type="shopping-cart" />
|
|
{t("jobs.actions.postInvoices")}
|
|
</Button>
|
|
]}
|
|
>
|
|
<Descriptions size="small" column={3}>
|
|
<Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
|
|
<Descriptions.Item label="Association">421421</Descriptions.Item>
|
|
<Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
|
|
<Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
|
|
<Descriptions.Item label="Remarks">
|
|
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
|
|
<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}
|
|
/>
|
|
<JobDetailCardsTotalsComponent
|
|
loading={loading}
|
|
data={data ? data.jobs_by_pk : null}
|
|
/>
|
|
</section>
|
|
</PageHeader>
|
|
);
|
|
}
|