@asaleh37/ui-base 1.2.3 → 1.2.5

package/src/hooks/UseSession.tsx

@@ -1,14 +1,10 @@
 import { useSelector } from "react-redux";
-import { RootState } from "../redux/store";
-
 
 const useSession = () => {
-  const UserSession = useSelector((state: RootState) => state.UserSession);
+  const UserSession = useSelector((state: any) => state.UserSession);
+  const UserInfo = UserSession.value;
   const isUserAuthorized = (authorityCode: string): boolean => {
     if (UserSession?.value?.authorities) {
-      // if (UserSession.value.authorities.includes("DEVELOPMENT_ADMIN")) {
-      //   return true;
-      // }
       for (let grantedAuthority of UserSession.value.authorities) {
         if (
           grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
@@ -20,7 +16,7 @@ const useSession = () => {
     }
     return false;
   };
-  return { UserSession, isUserAuthorized };
+  return { UserSession, isUserAuthorized, UserInfo };
 };
 
 export default useSession;

package/src/hooks/UseWindow.tsx

@@ -9,13 +9,14 @@ import {
   Typography,
 } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 export interface TemplateWindowProp {
   height?: any;
   width?: any;
   minWidth?: any;
   minHeight?: any;
-  windowIcon?: any;
+  windowIcon?: IconProp;
   windowTitle?: string;
   onCloseCallBack?: any;
 }

package/src/hooks/useAxios.tsx

@@ -1,7 +1,6 @@
 import { toast } from "react-toastify";
 import axios from "axios";
 import { useSelector } from "react-redux";
-import { RootState } from "../redux/store";
 import useLoadingMask from "./useLoadingMask";
 
 export interface APIRequest {
@@ -17,7 +16,7 @@ export interface APIRequest {
 const useAxios = () => {
   const mask = useLoadingMask();
   const apiBaseUrl = useSelector(
-    (state: RootState) => state.AppInfo.value.apiBaseUrl
+    (state: any) => state.AppInfo.value.apiBaseUrl
   );
   const axiosInstance = axios.create({
     baseURL: apiBaseUrl,
@@ -62,7 +61,14 @@ const useAxios = () => {
             : false
           : false
       ) {
-        toast.error(error.response.data);
+        if (error.response.data instanceof Blob) {
+          const blob = error.response.data;
+          blob.text().then((text) => {
+            toast.error(text);
+          });
+        } else {
+          toast.error(error.response.data);
+        }
       } else {
         toast.error(
           "failed to communicate with the server ... try again later"
@@ -153,30 +159,6 @@ const useAxios = () => {
       }
       return "ERROR";
     }
-    // axiosInstance
-    //   .request({
-    //     url: props.endPointURI,
-    //     method: "POST",
-    //     data: props.data,
-    //     responseType: "blob",
-    //   })
-    //   .then((response) => {
-    //     const url = window.URL.createObjectURL(
-    //       new Blob([response.data], { type: "application/pdf" })
-    //     );
-    //     const link = document.createElement("a");
-    //     link.href = url;
-    //     link.setAttribute("download", "example.pdf"); // specify download filename
-    //     document.body.appendChild(link);
-    //     link.click();
-    //     link.remove();
-    //   })
-    //   .catch((error) => {
-    //     console.error("Download error:", error);
-    //   })
-    //   .finally(() => {
-
-    //   });
   };
   const handlePostRequest = async (
     props: APIRequest = { endPointURI: "", parameters: {}, data: {} }

package/src/hooks/useLookupGridColumn.tsx

@@ -0,0 +1,35 @@
+import { useSelector } from "react-redux";
+import { TemplateGridColDef } from "../components";
+import useAxios from "./useAxios";
+
+const useLookupGridColumn = () => {
+  const { handleGetRequest } = useAxios();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const getLookupOptions = async (lookupType: string) => {
+    let options = [];
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/system/lookup",
+      showMask: true,
+      parameters: { lookupType },
+      successCallBkFn: (response: any) => {
+        options = response.data;
+      },
+    });
+    return options;
+  };
+  const generateLookupGridColumn = async (props: TemplateGridColDef) => {    
+    let options = await getLookupOptions(props.lookupType);
+    return {
+      ...props,
+      options,
+      displayField:
+        AppLayout.appDirection === "ltr"
+          ? "lookupEnDisplay"
+          : "lookupArDisplay",
+      valueField: "lookupValue",
+    };
+  };
+  return { generateLookupGridColumn, getLookupOptions };
+};
+
+export default useLookupGridColumn;

package/src/layout/Layout.tsx

@@ -25,52 +25,8 @@ const Main = styled("main", {
   open?: boolean;
 }>(({ theme: any, open }) => {
   const AppLayout = useSelector((state: any) => state.AppLayout);
-  const dispatch = useDispatch();
-  const { show, hide } = useLoadingMask();
-  const commonStores = useSelector((state: any) => state.commonStores);
-  const [isAutoLoadLoaded, setAutoLoadLoaded] = useState<boolean>(false);
   const theme = useTheme();
   const isMobile = useIsMobile();
-  const { isUserAuthorized } = useSession();
-
-  // loadCommonStores
-  const { handleGetRequest } = useAxios();
-  const loadCommonStores = async () => {
-    debugger;
-    if (!isAutoLoadLoaded) {      
-      setAutoLoadLoaded(true);
-      show("Loading ... please wait");
-      const stores = commonStores.stores;
-      const storeKeys = commonStores.storeKeys;
-      for (let storeKey of storeKeys) {
-        if (
-          (stores[storeKey]?.authority === undefined ||
-            stores[storeKey]?.authority === null ||
-            isUserAuthorized(stores[storeKey]?.authority)) &&
-          stores[storeKey]?.url != "" &&
-          stores[storeKey].autoLoad === true
-        ) {
-          await handleGetRequest({
-            endPointURI: stores[storeKey].url,
-            showMask: false,
-            successCallBkFn: (response) => {
-              dispatch(setStoreData({ storeKey, data: response.data }));
-            },
-            failureCallBkFn: () => {
-              dispatch(setStoreData({ storeKey, data: [] }));
-            },
-          });
-        }
-      }
-      hide();
-    }
-  };
-
-  useEffect(() => {
-    if (commonStores.storeKeys) {
-      loadCommonStores();
-    }
-  }, [commonStores.storeKeys]);
 
   return {
     display: "flex",
@@ -102,7 +58,7 @@ const Main = styled("main", {
 });
 
 export default function Layout() {
-  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
   const isMobile = useIsMobile();
   const UserSession: UserSessionProps = useSelector(
     (state: any) => state.UserSession
@@ -112,7 +68,7 @@ export default function Layout() {
       <ToastContainer draggable={true} position="bottom-center" />
       <LoadingMask />
       {UserSession.value.isAuthenticated === true ? (
-        <Main open={AppLayoutState.sideBarOpened}>
+        <Main open={SideBarState.isOpened}>
           <CssBaseline />
           <TopBar />
           {!isMobile ? <SideBar /> : null}

package/src/layout/MainContent.tsx

@@ -1,22 +1,64 @@
 import { Box } from "@mui/material";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { CacheProvider } from "@emotion/react";
 import { Route, Routes } from "react-router-dom";
-import { RootState } from "../redux/store";
 import { cacheLtr, cacheRtl } from "../components/common/LayoutHandlers";
 import { SYSTEM_ROUTES } from "../routes";
 import { SystemRoute } from "../routes/types";
+import RouteWrapper from "./RouteWrapper";
+import { useAxios, useLoadingMask, useSession } from "../hooks";
+import { useEffect, useState } from "react";
+import { setStoreData } from "../redux/features/common/CommonStoreSlice";
 
 const MainContent: React.FC = () => {
-  const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
-  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
   const businessRoutes = useSelector(
-    (state: RootState) => state.AppInfo.value.businessRoutes
+    (state: any) => state.AppInfo.value.businessRoutes
   );
+  const dispatch = useDispatch();
+  const { show, hide } = useLoadingMask();
+  const commonStores = useSelector((state: any) => state.commonStores);
+  const [isAutoLoadLoaded, setAutoLoadLoaded] = useState<boolean>(false);
+  const { isUserAuthorized } = useSession();
+  const { handleGetRequest } = useAxios();
+  const loadCommonStores = async () => {
+    show("Loading ... please wait");
+    const stores = commonStores.stores;
+    const storeKeys = commonStores.storeKeys;
+    for (let storeKey of storeKeys) {
+      if (
+        (stores[storeKey]?.authority === undefined ||
+          stores[storeKey]?.authority === null ||
+          isUserAuthorized(stores[storeKey]?.authority)) &&
+        stores[storeKey]?.url != "" &&
+        stores[storeKey].autoLoad === true
+      ) {
+        await handleGetRequest({
+          endPointURI: stores[storeKey].url,
+          showMask: false,
+          successCallBkFn: (response) => {
+            dispatch(setStoreData({ storeKey, data: response.data }));
+          },
+          failureCallBkFn: () => {
+            dispatch(setStoreData({ storeKey, data: [] }));
+          },
+        });
+      }
+    }
+    hide();
+  };
+
+  useEffect(() => {
+    if (commonStores?.storeKeys) {
+      loadCommonStores();
+    }
+  }, [commonStores.storeKeys]);
   return (
     <CacheProvider
       value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
     >
+      {/* {isAutoLoadLoaded ? ( */}
       <Box
         sx={{
           display: "flex",
@@ -35,7 +77,11 @@ const MainContent: React.FC = () => {
                   <Route
                     key={"adm" + index}
                     path={route.path}
-                    Component={route.component}
+                    element={
+                      <RouteWrapper authority={route.authority}>
+                        <route.component />
+                      </RouteWrapper>
+                    }
                   />
                 );
               })
@@ -45,12 +91,19 @@ const MainContent: React.FC = () => {
               <Route
                 key={"bs" + index}
                 path={route.path}
-                Component={route.component}
+                element={
+                  <RouteWrapper authority={route.authority}>
+                    <route.component />
+                  </RouteWrapper>
+                }
               />
             );
           })}
         </Routes>
       </Box>
+      {/* ) : (
+        <></>
+      )} */}
     </CacheProvider>
   );
 };

package/src/layout/MobileDrawer.tsx

@@ -3,9 +3,9 @@ import { grey } from "@mui/material/colors";
 import SwipeableDrawer from "@mui/material/SwipeableDrawer";
 import { useDispatch, useSelector } from "react-redux";
 import { Box, Typography } from "@mui/material";
-import { RootState } from "../redux/store";
 import { AppLayoutActions } from "../redux/features/common/AppLayoutSlice";
 import NavigationTree from "./NavigationTree";
+import { setSideBarState } from "../redux/features/common/SideBarSlice";
 
 const drawerBleeding = 56;
 
@@ -33,11 +33,11 @@ const Puller = styled("div")(({ theme }) => ({
 
 export default function MobileDrawer(props: Props) {
   const { window } = props;
-  const AppLayout = useSelector((state: RootState) => state.AppLayout);
-  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
   const dispatch = useDispatch();
   const toggleDrawer = (newState: boolean) => {
-    dispatch(AppLayoutActions.setSideBarState(newState));
+    dispatch(setSideBarState(newState));
   };
   // This is used only for the example
   const container =
@@ -47,7 +47,7 @@ export default function MobileDrawer(props: Props) {
     <SwipeableDrawer
       container={container}
       anchor="bottom"
-      open={AppLayout.sideBarOpened}
+      open={SideBarState.isOpened}
       onClose={() => {
         toggleDrawer(false);
       }}

package/src/layout/NavigationTree.tsx

@@ -275,7 +275,6 @@ export default function NavigationTree() {
             navigationItem.children.length == 0)
         ) {
           navigate(navigationItem?.actionPayload?.path || "");
-          // dispatch(AppLayoutActions.toggleSideBarState());
         }
       }}
       sx={{

package/src/layout/RouteWrapper.tsx

@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import { useSession } from "../hooks";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type RouteWrapperProps = {
+  authority?: string;
+  children?: React.ReactNode;
+};
+const RouteWrapper: React.FC<RouteWrapperProps> = (props) => {
+  const { isUserAuthorized } = useSession();
+  if (props?.authority && !isUserAuthorized(props.authority)) {
+    return (
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "red",
+        }}
+      >
+        <h2>
+          <FontAwesomeIcon
+            style={{ marginRight: 10, marginLeft: 10 }}
+            icon="cancel"
+          />
+          You aren't authorized to access this page
+        </h2>
+      </Box>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+export default RouteWrapper;

package/src/layout/SideBar.tsx

@@ -5,20 +5,21 @@ import Drawer from "@mui/material/Drawer";
 import { useDispatch, useSelector } from "react-redux";
 import { DrawerHeader } from "./DrawerHeader";
 import { Box, Typography, useTheme } from "@mui/material";
-import { RootState } from "../redux/store";
-import {
-  AppLayoutActions,
-  DRAWER_WIDTH,
-} from "../redux/features/common/AppLayoutSlice";
+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: RootState) => state.AppInfo.value);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const { UserSession } = useSession();
+  const currentOrganization = UserSession.value.currentOrganization;
   const theme = useTheme();
-  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
   const dispatch = useDispatch();
   const toggleSideBar = () => {
-    dispatch(AppLayoutActions.toggleSideBarState());
+    dispatch(toggleSideBarState());
   };
   return (
     <Drawer
@@ -32,7 +33,7 @@ const SideBar: React.FC = () => {
       }}
       variant="persistent"
       anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
-      open={AppLayout.sideBarOpened}
+      open={SideBarState.isOpened}
     >
       <DrawerHeader>
         <Box sx={{ width: "100%" }}>
@@ -56,7 +57,11 @@ const SideBar: React.FC = () => {
             }}
           >
             <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              {AppInfo.appName}
+              {`${AppInfo.appName} - ${
+                AppLayout.appDirection === "ltr"
+                  ? currentOrganization?.organizationEnName
+                  : currentOrganization?.organizationArName
+              }`}
             </Typography>
             <Typography sx={{ fontSize: 12 }} color="textDisabled">
               V.{AppInfo.appVersion}