Added missing pages for selected header BOD-164

client/src/components/header/header.component.jsx

@@ -310,7 +310,7 @@ function Header({
         <Menu.Item key="shiftclock">
           <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
         </Menu.Item>
-        <Menu.Item>
+        <Menu.Item key="profile">
           <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
         </Menu.Item>
         <Menu.SubMenu

client/src/components/production-remove-button/production-remove-button.component.jsx

@@ -13,7 +13,6 @@ export default function ProductionRemoveButton({ jobId }) {
   const [loading, setLoading] = useState(false);
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
-  const { selected } = search;
 
   const handleRemoveFromProd = async () => {
     logImEXEvent("production_remove_job");

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 <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;

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 <AlertComponent message={error.message} type="error" />;
   return (

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 (
     <RbacWrapper action="production:board">

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 (
     <RbacWrapper action="production:list">

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 <ProfilePage />;
 }

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 (
     <RbacWrapper action="schedule:view">

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 (
     <RbacWrapper action="scoreboard:view">

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 (
     <Tabs>
@@ -28,3 +50,4 @@ export default function ShopPage() {
     </Tabs>
   );
 }
+export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);