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

feature/IO-3096-GlobalNotifications - Package updates, prepare scenario builder for app notifications, redo header to have right aligned items.

Browse Source
This commit is contained in:
Dave Richer
2025-02-20 17:41:52 -05:00
parent eca7ff4a42
commit a077cf0820
4 changed files with 382 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import Icon, {
BankFilled,
BarChartOutlined,
BellFilled,
CarFilled,
CheckCircleOutlined,
ClockCircleFilled,
@@ -44,6 +45,11 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockWrapper from "../lock-wrapper/lock-wrapper.component";
import { useState, useEffect } from "react";
import { debounce } from "lodash";
// Used to Determine if the Header is in Mobile Mode, and to toggle the multiple menus
const HEADER_MOBILE_BREAKPOINT = 576;
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -116,18 +122,28 @@ function Header({
const { t } = useTranslation();
// const deleteBetaCookie = () => {
// const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
// if (cookieExists) {
// const domain = window.location.hostname.split(".").slice(-2).join(".");
// document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
// }
// };
//
// deleteBetaCookie();
const [isMobile, setIsMobile] = useState(() => {
const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
return effectiveWidth <= HEADER_MOBILE_BREAKPOINT;
});
const handleResize = debounce(() => {
const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
setIsMobile(effectiveWidth <= HEADER_MOBILE_BREAKPOINT);
}, 200);
useEffect(() => {
window.addEventListener("resize", handleResize);
window.addEventListener("orientationchange", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("orientationchange", handleResize);
handleResize.cancel(); // Cancel any pending debounced calls on cleanup
};
}, [handleResize]);
// Accounting children setup (unchanged)
const accountingChildren = [];
accountingChildren.push(
{
key: "bills",
@@ -350,6 +366,7 @@ function Header({
children: accountingExportChildren
});
// Define all menu items
const menuItems = [
{
key: "home",
@@ -419,7 +436,6 @@ function Header({
icon: <ScheduleOutlined />,
label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
},
{
key: "productionboard",
id: "header-production-board",
@@ -432,7 +448,6 @@ function Header({
</Link>
)
},
{
type: "divider",
id: "header-jobs-divider3"
@@ -519,7 +534,6 @@ function Header({
}
]
},
...(accountingChildren.length > 0
? [
{
@@ -537,7 +551,6 @@ function Header({
icon: <PhoneOutlined />,
label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
},
{
key: "temporarydocs",
id: "header-temporarydocs",
@@ -550,7 +563,6 @@ function Header({
</Link>
)
},
{
key: "tasks",
id: "tasks",
@@ -623,7 +635,6 @@ function Header({
icon: <Icon component={IoBusinessOutline} />,
label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
},
{
key: "shop-csi",
id: "header-shop-csi",
@@ -638,9 +649,26 @@ function Header({
}
]
},
// Right-aligned items on desktop, merged on mobile
{
key: "notifications",
icon: <BellFilled />,
id: "header-notifications"
},
{
key: "recent",
icon: <ClockCircleFilled />,
id: "header-recent",
children: recentItems.map((i, idx) => ({
key: idx,
id: `header-recent-${idx}`,
label: <Link to={i.url}>{i.label}</Link>
}))
},
{
key: "user",
label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
icon: <UserOutlined />,
// label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
children: [
{
key: "signout",
@@ -675,7 +703,6 @@ function Header({
}
]
: []),
{
key: "shiftclock",
id: "header-shiftclock",
@@ -688,64 +715,67 @@ function Header({
</Link>
)
},
{
key: "profile",
id: "header-profile",
icon: <UserOutlined />,
label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
}
// {
// key: 'langselecter',
// label: t("menus.currentuser.languageselector"),
// children: [
// {
// key: 'en-US',
// label: t("general.languages.english"),
// onClick: () => {
// window.location.href = "/?lang=en-US";
// }
// },
// {
// key: 'fr-CA',
// label: t("general.languages.french"),
// onClick: () => {
// window.location.href = "/?lang=fr-CA";
// }
// },
// {
// key: 'es-MX',
// label: t("general.languages.spanish"),
// onClick: () => {
// window.location.href = "/?lang=es-MX";
// }
// },
// ]
// },
]
},
{
key: "recent",
icon: <ClockCircleFilled />,
id: "header-recent",
children: recentItems.map((i, idx) => ({
key: idx,
id: `header-recent-${idx}`,
label: <Link to={i.url}>{i.label}</Link>
}))
}
];
return (
<Layout.Header>
<Menu
mode="horizontal"
theme={"dark"}
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
items={menuItems}
/>
<Layout.Header style={{ padding: 0 }}>
{isMobile ? (
<Menu
mode="horizontal"
theme="dark"
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
items={menuItems}
style={{ width: "100%" }}
/>
) : (
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%"
}}
>
<Menu
mode="horizontal"
theme="dark"
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
items={menuItems.slice(0, -3)}
style={{
flex: "0 1 auto",
justifyContent: "flex-start",
minWidth: 0,
overflow: "visible"
}}
/>
<div style={{ flex: "1 0 0" }} />
<Menu
mode="horizontal"
theme="dark"
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
items={menuItems.slice(-3)}
style={{
flex: "0 0 auto",
justifyContent: "flex-end",
overflow: "visible"
}}
/>
</div>
)}
</Layout.Header>
);
}