@asaleh37/ui-base 1.2.3 → 1.2.5

package/src/layout/TopBar.tsx

@@ -1,9 +1,15 @@
-import { Avatar, IconButton, styled, Typography } from "@mui/material";
+import {
+  Avatar,
+  Box,
+  IconButton,
+  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 { RootState } from "../redux/store";
 import { useIsMobile } from "../hooks/UseMobile";
 import {
   AppLayoutActions,
@@ -12,6 +18,9 @@ import {
 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";
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
@@ -20,7 +29,7 @@ interface AppBarProps extends MuiAppBarProps {
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "open",
 })<AppBarProps>(({ theme }) => {
-  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const AppLayout = useSelector((state: any) => state.AppLayout);
   const isMobile = useIsMobile();
   return {
     transition: theme.transitions.create(["margin", "width"], {
@@ -51,9 +60,18 @@ const AppBar = styled(MuiAppBar, {
 });
 
 const TopBar: React.FC = () => {
-  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
-  const AppLayout = useSelector((state: RootState) => state.AppLayout);
-  const UserSession = useSelector((state: RootState) => state.UserSession);
+  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 AppLayout = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const { UserSession } = useSession();
+  const currentOrganization = UserSession.value.currentOrganization;
   const { handleGetRequest } = useAxios();
   const isMobile = useIsMobile();
   const dispatch = useDispatch();
@@ -66,76 +84,126 @@ const TopBar: React.FC = () => {
     dispatch(UserSessionActions.setUnAuthenticated());
   };
   const toggleSideBar = () => {
-    dispatch(AppLayoutActions.toggleSideBarState());
+    dispatch(toggleSideBarState());
   };
   return (
-    <AppBar position="fixed" open={AppLayout.sideBarOpened}>
-      <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,
-            },
-            AppLayout.sideBarOpened && { display: "none" },
-          ]}
-        >
-          <FontAwesomeIcon icon="bars" />
-        </IconButton>
-        <Avatar src={AppInfo.appLogo} sx={{ marginRight: 1, marginLeft: 1 }} />
-        <Typography variant="h6" noWrap component="div" sx={{ flex: 1 }}>
-          {isMobile ? "" : AppInfo.appName}
-        </Typography>
-        <IconButton
-          color="inherit"
-          onClick={() => {
-            dispatch(
-              AppLayoutActions.setThemeMode(
-                AppLayout.themeMode === "light" ? "dark" : "light"
-              )
-            );
-            localStorage.setItem(
-              "themeMode",
-              AppLayout.themeMode === "light" ? "dark" : "light"
-            );
+    <>
+      <ChangeOrgWindow>
+        <ChangeOrgForm
+          successChangeCallBackFn={() => {
+            setChangeOrgWindowState(false);
           }}
-        >
-          {AppLayout.themeMode === "light" ? (
-            <FontAwesomeIcon icon="moon" />
+        />
+      </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>
+          <Avatar
+            src={AppInfo.appLogo}
+            sx={{ marginRight: 1, marginLeft: 1 }}
+          />
+          <Typography variant="h6" noWrap component="div" sx={{ flex: 1 }}>
+            {isMobile
+              ? ""
+              : `${AppInfo.appName} - ${
+                  AppLayout.appDirection === "ltr"
+                    ? currentOrganization?.organizationEnName
+                    : currentOrganization?.organizationArName
+                }`}
+          </Typography>
+          <Tooltip
+            title={
+              AppLayout.themeMode === "light"
+                ? "Switch Theme to Dark"
+                : "Switch Theme to Light"
+            }
+          >
+            <IconButton
+              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>
+          <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>
           ) : (
-            <FontAwesomeIcon icon={{ prefix: "far", iconName: "sun" }} />
+            <></>
           )}
-        </IconButton>
-        <IconButton
-          color="inherit"
-          onClick={() => {
-            let nextLanguage = i18n.language === "ar" ? "en" : "ar";
-            changeLanguage(nextLanguage);
-            dispatch(
-              AppLayoutActions.setAppDirection(
-                nextLanguage === "ar" ? "rtl" : "ltr"
-              )
-            );
-          }}
-        >
-          <FontAwesomeIcon icon="language" />
-        </IconButton>
-        <Avatar />
-        <div style={{ marginLeft: 5, marginRight: 5 }}>
-          {isMobile ? "" : UserSession.value?.userProfile?.username}
-        </div>
-        <IconButton color="inherit" onClick={handleLogout}>
-          <FontAwesomeIcon
-            rotation={AppLayout.appDirection === "rtl" ? 180 : undefined}
-            icon="arrow-right-from-bracket"
-          />
-        </IconButton>
-      </Toolbar>
-    </AppBar>
+
+          <Avatar />
+          <div style={{ marginLeft: 5, marginRight: 5 }}>
+            {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>
+    </>
   );
 };