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

BOD-16 Added pages + routing for courtesy cars

Browse Source
This commit is contained in:
Patrick Fic
2020-03-30 15:32:39 -07:00
parent 1249fd5b2c
commit 791a6dd4f2
25 changed files with 1362 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/pages/courtesy-car-create/courtesy-car-create.page.component.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component"
export default function CourtesyCarCreateComponent() {
return <CourtesyCarCreateFormComponent />;
}

40
client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx Normal file
View File

@@ -0,0 +1,40 @@
import { useMutation } from "@apollo/react-hooks";
import { Form, notification } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
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";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export function CourtesyCarCreateContainer({ bodyshop }) {
const [form] = Form.useForm();
const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR);
const { t } = useTranslation();
const handleFinish = values => {
insertCourtesyCar({
variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } }
})
.then(response => {
notification["success"]({ message: t("courtesycars.successes.saved") });
})
.catch(error => console.log("error", error));
};
useEffect(() => {
document.title = t("titles.courtesycars-create");
}, [t]);
return (
<Form form={form} autoComplete="no" onFinish={handleFinish}>
<CourtesyCarCreateComponent />
</Form>
);
}
export default connect(mapStateToProps, null)(CourtesyCarCreateContainer);

6
client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component";
export default function CourtesyCarDetailPageComponent() {
return <CourtesyCarCreateFormComponent />;
}

87
client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx Normal file
View File

@@ -0,0 +1,87 @@
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_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
export default function CourtesyCarDetailPageContainer() {
const { t } = useTranslation();
const [insertCourtesyCar] = useMutation(UPDATE_CC);
const [form] = Form.useForm();
const { ccId } = useParams();
const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
variables: { id: ccId }
});
useEffect(() => {
document.title = loading
? t("titles.app")
: error
? t("titles.app")
: t("titles.courtesycars-detail", {
id: (data && data.courtesycars_by_pk.vin) || ""
});
}, [t, data, error, loading]);
const handleFinish = values => {
insertCourtesyCar({
variables: { cc: { ...values }, ccId: ccId }
})
.then(response => {
notification["success"]({ message: t("courtesycars.successes.saved") });
})
.catch(error =>
notification["error"]({
message: t("courtesycars.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.courtesycars_by_pk,
purchasedate: data.courtesycars_by_pk.purchasedate
? moment(data.courtesycars_by_pk.purchasedate)
: null,
servicestartdate: data.courtesycars_by_pk.servicestartdate
? moment(data.courtesycars_by_pk.servicestartdate)
: null,
serviceenddate: data.courtesycars_by_pk.serviceenddate
? moment(data.courtesycars_by_pk.serviceenddate)
: null,
leaseenddate: data.courtesycars_by_pk.leaseenddate
? moment(data.courtesycars_by_pk.leaseenddate)
: null,
nextservicedate: data.courtesycars_by_pk.nextservicedate
? moment(data.courtesycars_by_pk.nextservicedate)
: null,
registrationexpires: data.courtesycars_by_pk.registrationexpires
? moment(data.courtesycars_by_pk.registrationexpires)
: null,
insuranceexpires: data.courtesycars_by_pk.insuranceexpires
? moment(data.courtesycars_by_pk.insuranceexpires)
: null
}
: {}
}
>
<CourtesyCarDetailPageComponent />
</Form>
);
}

6
client/src/pages/courtesy-cars/courtesy-cars.page.component.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import CourtesyCarsListComponent from "../../components/courtesy-cars-list/courtesy-cars-list.component";
export default function CourtesyCarsPageComponent({ loading, data }) {
return <CourtesyCarsListComponent loading={loading} courtesycars={data} />;
}

17
client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import CourtesyCarsPageComponent from "./courtesy-cars.page.component";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../../components/alert/alert.component";
import { QUERY_ALL_CC } from "../../graphql/courtesy-car.queries";
export default function CourtesyCarsPageContainer() {
const { loading, error, data } = useQuery(QUERY_ALL_CC);
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<CourtesyCarsPageComponent
loading={loading}
data={(data && data.courtesycars) || []}
/>
);
}

8
client/src/pages/jobs-create/jobs-create.container.jsx
View File

@@ -35,15 +35,17 @@ function JobsCreateContainer({ bodyshop }) {
useEffect(() => {
if (!!state.owner.selectedid) {
console.log("Loading Selected Owner ID");
loadOwner({
variables: { id: state.owner.selectedid }
});
}
}, [state.owner.selectedid, loadOwner]);
useEffect(() => {
document.title = t("titles.jobs-create");
}, [t]);
const runInsertJob = job => {
console.log("Job To Save", job);
insertJob({ variables: { job: job } })
.then(resp => {
setState({
@@ -63,8 +65,6 @@ function JobsCreateContainer({ bodyshop }) {
};
const handleFinish = values => {
console.log("Form Values", values);
console.log("Progress State", state);
let job = Object.assign(
{},
values,

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

@@ -43,10 +43,18 @@ const ShopVendorPageContainer = lazy(() =>
const EmailOverlayContainer = lazy(() =>
import("../../components/email-overlay/email-overlay.container.jsx")
);
const JobsCreateContainerPage = lazy(() =>
import("../jobs-create/jobs-create.container")
);
const CourtesyCarCreateContainer = lazy(() =>
import("../courtesy-car-create/courtesy-car-create.page.container")
);
const CourtesyCarDetailContainer = lazy(() =>
import("../courtesy-car-detail/courtesy-car-detail.page.container")
);
const CourtesyCarsPage = lazy(() =>
import("../courtesy-cars/courtesy-cars.page.container")
);
const { Header, Content, Footer } = Layout;
@@ -64,13 +72,15 @@ export default function Manage({ match }) {
</Header>
<Layout>
<Content
className='content-container'
style={{ padding: "0em 4em 4em" }}>
className="content-container"
style={{ padding: "0em 4em 4em" }}
>
<ErrorBoundary>
<Suspense
fallback={
<LoadingSpinner message={t("general.labels.loadingapp")} />
}>
}
>
<EmailOverlayContainer />
<Route exact path={`${match.path}`} component={ManageRootPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
@@ -86,7 +96,41 @@ export default function Manage({ match }) {
component={JobsDetailPage}
/>
</Switch>
<Route
exact
path={`${match.path}/courtesycars/`}
component={CourtesyCarsPage}
/>
<Switch>
<Route
exact
path={`${match.path}/courtesycars/create`}
component={CourtesyCarCreateContainer}
/>
<Route
exact
path={`${match.path}/courtesycars/contracts`}
component={() => <div>HOLD</div>}
/>
<Route
exact
path={`${match.path}/courtesycars/contracts/new`}
component={() => <div>new cc contract</div>}
/>
<Route
exact
path={`${match.path}/courtesycars/contracts/:contractId`}
component={() => <div>cc contract id</div>}
/>
<Route
exact
path={`${match.path}/courtesycars/:ccId`}
component={CourtesyCarDetailContainer}
/>
</Switch>
<Route
exact
path={`${match.path}/profile`}