@asaleh37/ui-base 25.8.1-4 → 25.8.1-6

package/src/hooks/useLoadingMask.tsx

@@ -1,16 +1,16 @@
-import { useDispatch } from "react-redux";
-import { hideLoadingMask, showLoadingMask } from "../redux/features/common/LoadingMaskSlice";
-
-
-const useLoadingMask = () => {
-  const dispatch = useDispatch();
-  const show = (message?: string) => {
-    dispatch(showLoadingMask(message));
-  };
-  const hide = () => {
-    dispatch(hideLoadingMask());
-  };
-  return { show, hide };
-};
-
-export default useLoadingMask;
+import { useDispatch } from "react-redux";
+import { hideLoadingMask, showLoadingMask } from "../redux/features/common/LoadingMaskSlice";
+
+
+const useLoadingMask = () => {
+  const dispatch = useDispatch();
+  const show = (message?: string) => {
+    dispatch(showLoadingMask(message));
+  };
+  const hide = () => {
+    dispatch(hideLoadingMask());
+  };
+  return { show, hide };
+};
+
+export default useLoadingMask;

package/src/hooks/useLookupGridColumn.tsx

@@ -1,35 +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/public/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;
+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/public/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/index.ts

@@ -1,4 +1,4 @@
-export * from "./components";
-export * from "./hooks";
-export * from "./util";
-export * from "./types";
+export * from "./components";
+export * from "./hooks";
+export * from "./util";
+export * from "./types";

package/src/layout/DrawerHeader.tsx

@@ -1,10 +1,10 @@
-import { styled } from "@mui/material";
-
-export const DrawerHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",  
-  // padding: theme.spacing(0, 1),
-  // necessary for content to be below app bar
-  ...theme.mixins.toolbar,
-  justifyContent: "flex-end",
-}));
+import { styled } from "@mui/material";
+
+export const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",  
+  // padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+  justifyContent: "flex-end",
+}));

package/src/layout/Layout.tsx

@@ -1,90 +1,90 @@
-import { styled, useTheme } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import { useDispatch, useSelector } from "react-redux";
-import TopBar from "./TopBar";
-import { DrawerHeader } from "./DrawerHeader";
-import SideBar from "./SideBar";
-import MainContent from "./MainContent";
-import { BrowserRouter } from "react-router-dom";
-import MobileDrawer from "./MobileDrawer";
-import { ToastContainer } from "react-toastify";
-import { useEffect, useState } from "react";
-import useLoadingMask from "../hooks/useLoadingMask";
-import { useIsMobile } from "../hooks/UseMobile";
-import useSession from "../hooks/UseSession";
-import useAxios from "../hooks/useAxios";
-import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
-import { UserSessionProps } from "../redux/features/common/UserSessionSlice";
-import LoadingMask from "../components/common/LoadingMask";
-import Login from "../components/common/Login";
-import { setStoreData } from "../redux/features/common/CommonStoreSlice";
-
-const Main = styled("main", {
-  shouldForwardProp: (prop) => prop !== "open",
-})<{
-  open?: boolean;
-}>(({ theme: any, open }) => {
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const theme = useTheme();
-  const isMobile = useIsMobile();
-
-  return {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    flexGrow: 1,
-    width: !isMobile && open ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%",
-    direction: AppLayout.appDirection,
-    justifyContent: "flex-start",
-    transition:
-      open === true
-        ? theme.transitions.create(["margin", "width"], {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-          })
-        : theme.transitions.create(["margin", "width"], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-          }),
-    marginLeft:
-      !isMobile && AppLayout.appDirection === "ltr" && open === true
-        ? DRAWER_WIDTH + "px"
-        : 0,
-    marginRight:
-      !isMobile && AppLayout.appDirection === "rtl" && open === true
-        ? DRAWER_WIDTH + "px"
-        : 0,
-  };
-});
-
-export default function Layout() {
-  const SideBarState = useSelector((state: any) => state.SideBar);
-  const isMobile = useIsMobile();
-  const UserSession: UserSessionProps = useSelector(
-    (state: any) => state.UserSession
-  );
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-
-  return (
-    <BrowserRouter>
-      <ToastContainer
-        rtl={AppLayout.appDirection === "rtl"}
-        draggable={true}
-        position="bottom-center"
-      />
-      <LoadingMask />
-      {UserSession.value.isAuthenticated === true ? (
-        <Main open={SideBarState.isOpened}>
-          <CssBaseline />
-          <TopBar />
-          {!isMobile ? <SideBar /> : null}
-          {isMobile ? <MobileDrawer /> : null}
-          <DrawerHeader />
-          <MainContent />
-        </Main>
-      ) : (
-        <Login />
-      )}
-    </BrowserRouter>
-  );
-}
+import { styled, useTheme } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { useDispatch, useSelector } from "react-redux";
+import TopBar from "./TopBar";
+import { DrawerHeader } from "./DrawerHeader";
+import SideBar from "./SideBar";
+import MainContent from "./MainContent";
+import { BrowserRouter } from "react-router-dom";
+import MobileDrawer from "./MobileDrawer";
+import { ToastContainer } from "react-toastify";
+import { useEffect, useState } from "react";
+import useLoadingMask from "../hooks/useLoadingMask";
+import { useIsMobile } from "../hooks/UseMobile";
+import useSession from "../hooks/UseSession";
+import useAxios from "../hooks/useAxios";
+import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
+import { UserSessionProps } from "../redux/features/common/UserSessionSlice";
+import LoadingMask from "../components/common/LoadingMask";
+import Login from "../components/common/Login";
+import { setStoreData } from "../redux/features/common/CommonStoreSlice";
+
+const Main = styled("main", {
+  shouldForwardProp: (prop) => prop !== "open",
+})<{
+  open?: boolean;
+}>(({ theme: any, open }) => {
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const theme = useTheme();
+  const isMobile = useIsMobile();
+
+  return {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    flexGrow: 1,
+    width: !isMobile && open ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%",
+    direction: AppLayout.appDirection,
+    justifyContent: "flex-start",
+    transition:
+      open === true
+        ? theme.transitions.create(["margin", "width"], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+          })
+        : theme.transitions.create(["margin", "width"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+    marginLeft:
+      !isMobile && AppLayout.appDirection === "ltr" && open === true
+        ? DRAWER_WIDTH + "px"
+        : 0,
+    marginRight:
+      !isMobile && AppLayout.appDirection === "rtl" && open === true
+        ? DRAWER_WIDTH + "px"
+        : 0,
+  };
+});
+
+export default function Layout() {
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const isMobile = useIsMobile();
+  const UserSession: UserSessionProps = useSelector(
+    (state: any) => state.UserSession
+  );
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+
+  return (
+    <BrowserRouter>
+      <ToastContainer
+        rtl={AppLayout.appDirection === "rtl"}
+        draggable={true}
+        position="bottom-center"
+      />
+      <LoadingMask />
+      {UserSession.value.isAuthenticated === true ? (
+        <Main open={SideBarState.isOpened}>
+          <CssBaseline />
+          <TopBar />
+          {!isMobile ? <SideBar /> : null}
+          {isMobile ? <MobileDrawer /> : null}
+          <DrawerHeader />
+          <MainContent />
+        </Main>
+      ) : (
+        <Login />
+      )}
+    </BrowserRouter>
+  );
+}

package/src/layout/MainContent.tsx

@@ -1,117 +1,117 @@
-import { Box } from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { CacheProvider } from "@emotion/react";
-import { Route, Routes } from "react-router-dom";
-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: any) => state.AppLayout);
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const businessRoutes = useSelector(
-    (state: any) => state.AppInfo.value.businessRoutes
-  );
-  const { UserInfo } = useSession();
-  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");
-    setAutoLoadLoaded(false);
-    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: [] }));
-          },
-        });
-      }
-    }
-    setAutoLoadLoaded(true);
-    hide();
-  };
-
-  useEffect(() => {
-    if (commonStores?.storeKeys) {
-      loadCommonStores();
-    }
-  }, [commonStores.storeKeys, UserInfo?.currentOrganization]);
-  return (
-    <CacheProvider
-      value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
-    >
-      {isAutoLoadLoaded ? (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            // alignItems: "center",
-            justifyContent: "flex-start",
-            flex: 1,
-            overflow: "hidden",
-            padding: 3,
-          }}
-        >
-          <Routes>
-            {AppInfo.enableAdministrationModule
-              ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
-                  return (
-                    <Route
-                      key={"adm" + index}
-                      path={route.path}
-                      element={
-                        <RouteWrapper
-                          authority={route.authority}
-                          applicationModule={route.applicationModule}
-                        >
-                          <route.component />
-                        </RouteWrapper>
-                      }
-                    />
-                  );
-                })
-              : null}
-            {businessRoutes.map((route: SystemRoute, index) => {
-              return (
-                <Route
-                  key={"bs" + index}
-                  path={route.path}
-                  element={
-                    <RouteWrapper authority={route.authority}>
-                      <route.component />
-                    </RouteWrapper>
-                  }
-                />
-              );
-            })}
-          </Routes>
-        </Box>
-      ) : (
-        <></>
-      )}
-    </CacheProvider>
-  );
-};
-
-export default MainContent;
+import { Box } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { CacheProvider } from "@emotion/react";
+import { Route, Routes } from "react-router-dom";
+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: any) => state.AppLayout);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const businessRoutes = useSelector(
+    (state: any) => state.AppInfo.value.businessRoutes
+  );
+  const { UserInfo } = useSession();
+  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");
+    setAutoLoadLoaded(false);
+    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: [] }));
+          },
+        });
+      }
+    }
+    setAutoLoadLoaded(true);
+    hide();
+  };
+
+  useEffect(() => {
+    if (commonStores?.storeKeys) {
+      loadCommonStores();
+    }
+  }, [commonStores.storeKeys, UserInfo?.currentOrganization]);
+  return (
+    <CacheProvider
+      value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
+    >
+      {isAutoLoadLoaded ? (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            // alignItems: "center",
+            justifyContent: "flex-start",
+            flex: 1,
+            overflow: "hidden",
+            padding: 3,
+          }}
+        >
+          <Routes>
+            {AppInfo.enableAdministrationModule
+              ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
+                  return (
+                    <Route
+                      key={"adm" + index}
+                      path={route.path}
+                      element={
+                        <RouteWrapper
+                          authority={route.authority}
+                          applicationModule={route.applicationModule}
+                        >
+                          <route.component />
+                        </RouteWrapper>
+                      }
+                    />
+                  );
+                })
+              : null}
+            {businessRoutes.map((route: SystemRoute, index) => {
+              return (
+                <Route
+                  key={"bs" + index}
+                  path={route.path}
+                  element={
+                    <RouteWrapper authority={route.authority}>
+                      <route.component />
+                    </RouteWrapper>
+                  }
+                />
+              );
+            })}
+          </Routes>
+        </Box>
+      ) : (
+        <></>
+      )}
+    </CacheProvider>
+  );
+};
+
+export default MainContent;