@asaleh37/ui-base 1.0.9 → 1.1.0

package/src/hooks/UseSession.tsx

@@ -0,0 +1,26 @@
+import { useSelector } from "react-redux";
+import { RootState } from "../redux/store";
+
+
+const useSession = () => {
+  const UserSession = useSelector((state: RootState) => state.UserSession);
+  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" ||
+          grantedAuthority?.authority === authorityCode
+        ) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  return { UserSession, isUserAuthorized };
+};
+
+export default useSession;

package/src/hooks/UseWindow.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import {
+  AppBar,
+  Box,
+  IconButton,
+  Modal,
+  Paper,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export interface TemplateWindowProp {
+  height?: any;
+  width?: any;
+  minWidth?: any;
+  minHeight?: any;
+  windowIcon?: any;
+  windowTitle?: string;
+  onCloseCallBack?: any;
+}
+
+interface WindowProps {
+  children?: React.ReactNode;
+}
+
+export const useWindow = (props: TemplateWindowProp) => {
+  const [windowState, setWindowState] = useState(false);
+
+  const Window: React.FC<WindowProps> = (windowProps: WindowProps) => {
+    return (
+      <Modal
+        open={windowState}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer }}
+        onClose={() => {
+          if (!windowState && props?.onCloseCallBack) {
+            props.onCloseCallBack();
+          }
+        }}
+      >
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            maxHeight: "90%",
+            transform: "translate(-50%, -50%)",
+            height: props?.height || "80%",
+            width: props?.width || "90%",
+            minWidth: props.minWidth || 400,
+            minHeight: props.minHeight || 200,
+            overflow: "hidden",
+            bgcolor: "modalBackground.main",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          <AppBar position="static">
+            <Toolbar variant="dense">
+              <FontAwesomeIcon
+                icon={props?.windowIcon || "window-maximize"}
+                style={{ marginRight: 5 }}
+              />
+              <Typography variant="h6" color="inherit" component="div">
+                {props?.windowTitle || "window"}
+              </Typography>
+              <div style={{ flexGrow: 1 }}></div>
+              <IconButton
+                onClick={() => {
+                  setWindowState(false);
+                  if (
+                    props.onCloseCallBack != undefined &&
+                    props.onCloseCallBack != null
+                  ) {
+                    props.onCloseCallBack();
+                  }
+                }}
+                color="secondary"
+              >
+                <FontAwesomeIcon icon="xmark-square" />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+          <Paper
+            sx={{
+              // flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              width: "100%",
+              height: "100%",
+              padding: 1,
+              // justifyContent: "center",
+              overflow: "hidden",
+            }}
+          >
+            {windowProps?.children}
+          </Paper>
+        </Box>
+      </Modal>
+    );
+  };
+  return { windowState, setWindowState, Window };
+};

package/src/hooks/useAxios.tsx

@@ -0,0 +1,271 @@
+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 {
+  endPointURI: string;
+  parameters?: any;
+  data?: any;
+  showMask?: Boolean;
+  loadingMessage?: string;
+  successCallBkFn?: Function;
+  failureCallBkFn?: Function;
+}
+
+const useAxios = () => {
+  const mask = useLoadingMask();
+  const apiBaseUrl = useSelector(
+    (state: RootState) => state.AppInfo.apiBaseUrl
+  );
+  const axiosInstance = axios.create({
+    baseURL: apiBaseUrl,
+    timeout: 600000,
+    withCredentials: true,
+  });
+
+  axiosInstance.defaults.withCredentials = true;
+  axiosInstance.interceptors.response.use(
+    (response: any) => {
+      return response;
+    },
+    (error: any) => {
+      if (
+        error
+          ? error.response
+            ? error.response.status
+              ? error.response.status === 401
+              : false
+            : false
+          : false
+      ) {
+        toast.error("your session is now expired, you need to login again", {
+          autoClose: false,
+        });
+      } else if (
+        error
+          ? error.response
+            ? error.response.status
+              ? error.response.status === 403
+              : false
+            : false
+          : false
+      ) {
+        toast.error("you aren't authorized to process this request");
+      } else if (
+        error
+          ? error.response
+            ? error.response.status
+              ? error.response.status === 500
+              : false
+            : false
+          : false
+      ) {
+        toast.error(error.response.data);
+      } else {
+        toast.error(
+          "failed to communicate with the server ... try again later"
+        );
+      }
+      return "ERROR";
+    }
+  );
+  const handleGetRequest = async (
+    props: APIRequest = { endPointURI: "", parameters: {} }
+  ) => {
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.show(props.loadingMessage);
+    }
+    const response: any = await axiosInstance.get(props.endPointURI, {
+      params: { ...props.parameters },
+      withCredentials: true,
+      // withCredentials: true,
+    });
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.hide();
+    }
+    if (response !== "ERROR") {
+      if (
+        props.successCallBkFn !== undefined &&
+        props.successCallBkFn != null
+      ) {
+        props.successCallBkFn(response);
+      }
+      return response;
+    } else {
+      if (
+        props.failureCallBkFn !== undefined &&
+        props.failureCallBkFn != null
+      ) {
+        props.failureCallBkFn(response);
+      }
+      return "ERROR";
+    }
+  };
+
+  const HandleDownloadHTTPPostPDF = async (
+    props: APIRequest = { endPointURI: "", parameters: {}, data: {} }
+  ) => {
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.show(props.loadingMessage);
+    }
+    const response: any = await axiosInstance.post(
+      props.endPointURI,
+      props.data,
+      {
+        responseType: "blob",
+      }
+    );
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.hide();
+    }
+    if (response !== "ERROR") {
+      if (
+        props.successCallBkFn !== undefined &&
+        props.successCallBkFn != null
+      ) {
+        props.successCallBkFn(response);
+      }
+      return response;
+    } else {
+      if (
+        props.failureCallBkFn !== undefined &&
+        props.failureCallBkFn != null
+      ) {
+        props.failureCallBkFn(response);
+      }
+      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: {} }
+  ) => {
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.show(props.loadingMessage);
+    }
+    let response: any = await axiosInstance.post(
+      props.endPointURI,
+      props.data,
+      {
+        params: props.parameters,
+      }
+    );
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.hide();
+    }
+    if (response !== "ERROR") {
+      if (
+        props.successCallBkFn !== undefined &&
+        props.successCallBkFn != null
+      ) {
+        props.successCallBkFn(response);
+      }
+      return response;
+    } else {
+      if (
+        props.failureCallBkFn !== undefined &&
+        props.failureCallBkFn != null
+      ) {
+        props.failureCallBkFn(response);
+      }
+      return "ERROR";
+    }
+  };
+  const handleDeleteRequest = async (
+    props: APIRequest = { endPointURI: "", parameters: {} }
+  ) => {
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.show(props.loadingMessage);
+    }
+    let response: any = await axiosInstance.delete(props.endPointURI, {
+      params: {
+        ...props.parameters,
+      },
+    });
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.hide();
+    }
+    if (response !== "ERROR") {
+      if (
+        props.successCallBkFn !== undefined &&
+        props.successCallBkFn != null
+      ) {
+        props.successCallBkFn(response);
+      }
+      return response;
+    } else {
+      if (
+        props.failureCallBkFn !== undefined &&
+        props.failureCallBkFn != null
+      ) {
+        props.failureCallBkFn(response);
+      }
+      return "ERROR";
+    }
+  };
+  return {
+    handleGetRequest,
+    handlePostRequest,
+    handleDeleteRequest,
+    HandleDownloadHTTPPostPDF,
+  };
+};
+
+export default useAxios;

package/src/hooks/useLoadingMask.tsx

@@ -0,0 +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;

package/src/layout/DrawerHeader.tsx

@@ -0,0 +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",
+}));

package/src/layout/Layout.tsx

@@ -0,0 +1,122 @@
+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 } from "react";
+import { RootState } from "../redux/store";
+import useLoadingMask from "../hooks/useLoadingMask";
+import { useIsMobile } from "../hooks/UseMobile";
+import useSession from "../hooks/UseSession";
+import useAxios from "../hooks/useAxios";
+import { setStoreData } from "../redux/features/business/CommonStoreSlice";
+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";
+
+
+const Main = styled("main", {
+  shouldForwardProp: (prop) => prop !== "open",
+})<{
+  open?: boolean;
+}>(({ theme: any, open }) => {
+  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const dispatch = useDispatch();
+  const { show, hide } = useLoadingMask();
+  const CommonStores = useSelector((state: RootState) => state.commonStores);
+  const theme = useTheme();
+  const isMobile = useIsMobile();
+  const { isUserAuthorized } = useSession();
+
+  // loadCommonStores
+  const { handleGetRequest } = useAxios();
+  const loadCommonStores = async () => {
+    show("Loading ... please wait");
+    let storeKeys = Object.keys(CommonStores);
+    for (let storeKey of storeKeys) {
+      if (
+        (CommonStores[storeKey]?.authority === undefined ||
+          CommonStores[storeKey]?.authority === null ||
+          isUserAuthorized(CommonStores[storeKey]?.authority)) &&
+        CommonStores[storeKey]?.url != "" &&
+        CommonStores[storeKey].autoLoad === true
+      ) {
+        await handleGetRequest({
+          endPointURI: CommonStores[storeKey].url,
+          showMask: false,
+          successCallBkFn: (response) => {
+            dispatch(setStoreData({ storeKey, data: response.data }));
+          },
+          failureCallBkFn: () => {
+            dispatch(setStoreData({ storeKey, data: [] }));
+          },
+        });
+      }
+    }
+    hide();
+  };
+
+  useEffect(() => {
+    loadCommonStores();
+  }, []);
+
+  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 AppLayoutState = useSelector((state: RootState) => state.AppLayout);
+  const isMobile = useIsMobile();
+  const UserSession: UserSessionProps = useSelector(
+    (state: RootState) => state.UserSession
+  );
+  return (
+    <BrowserRouter>
+      <ToastContainer draggable={true} position="bottom-center" />
+      <LoadingMask />      
+      {UserSession.value.isAuthenticated === true ? (
+        <Main open={AppLayoutState.sideBarOpened}>
+          <CssBaseline />
+          <TopBar />
+          {!isMobile ? <SideBar /> : null}
+          {isMobile ? <MobileDrawer /> : null}
+          <DrawerHeader />
+          <MainContent />
+        </Main>
+      ) : (
+        <Login />
+      )}
+    </BrowserRouter>
+  );
+}

package/src/layout/MainContent.tsx

@@ -0,0 +1,43 @@
+import { Box } from "@mui/material";
+import { 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";
+
+const MainContent: React.FC = () => {
+  const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
+  return (
+    <CacheProvider
+      value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          // alignItems: "center",
+          justifyContent: "flex-start",
+          flex: 1,          
+          overflow: "hidden",
+          padding: 3,
+        }}
+      >
+        <Routes>
+          {SYSTEM_ROUTES.map((route: SystemRoute, index) => {
+            return (
+              <Route
+                key={index}
+                path={route.path}
+                Component={route.component}
+              />
+            );
+          })}
+        </Routes>
+      </Box>
+    </CacheProvider>
+  );
+};
+
+export default MainContent;

package/src/layout/MobileDrawer.tsx

@@ -0,0 +1,103 @@
+import { styled } from "@mui/material/styles";
+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";
+
+const drawerBleeding = 56;
+
+interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
+  window?: () => Window;
+}
+
+const Puller = styled("div")(({ theme }) => ({
+  width: 30,
+  height: 6,
+  margin: 10,
+  backgroundColor: grey[300],
+  borderRadius: 3,
+  //   position: "absolute",
+  top: 8,
+  //   left: "calc(50% - 15px)",
+  ...theme.applyStyles("dark", {
+    backgroundColor: grey[900],
+  }),
+}));
+
+export default function MobileDrawer(props: Props) {
+  const { window } = props;
+  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const dispatch = useDispatch();
+  const toggleDrawer = (newState: boolean) => {
+    dispatch(AppLayoutActions.setSideBarState(newState));
+  };
+  // This is used only for the example
+  const container =
+    window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <SwipeableDrawer
+      container={container}
+      anchor="bottom"
+      open={AppLayout.sideBarOpened}
+      onClose={() => {
+        toggleDrawer(false);
+      }}
+      onOpen={() => {
+        toggleDrawer(true);
+      }}
+      swipeAreaWidth={drawerBleeding}
+      disableSwipeToOpen={false}
+      ModalProps={{
+        keepMounted: true,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          height: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <Puller />
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            justifyContent: "center",
+            width: "99%",
+            overflowY: "auto",
+          }}
+        >
+          <NavigationTree />
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-around",
+            marginTop: 1,
+            width: "100%",
+          }}
+        >
+          <Typography sx={{ fontSize: 12 }} color="textDisabled">
+            {AppInfo.appName}
+          </Typography>
+          <Typography sx={{ fontSize: 12 }} color="textDisabled">
+            V.{AppInfo.appVersion}
+          </Typography>
+        </Box>
+      </Box>
+    </SwipeableDrawer>
+  );
+}