From ba4173c000d67d36a8f81b6c1c3924af602a23b4 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Wed, 9 Sep 2020 12:25:23 -0700 Subject: [PATCH] Added missing pages for selected header BOD-164 --- .../components/header/header.component.jsx | 2 +- .../production-remove-button.component.jsx | 1 - .../owners-detail.page.container.jsx | 7 +++-- .../payments-all.container.page.jsx | 11 +++++--- .../production-board.container.jsx | 15 ++++++++--- .../production-list.container.jsx | 15 ++++++++--- .../pages/profile/profile.container.page.jsx | 11 +++++--- .../schedule/schedule.page.container.jsx | 11 +++++--- .../scoreboard/scoreboard.page.container.jsx | 11 +++++--- client/src/pages/shop/shop.page.component.jsx | 27 +++++++++++++++++-- 10 files changed, 87 insertions(+), 24 deletions(-) diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index b83f6db0e..1858774c2 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -310,7 +310,7 @@ function Header({ {t("menus.header.shiftclock")} - + {t("menus.currentuser.profile")} { logImEXEvent("production_remove_job"); diff --git a/client/src/pages/owners-detail/owners-detail.page.container.jsx b/client/src/pages/owners-detail/owners-detail.page.container.jsx index 42b7c2ba6..37e4f2f7f 100644 --- a/client/src/pages/owners-detail/owners-detail.page.container.jsx +++ b/client/src/pages/owners-detail/owners-detail.page.container.jsx @@ -9,6 +9,7 @@ import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries"; import { addRecentItem, setBreadcrumbs, + setSelectedHeader, } from "../../redux/application/application.actions"; import { CreateRecentItem } from "../../utils/create-recent-item"; import OwnersDetailComponent from "./owners-detail.page.component"; @@ -17,12 +18,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 OwnersDetailContainer({ match, setBreadcrumbs, addRecentItem, + setSelectedHeader, }) { const { ownerId } = match.params; const { t } = useTranslation(); @@ -40,7 +43,7 @@ export function OwnersDetailContainer({ } ${(data.owners_by_pk && data.owners_by_pk.ownr_co_nm) || ""}` : "", }); - + setSelectedHeader("owners"); setBreadcrumbs([ { link: "/manage/owners", label: t("titles.bc.owners") }, { @@ -66,7 +69,7 @@ export function OwnersDetailContainer({ `/manage/owners/${ownerId}` ) ); - }, [setBreadcrumbs, t, data, ownerId, addRecentItem]); + }, [setBreadcrumbs, t, data, ownerId, addRecentItem, setSelectedHeader]); if (loading) return ; if (error) return ; diff --git a/client/src/pages/payments-all/payments-all.container.page.jsx b/client/src/pages/payments-all/payments-all.container.page.jsx index 756194d5c..10f02e81c 100644 --- a/client/src/pages/payments-all/payments-all.container.page.jsx +++ b/client/src/pages/payments-all/payments-all.container.page.jsx @@ -9,7 +9,10 @@ import AlertComponent from "../../components/alert/alert.component"; import PaymentsListPaginated from "../../components/payments-list-paginated/payment-list-paginated.component"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import { QUERY_ALL_PAYMENTS_PAGINATED } from "../../graphql/payments.queries"; -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({ @@ -18,9 +21,10 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function AllJobs({ bodyshop, setBreadcrumbs }) { +export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) { const searchParams = queryString.parse(useLocation().search); const { page, sortcolumn, sortorder, search } = searchParams; @@ -47,10 +51,11 @@ export function AllJobs({ bodyshop, setBreadcrumbs }) { useEffect(() => { document.title = t("titles.payments-all"); + setSelectedHeader("allpayments"); setBreadcrumbs([ { link: "/manage/payments", label: t("titles.bc.payments-all") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); if (error) return ; return ( diff --git a/client/src/pages/production-board/production-board.container.jsx b/client/src/pages/production-board/production-board.container.jsx index a65a37454..c99a9f26a 100644 --- a/client/src/pages/production-board/production-board.container.jsx +++ b/client/src/pages/production-board/production-board.container.jsx @@ -3,7 +3,10 @@ import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import ProductionBoardComponent from "./production-board.component"; @@ -13,20 +16,26 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ProductionBoardContainer({ setBreadcrumbs, bodyshop }) { +export function ProductionBoardContainer({ + setBreadcrumbs, + bodyshop, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.productionboard"); + setSelectedHeader("productionboard"); setBreadcrumbs([ { link: "/manage/production/board", label: t("titles.bc.productionboard"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/production-list/production-list.container.jsx b/client/src/pages/production-list/production-list.container.jsx index 97f678e1b..51bbf092a 100644 --- a/client/src/pages/production-list/production-list.container.jsx +++ b/client/src/pages/production-list/production-list.container.jsx @@ -2,7 +2,10 @@ import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import ProductionListComponent from "./production-list.component"; import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; @@ -13,17 +16,23 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ProductionListContainer({ setBreadcrumbs, bodyshop }) { +export function ProductionListContainer({ + setBreadcrumbs, + bodyshop, + setSelectedHeader, +}) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.productionlist"); + setSelectedHeader("productionlist"); setBreadcrumbs([ { link: "/manage/production/list", label: t("titles.bc.productionlist") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/profile/profile.container.page.jsx b/client/src/pages/profile/profile.container.page.jsx index 8283226ae..961e2b834 100644 --- a/client/src/pages/profile/profile.container.page.jsx +++ b/client/src/pages/profile/profile.container.page.jsx @@ -1,21 +1,26 @@ import React, { useEffect } from "react"; 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"; import ProfilePage from "./profile.page"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ProfileContainerPage({ setBreadcrumbs }) { +export function ProfileContainerPage({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); useEffect(() => { + setSelectedHeader("profile"); setBreadcrumbs([ { link: "/manage/profile", label: t("titles.bc.profile") }, ]); document.title = t("titles.profile"); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ; } diff --git a/client/src/pages/schedule/schedule.page.container.jsx b/client/src/pages/schedule/schedule.page.container.jsx index f33098a5a..ed55bda6c 100644 --- a/client/src/pages/schedule/schedule.page.container.jsx +++ b/client/src/pages/schedule/schedule.page.container.jsx @@ -2,22 +2,27 @@ import React, { useEffect } from "react"; 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"; import SchedulePageComponent from "./schedule.page.component"; const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function SchedulePageContainer({ setBreadcrumbs }) { +export function SchedulePageContainer({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.schedule"); + setSelectedHeader("schedule"); setBreadcrumbs([ { link: "/manage/schedule", label: t("titles.bc.schedule") }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/scoreboard/scoreboard.page.container.jsx b/client/src/pages/scoreboard/scoreboard.page.container.jsx index 454dad7c1..f77dcf0f6 100644 --- a/client/src/pages/scoreboard/scoreboard.page.container.jsx +++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx @@ -2,7 +2,10 @@ import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { setBreadcrumbs } from "../../redux/application/application.actions"; +import { + setBreadcrumbs, + setSelectedHeader, +} from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import ScoreboardPageComponent from "./scoreboard.page.component"; import { useSubscription } from "@apollo/react-hooks"; @@ -16,9 +19,10 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function ScoreboardContainer({ setBreadcrumbs }) { +export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); const scoreboardSubscription = useSubscription(SUBSCRIPTION_SCOREBOARD, { @@ -30,13 +34,14 @@ export function ScoreboardContainer({ setBreadcrumbs }) { useEffect(() => { document.title = t("titles.scoreboard"); + setSelectedHeader("scoreboard"); setBreadcrumbs([ { link: "/manage/scoreboard", label: t("titles.bc.scoreboard"), }, ]); - }, [t, setBreadcrumbs]); + }, [t, setBreadcrumbs, setSelectedHeader]); return ( diff --git a/client/src/pages/shop/shop.page.component.jsx b/client/src/pages/shop/shop.page.component.jsx index 76a564a3b..93f440404 100644 --- a/client/src/pages/shop/shop.page.component.jsx +++ b/client/src/pages/shop/shop.page.component.jsx @@ -5,11 +5,33 @@ import ShopEmployeesContainer from "../../components/shop-employees/shop-employe import ShopInfoContainer from "../../components/shop-info/shop-info.container"; import ShopCsiConfig from "../../components/shop-csi-config/shop-csi-config.component"; -export default function ShopPage() { +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { + setSelectedHeader, + setBreadcrumbs, +} from "../../redux/application/application.actions"; +import { selectBodyshop } from "../../redux/user/user.selectors"; +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop, +}); +const mapDispatchToProps = (dispatch) => ({ + setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), + setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), +}); + +export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) { const { t } = useTranslation(); useEffect(() => { document.title = t("titles.shop"); - }, [t]); + setSelectedHeader("shop"); + setBreadcrumbs([ + { + link: "/manage/shop", + label: t("titles.bc.shop", { shopname: bodyshop.shopname }), + }, + ]); + }, [t, setSelectedHeader, setBreadcrumbs, bodyshop.shopname]); return ( @@ -28,3 +50,4 @@ export default function ShopPage() { ); } +export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);