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

BOD-16 BOD-17 Added Contract detail pages + custom form components for courtesy cars.

Browse Source
This commit is contained in:
Patrick Fic
2020-03-31 16:32:18 -07:00
parent 72f4d31b05
commit 1c02c063b9
21 changed files with 626 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/pages/contract-create/contract-create.page.container.jsx
View File

@@ -8,6 +8,7 @@ import { Form, notification } from "antd";
import { useTranslation } from "react-i18next";
import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
import { useMutation } from "@apollo/react-hooks";
import { useHistory } from "react-router-dom";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
@@ -17,8 +18,8 @@ export function ContractCreatePageContainer({ bodyshop }) {
const { t } = useTranslation();
const selectedCarState = useState(null);
const selectedJobState = useState(null);
const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
const history = useHistory();
const handleFinish = values => {
if (!!selectedCarState[0] && !!selectedJobState[0]) {
@@ -35,8 +36,18 @@ export function ContractCreatePageContainer({ bodyshop }) {
notification["success"]({
message: t("contracts.successes.saved")
});
history.push(
`/manage/courtesycars/contracts/${response.data.insert_cccontracts.returning[0].id}`
);
})
.catch(error => console.log("error", error));
.catch(error =>
notification["error"]({
message: t("contracts.errors.saving", {
error: JSON.stringify(error)
})
})
);
} else {
notification["error"]({
message: t("contracts.errors.selectjobandcar")
@@ -50,7 +61,6 @@ export function ContractCreatePageContainer({ bodyshop }) {
return (
<Form form={form} autoComplete="no" onFinish={handleFinish}>
<button onClick={() => console.log(form.getFieldsValue())}>t</button>
<ContractCreatePageComponent
selectedJobState={selectedJobState}
selectedCarState={selectedCarState}

16
client/src/pages/contract-detail/contract-detail.page.component.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import { useTranslation } from "react-i18next";
import { Button } from "antd";
export default function ContractDetailPage() {
const { t } = useTranslation();
return (
<div>
<Button type="primary" htmlType="submit">
{t("general.actions.save")}
</Button>
SOME SORT OF HEADER INFORMATION HERE.
<ContractFormComponent />
</div>
);
}

84
client/src/pages/contract-detail/contract-detail.page.container.jsx Normal file
View File

@@ -0,0 +1,84 @@
import { useMutation, useQuery } from "@apollo/react-hooks";
import { Form, notification } from "antd";
import moment from "moment";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component";
import {
QUERY_CONTRACT_BY_PK,
UPDATE_CONTRACT
} from "../../graphql/cccontracts.queries";
import ContractDetailPageComponent from "./contract-detail.page.component";
export default function ContractDetailPageContainer() {
const { t } = useTranslation();
const [updateContract] = useMutation(UPDATE_CONTRACT);
const [form] = Form.useForm();
const { contractId } = useParams();
const { loading, error, data } = useQuery(QUERY_CONTRACT_BY_PK, {
variables: { id: contractId }
});
useEffect(() => {
document.title = loading
? t("titles.app")
: error
? t("titles.app")
: t("titles.contracts-detail", {
id: (data && data.cccontracts_by_pk.id) || ""
});
}, [t, data, error, loading]);
const handleFinish = values => {
updateContract({
variables: { cccontract: { ...values }, contractId: contractId }
})
.then(response => {
notification["success"]({ message: t("contracts.successess.saved") });
})
.catch(error =>
notification["error"]({
message: t("contracts.errors.saving", { error: error })
})
);
};
useEffect(() => {
if (data) form.resetFields();
}, [data, form]);
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<Form
form={form}
autoComplete="no"
onFinish={handleFinish}
initialValues={
data
? {
...data.cccontracts_by_pk,
start: data.cccontracts_by_pk.start
? moment(data.cccontracts_by_pk.start)
: null,
scheduledreturn: data.cccontracts_by_pk.scheduledreturn
? moment(data.cccontracts_by_pk.scheduledreturn)
: null,
actualreturn: data.cccontracts_by_pk.actualreturn
? moment(data.cccontracts_by_pk.actualreturn)
: null,
driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
? moment(data.cccontracts_by_pk.driver_dlexpiry)
: null,
driver_dob: data.cccontracts_by_pk.driver_dob
? moment(data.cccontracts_by_pk.driver_dob)
: null
}
: {}
}
>
<ContractDetailPageComponent />
</Form>
);
}

7
client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
View File

@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
import { INSERT_NEW_COURTESY_CAR } from "../../graphql/courtesy-car.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CourtesyCarCreateComponent from "./courtesy-car-create.page.component";
import { useHistory } from "react-router-dom";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -16,13 +17,17 @@ export function CourtesyCarCreateContainer({ bodyshop }) {
const [form] = Form.useForm();
const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR);
const { t } = useTranslation();
const history = useHistory();
const handleFinish = values => {
insertCourtesyCar({
variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } }
})
.then(response => {
notification["success"]({ message: t("courtesycars.successes.saved") });
history.push(
`/manage/courtesycars/${response.data.insert_courtesycars.returning[0].id}`
);
})
.catch(error => console.log("error", error));
};

10
client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx
View File

@@ -1,6 +1,12 @@
import React from "react";
import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component";
import CourtesyCarContractListComponent from "../../components/courtesy-car-contract-list/courtesy-car-contract-list.component";
export default function CourtesyCarDetailPageComponent() {
return <CourtesyCarCreateFormComponent />;
export default function CourtesyCarDetailPageComponent({ contracts }) {
return (
<div>
<CourtesyCarCreateFormComponent />
<CourtesyCarContractListComponent contracts={contracts} />
</div>
);
}

2
client/src/pages/jobs-available/jobs-available.page.component.jsx
View File

@@ -11,7 +11,7 @@ export default function JobsAvailablePageComponent({
const { t } = useTranslation();
return (
<div>
<Link to="/manage/jobs/create">
<Link to="/manage/jobs/new">
<Button>{t("jobs.actions.manualnew")}</Button>
</Link>

9
client/src/pages/manage/manage.page.component.jsx
View File

@@ -58,6 +58,9 @@ const CourtesyCarsPage = lazy(() =>
const ContractCreatePage = lazy(() =>
import("../contract-create/contract-create.page.container")
);
const ContractDetailPage = lazy(() =>
import("../contract-detail/contract-detail.page.container")
);
const { Header, Content, Footer } = Layout;
@@ -90,7 +93,7 @@ export default function Manage({ match }) {
<Switch>
<Route
exact
path={`${match.path}/jobs/create`}
path={`${match.path}/jobs/new`}
component={JobsCreateContainerPage}
/>
<Route
@@ -107,7 +110,7 @@ export default function Manage({ match }) {
<Switch>
<Route
exact
path={`${match.path}/courtesycars/create`}
path={`${match.path}/courtesycars/new`}
component={CourtesyCarCreateContainer}
/>
@@ -125,7 +128,7 @@ export default function Manage({ match }) {
<Route
exact
path={`${match.path}/courtesycars/contracts/:contractId`}
component={() => <div>cc contract id</div>}
component={ContractDetailPage}
/>
<Route