From eff6f361eee439816ee72a8f23b73ae0f1be4353 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Wed, 9 Sep 2020 11:57:58 -0700 Subject: [PATCH] Added selected header navigation BOD-164 --- .../components/header/header.component.jsx | 9 +++-- .../src/components/header/header.styles.scss | 4 +-- .../job-search-select.component.jsx | 5 +-- .../accounting-payables.container.jsx | 15 ++++++-- .../accounting-payments.container.jsx | 15 ++++++-- .../accounting-receivables.container.jsx | 15 ++++++-- .../contract-create.page.container.jsx | 15 ++++++-- .../contract-detail.page.container.jsx | 20 +++++++++-- .../contracts/contracts.page.container.jsx | 13 ++++--- .../courtesy-car-create.page.container.jsx | 17 ++++++--- .../courtesy-car-detail.page.container.jsx | 16 ++++++++- .../courtesy-cars.page.container.jsx | 16 ++++++--- .../invoices/invoices.page.container.jsx | 11 ++++-- .../src/pages/jobs-all/jobs-all.container.jsx | 11 ++++-- .../jobs-available.page.container.jsx | 14 ++++++-- .../pages/jobs-close/jobs-close.container.jsx | 11 ++++-- .../jobs-create/jobs-create.container.jsx | 11 ++++-- .../jobs-delivery.page.container.jsx | 15 ++++++-- .../jobs-intake.page.container.jsx | 15 ++++++-- client/src/pages/jobs/jobs.page.jsx | 11 ++++-- .../pages/owners/owners.page.container.jsx | 11 ++++-- .../shop-csi/shop-csi.container.page.jsx | 15 ++++++-- .../shop-templates.container.js | 15 ++++++-- .../shop-vendor.page.container.jsx | 35 +++++++++++++++++-- .../time-tickets/time-tickets.container.jsx | 15 ++++++-- .../vehicles-detail.page.container.jsx | 7 +++- .../vehicles/vehicles.page.container.jsx | 11 ++++-- .../redux/application/application.actions.js | 5 +++ .../redux/application/application.reducer.js | 6 ++++ .../application/application.selectors.js | 5 +++ .../redux/application/application.types.js | 1 + 31 files changed, 309 insertions(+), 76 deletions(-) diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index e9160230d..b83f6db0e 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -26,7 +26,10 @@ import { import { connect } from "react-redux"; import { Link } from "react-router-dom"; import { createStructuredSelector } from "reselect"; -import { selectRecentItems } from "../../redux/application/application.selectors"; +import { + selectRecentItems, + selectSelectedHeader, +} from "../../redux/application/application.selectors"; import { setModalContext } from "../../redux/modals/modals.actions"; import { signOutStart } from "../../redux/user/user.actions"; import { selectCurrentUser } from "../../redux/user/user.selectors"; @@ -36,6 +39,7 @@ import "./header.styles.scss"; const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, recentItems: selectRecentItems, + selectedHeader: selectSelectedHeader, }); const mapDispatchToProps = (dispatch) => ({ @@ -51,6 +55,7 @@ const mapDispatchToProps = (dispatch) => ({ function Header({ handleMenuClick, currentUser, + selectedHeader, signOutStart, setInvoiceEnterContext, setTimeTicketContext, @@ -64,7 +69,7 @@ function Header({ mode="horizontal" theme="dark" className="header-main-menu" - selectedKeys={["home"]} + selectedKeys={[selectedHeader]} onClick={handleMenuClick} > diff --git a/client/src/components/header/header.styles.scss b/client/src/components/header/header.styles.scss index 101494fe2..ed2aed346 100644 --- a/client/src/components/header/header.styles.scss +++ b/client/src/components/header/header.styles.scss @@ -4,6 +4,6 @@ max-height: 3.5rem; } .header-main-menu { - width: 80vw; - float: left; + //width: 95vw; + //float: left; } diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx index 3f239bf01..5f2bb2718 100644 --- a/client/src/components/job-search-select/job-search-select.component.jsx +++ b/client/src/components/job-search-select/job-search-select.component.jsx @@ -32,7 +32,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => { const [option, setOption] = useState(value); useEffect(() => { - if (value === option) { + if (value === option && value) { callIdSearch({ variables: { id: value } }); } }, [value, option, callIdSearch]); @@ -46,7 +46,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => { const handleSelect = (value) => { setOption(value); if (value !== option && onChange) { - onChange(option); + onChange(value); } }; @@ -69,6 +69,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => { filterOption={false} onSearch={handleSearch} // onChange={setOption} + onChange={handleSelect} onSelect={handleSelect} notFoundContent={loading ? : } onBlur={onBlur} diff --git a/client/src/pages/accounting-payables/accounting-payables.container.jsx b/client/src/pages/accounting-payables/accounting-payables.container.jsx index 82d9667f1..0f2110dc4 100644 --- a/client/src/pages/accounting-payables/accounting-payables.container.jsx +++ b/client/src/pages/accounting-payables/accounting-payables.container.jsx @@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect"; import AccountingPayablesTable from "../../components/accounting-payables-table/accounting-payables-table.component"; import AlertComponent from "../../components/alert/alert.component"; import { QUERY_INVOICES_FOR_EXPORT } from "../../graphql/accounting.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapStateToProps = createStructuredSelector({ @@ -15,19 +18,25 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs }) { +export function AccountingPayablesContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.accounting-payables"); + setSelectedHeader("payables"); setBreadcrumbs([ { link: "/manage/accounting/payables", label: t("titles.bc.accounting-payables"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); const { loading, error, data } = useQuery(QUERY_INVOICES_FOR_EXPORT); diff --git a/client/src/pages/accounting-payments/accounting-payments.container.jsx b/client/src/pages/accounting-payments/accounting-payments.container.jsx index f008a7729..344d95b0a 100644 --- a/client/src/pages/accounting-payments/accounting-payments.container.jsx +++ b/client/src/pages/accounting-payments/accounting-payments.container.jsx @@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect"; import AccountingPaymentsTable from "../../components/accounting-payments-table/accounting-payments-table.component"; import AlertComponent from "../../components/alert/alert.component"; import { QUERY_PAYMENTS_FOR_EXPORT } from "../../graphql/accounting.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; @@ -16,19 +19,25 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs }) { +export function AccountingPaymentsContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.accounting-payments"); + setSelectedHeader("payments"); setBreadcrumbs([ { link: "/manage/accounting/payments", label: t("titles.bc.accounting-payments"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); const { loading, error, data } = useQuery(QUERY_PAYMENTS_FOR_EXPORT); diff --git a/client/src/pages/accounting-receivables/accounting-receivables.container.jsx b/client/src/pages/accounting-receivables/accounting-receivables.container.jsx index 0d9820f1a..fb65b24d7 100644 --- a/client/src/pages/accounting-receivables/accounting-receivables.container.jsx +++ b/client/src/pages/accounting-receivables/accounting-receivables.container.jsx @@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect"; import AccountingReceivablesTable from "../../components/accounting-receivables-table/accounting-receivables-table.component"; import AlertComponent from "../../components/alert/alert.component"; import { QUERY_JOBS_FOR_EXPORT } from "../../graphql/accounting.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; @@ -16,19 +19,25 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs }) { +export function AccountingReceivablesContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.accounting-receivables"); + setSelectedHeader("receivables"); setBreadcrumbs([ { link: "/manage/accounting/receivables", label: t("titles.bc.accounting-receivables"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); const { loading, error, data } = useQuery(QUERY_JOBS_FOR_EXPORT, { variables: { diff --git a/client/src/pages/contract-create/contract-create.page.container.jsx b/client/src/pages/contract-create/contract-create.page.container.jsx index 78a7ed196..0e7c08abf 100644 --- a/client/src/pages/contract-create/contract-create.page.container.jsx +++ b/client/src/pages/contract-create/contract-create.page.container.jsx @@ -7,7 +7,10 @@ import { useHistory, useLocation } from "react-router-dom"; import { createStructuredSelector } from "reselect"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import ContractCreatePageComponent from "./contract-create.page.component"; @@ -16,9 +19,14 @@ const mapStateToProps = createStructuredSelector({ }); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { +export function ContractCreatePageContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const [form] = Form.useForm(); const { t } = useTranslation(); const history = useHistory(); @@ -70,6 +78,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { useEffect(() => { document.title = t("titles.contracts-create"); + setSelectedHeader("newcontract"); setBreadcrumbs([ { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") }, { @@ -81,7 +90,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { label: t("titles.bc.contracts-create"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/contract-detail/contract-detail.page.container.jsx b/client/src/pages/contract-detail/contract-detail.page.container.jsx index 99e7f892a..f6ae8d356 100644 --- a/client/src/pages/contract-detail/contract-detail.page.container.jsx +++ b/client/src/pages/contract-detail/contract-detail.page.container.jsx @@ -16,6 +16,7 @@ import { import { addRecentItem, setBreadcrumbs, + setSelectedHeader, } from "../../redux/application/application.actions"; import { CreateRecentItem } from "../../utils/create-recent-item"; import ContractDetailPageComponent from "./contract-detail.page.component"; @@ -24,9 +25,14 @@ import NotFound from "../../components/not-found/not-found.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), addRecentItem: (item) => dispatch(addRecentItem(item)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) { +export function ContractDetailPageContainer({ + setBreadcrumbs, + addRecentItem, + setSelectedHeader, +}) { const { t } = useTranslation(); const [updateContract] = useMutation(UPDATE_CONTRACT); const [form] = Form.useForm(); @@ -37,6 +43,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) { }); useEffect(() => { + setSelectedHeader("contracts"); document.title = loading ? t("titles.app") : error @@ -76,7 +83,16 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) { `/manage/courtesycars/contracts/${contractId}` ) ); - }, [t, data, error, loading, setBreadcrumbs, addRecentItem, contractId]); + }, [ + t, + data, + error, + loading, + setBreadcrumbs, + addRecentItem, + contractId, + setSelectedHeader, + ]); const handleFinish = async (values) => { const result = await updateContract({ diff --git a/client/src/pages/contracts/contracts.page.container.jsx b/client/src/pages/contracts/contracts.page.container.jsx index 73810569a..97da34e58 100644 --- a/client/src/pages/contracts/contracts.page.container.jsx +++ b/client/src/pages/contracts/contracts.page.container.jsx @@ -4,7 +4,10 @@ import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import AlertComponent from "../../components/alert/alert.component"; import { QUERY_ACTIVE_CONTRACTS_PAGINATED } from "../../graphql/cccontracts.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import ContractsPageComponent from "./contracts.page.component"; import queryString from "query-string"; import { useLocation } from "react-router-dom"; @@ -13,12 +16,12 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ContractsPageContainer({ setBreadcrumbs }) { +export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) { const searchParams = queryString.parse(useLocation().search); const { page, sortcolumn, sortorder, start, end } = searchParams; - console.log("ContractsPageContainer -> searchParams", searchParams); const { loading, error, data, refetch } = useQuery( QUERY_ACTIVE_CONTRACTS_PAGINATED, @@ -46,7 +49,7 @@ export function ContractsPageContainer({ setBreadcrumbs }) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.contracts"); - + setSelectedHeader("contracts"); setBreadcrumbs([ { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") }, { @@ -54,7 +57,7 @@ export function ContractsPageContainer({ setBreadcrumbs }) { label: t("titles.bc.contracts"), }, ]); - }, [setBreadcrumbs, t]); + }, [setBreadcrumbs, t, setSelectedHeader]); if (error) return ; return ( diff --git a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx index 2785d70b9..d04e1feb0 100644 --- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx +++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx @@ -8,7 +8,10 @@ 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"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapStateToProps = createStructuredSelector({ @@ -16,8 +19,13 @@ const mapStateToProps = createStructuredSelector({ }); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) { +export function CourtesyCarCreateContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const [form] = Form.useForm(); const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR); const { t } = useTranslation(); @@ -37,6 +45,7 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) { }; useEffect(() => { + setSelectedHeader("courtesycarsall"); document.title = t("titles.courtesycars-create"); setBreadcrumbs([ { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") }, @@ -45,12 +54,12 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) { label: t("titles.bc.courtesycars-new"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return (
- +
); diff --git a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx index 751789311..7486b4933 100644 --- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx +++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx @@ -11,6 +11,7 @@ import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries"; import { addRecentItem, setBreadcrumbs, + setSelectedHeader, } from "../../redux/application/application.actions"; import { CreateRecentItem } from "../../utils/create-recent-item"; import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component"; @@ -22,10 +23,12 @@ import { useLocation } from "react-router-dom"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), addRecentItem: (item) => dispatch(addRecentItem(item)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); export function CourtesyCarDetailPageContainer({ setBreadcrumbs, addRecentItem, + setSelectedHeader, }) { const searchParams = queryString.parse(useLocation().search); const { page, sortcolumn, sortorder } = searchParams; @@ -53,6 +56,8 @@ export function CourtesyCarDetailPageContainer({ }); useEffect(() => { + setSelectedHeader("courtesycarsall"); + document.title = loading ? t("titles.app") : error @@ -89,7 +94,16 @@ export function CourtesyCarDetailPageContainer({ `/manage/courtesycars/${ccId}` ) ); - }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]); + }, [ + t, + data, + error, + loading, + setBreadcrumbs, + ccId, + addRecentItem, + setSelectedHeader, + ]); const handleFinish = async (values) => { setSaveLoading(true); diff --git a/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx b/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx index 19f22544a..c3168d6f6 100644 --- a/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx +++ b/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx @@ -5,23 +5,31 @@ import { connect } from "react-redux"; import AlertComponent from "../../components/alert/alert.component"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import { QUERY_ALL_CC } from "../../graphql/courtesy-car.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import CourtesyCarsPageComponent from "./courtesy-cars.page.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function CourtesyCarsPageContainer({ setBreadcrumbs }) { +export function CourtesyCarsPageContainer({ + setBreadcrumbs, + setSelectedHeader, +}) { const { loading, error, data, refetch } = useQuery(QUERY_ALL_CC); const { t } = useTranslation(); useEffect(() => { document.title = t("titles.courtesycars"); - + setSelectedHeader("courtesycarsall"); setBreadcrumbs([ { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") }, ]); - }, [setBreadcrumbs, t]); + }, [setBreadcrumbs, t, setSelectedHeader]); + if (error) return ; return ( diff --git a/client/src/pages/invoices/invoices.page.container.jsx b/client/src/pages/invoices/invoices.page.container.jsx index 34d0fcc5b..86f821c5b 100644 --- a/client/src/pages/invoices/invoices.page.container.jsx +++ b/client/src/pages/invoices/invoices.page.container.jsx @@ -6,26 +6,31 @@ import { connect } from "react-redux"; import { useLocation } from "react-router-dom"; import InvoiceDetailEditContainer from "../../components/invoice-detail-edit/invoice-detail-edit.container"; import { QUERY_ALL_INVOICES_PAGINATED } from "../../graphql/invoices.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import InvoicesPageComponent from "./invoices.page.component"; import AlertComponent from "../../components/alert/alert.component"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function InvoicesPageContainer({ setBreadcrumbs }) { +export function InvoicesPageContainer({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); const searchParams = queryString.parse(useLocation().search); const { page, sortcolumn, sortorder, search } = searchParams; useEffect(() => { document.title = t("titles.invoices-list"); + setSelectedHeader("invoices"); setBreadcrumbs([ { link: "/manage/invoices", label: t("titles.bc.invoices-list") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); const { loading, error, data, refetch } = useQuery( QUERY_ALL_INVOICES_PAGINATED, diff --git a/client/src/pages/jobs-all/jobs-all.container.jsx b/client/src/pages/jobs-all/jobs-all.container.jsx index 5f517175b..adede96b4 100644 --- a/client/src/pages/jobs-all/jobs-all.container.jsx +++ b/client/src/pages/jobs-all/jobs-all.container.jsx @@ -8,7 +8,10 @@ import { createStructuredSelector } from "reselect"; import AlertComponent from "../../components/alert/alert.component"; import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component"; import { QUERY_ALL_JOBS_PAGINATED } from "../../graphql/jobs.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapStateToProps = createStructuredSelector({ @@ -17,9 +20,10 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function AllJobs({ setBreadcrumbs }) { +export function AllJobs({ setBreadcrumbs, setSelectedHeader }) { const searchParams = queryString.parse(useLocation().search); const { page, sortcolumn, sortorder, search } = searchParams; @@ -43,8 +47,9 @@ export function AllJobs({ setBreadcrumbs }) { useEffect(() => { document.title = t("titles.jobs-all"); + setSelectedHeader("alljobs"); setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-all") }]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); if (error) return ; return ( diff --git a/client/src/pages/jobs-available/jobs-available.page.container.jsx b/client/src/pages/jobs-available/jobs-available.page.container.jsx index b2dbe6129..91ceef6c8 100644 --- a/client/src/pages/jobs-available/jobs-available.page.container.jsx +++ b/client/src/pages/jobs-available/jobs-available.page.container.jsx @@ -9,12 +9,19 @@ import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function JobsAvailablePageContainer({ setBreadcrumbs }) { +export function JobsAvailablePageContainer({ + setBreadcrumbs, + setSelectedHeader, +}) { const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB); const { t } = useTranslation(); @@ -22,10 +29,11 @@ export function JobsAvailablePageContainer({ setBreadcrumbs }) { useEffect(() => { document.title = t("titles.jobsavailable"); + setSelectedHeader("availablejobs"); setBreadcrumbs([ { link: "/manage/available", label: t("titles.bc.availablejobs") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/jobs-close/jobs-close.container.jsx b/client/src/pages/jobs-close/jobs-close.container.jsx index feaffd339..4a482c697 100644 --- a/client/src/pages/jobs-close/jobs-close.container.jsx +++ b/client/src/pages/jobs-close/jobs-close.container.jsx @@ -8,22 +8,27 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com import NotFound from "../../components/not-found/not-found.component"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import { QUERY_JOB_CLOSE_DETAILS } from "../../graphql/jobs.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import JobsCloseComponent from "./jobs-close.component"; import { Result } from "antd"; import JobCalculateTotals from "../../components/job-calculate-totals/job-calculate-totals.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function JobsCloseContainer({ setBreadcrumbs }) { +export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) { const { jobId } = useParams(); const { loading, error, data } = useQuery(QUERY_JOB_CLOSE_DETAILS, { variables: { id: jobId }, }); const { t } = useTranslation(); useEffect(() => { + setSelectedHeader("activejobs"); document.title = t("titles.jobs-close", { number: data ? data.jobs_by_pk && data.jobs_by_pk.ro_number : null, }); @@ -44,7 +49,7 @@ export function JobsCloseContainer({ setBreadcrumbs }) { label: t("titles.bc.jobs-close"), }, ]); - }, [setBreadcrumbs, t, jobId, data]); + }, [setBreadcrumbs, t, jobId, data, setSelectedHeader]); if (loading) return ; if (error) return ; diff --git a/client/src/pages/jobs-create/jobs-create.container.jsx b/client/src/pages/jobs-create/jobs-create.container.jsx index 90d6d0b7a..af75b898f 100644 --- a/client/src/pages/jobs-create/jobs-create.container.jsx +++ b/client/src/pages/jobs-create/jobs-create.container.jsx @@ -9,7 +9,10 @@ import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; import { useTranslation } from "react-i18next"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapStateToProps = createStructuredSelector({ @@ -17,8 +20,9 @@ const mapStateToProps = createStructuredSelector({ }); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -function JobsCreateContainer({ bodyshop, setBreadcrumbs }) { +function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); const contextState = useState({ vehicle: { new: false, search: "", selectedid: null, vehicleObj: null }, @@ -46,6 +50,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) { useEffect(() => { document.title = t("titles.jobs-create"); + setSelectedHeader("availablejobs"); setBreadcrumbs([ { link: "/manage/available", label: t("titles.bc.availablejobs") }, { @@ -53,7 +58,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) { label: t("titles.bc.jobs-new"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); const runInsertJob = (job) => { insertJob({ variables: { job: job } }) diff --git a/client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx b/client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx index 36ac1afb9..6bd95dec7 100644 --- a/client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx +++ b/client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx @@ -8,7 +8,10 @@ import AlertComponent from "../../components/alert/alert.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import { QUERY_DELIVER_CHECKLIST } from "../../graphql/bodyshop.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import JobchecklistComponent from "../../components/job-checklist/job-checklist.component"; @@ -18,9 +21,14 @@ const mapStateToProps = createStructuredSelector({ }); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function JobsDeliverContainer({ bodyshop, setBreadcrumbs }) { +export function JobsDeliverContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); const { jobId } = useParams(); const { loading, error, data } = useQuery(QUERY_DELIVER_CHECKLIST, { @@ -29,6 +37,7 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs }) { useEffect(() => { document.title = t("titles.jobs-deliver"); + setSelectedHeader("activejobs"); setBreadcrumbs([ { link: "/manage/jobs", label: t("titles.bc.jobs") }, { @@ -42,7 +51,7 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs }) { label: t("titles.bc.jobs-deliver"), }, ]); - }, [t, setBreadcrumbs, jobId, data]); + }, [t, setBreadcrumbs, jobId, data, setSelectedHeader]); if (loading) return ; if (error) return ; diff --git a/client/src/pages/jobs-intake/jobs-intake.page.container.jsx b/client/src/pages/jobs-intake/jobs-intake.page.container.jsx index 335ce8930..5ef7e2f26 100644 --- a/client/src/pages/jobs-intake/jobs-intake.page.container.jsx +++ b/client/src/pages/jobs-intake/jobs-intake.page.container.jsx @@ -8,7 +8,10 @@ import AlertComponent from "../../components/alert/alert.component"; import JobChecklist from "../../components/job-checklist/job-checklist.component"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import { QUERY_INTAKE_CHECKLIST } from "../../graphql/bodyshop.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; @@ -18,9 +21,14 @@ const mapStateToProps = createStructuredSelector({ }); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) { +export function JobsIntakeContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); const { jobId } = useParams(); @@ -30,6 +38,7 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) { useEffect(() => { document.title = t("titles.jobs-intake"); + setSelectedHeader("activejobs"); setBreadcrumbs([ { link: "/manage/jobs", label: t("titles.bc.jobs") }, { @@ -45,7 +54,7 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) { label: t("titles.bc.jobs-intake"), }, ]); - }, [t, setBreadcrumbs, jobId, data]); + }, [t, setBreadcrumbs, jobId, data, setSelectedHeader]); if (loading) return ; if (error) return ; diff --git a/client/src/pages/jobs/jobs.page.jsx b/client/src/pages/jobs/jobs.page.jsx index e31ddc1a3..9c106e594 100644 --- a/client/src/pages/jobs/jobs.page.jsx +++ b/client/src/pages/jobs/jobs.page.jsx @@ -3,22 +3,27 @@ import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component"; import JobsList from "../../components/jobs-list/jobs-list.component"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function JobsPage({ setBreadcrumbs }) { +export function JobsPage({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.jobs"); + setSelectedHeader("activejobs"); setBreadcrumbs([ { link: "/manage/jobs", label: t("titles.bc.jobs-active") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/owners/owners.page.container.jsx b/client/src/pages/owners/owners.page.container.jsx index 44f4bd396..394e6b8af 100644 --- a/client/src/pages/owners/owners.page.container.jsx +++ b/client/src/pages/owners/owners.page.container.jsx @@ -1,20 +1,25 @@ import React, { useEffect } from "react"; import OwnersPageComponent from "./owners.page.component"; import { useTranslation } from "react-i18next"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { connect } from "react-redux"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function OwnersPageContainer({ setBreadcrumbs }) { +export function OwnersPageContainer({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.owners"); + setSelectedHeader("owners"); setBreadcrumbs([{ link: "/manage/owners", label: t("titles.bc.owners") }]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/shop-csi/shop-csi.container.page.jsx b/client/src/pages/shop-csi/shop-csi.container.page.jsx index 566356965..a6ad3b759 100644 --- a/client/src/pages/shop-csi/shop-csi.container.page.jsx +++ b/client/src/pages/shop-csi/shop-csi.container.page.jsx @@ -10,7 +10,10 @@ import AlertComponent from "../../components/alert/alert.component"; import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container"; import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component"; import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; const mapStateToProps = createStructuredSelector({ @@ -19,9 +22,14 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) { +export function ShopCsiContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); const searchParams = queryString.parse(useLocation().search); @@ -49,6 +57,7 @@ export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) { useEffect(() => { document.title = t("titles.shop-csi"); + setSelectedHeader("shop-csi"); setBreadcrumbs([ { link: "/manage/shop", @@ -56,7 +65,7 @@ export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) { }, { link: "/manage/shop/csi", label: t("titles.bc.shop-csi") }, ]); - }, [t, setBreadcrumbs, bodyshop.shopname]); + }, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]); if (error) return ; diff --git a/client/src/pages/shop-templates/shop-templates.container.js b/client/src/pages/shop-templates/shop-templates.container.js index 8de467f11..b679bbc87 100644 --- a/client/src/pages/shop-templates/shop-templates.container.js +++ b/client/src/pages/shop-templates/shop-templates.container.js @@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import ShopTemplateEditor from "../../components/shop-template-editor/shop-template-editor.container"; import ShopTemplatesListContainer from "../../components/shop-templates-list/shop-templates-list.container"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; const mapStateToProps = createStructuredSelector({ @@ -14,13 +17,19 @@ const mapStateToProps = createStructuredSelector({ }); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) { +export function ShopTemplatesContainer({ + setBreadcrumbs, + bodyshop, + setSelectedHeader, +}) { const { t } = useTranslation(); const drawerVisibility = useState(false); useEffect(() => { document.title = t("titles.shop-templates"); + setSelectedHeader("shop-templates"); setBreadcrumbs([ { link: "/manage/shop", @@ -28,7 +37,7 @@ export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) { }, { link: "/manage/shop/templates", label: t("titles.bc.shop-templates") }, ]); - }, [t, setBreadcrumbs, bodyshop.shopname]); + }, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]); return ( diff --git a/client/src/pages/shop-vendor/shop-vendor.page.container.jsx b/client/src/pages/shop-vendor/shop-vendor.page.container.jsx index ebae5f25a..5b681fd22 100644 --- a/client/src/pages/shop-vendor/shop-vendor.page.container.jsx +++ b/client/src/pages/shop-vendor/shop-vendor.page.container.jsx @@ -3,11 +3,38 @@ import { useTranslation } from "react-i18next"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import ShopVendorPageComponent from "./shop-vendor.page.component"; -export default function ShopVendorPageContainer() { +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { selectBodyshop } from "../../redux/user/user.selectors"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop, +}); +const mapDispatchToProps = (dispatch) => ({ + setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), +}); + +export function ShopVendorPageContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.shop_vendors"); - }, [t]); + setSelectedHeader("shop-vendors"); + setBreadcrumbs([ + { + link: "/manage/shop", + label: t("titles.bc.shop", { shopname: bodyshop.shopname }), + }, + { link: "/manage/shop/vendors", label: t("titles.bc.shop-vendors") }, + ]); + }, [t, bodyshop.shopname, setBreadcrumbs, setSelectedHeader]); return ( @@ -15,3 +42,7 @@ export default function ShopVendorPageContainer() { ); } +export default connect( + mapStateToProps, + mapDispatchToProps +)(ShopVendorPageContainer); diff --git a/client/src/pages/time-tickets/time-tickets.container.jsx b/client/src/pages/time-tickets/time-tickets.container.jsx index 230e221b6..8749e19b6 100644 --- a/client/src/pages/time-tickets/time-tickets.container.jsx +++ b/client/src/pages/time-tickets/time-tickets.container.jsx @@ -12,25 +12,34 @@ import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-sele import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component"; import TimeTicketsSummary from "../../components/time-tickets-summary/time-tickets-summary.component"; import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; const mapStateToProps = createStructuredSelector({}); const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function TimeTicketsContainer({ bodyshop, setBreadcrumbs }) { +export function TimeTicketsContainer({ + bodyshop, + setBreadcrumbs, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.timetickets"); + setSelectedHeader("timetickets"); setBreadcrumbs([ { link: "/manage/timetickets", label: t("titles.bc.timetickets"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); const searchParams = queryString.parse(useLocation().search); const { start, end } = searchParams; diff --git a/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx index 99f5d2b25..c04e5f036 100644 --- a/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx +++ b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx @@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next"; import { setBreadcrumbs, addRecentItem, + setSelectedHeader, } from "../../redux/application/application.actions"; import { connect } from "react-redux"; import { CreateRecentItem } from "../../utils/create-recent-item"; @@ -16,12 +17,14 @@ import NotFound from "../../components/not-found/not-found.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), addRecentItem: (item) => dispatch(addRecentItem(item)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); export function VehicleDetailContainer({ match, setBreadcrumbs, addRecentItem, + setSelectedHeader, }) { const { vehId } = match.params; const { t } = useTranslation(); @@ -40,6 +43,8 @@ export function VehicleDetailContainer({ } ${data.vehicles_by_pk && data.vehicles_by_pk.v_model_desc}` : "", }); + setSelectedHeader("vehicles"); + setBreadcrumbs([ { link: "/manage/vehicles", label: t("titles.bc.vehicles") }, { @@ -62,7 +67,7 @@ export function VehicleDetailContainer({ `/manage/vehicles/${vehId}` ) ); - }, [t, data, setBreadcrumbs, vehId, addRecentItem]); + }, [t, data, setBreadcrumbs, vehId, addRecentItem, setSelectedHeader]); if (loading) return ; if (error) return ; diff --git a/client/src/pages/vehicles/vehicles.page.container.jsx b/client/src/pages/vehicles/vehicles.page.container.jsx index 7bf7cdd60..7e57a7add 100644 --- a/client/src/pages/vehicles/vehicles.page.container.jsx +++ b/client/src/pages/vehicles/vehicles.page.container.jsx @@ -3,20 +3,25 @@ import VehiclesPageComponent from "./vehicles.page.component"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function VehiclesPageContainer({ setBreadcrumbs }) { +export function VehiclesPageContainer({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.vehicles"); + setSelectedHeader("vehicles"); setBreadcrumbs([ { link: "/manage/vehicles", label: t("titles.bc.vehicles") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ; } diff --git a/client/src/redux/application/application.actions.js b/client/src/redux/application/application.actions.js index 69ebf671b..5b3f3a788 100644 --- a/client/src/redux/application/application.actions.js +++ b/client/src/redux/application/application.actions.js @@ -33,3 +33,8 @@ export const addRecentItem = (item) => ({ type: ApplicationActionTypes.ADD_RECENT_ITEM, payload: item, }); + +export const setSelectedHeader = (key) => ({ + type: ApplicationActionTypes.SET_SELECTED_HEADER, + payload: key, +}); diff --git a/client/src/redux/application/application.reducer.js b/client/src/redux/application/application.reducer.js index b55f4efdd..c87dd0842 100644 --- a/client/src/redux/application/application.reducer.js +++ b/client/src/redux/application/application.reducer.js @@ -4,6 +4,7 @@ const INITIAL_STATE = { loading: false, breadcrumbs: [], recentItems: [], + selectedHeader: "home", scheduleLoad: { load: {}, calculating: false, @@ -13,6 +14,11 @@ const INITIAL_STATE = { const applicationReducer = (state = INITIAL_STATE, action) => { switch (action.type) { + case ApplicationActionTypes.SET_SELECTED_HEADER: + return { + ...state, + selectedHeader: action.payload, + }; case ApplicationActionTypes.ADD_RECENT_ITEM: return { ...state, diff --git a/client/src/redux/application/application.selectors.js b/client/src/redux/application/application.selectors.js index 9d38e1f1d..b378b50a2 100644 --- a/client/src/redux/application/application.selectors.js +++ b/client/src/redux/application/application.selectors.js @@ -26,3 +26,8 @@ export const selectScheduleLoadCalculating = createSelector( [selectApplication], (application) => application.scheduleLoad.calculating ); + +export const selectSelectedHeader = createSelector( + [selectApplication], + (application) => application.selectedHeader +); diff --git a/client/src/redux/application/application.types.js b/client/src/redux/application/application.types.js index 0f46f9545..a606662cf 100644 --- a/client/src/redux/application/application.types.js +++ b/client/src/redux/application/application.types.js @@ -6,5 +6,6 @@ const ApplicationActionTypes = { CALCULATE_SCHEDULE_LOAD_SUCCESS: "CALCULATE_SCHEDULE_LOAD_SUCCESS", CALCULATE_SCHEDULE_LOAD_FAILURE: "CALCULATE_SCHEDULE_LOAD_FAILURE", ADD_RECENT_ITEM: "ADD_RECENT_ITEM", + SET_SELECTED_HEADER: "SET_SELECTED_HEADER", }; export default ApplicationActionTypes;