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

Added breadcrumb object + breadcrumbs for major pages.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-13 14:02:07 -07:00
parent 502debae2e
commit e66bd0ae56
29 changed files with 939 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
bodyshop_translations.babel
View File

@@ -9117,6 +9117,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>enterinvoices</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>home</name> <name>home</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -10803,6 +10824,368 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<folder_node>
<name>bc</name>
<children>
<concept_node>
<name>availablejobs</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>contracts</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>contracts-create</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>contracts-detail</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>courtesycars</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>courtesycars-detail</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>courtesycars-new</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>jobs</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>jobs-active</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>jobs-detail</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>jobs-new</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>owner-detail</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>owners</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>schedule</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>vehicle-details</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>vehicles</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<concept_node>
<name>contracts</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>contracts-create</name> <name>contracts-create</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -10845,6 +11228,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>courtesycars</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>courtesycars-create</name> <name>courtesycars-create</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -11034,6 +11438,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>owners-detail</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>profile</name> <name>profile</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

28
client/src/components/breadcrumbs/breadcrumbs.component.jsx Normal file
View File

@@ -0,0 +1,28 @@
import React from "react";
import { Breadcrumb } from "antd";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBreadcrumbs } from "../../redux/application/application.selectors";
import { Link } from "react-router-dom";
const mapStateToProps = createStructuredSelector({
breadcrumbs: selectBreadcrumbs,
});
export function BreadCrumbs({ breadcrumbs }) {
return (
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
{breadcrumbs.map((item) =>
item.link ? (
<Breadcrumb.Item key={item.label}>
<Link to={item.link}>{item.label} </Link>
</Breadcrumb.Item>
) : (
<Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
)
)}
</Breadcrumb>
);
}
export default connect(mapStateToProps, null)(BreadCrumbs);

31
client/src/components/header/header.component.jsx
View File

@@ -15,14 +15,26 @@ import { Link } from "react-router-dom";
import UserImage from "../../assets/User.svg"; import UserImage from "../../assets/User.svg";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component"; import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
export default ({ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
});
function Header({
landingHeader, landingHeader,
selectedNavItem, selectedNavItem,
logo, logo,
handleMenuClick, handleMenuClick,
currentUser, currentUser,
signOutStart, signOutStart,
}) => { setInvoiceEnterContext,
}) {
const { t } = useTranslation(); const { t } = useTranslation();
//TODO Add //TODO Add
@@ -175,6 +187,17 @@ export default ({
</span> </span>
} }
> >
<Menu.Item
key="enterinvoices"
onClick={() => {
setInvoiceEnterContext({
actions: {},
context: {},
});
}}
>
{t("menus.header.enterinvoices")}
</Menu.Item>
<Menu.Item key="invoices"> <Menu.Item key="invoices">
<Link to="/manage/invoices">{t("menus.header.invoices")}</Link> <Link to="/manage/invoices">{t("menus.header.invoices")}</Link>
</Menu.Item> </Menu.Item>
@@ -238,4 +261,6 @@ export default ({
</Col> </Col>
</Row> </Row>
); );
}; }
export default connect(mapStateToProps, mapDispatchToProps)(Header);

5
client/src/components/job-totals-table/job-totals-table.component.jsx
View File

@@ -1,8 +1,7 @@
import { Col, List, Row } from "antd";
import React from "react"; import React from "react";
import { List, Row, Col } from "antd";
import { useTranslation } from "react-i18next";
export default function JobsTotalsTableComponent({ totals }) { export default function JobsTotalsTableComponent({ totals }) {
const { t } = useTranslation(); //const { t } = useTranslation();
if (!!!totals) return null; if (!!!totals) return null;
return ( return (

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

@@ -9,11 +9,16 @@ import { useTranslation } from "react-i18next";
import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries"; import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
import { useMutation } from "@apollo/react-hooks"; import { useMutation } from "@apollo/react-hooks";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
}); });
export function ContractCreatePageContainer({ bodyshop }) { export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory(); const history = useHistory();
@@ -24,45 +29,56 @@ export function ContractCreatePageContainer({ bodyshop }) {
); );
const [insertContract] = useMutation(INSERT_NEW_CONTRACT); const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
console.log("location", location); console.log("test");
const handleFinish = values => { const handleFinish = (values) => {
if (!!selectedCarState[0] && !!selectedJobState[0]) { if (!!selectedCarState[0] && !!selectedJobState[0]) {
insertContract({ insertContract({
variables: { variables: {
contract: { contract: {
...values, ...values,
courtesycarid: selectedCarState[0], courtesycarid: selectedCarState[0],
jobid: selectedJobState[0] jobid: selectedJobState[0],
} },
} },
}) })
.then(response => { .then((response) => {
notification["success"]({ notification["success"]({
message: t("contracts.successes.saved") message: t("contracts.successes.saved"),
}); });
history.push( history.push(
`/manage/courtesycars/contracts/${response.data.insert_cccontracts.returning[0].id}` `/manage/courtesycars/contracts/${response.data.insert_cccontracts.returning[0].id}`
); );
}) })
.catch(error => .catch((error) =>
notification["error"]({ notification["error"]({
message: t("contracts.errors.saving", { message: t("contracts.errors.saving", {
error: JSON.stringify(error) error: JSON.stringify(error),
}) }),
}) })
); );
} else { } else {
notification["error"]({ notification["error"]({
message: t("contracts.errors.selectjobandcar") message: t("contracts.errors.selectjobandcar"),
}); });
} }
}; };
useEffect(() => { useEffect(() => {
document.title = t("titles.contracts-create"); document.title = t("titles.contracts-create");
}, [t]); setBreadcrumbs([
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
{
link: "/manage/courtesycars/contracts",
label: t("titles.bc.contracts"),
},
{
link: "/manage/courtesycars/contracts/new",
label: t("titles.bc.contracts-create"),
},
]);
}, [t, setBreadcrumbs]);
return ( return (
<Form form={form} autoComplete="no" onFinish={handleFinish}> <Form form={form} autoComplete="no" onFinish={handleFinish}>
@@ -73,4 +89,7 @@ export function ContractCreatePageContainer({ bodyshop }) {
</Form> </Form>
); );
} }
export default connect(mapStateToProps, null)(ContractCreatePageContainer); export default connect(
mapStateToProps,
mapDispatchToProps
)(ContractCreatePageContainer);

45
client/src/pages/contract-detail/contract-detail.page.container.jsx
View File

@@ -3,23 +3,29 @@ import { Form, notification } from "antd";
import moment from "moment"; import moment from "moment";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import CourtesyCarReturnModalContainer from "../../components/courtesy-car-return-modal/courtesy-car-return-modal.container";
import { import {
QUERY_CONTRACT_BY_PK, QUERY_CONTRACT_BY_PK,
UPDATE_CONTRACT UPDATE_CONTRACT,
} from "../../graphql/cccontracts.queries"; } from "../../graphql/cccontracts.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import ContractDetailPageComponent from "./contract-detail.page.component"; import ContractDetailPageComponent from "./contract-detail.page.component";
import CourtesyCarReturnModalContainer from "../../components/courtesy-car-return-modal/courtesy-car-return-modal.container";
export default function ContractDetailPageContainer() { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function ContractDetailPageContainer({ setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [updateContract] = useMutation(UPDATE_CONTRACT); const [updateContract] = useMutation(UPDATE_CONTRACT);
const [form] = Form.useForm(); const [form] = Form.useForm();
const { contractId } = useParams(); const { contractId } = useParams();
const { loading, error, data, refetch } = useQuery(QUERY_CONTRACT_BY_PK, { const { loading, error, data, refetch } = useQuery(QUERY_CONTRACT_BY_PK, {
variables: { id: contractId } variables: { id: contractId },
}); });
useEffect(() => { useEffect(() => {
@@ -28,20 +34,34 @@ export default function ContractDetailPageContainer() {
: error : error
? t("titles.app") ? t("titles.app")
: t("titles.contracts-detail", { : t("titles.contracts-detail", {
id: (data && data.cccontracts_by_pk.agreementnumber) || "" id: (data && data.cccontracts_by_pk.agreementnumber) || "",
}); });
}, [t, data, error, loading]);
const handleFinish = values => { setBreadcrumbs([
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
{
link: "/manage/courtesycars/contracts",
label: t("titles.bc.contracts"),
},
{
link: "/manage/courtesycars/contracts/new",
label: t("titles.bc.contracts-detail", {
number: data.cccontracts_by_pk.agreementnumber || "",
}),
},
]);
}, [t, data, error, loading, setBreadcrumbs]);
const handleFinish = (values) => {
updateContract({ updateContract({
variables: { cccontract: { ...values }, contractId: contractId } variables: { cccontract: { ...values }, contractId: contractId },
}) })
.then(response => { .then((response) => {
notification["success"]({ message: t("contracts.successes.saved") }); notification["success"]({ message: t("contracts.successes.saved") });
}) })
.catch(error => .catch((error) =>
notification["error"]({ notification["error"]({
message: t("contracts.errors.saving", { error: error }) message: t("contracts.errors.saving", { error: error }),
}) })
); );
}; };
@@ -76,7 +96,7 @@ export default function ContractDetailPageContainer() {
: null, : null,
driver_dob: data.cccontracts_by_pk.driver_dob driver_dob: data.cccontracts_by_pk.driver_dob
? moment(data.cccontracts_by_pk.driver_dob) ? moment(data.cccontracts_by_pk.driver_dob)
: null : null,
} }
: {} : {}
} }
@@ -91,3 +111,4 @@ export default function ContractDetailPageContainer() {
</div> </div>
); );
} }
export default connect(null, mapDispatchToProps)(ContractDetailPageContainer);

27
client/src/pages/contracts/contracts.page.container.jsx
View File

@@ -1,11 +1,29 @@
import React from "react";
import ContractsPageComponent from "./contracts.page.component";
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import { QUERY_ACTIVE_CONTRACTS } from "../../graphql/cccontracts.queries"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { QUERY_ACTIVE_CONTRACTS } from "../../graphql/cccontracts.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import ContractsPageComponent from "./contracts.page.component";
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export default function ContractsPageContainer() { export function ContractsPageContainer({ setBreadcrumbs }) {
const { loading, error, data } = useQuery(QUERY_ACTIVE_CONTRACTS); const { loading, error, data } = useQuery(QUERY_ACTIVE_CONTRACTS);
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.contracts");
setBreadcrumbs([
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
{
link: "/manage/courtesycars/contracts",
label: t("titles.bc.contracts"),
},
]);
}, [setBreadcrumbs, t]);
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
@@ -17,3 +35,4 @@ export default function ContractsPageContainer() {
</div> </div>
); );
} }
export default connect(null, mapDispatchToProps)(ContractsPageContainer);

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

@@ -8,33 +8,43 @@ import { INSERT_NEW_COURTESY_CAR } from "../../graphql/courtesy-car.queries";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import CourtesyCarCreateComponent from "./courtesy-car-create.page.component"; import CourtesyCarCreateComponent from "./courtesy-car-create.page.component";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop,
}); });
const mapDispatchToProps = (dispatch) => ({
export function CourtesyCarCreateContainer({ bodyshop }) { setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR); const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR);
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory(); const history = useHistory();
const handleFinish = values => { const handleFinish = (values) => {
insertCourtesyCar({ insertCourtesyCar({
variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } } variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } },
}) })
.then(response => { .then((response) => {
notification["success"]({ message: t("courtesycars.successes.saved") }); notification["success"]({ message: t("courtesycars.successes.saved") });
history.push( history.push(
`/manage/courtesycars/${response.data.insert_courtesycars.returning[0].id}` `/manage/courtesycars/${response.data.insert_courtesycars.returning[0].id}`
); );
}) })
.catch(error => console.log("error", error)); .catch((error) => console.log("error", error));
}; };
useEffect(() => { useEffect(() => {
document.title = t("titles.courtesycars-create"); document.title = t("titles.courtesycars-create");
}, [t]); setBreadcrumbs([
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
{
link: "/manage/courtesycars/new",
label: t("titles.bc.courtesycars-new"),
},
]);
}, [t, setBreadcrumbs]);
return ( return (
<Form form={form} autoComplete="no" onFinish={handleFinish}> <Form form={form} autoComplete="no" onFinish={handleFinish}>
@@ -42,4 +52,7 @@ export function CourtesyCarCreateContainer({ bodyshop }) {
</Form> </Form>
); );
} }
export default connect(mapStateToProps, null)(CourtesyCarCreateContainer); export default connect(
mapStateToProps,
mapDispatchToProps
)(CourtesyCarCreateContainer);

40
client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
View File

@@ -3,19 +3,24 @@ import { Form, notification } from "antd";
import moment from "moment"; import moment from "moment";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries"; import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component"; import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
export default function CourtesyCarDetailPageContainer() { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function CourtesyCarDetailPageContainer({ setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [insertCourtesyCar] = useMutation(UPDATE_CC); const [insertCourtesyCar] = useMutation(UPDATE_CC);
const [form] = Form.useForm(); const [form] = Form.useForm();
const { ccId } = useParams(); const { ccId } = useParams();
const { loading, error, data } = useQuery(QUERY_CC_BY_PK, { const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
variables: { id: ccId } variables: { id: ccId },
}); });
useEffect(() => { useEffect(() => {
@@ -24,20 +29,31 @@ export default function CourtesyCarDetailPageContainer() {
: error : error
? t("titles.app") ? t("titles.app")
: t("titles.courtesycars-detail", { : t("titles.courtesycars-detail", {
id: (data && data.courtesycars_by_pk.vin) || "" id: (data && data.courtesycars_by_pk.fleet_number) || "",
}); });
}, [t, data, error, loading]); setBreadcrumbs([
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
{
link: `/manage/courtesycars/${
(data && data.courtesycars_by_pk.id) || ""
}`,
label: t("titles.bc.courtesycars-detail", {
number: (data && data.courtesycars_by_pk.fleetnumber) || "",
}),
},
]);
}, [t, data, error, loading, setBreadcrumbs]);
const handleFinish = values => { const handleFinish = (values) => {
insertCourtesyCar({ insertCourtesyCar({
variables: { cc: { ...values }, ccId: ccId } variables: { cc: { ...values }, ccId: ccId },
}) })
.then(response => { .then((response) => {
notification["success"]({ message: t("courtesycars.successes.saved") }); notification["success"]({ message: t("courtesycars.successes.saved") });
}) })
.catch(error => .catch((error) =>
notification["error"]({ notification["error"]({
message: t("courtesycars.errors.saving", { error: error }) message: t("courtesycars.errors.saving", { error: error }),
}) })
); );
}; };
@@ -76,7 +92,7 @@ export default function CourtesyCarDetailPageContainer() {
: null, : null,
insuranceexpires: data.courtesycars_by_pk.insuranceexpires insuranceexpires: data.courtesycars_by_pk.insuranceexpires
? moment(data.courtesycars_by_pk.insuranceexpires) ? moment(data.courtesycars_by_pk.insuranceexpires)
: null : null,
} }
: {} : {}
} }
@@ -87,3 +103,7 @@ export default function CourtesyCarDetailPageContainer() {
</Form> </Form>
); );
} }
export default connect(
null,
mapDispatchToProps
)(CourtesyCarDetailPageContainer);

20
client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
View File

@@ -1,12 +1,26 @@
import React from "react"; import React, { useEffect } from "react";
import CourtesyCarsPageComponent from "./courtesy-cars.page.component"; import CourtesyCarsPageComponent from "./courtesy-cars.page.component";
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { QUERY_ALL_CC } from "../../graphql/courtesy-car.queries"; import { QUERY_ALL_CC } from "../../graphql/courtesy-car.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { connect } from "react-redux";
import { useTranslation } from "react-i18next";
export default function CourtesyCarsPageContainer() { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function CourtesyCarsPageContainer({ setBreadcrumbs }) {
const { loading, error, data } = useQuery(QUERY_ALL_CC); const { loading, error, data } = useQuery(QUERY_ALL_CC);
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.courtesycars");
setBreadcrumbs([
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
]);
}, [setBreadcrumbs, t]);
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<CourtesyCarsPageComponent <CourtesyCarsPageComponent
@@ -15,3 +29,5 @@ export default function CourtesyCarsPageContainer() {
/> />
); );
} }
export default connect(null, mapDispatchToProps)(CourtesyCarsPageContainer);

16
client/src/pages/jobs-available/jobs-available.page.container.jsx
View File

@@ -2,12 +2,18 @@ import React, { useEffect } from "react";
import { useMutation, useLazyQuery } from "@apollo/react-hooks"; import { useMutation, useLazyQuery } from "@apollo/react-hooks";
import { import {
DELETE_AVAILABLE_JOB, DELETE_AVAILABLE_JOB,
QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK,
} from "../../graphql/available-jobs.queries"; } from "../../graphql/available-jobs.queries";
import JobsAvailablePageComponent from "./jobs-available.page.component"; import JobsAvailablePageComponent from "./jobs-available.page.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
export default function JobsAvailablePageContainer() { import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function JobsAvailablePageContainer({ setBreadcrumbs }) {
const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB); const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -15,7 +21,10 @@ export default function JobsAvailablePageContainer() {
useEffect(() => { useEffect(() => {
document.title = t("titles.jobsavailable"); document.title = t("titles.jobsavailable");
}, [t]); setBreadcrumbs([
{ link: "/manage/available", label: t("titles.bc.availablejobs") },
]);
}, [t, setBreadcrumbs]);
return ( return (
<div> <div>
@@ -26,3 +35,4 @@ export default function JobsAvailablePageContainer() {
</div> </div>
); );
} }
export default connect(null, mapDispatchToProps)(JobsAvailablePageContainer);

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

@@ -9,13 +9,15 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop,
}); });
export default connect(mapStateToProps, null)(JobsCreateContainer); const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
function JobsCreateContainer({ bodyshop }) { });
function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
const contextState = useState({ const contextState = useState({
vehicle: { new: false, search: "", selectedid: null, vehicleObj: null }, vehicle: { new: false, search: "", selectedid: null, vehicleObj: null },
@@ -24,7 +26,7 @@ function JobsCreateContainer({ bodyshop }) {
created: false, created: false,
error: null, error: null,
newJobId: null, newJobId: null,
newJobEstNum: null newJobEstNum: null,
}); });
const [form] = Form.useForm(); const [form] = Form.useForm();
const [state, setState] = contextState; const [state, setState] = contextState;
@@ -36,49 +38,56 @@ function JobsCreateContainer({ bodyshop }) {
useEffect(() => { useEffect(() => {
if (!!state.owner.selectedid) { if (!!state.owner.selectedid) {
loadOwner({ loadOwner({
variables: { id: state.owner.selectedid } variables: { id: state.owner.selectedid },
}); });
} }
}, [state.owner.selectedid, loadOwner]); }, [state.owner.selectedid, loadOwner]);
useEffect(() => { useEffect(() => {
document.title = t("titles.jobs-create"); document.title = t("titles.jobs-create");
}, [t]); setBreadcrumbs([
{ link: "/manage/available", label: t("titles.bc.availablejobs") },
{
link: "/manage/jobs/new",
label: t("titles.bc.jobs-new"),
},
]);
}, [t, setBreadcrumbs]);
const runInsertJob = job => { const runInsertJob = (job) => {
insertJob({ variables: { job: job } }) insertJob({ variables: { job: job } })
.then(resp => { .then((resp) => {
setState({ setState({
...state, ...state,
created: true, created: true,
error: null, error: null,
newJobId: resp.data.insert_jobs.returning[0].id, newJobId: resp.data.insert_jobs.returning[0].id,
newJobEstNum: resp.data.insert_jobs.returning[0].est_number newJobEstNum: resp.data.insert_jobs.returning[0].est_number,
}); });
}) })
.catch(error => { .catch((error) => {
notification["error"]({ notification["error"]({
message: t("jobs.errors.creating", { error: error }) message: t("jobs.errors.creating", { error: error }),
}); });
setState({ ...state, error: error }); setState({ ...state, error: error });
}); });
}; };
const handleFinish = values => { const handleFinish = (values) => {
let job = Object.assign( let job = Object.assign(
{}, {},
values, values,
{ {
vehicle: state.vehicle.selectedid ? null : values.vehicle, vehicle: state.vehicle.selectedid ? null : values.vehicle,
vehicleid: state.vehicle.selectedid || null vehicleid: state.vehicle.selectedid || null,
}, },
{ {
owner: state.owner.selectedid ? null : values.owner, owner: state.owner.selectedid ? null : values.owner,
ownerid: state.owner.selectedid || null ownerid: state.owner.selectedid || null,
}, },
{ {
status: bodyshop.md_ro_statuses.default_imported || "Open*", //Pull from redux store. status: bodyshop.md_ro_statuses.default_imported || "Open*", //Pull from redux store.
shopid: bodyshop.id shopid: bodyshop.id,
} }
); );
//TODO Logic to ensure the owner is actually fetched. //TODO Logic to ensure the owner is actually fetched.
@@ -128,3 +137,7 @@ function JobsCreateContainer({ bodyshop }) {
</JobCreateContext.Provider> </JobCreateContext.Provider>
); );
} }
export default connect(
mapStateToProps,
mapDispatchToProps
)(JobsCreateContainer);

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

@@ -3,7 +3,7 @@ import Icon, {
CalendarFilled, CalendarFilled,
DollarCircleOutlined, DollarCircleOutlined,
FileImageFilled, FileImageFilled,
ToolFilled ToolFilled,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Form, notification, Tabs } from "antd"; import { Form, notification, Tabs } from "antd";
import moment from "moment"; import moment from "moment";
@@ -14,7 +14,7 @@ import {
FaHistory, FaHistory,
FaInfo, FaInfo,
FaRegStickyNote, FaRegStickyNote,
FaShieldAlt FaShieldAlt,
} from "react-icons/fa"; } from "react-icons/fa";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
@@ -57,9 +57,7 @@ const JobLineUpsertModalContainer = lazy(() =>
"../../components/job-lines-upsert-modal/job-lines-upsert-modal.container" "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container"
) )
); );
const EnterInvoiceModalContainer = lazy(() =>
import("../../components/invoice-enter-modal/invoice-enter-modal.container")
);
const JobsDetailPliContainer = lazy(() => const JobsDetailPliContainer = lazy(() =>
import("../../components/jobs-detail-pli/jobs-detail-pli.container") import("../../components/jobs-detail-pli/jobs-detail-pli.container")
); );
@@ -73,7 +71,7 @@ export default function JobsDetailPage({
mutationConvertJob, mutationConvertJob,
handleSubmit, handleSubmit,
refetch, refetch,
updateJobStatus updateJobStatus,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm(); const [form] = Form.useForm();
@@ -83,22 +81,22 @@ export default function JobsDetailPage({
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 12 }, xs: { span: 12 },
sm: { span: 5 } sm: { span: 5 },
}, },
wrapperCol: { wrapperCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 12 } sm: { span: 12 },
} },
}; };
const handleFinish = values => { const handleFinish = (values) => {
mutationUpdateJob({ mutationUpdateJob({
variables: { jobId: job.id, job: values } variables: { jobId: job.id, job: values },
}).then(r => { }).then((r) => {
notification["success"]({ notification["success"]({
message: t("jobs.successes.savetitle") message: t("jobs.successes.savetitle"),
}); });
refetch().then(r => form.resetFields()); refetch().then((r) => form.resetFields());
}); });
}; };
@@ -108,7 +106,6 @@ export default function JobsDetailPage({
> >
<ScheduleJobModalContainer /> <ScheduleJobModalContainer />
<JobLineUpsertModalContainer /> <JobLineUpsertModalContainer />
<EnterInvoiceModalContainer />
<Form <Form
form={form} form={form}
@@ -143,7 +140,7 @@ export default function JobsDetailPage({
: null, : null,
date_invoiced: job.date_invoiced ? moment(job.date_invoiced) : null, date_invoiced: job.date_invoiced ? moment(job.date_invoiced) : null,
date_closed: job.date_closed ? moment(job.date_closed) : null, date_closed: job.date_closed ? moment(job.date_closed) : null,
date_exported: job.date_exported ? moment(job.date_exported) : null date_exported: job.date_exported ? moment(job.date_exported) : null,
}} }}
> >
<JobsDetailHeader <JobsDetailHeader
@@ -155,7 +152,7 @@ export default function JobsDetailPage({
/> />
<Tabs <Tabs
defaultActiveKey={search.tab} defaultActiveKey={search.tab}
onChange={key => history.push({ search: `?tab=${key}` })} onChange={(key) => history.push({ search: `?tab=${key}` })}
> >
<Tabs.TabPane <Tabs.TabPane
tab={ tab={

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

@@ -4,30 +4,41 @@ import React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component"; import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import { CONVERT_JOB_TO_RO, GET_JOB_BY_PK, UPDATE_JOB, UPDATE_JOB_STATUS } from "../../graphql/jobs.queries"; import {
CONVERT_JOB_TO_RO,
GET_JOB_BY_PK,
UPDATE_JOB,
UPDATE_JOB_STATUS,
} from "../../graphql/jobs.queries";
import JobsDetailPage from "./jobs-detail.page.component"; import JobsDetailPage from "./jobs-detail.page.component";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { connect } from "react-redux";
function JobsDetailPageContainer({ match }) { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
function JobsDetailPageContainer({ match, setBreadcrumbs }) {
const { jobId } = match.params; const { jobId } = match.params;
const { t } = useTranslation(); const { t } = useTranslation();
const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, { const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId }, variables: { id: jobId },
fetchPolicy: "network-only" fetchPolicy: "network-only",
}); });
const [mutationUpdateJob] = useMutation(UPDATE_JOB); const [mutationUpdateJob] = useMutation(UPDATE_JOB);
const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO); const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS); const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
const updateJobStatus = status => { const updateJobStatus = (status) => {
mutationUpdateJobstatus({ mutationUpdateJobstatus({
variables: { jobId: jobId, status: status } variables: { jobId: jobId, status: status },
}) })
.then(r => { .then((r) => {
notification["success"]({ message: t("jobs.successes.save") }); notification["success"]({ message: t("jobs.successes.save") });
refetch(); refetch();
}) })
.catch(error => { .catch((error) => {
notification[error]({ message: t("jobs.errors.saving") }); notification[error]({ message: t("jobs.errors.saving") });
}); });
}; };
@@ -40,9 +51,23 @@ function JobsDetailPageContainer({ match }) {
: t("titles.jobsdetail", { : t("titles.jobsdetail", {
ro_number: data.jobs_by_pk.converted ro_number: data.jobs_by_pk.converted
? data.jobs_by_pk.ro_number ? data.jobs_by_pk.ro_number
: `EST ${data.jobs_by_pk.est_number}` : `EST ${data.jobs_by_pk.est_number}`,
}); });
}, [loading, data, t, error]); setBreadcrumbs([
{ link: "/manage/jobs", label: t("titles.bc.jobs") },
{
link: `/manage/jobs/${jobId}`,
label: t("titles.bc.jobs-detail", {
number:
(data &&
(data.jobs_by_pk.converted
? data && data.jobs_by_pk.ro_number
: `EST ${data.jobs_by_pk.est_number}`)) ||
"",
}),
},
]);
}, [loading, data, t, error, setBreadcrumbs, jobId]);
if (loading) return <SpinComponent />; if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
@@ -59,4 +84,4 @@ function JobsDetailPageContainer({ match }) {
<AlertComponent message={t("jobs.errors.noaccess")} type="error" /> <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
); );
} }
export default JobsDetailPageContainer; export default connect(null, mapDispatchToProps)(JobsDetailPageContainer);

13
client/src/pages/jobs/jobs.page.jsx
View File

@@ -11,11 +11,17 @@ import JobsList from "../../components/jobs-list/jobs-list.component";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries"; import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
export function JobsPage({ location, bodyshop }) { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function JobsPage({ location, bodyshop, setBreadcrumbs }) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, { const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: { variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"], statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
@@ -25,7 +31,8 @@ export function JobsPage({ location, bodyshop }) {
useEffect(() => { useEffect(() => {
document.title = t("titles.jobs"); document.title = t("titles.jobs");
}, [t]); setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-active") }]);
}, [t, setBreadcrumbs]);
const search = queryString.parse(location.search); const search = queryString.parse(location.search);
const searchTextState = useState(""); const searchTextState = useState("");
@@ -78,4 +85,4 @@ export function JobsPage({ location, bodyshop }) {
); );
} }
export default connect(mapStateToProps, null)(JobsPage); export default connect(mapStateToProps, mapDispatchToProps)(JobsPage);

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

@@ -8,6 +8,7 @@ import FooterComponent from "../../components/footer/footer.component";
import HeaderContainer from "../../components/header/header.container"; import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import "./manage.page.styles.scss"; import "./manage.page.styles.scss";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
const ManageRootPage = lazy(() => const ManageRootPage = lazy(() =>
import("../manage-root/manage-root.page.container") import("../manage-root/manage-root.page.container")
@@ -70,7 +71,9 @@ const InvoicesListPage = lazy(() =>
const InvoiceDetailPage = lazy(() => const InvoiceDetailPage = lazy(() =>
import("../invoice-detail/invoice-detail.page.container") import("../invoice-detail/invoice-detail.page.container")
); );
const EnterInvoiceModalContainer = lazy(() =>
import("../../components/invoice-enter-modal/invoice-enter-modal.container")
);
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
export default function Manage({ match }) { export default function Manage({ match }) {
@@ -96,6 +99,8 @@ export default function Manage({ match }) {
<LoadingSpinner message={t("general.labels.loadingapp")} /> <LoadingSpinner message={t("general.labels.loadingapp")} />
} }
> >
<BreadCrumbs />
<EnterInvoiceModalContainer />
<EmailOverlayContainer /> <EmailOverlayContainer />
<Route exact path={`${match.path}`} component={ManageRootPage} /> <Route exact path={`${match.path}`} component={ManageRootPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} /> <Route exact path={`${match.path}/jobs`} component={JobsPage} />

37
client/src/pages/owners-detail/owners-detail.page.container.jsx
View File

@@ -1,19 +1,49 @@
import React from "react"; import React, { useEffect } from "react";
import OwnersDetailComponent from "./owners-detail.page.component"; import OwnersDetailComponent from "./owners-detail.page.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries"; import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";
export default function OwnersDetailContainer({ match }) { import { connect } from "react-redux";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function OwnersDetailContainer({ match, setBreadcrumbs }) {
const { ownerId } = match.params; const { ownerId } = match.params;
const { t } = useTranslation(); const { t } = useTranslation();
const { loading, data, error, refetch } = useQuery(QUERY_OWNER_BY_ID, { const { loading, data, error, refetch } = useQuery(QUERY_OWNER_BY_ID, {
variables: { id: ownerId }, variables: { id: ownerId },
fetchPolicy: "network-only" fetchPolicy: "network-only",
}); });
useEffect(() => {
document.title = t("titles.owners-detail", {
name: data
? `${data.owners_by_pk.ownr_fn || ""} ${
data.owners_by_pk.ownr_ln || ""
} ${data.owners_by_pk.ownr_co_nm || ""}`
: "",
});
setBreadcrumbs([
{ link: "/manage/owners", label: t("titles.bc.owners") },
{
link: `/manage/owners/${ownerId}`,
label: t("titles.bc.owner-detail", {
name: data
? `${data.owners_by_pk.ownr_fn || ""} ${
data.owners_by_pk.ownr_ln || ""
} ${data.owners_by_pk.ownr_co_nm || ""}`
: "",
}),
},
]);
}, [setBreadcrumbs, t, data, ownerId]);
if (loading) return <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
@@ -26,3 +56,4 @@ export default function OwnersDetailContainer({ match }) {
<AlertComponent message={t("owners.errors.noaccess")} type="error" /> <AlertComponent message={t("owners.errors.noaccess")} type="error" />
); );
} }
export default connect(null, mapDispatchToProps)(OwnersDetailContainer);

12
client/src/pages/owners/owners.page.container.jsx
View File

@@ -1,12 +1,20 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import OwnersPageComponent from "./owners.page.component"; import OwnersPageComponent from "./owners.page.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { connect } from "react-redux";
export default function OwnersPageContainer() { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function OwnersPageContainer({ setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => { useEffect(() => {
document.title = t("titles.owners"); document.title = t("titles.owners");
}, [t]); setBreadcrumbs([{ link: "/manage/owners", label: t("titles.bc.owners") }]);
}, [t, setBreadcrumbs]);
return <OwnersPageComponent />; return <OwnersPageComponent />;
} }
export default connect(null, mapDispatchToProps)(OwnersPageContainer);

14
client/src/pages/schedule/schedule.page.container.jsx
View File

@@ -1,12 +1,22 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import SchedulePageComponent from "./schedule.page.component"; import SchedulePageComponent from "./schedule.page.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function SchedulePageContainer() { import { connect } from "react-redux";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function SchedulePageContainer({ setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => { useEffect(() => {
document.title = t("titles.schedule"); document.title = t("titles.schedule");
}, [t]); setBreadcrumbs([
{ link: "/manage/schedule", label: t("titles.bc.schedule") },
]);
}, [t, setBreadcrumbs]);
return <SchedulePageComponent />; return <SchedulePageComponent />;
} }
export default connect(null, mapDispatchToProps)(SchedulePageContainer);

27
client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
View File

@@ -5,13 +5,19 @@ import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { connect } from "react-redux";
export default function VehicleDetailContainer({ match }) { const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function VehicleDetailContainer({ match, setBreadcrumbs }) {
const { vehId } = match.params; const { vehId } = match.params;
const { t } = useTranslation(); const { t } = useTranslation();
const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, { const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
variables: { id: vehId }, variables: { id: vehId },
fetchPolicy: "network-only" fetchPolicy: "network-only",
}); });
useEffect(() => { useEffect(() => {
@@ -19,9 +25,21 @@ export default function VehicleDetailContainer({ match }) {
vehicle: vehicle:
data && data.vehicles_by_pk data && data.vehicles_by_pk
? `${data.vehicles_by_pk.v_model_yr} ${data.vehicles_by_pk.v_make_desc} ${data.vehicles_by_pk.v_model_desc}` ? `${data.vehicles_by_pk.v_model_yr} ${data.vehicles_by_pk.v_make_desc} ${data.vehicles_by_pk.v_model_desc}`
: "" : "",
}); });
}, [t, data]); setBreadcrumbs([
{ link: "/manage/vehicles", label: t("titles.bc.vehicles") },
{
link: `/manage/vehicles/${vehId}`,
label: t("titles.bc.vehicle-details", {
vehicle:
data && data.vehicles_by_pk
? `${data.vehicles_by_pk.v_model_yr} ${data.vehicles_by_pk.v_make_desc} ${data.vehicles_by_pk.v_model_desc}`
: "",
}),
},
]);
}, [t, data, setBreadcrumbs, vehId]);
if (loading) return <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
@@ -35,3 +53,4 @@ export default function VehicleDetailContainer({ match }) {
<AlertComponent message={t("vehicles.errors.noaccess")} type="error" /> <AlertComponent message={t("vehicles.errors.noaccess")} type="error" />
); );
} }
export default connect(null, mapDispatchToProps)(VehicleDetailContainer);

17
client/src/pages/vehicles/vehicles.page.container.jsx
View File

@@ -1,10 +1,23 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import VehiclesPageComponent from "./vehicles.page.component"; import VehiclesPageComponent from "./vehicles.page.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function VehiclesPageContainer() { import { connect } from "react-redux";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function VehiclesPageContainer({ setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => { useEffect(() => {
document.title = t("titles.vehicles"); document.title = t("titles.vehicles");
}, [t]); setBreadcrumbs([
{ link: "/manage/vehicles", label: t("titles.bc.vehicles") },
]);
}, [t, setBreadcrumbs]);
return <VehiclesPageComponent />; return <VehiclesPageComponent />;
} }
export default connect(null, mapDispatchToProps)(VehiclesPageContainer);

11
client/src/redux/application/application.actions.js
View File

@@ -1,10 +1,15 @@
import ApplicationActionTypes from "./application.types"; import ApplicationActionTypes from "./application.types";
export const startLoading = () => ({ export const startLoading = () => ({
type: ApplicationActionTypes.START_LOADING type: ApplicationActionTypes.START_LOADING,
}); });
export const endLoading = options => ({ export const endLoading = (options) => ({
type: ApplicationActionTypes.END_LOADING, type: ApplicationActionTypes.END_LOADING,
payload: options payload: options,
});
export const setBreadcrumbs = (breadcrumbs) => ({
type: ApplicationActionTypes.SET_BREAD_CRUMBS,
payload: breadcrumbs,
}); });

12
client/src/redux/application/application.reducer.js
View File

@@ -1,7 +1,8 @@
import ApplicationActionTypes from "./application.types"; import ApplicationActionTypes from "./application.types";
const INITIAL_STATE = { const INITIAL_STATE = {
loading: false loading: false,
breadcrumbs: [],
}; };
const applicationReducer = (state = INITIAL_STATE, action) => { const applicationReducer = (state = INITIAL_STATE, action) => {
@@ -9,12 +10,17 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
case ApplicationActionTypes.START_LOADING: case ApplicationActionTypes.START_LOADING:
return { return {
...state, ...state,
loading: true loading: true,
}; };
case ApplicationActionTypes.END_LOADING: case ApplicationActionTypes.END_LOADING:
return { return {
...state, ...state,
loading: false loading: false,
};
case ApplicationActionTypes.SET_BREAD_CRUMBS:
return {
...state,
breadcrumbs: action.payload,
}; };
default: default:
return state; return state;

9
client/src/redux/application/application.selectors.js
View File

@@ -1,8 +1,13 @@
import { createSelector } from "reselect"; import { createSelector } from "reselect";
const selectApplication = state => state.application; const selectApplication = (state) => state.application;
export const selectLoading = createSelector( export const selectLoading = createSelector(
[selectApplication], [selectApplication],
application => application.loading (application) => application.loading
);
export const selectBreadcrumbs = createSelector(
[selectApplication],
(application) => application.breadcrumbs
); );

3
client/src/redux/application/application.types.js
View File

@@ -1,5 +1,6 @@
const ApplicationActionTypes = { const ApplicationActionTypes = {
START_LOADING: "START_LOADING", START_LOADING: "START_LOADING",
END_LOADING: "END_LOADING" END_LOADING: "END_LOADING",
SET_BREAD_CRUMBS: "SET_BREAD_CRUMBS",
}; };
export default ApplicationActionTypes; export default ApplicationActionTypes;

24
client/src/translations/en_us/common.json
View File

@@ -583,6 +583,7 @@
"courtesycars-contracts": "Contracts", "courtesycars-contracts": "Contracts",
"courtesycars-newcontract": "New Contract", "courtesycars-newcontract": "New Contract",
"customers": "Customers", "customers": "Customers",
"enterinvoices": "Enter Invoices",
"home": "Home", "home": "Home",
"invoices": "Invoices", "invoices": "Invoices",
"jobs": "Jobs", "jobs": "Jobs",
@@ -710,17 +711,38 @@
}, },
"titles": { "titles": {
"app": "Bodyshop by ImEX Systems", "app": "Bodyshop by ImEX Systems",
"bc": {
"availablejobs": "Available Jobs",
"contracts": "Contracts",
"contracts-create": "New Contract",
"contracts-detail": "Contract #{{number}}",
"courtesycars": "Courtesy Cars",
"courtesycars-detail": "Courtesy Car {{number}}",
"courtesycars-new": "New Courtesy Car",
"jobs": "Jobs",
"jobs-active": "Active Jobs",
"jobs-detail": "Job {{number}}",
"jobs-new": "Create a New Job",
"owner-detail": "{{name}}",
"owners": "Owners",
"schedule": "Schedule",
"vehicle-details": "Vehicle: {{vehicle}}",
"vehicles": "Vehicles"
},
"contracts": "Courtesy Car Contracts | $t(titles.app)",
"contracts-create": "New Contract | $t(titles.app)", "contracts-create": "New Contract | $t(titles.app)",
"contracts-detail": "Contract {{id}} | $t(titles.app)", "contracts-detail": "Contract {{id}} | $t(titles.app)",
"courtesycars": "Courtesy Cars | $t(titles.app)",
"courtesycars-create": "New Courtesy Car | $t(titles.app)", "courtesycars-create": "New Courtesy Car | $t(titles.app)",
"courtesycars-detail": "Courtesy Car {{id}} | $t(titles.app)", "courtesycars-detail": "Courtesy Car {{id}} | $t(titles.app)",
"jobs": "All Jobs | $t(titles.app)", "jobs": "Active Jobs | $t(titles.app)",
"jobs-create": "Create a New Job | $t(titles.app)", "jobs-create": "Create a New Job | $t(titles.app)",
"jobsavailable": "Available Jobs | $t(titles.app)", "jobsavailable": "Available Jobs | $t(titles.app)",
"jobsdetail": "Job {{ro_number}} | $t(titles.app)", "jobsdetail": "Job {{ro_number}} | $t(titles.app)",
"jobsdocuments": "Job Documents {{ro_number}} | $t(titles.app)", "jobsdocuments": "Job Documents {{ro_number}} | $t(titles.app)",
"manageroot": "Home | $t(titles.app)", "manageroot": "Home | $t(titles.app)",
"owners": "All Owners | $t(titles.app)", "owners": "All Owners | $t(titles.app)",
"owners-detail": "{{name}} | $t(titles.app)",
"profile": "My Profile | $t(titles.app)", "profile": "My Profile | $t(titles.app)",
"schedule": "Schedule | $t(titles.app)", "schedule": "Schedule | $t(titles.app)",
"shop": "My Shop | $t(titles.app)", "shop": "My Shop | $t(titles.app)",

22
client/src/translations/es/common.json
View File

@@ -583,6 +583,7 @@
"courtesycars-contracts": "", "courtesycars-contracts": "",
"courtesycars-newcontract": "", "courtesycars-newcontract": "",
"customers": "Clientes", "customers": "Clientes",
"enterinvoices": "",
"home": "Casa", "home": "Casa",
"invoices": "", "invoices": "",
"jobs": "Trabajos", "jobs": "Trabajos",
@@ -710,8 +711,28 @@
}, },
"titles": { "titles": {
"app": "Carrocería de ImEX Systems", "app": "Carrocería de ImEX Systems",
"bc": {
"availablejobs": "",
"contracts": "",
"contracts-create": "",
"contracts-detail": "",
"courtesycars": "",
"courtesycars-detail": "",
"courtesycars-new": "",
"jobs": "",
"jobs-active": "",
"jobs-detail": "",
"jobs-new": "",
"owner-detail": "",
"owners": "",
"schedule": "",
"vehicle-details": "",
"vehicles": ""
},
"contracts": "",
"contracts-create": "", "contracts-create": "",
"contracts-detail": "", "contracts-detail": "",
"courtesycars": "",
"courtesycars-create": "", "courtesycars-create": "",
"courtesycars-detail": "", "courtesycars-detail": "",
"jobs": "Todos los trabajos | $t(titles.app)", "jobs": "Todos los trabajos | $t(titles.app)",
@@ -721,6 +742,7 @@
"jobsdocuments": "Documentos de trabajo {{ro_number}} | $ t (títulos.app)", "jobsdocuments": "Documentos de trabajo {{ro_number}} | $ t (títulos.app)",
"manageroot": "Casa | $t(titles.app)", "manageroot": "Casa | $t(titles.app)",
"owners": "Todos los propietarios | $t(titles.app)", "owners": "Todos los propietarios | $t(titles.app)",
"owners-detail": "",
"profile": "Mi perfil | $t(titles.app)", "profile": "Mi perfil | $t(titles.app)",
"schedule": "Horario | $t(titles.app)", "schedule": "Horario | $t(titles.app)",
"shop": "Mi tienda | $t(titles.app)", "shop": "Mi tienda | $t(titles.app)",

22
client/src/translations/fr/common.json
View File

@@ -583,6 +583,7 @@
"courtesycars-contracts": "", "courtesycars-contracts": "",
"courtesycars-newcontract": "", "courtesycars-newcontract": "",
"customers": "Les clients", "customers": "Les clients",
"enterinvoices": "",
"home": "Accueil", "home": "Accueil",
"invoices": "", "invoices": "",
"jobs": "Emplois", "jobs": "Emplois",
@@ -710,8 +711,28 @@
}, },
"titles": { "titles": {
"app": "Carrosserie par ImEX Systems", "app": "Carrosserie par ImEX Systems",
"bc": {
"availablejobs": "",
"contracts": "",
"contracts-create": "",
"contracts-detail": "",
"courtesycars": "",
"courtesycars-detail": "",
"courtesycars-new": "",
"jobs": "",
"jobs-active": "",
"jobs-detail": "",
"jobs-new": "",
"owner-detail": "",
"owners": "",
"schedule": "",
"vehicle-details": "",
"vehicles": ""
},
"contracts": "",
"contracts-create": "", "contracts-create": "",
"contracts-detail": "", "contracts-detail": "",
"courtesycars": "",
"courtesycars-create": "", "courtesycars-create": "",
"courtesycars-detail": "", "courtesycars-detail": "",
"jobs": "Tous les emplois | $t(titles.app)", "jobs": "Tous les emplois | $t(titles.app)",
@@ -721,6 +742,7 @@
"jobsdocuments": "Documents de travail {{ro_number}} | $ t (titres.app)", "jobsdocuments": "Documents de travail {{ro_number}} | $ t (titres.app)",
"manageroot": "Accueil | $t(titles.app)", "manageroot": "Accueil | $t(titles.app)",
"owners": "Tous les propriétaires | $t(titles.app)", "owners": "Tous les propriétaires | $t(titles.app)",
"owners-detail": "",
"profile": "Mon profil | $t(titles.app)", "profile": "Mon profil | $t(titles.app)",
"schedule": "Horaire | $t(titles.app)", "schedule": "Horaire | $t(titles.app)",
"shop": "Mon magasin | $t(titles.app)", "shop": "Mon magasin | $t(titles.app)",

4
client/src/utils/private-route.js
View File

@@ -4,11 +4,11 @@ export default ({ component: Component, isAuthorized, ...rest }) => {
return ( return (
<Route <Route
{...rest} {...rest}
render={props => render={(props) =>
isAuthorized === true ? ( isAuthorized === true ? (
<Component {...props} /> <Component {...props} />
) : ( ) : (
<Redirect to='/login' /> <Redirect to="/signin" />
) )
} }
/> />