@asaleh37/ui-base 26.2.16 → 27.5.26

package/src/layout/TopBar.tsx

@@ -1,317 +1,317 @@
-import {
-  Avatar,
-  Box,
-  IconButton,
-  Menu,
-  MenuItem,
-  styled,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import { useDispatch, useSelector } from "react-redux";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useIsMobile } from "../hooks/UseMobile";
-import {
-  AppLayoutActions,
-  DRAWER_WIDTH,
-} from "../redux/features/common/AppLayoutSlice";
-import useAxios from "../hooks/useAxios";
-import { UserSessionActions } from "../redux/features/common/UserSessionSlice";
-import i18n, { changeLanguage } from "../locales/i18n";
-import { useSession, useWindow } from "../hooks";
-import ChangeOrgForm from "../components/common/ChangeOrgForm";
-import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
-import AttachmentImageViewer from "../components/templates/attachment/AttachmentImageViewer";
-import NotificationButton from "./NotificationButton";
-import { useState } from "react";
-import ChangePasswordPanel from "../components/administration/admin/ChangePasswordPanel";
-import { AppInfo } from "../redux/features/common/AppInfoSlice";
-
-interface AppBarProps extends MuiAppBarProps {
-  open?: boolean;
-}
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== "open",
-})<AppBarProps>(({ theme }) => {
-  const AppInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const isMobile = useIsMobile();
-  return {
-    transition: theme.transitions.create(["margin", "width"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    variants: [
-      {
-        props: ({ open }) => open,
-        style: {
-          width: !isMobile ? `calc(100% - ${DRAWER_WIDTH}px)` : undefined,
-          marginLeft:
-            !isMobile && AppLayout.appDirection === "ltr"
-              ? `${DRAWER_WIDTH}px`
-              : undefined,
-          marginRight:
-            !isMobile && AppLayout.appDirection === "rtl"
-              ? `${DRAWER_WIDTH}px`
-              : undefined,
-          transition: theme.transitions.create(["margin", "width"], {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-          }),
-        },
-      },
-    ],
-  };
-});
-
-const TopBar: React.FC = () => {
-  const { Window: ChangeOrgWindow, setWindowState: setChangeOrgWindowState } =
-    useWindow({
-      windowTitle: "Change Current Organization",
-      windowIcon: "globe",
-      width: "fit-content",
-      height: "fit-content",
-    });
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorElUser(event.currentTarget);
-  };
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const SideBarState = useSelector((state: any) => state.SideBar);
-  const { UserSession } = useSession();
-  const currentOrganization = UserSession.value.currentOrganization;
-  const {
-    Window: ChangePasswordWindow,
-    setWindowState: setChangePasswordWindow,
-  } = useWindow({
-    windowIcon: "key",
-    windowTitle: "Change Password",
-    width: "fit-content",
-    height: "fit-content",
-  });
-  const { handleGetRequest } = useAxios();
-  const isMobile = useIsMobile();
-  const dispatch = useDispatch();
-  const handleLogout = async () => {
-    try {
-      await handleGetRequest({ endPointURI: "api/auth/logout" });
-    } catch (error) {}
-    dispatch(UserSessionActions.setUnAuthenticated());
-    localStorage.removeItem("TOKEN");
-  };
-  const toggleSideBar = () => {
-    dispatch(toggleSideBarState());
-  };
-  return (
-    <>
-      {AppInfo.isUserProfileManaged ? (
-        <>
-          <ChangePasswordWindow>
-            <ChangePasswordPanel
-              selectedPerson={UserSession.value}
-              isSelfService={true}
-              onSuccessCallBk={() => {
-                setChangePasswordWindow(false);
-              }}
-            />
-          </ChangePasswordWindow>
-          <Menu
-            sx={{ mt: "45px" }}
-            id="menu-appbar"
-            anchorEl={anchorElUser}
-            anchorOrigin={{
-              vertical: "top",
-              horizontal: "right",
-            }}
-            keepMounted
-            transformOrigin={{
-              vertical: "top",
-              horizontal: "right",
-            }}
-            open={Boolean(anchorElUser)}
-            onClose={handleCloseUserMenu}
-          >
-            <MenuItem
-              onClick={() => {
-                setChangePasswordWindow(true);
-                handleCloseUserMenu();
-              }}
-            >
-              <Typography sx={{ textAlign: "center" }}>
-                Change Password
-              </Typography>
-            </MenuItem>
-          </Menu>
-        </>
-      ) : (
-        <></>
-      )}
-
-      <ChangeOrgWindow>
-        <ChangeOrgForm
-          successChangeCallBackFn={() => {
-            setChangeOrgWindowState(false);
-          }}
-        />
-      </ChangeOrgWindow>
-      <AppBar position="fixed" open={SideBarState.isOpened}>
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={toggleSideBar}
-            edge="start"
-            sx={[
-              {
-                mr: AppLayout.appDirection === "ltr" ? 2 : undefined,
-                ml: AppLayout.appDirection === "rtl" ? 2 : undefined,
-              },
-              SideBarState.isOpened && { display: "none" },
-            ]}
-          >
-            <FontAwesomeIcon icon="bars" />
-          </IconButton>
-          {!isMobile ? (
-            <AttachmentImageViewer
-              showAsAvatar={true}
-              attachmentCode="ORGANIZATION_LOGOS"
-              refKey={UserSession?.value?.currentOrganization?.id + ""}
-              onErrorImage="/logo.png"
-              style={{
-                marginRight: 1,
-                marginLeft: 1,
-              }}
-            />
-          ) : (
-            <></>
-          )}
-
-          <Typography variant="h6" noWrap component="div" sx={{ flex: 1 }}>
-            {isMobile
-              ? ""
-              : `${AppInfo.appName} - ${
-                  AppLayout.appDirection === "ltr"
-                    ? currentOrganization?.organizationEnName
-                    : currentOrganization?.organizationArName
-                }`}
-          </Typography>
-          {AppInfo.allowThemeChange ? (
-            <Tooltip
-              title={
-                AppLayout.themeMode === "light"
-                  ? "Switch Theme to Dark"
-                  : "Switch Theme to Light"
-              }
-            >
-              <IconButton
-                sx={{ mx: 1 }}
-                color="inherit"
-                onClick={() => {
-                  dispatch(
-                    AppLayoutActions.setThemeMode(
-                      AppLayout.themeMode === "light" ? "dark" : "light"
-                    )
-                  );
-                  localStorage.setItem(
-                    "themeMode",
-                    AppLayout.themeMode === "light" ? "dark" : "light"
-                  );
-                }}
-              >
-                {AppLayout.themeMode === "light" ? (
-                  <FontAwesomeIcon icon="moon" />
-                ) : (
-                  <FontAwesomeIcon icon={{ prefix: "far", iconName: "sun" }} />
-                )}
-              </IconButton>
-            </Tooltip>
-          ) : (
-            <></>
-          )}
-
-          {AppInfo.isLocalizationEnabled ? (
-            <Tooltip
-              title={
-                i18n.language === "ar"
-                  ? "Change Language To English"
-                  : "Change Language To Arabic"
-              }
-            >
-              <IconButton
-                color="inherit"
-                onClick={() => {
-                  let nextLanguage = i18n.language === "ar" ? "en" : "ar";
-                  changeLanguage(nextLanguage);
-                  dispatch(
-                    AppLayoutActions.setAppDirection(
-                      nextLanguage === "ar" ? "rtl" : "ltr"
-                    )
-                  );
-                }}
-              >
-                <FontAwesomeIcon icon="language" />
-              </IconButton>
-            </Tooltip>
-          ) : (
-            <></>
-          )}
-
-          {UserSession.value?.userOrganizations &&
-          UserSession.value?.userOrganizations.length > 1 ? (
-            <Tooltip title="Change Current Organization">
-              <IconButton
-                color="inherit"
-                onClick={() => {
-                  setChangeOrgWindowState(true);
-                }}
-              >
-                <FontAwesomeIcon icon="globe" />
-              </IconButton>
-            </Tooltip>
-          ) : (
-            <></>
-          )}
-          {AppInfo?.enableUINotifications === true ? (
-            <NotificationButton />
-          ) : (
-            <></>
-          )}
-          {!isMobile ? (
-            <div onClick={handleOpenUserMenu} style={{ cursor: "pointer" }}>
-              <AttachmentImageViewer
-                showAsAvatar={true}
-                onErrorImage="/no_user.png"
-                attachmentCode="EMPLOYEE_PHOTOS"
-                refKey={UserSession.value?.id + ""}
-              />
-            </div>
-          ) : (
-            <></>
-          )}
-
-          <div
-            style={{ marginLeft: 5, marginRight: 5, cursor: "pointer" }}
-            onClick={handleOpenUserMenu}
-          >
-            {isMobile ? "" : UserSession.value?.username}
-          </div>
-          <IconButton color="inherit" onClick={handleLogout}>
-            <FontAwesomeIcon
-              rotation={AppLayout.appDirection === "rtl" ? 180 : undefined}
-              icon="arrow-right-from-bracket"
-            />
-          </IconButton>
-        </Toolbar>
-      </AppBar>
-    </>
-  );
-};
-
-export default TopBar;
+import {
+  Avatar,
+  Box,
+  IconButton,
+  Menu,
+  MenuItem,
+  styled,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import { useDispatch, useSelector } from "react-redux";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useIsMobile } from "../hooks/UseMobile";
+import {
+  AppLayoutActions,
+  DRAWER_WIDTH,
+} from "../redux/features/common/AppLayoutSlice";
+import useAxios from "../hooks/useAxios";
+import { UserSessionActions } from "../redux/features/common/UserSessionSlice";
+import i18n, { changeLanguage } from "../locales/i18n";
+import { useSession, useWindow } from "../hooks";
+import ChangeOrgForm from "../components/common/ChangeOrgForm";
+import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
+import AttachmentImageViewer from "../components/templates/attachment/AttachmentImageViewer";
+import NotificationButton from "./NotificationButton";
+import { useState } from "react";
+import ChangePasswordPanel from "../components/administration/admin/ChangePasswordPanel";
+import { AppInfo } from "../redux/features/common/AppInfoSlice";
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps>(({ theme }) => {
+  const AppInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const isMobile = useIsMobile();
+  return {
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    variants: [
+      {
+        props: ({ open }) => open,
+        style: {
+          width: !isMobile ? `calc(100% - ${DRAWER_WIDTH}px)` : undefined,
+          marginLeft:
+            !isMobile && AppLayout.appDirection === "ltr"
+              ? `${DRAWER_WIDTH}px`
+              : undefined,
+          marginRight:
+            !isMobile && AppLayout.appDirection === "rtl"
+              ? `${DRAWER_WIDTH}px`
+              : undefined,
+          transition: theme.transitions.create(["margin", "width"], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+          }),
+        },
+      },
+    ],
+  };
+});
+
+const TopBar: React.FC = () => {
+  const { Window: ChangeOrgWindow, setWindowState: setChangeOrgWindowState } =
+    useWindow({
+      windowTitle: "Change Current Organization",
+      windowIcon: "globe",
+      width: "fit-content",
+      height: "fit-content",
+    });
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const { UserSession } = useSession();
+  const currentOrganization = UserSession.value.currentOrganization;
+  const {
+    Window: ChangePasswordWindow,
+    setWindowState: setChangePasswordWindow,
+  } = useWindow({
+    windowIcon: "key",
+    windowTitle: "Change Password",
+    width: "fit-content",
+    height: "fit-content",
+  });
+  const { handleGetRequest } = useAxios();
+  const isMobile = useIsMobile();
+  const dispatch = useDispatch();
+  const handleLogout = async () => {
+    try {
+      await handleGetRequest({ endPointURI: "api/auth/logout" });
+    } catch (error) {}
+    dispatch(UserSessionActions.setUnAuthenticated());
+    localStorage.removeItem("TOKEN");
+  };
+  const toggleSideBar = () => {
+    dispatch(toggleSideBarState());
+  };
+  return (
+    <>
+      {AppInfo.isUserProfileManaged ? (
+        <>
+          <ChangePasswordWindow>
+            <ChangePasswordPanel
+              selectedPerson={UserSession.value}
+              isSelfService={true}
+              onSuccessCallBk={() => {
+                setChangePasswordWindow(false);
+              }}
+            />
+          </ChangePasswordWindow>
+          <Menu
+            sx={{ mt: "45px" }}
+            id="menu-appbar"
+            anchorEl={anchorElUser}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+            open={Boolean(anchorElUser)}
+            onClose={handleCloseUserMenu}
+          >
+            <MenuItem
+              onClick={() => {
+                setChangePasswordWindow(true);
+                handleCloseUserMenu();
+              }}
+            >
+              <Typography sx={{ textAlign: "center" }}>
+                Change Password
+              </Typography>
+            </MenuItem>
+          </Menu>
+        </>
+      ) : (
+        <></>
+      )}
+
+      <ChangeOrgWindow>
+        <ChangeOrgForm
+          successChangeCallBackFn={() => {
+            setChangeOrgWindowState(false);
+          }}
+        />
+      </ChangeOrgWindow>
+      <AppBar position="fixed" open={SideBarState.isOpened}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={toggleSideBar}
+            edge="start"
+            sx={[
+              {
+                mr: AppLayout.appDirection === "ltr" ? 2 : undefined,
+                ml: AppLayout.appDirection === "rtl" ? 2 : undefined,
+              },
+              SideBarState.isOpened && { display: "none" },
+            ]}
+          >
+            <FontAwesomeIcon icon="bars" />
+          </IconButton>
+          {!isMobile ? (
+            <AttachmentImageViewer
+              showAsAvatar={true}
+              attachmentCode="ORGANIZATION_LOGOS"
+              refKey={UserSession?.value?.currentOrganization?.id + ""}
+              onErrorImage="/logo.png"
+              style={{
+                marginRight: 1,
+                marginLeft: 1,
+              }}
+            />
+          ) : (
+            <></>
+          )}
+
+          <Typography variant="h6" noWrap component="div" sx={{ flex: 1 }}>
+            {isMobile
+              ? ""
+              : `${AppInfo.appName} - ${
+                  AppLayout.appDirection === "ltr"
+                    ? currentOrganization?.organizationEnName
+                    : currentOrganization?.organizationArName
+                }`}
+          </Typography>
+          {AppInfo.allowThemeChange ? (
+            <Tooltip
+              title={
+                AppLayout.themeMode === "light"
+                  ? "Switch Theme to Dark"
+                  : "Switch Theme to Light"
+              }
+            >
+              <IconButton
+                sx={{ mx: 1 }}
+                color="inherit"
+                onClick={() => {
+                  dispatch(
+                    AppLayoutActions.setThemeMode(
+                      AppLayout.themeMode === "light" ? "dark" : "light"
+                    )
+                  );
+                  localStorage.setItem(
+                    "themeMode",
+                    AppLayout.themeMode === "light" ? "dark" : "light"
+                  );
+                }}
+              >
+                {AppLayout.themeMode === "light" ? (
+                  <FontAwesomeIcon icon="moon" />
+                ) : (
+                  <FontAwesomeIcon icon={{ prefix: "far", iconName: "sun" }} />
+                )}
+              </IconButton>
+            </Tooltip>
+          ) : (
+            <></>
+          )}
+
+          {AppInfo.isLocalizationEnabled ? (
+            <Tooltip
+              title={
+                i18n.language === "ar"
+                  ? "Change Language To English"
+                  : "Change Language To Arabic"
+              }
+            >
+              <IconButton
+                color="inherit"
+                onClick={() => {
+                  let nextLanguage = i18n.language === "ar" ? "en" : "ar";
+                  changeLanguage(nextLanguage);
+                  dispatch(
+                    AppLayoutActions.setAppDirection(
+                      nextLanguage === "ar" ? "rtl" : "ltr"
+                    )
+                  );
+                }}
+              >
+                <FontAwesomeIcon icon="language" />
+              </IconButton>
+            </Tooltip>
+          ) : (
+            <></>
+          )}
+
+          {UserSession.value?.userOrganizations &&
+          UserSession.value?.userOrganizations.length > 1 ? (
+            <Tooltip title="Change Current Organization">
+              <IconButton
+                color="inherit"
+                onClick={() => {
+                  setChangeOrgWindowState(true);
+                }}
+              >
+                <FontAwesomeIcon icon="globe" />
+              </IconButton>
+            </Tooltip>
+          ) : (
+            <></>
+          )}
+          {AppInfo?.enableUINotifications === true ? (
+            <NotificationButton />
+          ) : (
+            <></>
+          )}
+          {!isMobile ? (
+            <div onClick={handleOpenUserMenu} style={{ cursor: "pointer" }}>
+              <AttachmentImageViewer
+                showAsAvatar={true}
+                onErrorImage="/no_user.png"
+                attachmentCode="EMPLOYEE_PHOTOS"
+                refKey={UserSession.value?.id + ""}
+              />
+            </div>
+          ) : (
+            <></>
+          )}
+
+          <div
+            style={{ marginLeft: 5, marginRight: 5, cursor: "pointer" }}
+            onClick={handleOpenUserMenu}
+          >
+            {isMobile ? "" : UserSession.value?.username}
+          </div>
+          <IconButton color="inherit" onClick={handleLogout}>
+            <FontAwesomeIcon
+              rotation={AppLayout.appDirection === "rtl" ? 180 : undefined}
+              icon="arrow-right-from-bracket"
+            />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+    </>
+  );
+};
+
+export default TopBar;