@asaleh37/ui-base 25.6.19-6 → 25.6.21

package/src/layout/SideBar.tsx

@@ -1,85 +1,85 @@
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Drawer from "@mui/material/Drawer";
-import { useDispatch, useSelector } from "react-redux";
-import { DrawerHeader } from "./DrawerHeader";
-import { Box, Typography, useTheme } from "@mui/material";
-import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
-import NavigationTree from "./NavigationTree";
-import { useSession } from "../hooks";
-import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
-
-const SideBar: React.FC = () => {
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const { UserSession } = useSession();
-  const currentOrganization = UserSession.value.currentOrganization;
-  const theme = useTheme();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const SideBarState = useSelector((state: any) => state.SideBar);
-  const dispatch = useDispatch();
-  const toggleSideBar = () => {
-    dispatch(toggleSideBarState());
-  };
-  return (
-    <Drawer
-      sx={{
-        width: DRAWER_WIDTH,
-        flexShrink: 0,
-        "& .MuiDrawer-paper": {
-          width: DRAWER_WIDTH,
-          boxSizing: "border-box",
-        },
-      }}
-      variant="persistent"
-      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
-      open={SideBarState.isOpened}
-    >
-      <DrawerHeader>
-        <Box sx={{ width: "100%" }}>
-          <Typography
-            color="primary"
-            sx={{
-              width: "100%",
-              textAlign: "center",
-              fontSize: 18,
-              fontWeight: "bold",
-            }}
-          >
-            System Content
-          </Typography>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-around",
-              marginTop: 1,
-            }}
-          >
-            <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              {`${AppInfo.appName} - ${
-                AppLayout.appDirection === "ltr"
-                  ? currentOrganization?.organizationEnName
-                  : currentOrganization?.organizationArName
-              }`}
-            </Typography>
-            <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              V.{AppInfo.appVersion}
-            </Typography>
-          </Box>
-        </Box>
-        <IconButton onClick={toggleSideBar}>
-          {theme.direction === "ltr" ? (
-            <FontAwesomeIcon icon="angle-left" />
-          ) : (
-            <FontAwesomeIcon icon="angle-right" />
-          )}
-        </IconButton>
-      </DrawerHeader>
-      <Divider />
-      <NavigationTree />
-    </Drawer>
-  );
-};
-
-export default SideBar;
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Drawer from "@mui/material/Drawer";
+import { useDispatch, useSelector } from "react-redux";
+import { DrawerHeader } from "./DrawerHeader";
+import { Box, Typography, useTheme } from "@mui/material";
+import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
+import NavigationTree from "./NavigationTree";
+import { useSession } from "../hooks";
+import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
+
+const SideBar: React.FC = () => {
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const { UserSession } = useSession();
+  const currentOrganization = UserSession.value.currentOrganization;
+  const theme = useTheme();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const dispatch = useDispatch();
+  const toggleSideBar = () => {
+    dispatch(toggleSideBarState());
+  };
+  return (
+    <Drawer
+      sx={{
+        width: DRAWER_WIDTH,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: DRAWER_WIDTH,
+          boxSizing: "border-box",
+        },
+      }}
+      variant="persistent"
+      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
+      open={SideBarState.isOpened}
+    >
+      <DrawerHeader>
+        <Box sx={{ width: "100%" }}>
+          <Typography
+            color="primary"
+            sx={{
+              width: "100%",
+              textAlign: "center",
+              fontSize: 18,
+              fontWeight: "bold",
+            }}
+          >
+            System Content
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              marginTop: 1,
+            }}
+          >
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              {`${AppInfo.appName} - ${
+                AppLayout.appDirection === "ltr"
+                  ? currentOrganization?.organizationEnName
+                  : currentOrganization?.organizationArName
+              }`}
+            </Typography>
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              V.{AppInfo.appVersion}
+            </Typography>
+          </Box>
+        </Box>
+        <IconButton onClick={toggleSideBar}>
+          {theme.direction === "ltr" ? (
+            <FontAwesomeIcon icon="angle-left" />
+          ) : (
+            <FontAwesomeIcon icon="angle-right" />
+          )}
+        </IconButton>
+      </DrawerHeader>
+      <Divider />
+      <NavigationTree />
+    </Drawer>
+  );
+};
+
+export default SideBar;

package/src/layout/TopBar.tsx

@@ -1,215 +1,229 @@
-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 { 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";
-
-interface AppBarProps extends MuiAppBarProps {
-  open?: boolean;
-}
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== "open",
-})<AppBarProps>(({ theme }) => {
-  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 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();
-  const handleLogout = async () => {
-    try {
-      await handleGetRequest({ endPointURI: "api/auth/logout" });
-    } catch (error) {}
-    dispatch(UserSessionActions.setUnAuthenticated());
-  };
-  const toggleSideBar = () => {
-    dispatch(toggleSideBarState());
-  };
-  return (
-    <>
-      <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>
-          <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>
-          ) : (
-            <></>
-          )}
-
-          <NotificationButton />
-          <AttachmentImageViewer
-            showAsAvatar={true}
-            attachmentCode="EMPLOYEE_PHOTOS"
-            refKey={UserSession.value?.id + ""}
-          />
-          <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>
-    </>
-  );
-};
-
-export default TopBar;
+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 { 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";
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps>(({ theme }) => {
+  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 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();
+  const handleLogout = async () => {
+    try {
+      await handleGetRequest({ endPointURI: "api/auth/logout" });
+    } catch (error) {}
+    dispatch(UserSessionActions.setUnAuthenticated());
+  };
+  const toggleSideBar = () => {
+    dispatch(toggleSideBarState());
+  };
+  return (
+    <>
+      <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>
+          <AttachmentImageViewer
+            showAsAvatar={true}
+            attachmentCode="ORGANIZATION_LOGOS"
+            refKey={UserSession.value.currentOrganization.id + ""}
+            onErrorImage="/logo.png"
+            style={{
+              marginRight: 1,
+              marginLeft: 1,
+            }}
+          />
+          {/* <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>
+          ) : (
+            <></>
+          )}
+          {AppInfo?.enableUINotifications === true ? (
+            <NotificationButton />
+          ) : (
+            <></>
+          )}
+          <AttachmentImageViewer
+            showAsAvatar={true}
+            onErrorImage="/no_user.png"
+            attachmentCode="EMPLOYEE_PHOTOS"
+            refKey={UserSession.value?.id + ""}
+          />
+          <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>
+    </>
+  );
+};
+
+export default TopBar;