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

Refactor jobs detail page to use container. Refresh detail cards on note add.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-21 10:52:40 -08:00
parent 19c9d05dae
commit 26745f2e62
16 changed files with 220 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/pages/jobs-detail/jobs-detail.page.container.jsx Normal file
View File

@@ -0,0 +1,31 @@
import { useQuery } from "@apollo/react-hooks";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import AlertComponent from "../../components/alert/alert.component";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import JobsDetailPage from "./jobs-detail.page";
function JobsDetailPageContainer({ match, location }) {
const { jobId } = match.params;
const { hash } = location;
const { t } = useTranslation();
const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
useEffect(() => {
document.title = loading
? "..."
: t("titles.jobsdetail", {
ro_number: data.jobs_by_pk.ro_number
});
}, [loading, data, t]);
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
return <JobsDetailPage hash={hash} data={data} jobId={jobId} match={match} />;
}
export default JobsDetailPageContainer;

50
client/src/pages/jobs-detail/jobs-detail.page.jsx
View File

@@ -1,34 +1,14 @@
import React, { useEffect } from "react";
import { useQuery } from "@apollo/react-hooks";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { Tabs, Icon, Row } from "antd";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
import { Icon, Row, Tabs } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
import { FaRegStickyNote } from "react-icons/fa";
function JobsDetailPage({ match, location }) {
const { jobId } = match.params;
const { hash } = location;
function JobsDetailPage({ jobId, hash, data, match }) {
const { t } = useTranslation();
const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
useEffect(() => {
document.title = loading
? "..."
: t("titles.jobsdetail", {
ro_number: data.jobs_by_pk.ro_number
});
}, [loading, data, t]);
//const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
return (
<div>
<Row>
@@ -40,7 +20,7 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='bars' />
Lines
{t("jobs.labels.lines")}
</span>
}
key='#lines'>
@@ -50,7 +30,7 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='dollar' />
Rates
{t("jobs.labels.rates")}
</span>
}
key='#rates'>
@@ -60,7 +40,7 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='tool1' />
Parts
{t("jobs.labels.parts")}
</span>
}
key='#parts'>
@@ -70,12 +50,22 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='file-image' />
Documents
{t("jobs.labels.documents")}
</span>
}
key='#documents'>
<JobsDocumentsContainer jobId={jobId} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon component={FaRegStickyNote} />
{t("jobs.labels.notes")}
</span>
}
key='#notes'>
lol notes here
</Tabs.TabPane>
</Tabs>
</Row>
</div>