@asaleh37/ui-base 1.2.30 → 25.1.9

package/src/components/App.tsx

@@ -1,123 +1,155 @@
-import { useDispatch, useSelector } from "react-redux";
-import { createTheme, ThemeOptions } from "@mui/material";
-import { ThemeProvider } from "@emotion/react";
-import React, { useEffect } from "react";
-import Layout from "../layout/Layout";
-import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
-import { LicenseInfo } from "@mui/x-license";
-import {
-  DARK_THEME_INITIAL_MAIN_COLOR,
-  DARK_THEME_INITIAL_SECANDARY_COLOR,
-  LIGHT_THEME_INITIAL_MAIN_COLOR,
-  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
-} from "../util";
-import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
-import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
-
-const App: React.FC<AppInfo> = (props: AppInfo) => {
-  const dispatch = useDispatch();
-  LicenseInfo.setLicenseKey(props.muiPremiumKey);
-  const LightThemeOptions: ThemeOptions = {
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: `
-        /* Custom Scrollbar */
-        * {
-          scrollbar-width: thin;
-          scrollbar-color: ${
-            props.appTheme?.light?.primaryColor ||
-            LIGHT_THEME_INITIAL_MAIN_COLOR
-          } #ffffff;
-        }
-  
-        /* Webkit Browsers */
-        *::-webkit-scrollbar {
-          width: 12px;
-          height: 10px;
-        }   
-      `,
-      },
-    },
-    palette: {
-      mode: "light",
-      primary: {
-        main:
-          props.appTheme?.light?.primaryColor || LIGHT_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          props.appTheme?.light?.secondaryColor ||
-          LIGHT_THEME_INITIAL_SECANDARY_COLOR,
-      },
-      background: {
-        default: "#f5f5f5",
-        paper: "#f5f5f5",
-      },
-    },
-  };
-  const DarkThemeOptions: ThemeOptions = {
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: `
-        /* Custom Scrollbar */
-        * {
-          scrollbar-width: thin;
-          scrollbar-color: ${
-            props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR
-          } #121212;
-        }
-  
-        /* Webkit Browsers */
-        *::-webkit-scrollbar {
-          width: 12px;
-          height: 10px;
-        }   
-      `,
-      },
-    },
-    palette: {
-      mode: "dark",
-      primary: {
-        main:
-          props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          props.appTheme?.dark?.secondaryColor ||
-          DARK_THEME_INITIAL_SECANDARY_COLOR,
-      },
-    },
-  };
-
-  let commonStores = {};
-  if (props.enableAdministrationModule) {
-    commonStores = { ...ADMINISTRATION_STORES };
-  }
-  if (props.businessCommonStoresMetaData) {
-    commonStores = {
-      ...commonStores,
-      ...props.businessCommonStoresMetaData,
-    };
-  }
-  dispatch(setStoresMetaData(commonStores));
-  const AppLayoutState = useSelector((state: any) => state.AppLayout);
-  let themeOptions = { ...LightThemeOptions };
-  if (AppLayoutState.themeMode === "dark") {
-    themeOptions = { ...DarkThemeOptions };
-  }
-  const theme = createTheme({
-    direction: AppLayoutState.appDirection,
-    ...themeOptions,
-  });
-  useEffect(() => {
-    document.title = props.documentTitle;
-    dispatch(AppInfoActions.setAppInfo(props));
-  }, []);
-  return (
-    <ThemeProvider theme={theme}>
-      <Layout />
-    </ThemeProvider>
-  );
-};
-
-export default App;
+import { useDispatch, useSelector } from "react-redux";
+import { createTheme, ThemeOptions } from "@mui/material";
+import { ThemeProvider } from "@emotion/react";
+import React, { useEffect } from "react";
+import Layout from "../layout/Layout";
+import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
+import { LicenseInfo } from "@mui/x-license";
+import {
+  DARK_THEME_INITIAL_MAIN_COLOR,
+  DARK_THEME_INITIAL_SECANDARY_COLOR,
+  LIGHT_THEME_INITIAL_MAIN_COLOR,
+  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
+} from "../util";
+import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
+import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
+import { PublicClientApplication } from "@azure/msal-browser";
+import { MsalProvider } from "@azure/msal-react";
+
+const App: React.FC<AppInfo> = (props: AppInfo) => {
+  const dispatch = useDispatch();
+  let msalInstance;
+  if (props?.authenticationMethod === "AZURE") {
+    msalInstance = new PublicClientApplication({
+      auth: {
+        clientId: props?.azureConfiguration?.frontEndClientId,
+        authority: `https://login.microsoftonline.com/${props?.azureConfiguration?.tenantId}`,
+        redirectUri: props?.azureConfiguration?.redirectURL,
+      },
+    });
+  }
+
+  LicenseInfo.setLicenseKey(props.muiPremiumKey);
+  const LightThemeOptions: ThemeOptions = {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${
+            props.appTheme?.light?.primaryColor ||
+            LIGHT_THEME_INITIAL_MAIN_COLOR
+          } #ffffff;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "light",
+      primary: {
+        main:
+          props.appTheme?.light?.primaryColor || LIGHT_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          props.appTheme?.light?.secondaryColor ||
+          LIGHT_THEME_INITIAL_SECANDARY_COLOR,
+      },
+      background: {
+        default: "#f5f5f5",
+        paper: "#f5f5f5",
+      },
+    },
+  };
+  const DarkThemeOptions: ThemeOptions = {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${
+            props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR
+          } #121212;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "dark",
+      primary: {
+        main:
+          props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          props.appTheme?.dark?.secondaryColor ||
+          DARK_THEME_INITIAL_SECANDARY_COLOR,
+      },
+    },
+  };
+
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  let themeOptions;
+  if (props?.allowThemeChange) {
+    themeOptions = { ...LightThemeOptions };
+    if (AppLayoutState.themeMode === "dark") {
+      themeOptions = { ...DarkThemeOptions };
+    }
+  } else {
+    if (props?.appThemeMode) {
+      themeOptions =
+        props?.appThemeMode === "light"
+          ? { ...LightThemeOptions }
+          : { ...DarkThemeOptions };
+    } else {
+      themeOptions = { ...LightThemeOptions };
+    }
+  }
+  const theme = createTheme({
+    direction: AppLayoutState.appDirection,
+    ...themeOptions,
+  });
+
+  useEffect(() => {
+    document.title = props.documentTitle;
+    dispatch(AppInfoActions.setAppInfo(props));
+    let commonStores = {};
+    if (props.enableAdministrationModule) {
+      commonStores = { ...ADMINISTRATION_STORES };
+    }
+    if (props.businessCommonStoresMetaData) {
+      commonStores = {
+        ...commonStores,
+        ...props.businessCommonStoresMetaData,
+      };
+    }
+    dispatch(setStoresMetaData(commonStores));
+  }, [props]);
+  return (
+    <ThemeProvider theme={theme}>
+      {props?.authenticationMethod === "AZURE" ? (
+        <MsalProvider instance={msalInstance}>
+          <Layout msalInstance={msalInstance} />
+        </MsalProvider>
+      ) : (
+        <Layout msalInstance={msalInstance} />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/src/components/BaseApp.tsx

@@ -1,53 +1,75 @@
-import { Provider } from "react-redux";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { fab } from "@fortawesome/free-brands-svg-icons";
-import { far } from "@fortawesome/free-regular-svg-icons";
-import { fas } from "@fortawesome/free-solid-svg-icons";
-import "../styles/index.css";
-import "react-toastify/dist/ReactToastify.css";
-import App from "./App";
-import { AppInfo } from "../redux/features/common/AppInfoSlice";
-import AppLayoutReducer from "../redux/features/common/AppLayoutSlice";
-import UserSessionReducer from "../redux/features/common/UserSessionSlice";
-import LoadingMaskReducer from "../redux/features/common/LoadingMaskSlice";
-import CommonStoreReducer from "../redux/features/common/CommonStoreSlice";
-import AppInfoReducer from "../redux/features/common/AppInfoSlice";
-import SideBarReducer from "../redux/features/common/SideBarSlice";
-import { configureStore } from "@reduxjs/toolkit";
-import i18n from "../locales/i18n";
-import { initReactI18next } from "react-i18next";
-import { ENGLISH_TRANS } from "../locales/english";
-import { ARABIC_TRANS } from "../locales/arabic";
-
-library.add(fab);
-library.add(far);
-library.add(fas);
-
-export const BaseApp: React.FC<AppInfo> = (props) => {
-  const systemReducers = {
-    AppLayout: AppLayoutReducer,
-    UserSession: UserSessionReducer,
-    loadingMask: LoadingMaskReducer,
-    commonStores: CommonStoreReducer,
-    SideBar: SideBarReducer,
-    AppInfo: AppInfoReducer,
-    ...props?.businessReduxReducers,
-  };
-  const store = configureStore({
-    reducer: systemReducers,
-  });
-  const resources = {
-    en: { translation: { ...ENGLISH_TRANS, ...props?.businessLocals?.en } },
-    ar: { translation: { ...ARABIC_TRANS, ...props?.businessLocals?.ar } },
-  };
-  i18n.use(initReactI18next).init({
-    resources: resources, // Where we're gonna put translations' files
-    lng: localStorage.getItem("language") || "en", // Set the initial language of the App
-    fallbackLng: "en",
-  });
-  return (
-    <Provider store={store}>
-      <App {...props} />
-    </Provider>
-  );
-};
+import { Provider } from "react-redux";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import "../styles/index.css";
+import "react-toastify/dist/ReactToastify.css";
+import App from "./App";
+import { AppInfo } from "../redux/features/common/AppInfoSlice";
+import AppLayoutReducer from "../redux/features/common/AppLayoutSlice";
+import UserSessionReducer from "../redux/features/common/UserSessionSlice";
+import LoadingMaskReducer from "../redux/features/common/LoadingMaskSlice";
+import CommonStoreReducer from "../redux/features/common/CommonStoreSlice";
+import AppInfoReducer from "../redux/features/common/AppInfoSlice";
+import SideBarReducer from "../redux/features/common/SideBarSlice";
+import { configureStore } from "@reduxjs/toolkit";
+import i18n from "../locales/i18n";
+import { initReactI18next } from "react-i18next";
+import { ENGLISH_TRANS } from "../locales/english";
+import { ARABIC_TRANS } from "../locales/arabic";
+import { useEffect, useState } from "react";
+
+library.add(fab);
+library.add(far);
+library.add(fas);
+
+export const BaseApp: React.FC<AppInfo> = (props) => {
+  // let store = null;
+  const [systemReducers, setSystemReducers] = useState<any>({
+    AppLayout: AppLayoutReducer,
+    UserSession: UserSessionReducer,
+    loadingMask: LoadingMaskReducer,
+    commonStores: CommonStoreReducer,
+    SideBar: SideBarReducer,
+    AppInfo: AppInfoReducer,
+  });
+  const store = configureStore({
+    reducer: systemReducers,
+  });
+  const [isAppInitialized, setIsAppInitialized] = useState<boolean>(false);
+  const initializeApp = () => {
+    const reducers = {
+      AppLayout: AppLayoutReducer,
+      UserSession: UserSessionReducer,
+      loadingMask: LoadingMaskReducer,
+      commonStores: CommonStoreReducer,
+      SideBar: SideBarReducer,
+      AppInfo: AppInfoReducer,
+      ...props?.businessReduxReducers,
+    };
+    setSystemReducers((state) => {
+      return { ...reducers };
+    });
+    const resources = {
+      en: { translation: { ...ENGLISH_TRANS, ...props?.businessLocals?.en } },
+      ar: { translation: { ...ARABIC_TRANS, ...props?.businessLocals?.ar } },
+    };
+    i18n.use(initReactI18next).init({
+      resources: resources, // Where we're gonna put translations' files
+      lng: localStorage.getItem("language") || "en", // Set the initial language of the App
+      fallbackLng: "en",
+    });
+    setIsAppInitialized(true);
+  };
+  useEffect(() => {
+    initializeApp();
+  }, [props]);
+  return isAppInitialized ? (
+    <Provider store={store}>
+      <App {...props} />
+    </Provider>
+  ) : (
+    <></>
+  );
+};

package/src/components/ExampleTrial.tsx

@@ -0,0 +1,24 @@
+import { useApiActions } from "../hooks";
+import { FormElementProps, TemplateForm } from "./templates";
+
+const ExampleTrial: React.FC = () => {
+  const formElements: FormElementProps[] = [
+    {
+      mode: "props",
+      type: "field",
+      props: {
+        fieldLabel: "test",
+        fieldName: "test",
+        fieldType: "combobox",
+        commonStoreKey: "SystemParameterTypes",
+        optionValueField: "value",
+        optionDisplayField: "value",
+      },
+    },
+  ];
+  const apiActions = useApiActions({});
+
+  return <TemplateForm apiActions={apiActions} elements={formElements} />;
+};
+
+export default ExampleTrial;

package/src/components/administration/admin/ChangePasswordPanel.tsx

@@ -0,0 +1,128 @@
+import { Box, Button, Divider, Paper } from "@mui/material";
+import { TemplateTextField } from "../../templates";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { useAxios } from "../../../hooks";
+
+interface ChangePasswordPanelProps {
+  selectedPerson: any;
+  isSelfService: boolean;
+  onSuccessCallBk: () => void;
+}
+
+const ChangePasswordPanel: React.FC<ChangePasswordPanelProps> = (props) => {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [password1, setPassword1] = useState("");
+  const [password2, setPassword2] = useState("");
+  const { handlePostRequest } = useAxios();
+  const handleChangePasswordRequest = async () => {
+    if (props.isSelfService) {
+      if (currentPassword === null || currentPassword.trim() === "") {
+        toast.error(
+          "You must enter your current password to process your request"
+        );
+        return;
+      }
+    }
+    if (
+      password1 === null ||
+      password1 === "" ||
+      password2 === null ||
+      password2 === "" ||
+      password1 != password2
+    ) {
+      toast.error(
+        "You must enter new password in required fields and must be identical"
+      );
+      return;
+    }
+    await handlePostRequest({
+      endPointURI: props.isSelfService
+        ? "api/v1/ss/changeMyPassword"
+        : "api/v1/admin/changeUserPassword",
+      data: {
+        personId: props?.selectedPerson?.id,
+        currentPassword,
+        newPassword: password1,
+      },
+      successCallBkFn: () => {
+        props.onSuccessCallBk();
+        toast.success("Your request has been processed successfully");
+      },
+      showMask: true,
+    });
+  };
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 400,
+        padding: 1,
+      }}
+    >
+      <Box
+        sx={{
+          m: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          width: "100%",
+          fontWeight: "bold",
+          fontSize: 16,
+        }}
+      >
+        Changing Password For : {props?.selectedPerson?.employeeEnName}
+      </Box>
+      <Divider variant="fullWidth" sx={{ width: "100%", marginBottom: 2 }} />
+      {props.isSelfService ? (
+        <TemplateTextField
+          label="Current Password"
+          value={currentPassword}
+          onChange={(e) => {
+            setCurrentPassword(e.target.value);
+          }}
+          sx={{ m: 1 }}
+          fullWidth
+          type="password"
+        />
+      ) : (
+        <></>
+      )}
+
+      <TemplateTextField
+        label="New Password"
+        value={password1}
+        onChange={(e) => {
+          setPassword1(e.target.value);
+        }}
+        sx={{ m: 1 }}
+        fullWidth
+        type="password"
+      />
+      <TemplateTextField
+        label="Confirm New Password"
+        value={password2}
+        onChange={(e) => {
+          setPassword2(e.target.value);
+        }}
+        sx={{ m: 1 }}
+        fullWidth
+        type="password"
+      />
+      <Button
+        sx={{ m: 1 }}
+        variant="contained"
+        onClick={() => {
+          handleChangePasswordRequest();
+        }}
+      >
+        Change Password
+      </Button>
+    </Paper>
+  );
+};
+
+export default ChangePasswordPanel;