@asaleh37/ui-base 1.2.0 → 1.2.2

package/src/components/admin/RoleGrid.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
+import { useAxios, useWindow } from "../../hooks";
+import RoleAuthoritiesForm from "./RoleAuthoritiesForm";
 
 const RoleGrid: React.FC = () => {
   const [data, setData] = useState([]);
@@ -12,7 +14,37 @@ const RoleGrid: React.FC = () => {
     findById: "api/v1/admin/role",
     setData: setData,
   });
-
+  const [selectedRole, setSelectedRole] = useState<any>(null);
+  const { handleGetRequest } = useAxios();
+  const [selectedRoleAuthorities, setSelectedRoleAuthorities] = useState<any>(
+    []
+  );
+  const [
+    selectedRoleAvailableAuthorities,
+    setSelectedRoleAvailableAuthorities,
+  ] = useState<any>([]);
+  const {
+    Window: RoleAuthoritiesWindow,
+    setWindowState: setRoleAuthorirtiesWindowOpen,
+  } = useWindow({
+    width: "50%",
+    windowIcon: "key",
+    windowTitle: "Role Authorities",
+  });
+  const loadRoleAuthorities = async (data: any) => {
+    await handleGetRequest({
+      endPointURI: "api/v1/admin/role/authorities",
+      showMask: true,
+      parameters: {
+        roleId: data.id,
+      },
+      successCallBkFn: (response: any) => {
+        setRoleAuthorirtiesWindowOpen(true);
+        setSelectedRoleAuthorities(response.data.selectedAuthorities);
+        setSelectedRoleAvailableAuthorities(response.data.availableAuthorities);
+      },
+    });
+  };
   const formElements: Array<FormElementProps> = [
     {
       type: "field",
@@ -60,18 +92,40 @@ const RoleGrid: React.FC = () => {
   ];
 
   return (
-    <TemplateGrid
-      apiActions={apiActions}
-      data={data}
-      setData={setData}
-      editMode={{ editMode: "row", reloadAfterSave: true }}
-      formElements={formElements}
-      keyColumnName={"id"}
-      gridTitle="ROLE_PLURAL"
-      girdIcon="table-cells"
-      editAction={{ isEnabled: true, authority: "ROLE_EDIT" }}
-      deleteAction={{ isEnabled: true, authority: "ROLE_DELETE" }}
-    />
+    <>
+      <RoleAuthoritiesWindow>
+        <RoleAuthoritiesForm
+          roleId={selectedRole?.id}
+          availableAuthorities={selectedRoleAvailableAuthorities}
+          currentRoleAuthorities={selectedRoleAuthorities}
+          closeModalFn={() => {
+            setRoleAuthorirtiesWindowOpen(false);
+          }}
+        />
+      </RoleAuthoritiesWindow>
+      <TemplateGrid
+        rowActions={[
+          {
+            icon: "key",
+            label: "authorities",
+            actionFn: async (data) => {
+              setSelectedRole(data);
+              loadRoleAuthorities(data);
+            },
+          },
+        ]}
+        apiActions={apiActions}
+        data={data}
+        setData={setData}
+        editMode={{ editMode: "row", reloadAfterSave: true }}
+        formElements={formElements}
+        keyColumnName={"id"}
+        gridTitle="ROLE_PLURAL"
+        girdIcon="table-cells"
+        editAction={{ isEnabled: true, authority: "ROLE_EDIT" }}
+        deleteAction={{ isEnabled: true, authority: "ROLE_DELETE" }}
+      />
+    </>
   );
 };
 

package/src/components/admin/UserAccountGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const UserAccountGrid: React.FC = () => {

package/src/components/admin/UserRequestGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const UserRequestGrid: React.FC = () => {

package/src/components/admin/WidgetGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WidgetGrid: React.FC = () => {

package/src/components/admin/WorkflowDocumentActionGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WorkflowDocumentActionGrid: React.FC = () => {

package/src/components/admin/WorkflowDocumentActionHistoryGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WorkflowDocumentActionHistoryGrid: React.FC = () => {

package/src/components/admin/WorkflowDocumentActionMailGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WorkflowDocumentActionMailGrid: React.FC = () => {

package/src/components/admin/WorkflowDocumentGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WorkflowDocumentGrid: React.FC = () => {

package/src/components/admin/WorkflowDocumentMailLogGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WorkflowDocumentMailLogGrid: React.FC = () => {

package/src/components/admin/WorkflowDocumentStatusGrid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import useApiActions from "../../hooks/useApiActions";
 import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
 
 const WorkflowDocumentStatusGrid: React.FC = () => {

package/src/components/common/Home.tsx

@@ -1,7 +1,9 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Box } from "@mui/material";
+import { useSelector } from "react-redux";
 
 const Home: React.FC = () => {
+  const counter = useSelector((state) => state.counter.value);
   return (
     <Box
       sx={{
@@ -24,6 +26,7 @@ const Home: React.FC = () => {
         />
         ] to navigate to your authorized system modules
       </div>
+      <div>counter [{counter}]</div>
     </Box>
   );
 };

package/src/components/common/Login.tsx

@@ -14,6 +14,7 @@ import axios from "axios";
 import { toast } from "react-toastify";
 import { RootState } from "../../redux/store";
 import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
+import { DARK_THEME_INITIAL_MAIN_COLOR, DARK_THEME_INITIAL_SECANDARY_COLOR } from "../../util";
 
 const Login: React.FC = () => {
   const appInfo = useSelector((state: RootState) => state.AppInfo.value);
@@ -73,7 +74,10 @@ const Login: React.FC = () => {
         /* Custom Scrollbar */
         * {
           scrollbar-width: thin;
-          scrollbar-color: ${appInfo.appTheme.dark.primaryColor} #121212;
+          scrollbar-color: ${
+            appInfo.appTheme?.dark?.primaryColor ||
+            DARK_THEME_INITIAL_MAIN_COLOR
+          } #121212;
         }
   
         /* Webkit Browsers */
@@ -87,10 +91,13 @@ const Login: React.FC = () => {
     palette: {
       mode: "dark",
       primary: {
-        main: appInfo.appTheme.dark.primaryColor,
+        main:
+          appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
       },
       secondary: {
-        main: appInfo.appTheme.dark.secondaryColor,
+        main:
+          appInfo.appTheme?.dark?.secondaryColor ||
+          DARK_THEME_INITIAL_SECANDARY_COLOR,
       },
     },
   });

package/src/components/templates/DataEntryTemplates/DataEntryTypes.ts

@@ -8,7 +8,7 @@ import {
 } from "@mui/x-data-grid-premium";
 import { UseFormReturn } from "react-hook-form";
 import { SxProps } from "@mui/material";
-import { ApiActions } from "./useApiActions";
+import { ApiActions } from "../../../hooks/useApiActions";
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
   Partial<Pick<T, K>>;
 

package/src/components/templates/TransferList.tsx

@@ -8,7 +8,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Checkbox from "@mui/material/Checkbox";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
-import { Box, Grid2 } from "@mui/material";
+import { Box, Grid2, ListItemButton } from "@mui/material";
 import TemplateTextField from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
 
 function not(a, b) {
@@ -172,27 +172,24 @@ const TransferList: React.FC<TransferListProps> = ({
             const labelId = `transfer-list-all-item-${value[valueField]}-label`;
 
             return (
-              <ListItem
+              <ListItemButton
                 key={value[valueField]}
                 role="listitem"
-                component="button"
                 onClick={handleToggle(value)}
+                sx={{ cursor: "pointer" }}                
               >
                 <ListItemIcon>
                   <Checkbox
                     checked={checked.indexOf(value) !== -1}
                     tabIndex={-1}
                     disableRipple
-                    inputProps={{
-                      "aria-labelledby": labelId,
-                    }}
                   />
                 </ListItemIcon>
                 <ListItemText
                   id={value[valueField]}
                   primary={value[displayField]}
                 />
-              </ListItem>
+              </ListItemButton>
             );
           })}
         </List>

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export { default as useLoadingMask } from "./useLoadingMask";
 export { useIsMobile } from "./UseMobile";
 export { default as useSession } from "./UseSession";
 export { useWindow } from "./UseWindow";
+export { default as useApiActions } from "./useApiActions";

package/src/{components/templates/DataEntryTemplates → hooks}/useApiActions.ts

@@ -1,8 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../../../redux/store";
-import useSession from "../../../hooks/UseSession";
-import useAxios from "../../../hooks/useAxios";
-import { setStoreData } from "../../../redux/features/common/CommonStoreSlice";
+import useSession from "./UseSession";
+import useAxios from "./useAxios";
+import { setStoreData } from "../redux/features/common/CommonStoreSlice";
 
 export type ApiActionsProps = {
   findAll?: string;
@@ -25,7 +24,7 @@ export type ApiActions = {
 const useApiActions: (apiActionsProps: ApiActionsProps) => ApiActions = (
   apiActionsProps: ApiActionsProps
 ) => {
-  const CommonStores = useSelector((state: RootState) => state.commonStores);
+  const CommonStores = useSelector((state: any) => state.commonStores.stores);
   const dispatch = useDispatch();
   const session = useSession();
   const { handleGetRequest, handlePostRequest, handleDeleteRequest } =

package/src/layout/Layout.tsx

@@ -8,8 +8,7 @@ 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 { useEffect, useState } from "react";
 import useLoadingMask from "../hooks/useLoadingMask";
 import { useIsMobile } from "../hooks/UseMobile";
 import useSession from "../hooks/UseSession";
@@ -25,10 +24,11 @@ const Main = styled("main", {
 })<{
   open?: boolean;
 }>(({ theme: any, open }) => {
-  const AppLayout = useSelector((state: RootState) => state.AppLayout);
+  const AppLayout = useSelector((state: any) => state.AppLayout);
   const dispatch = useDispatch();
   const { show, hide } = useLoadingMask();
-  const CommonStores = useSelector((state: RootState) => state.commonStores);
+  const commonStores = useSelector((state: any) => state.commonStores);
+  const [isAutoLoadLoaded, setAutoLoadLoaded] = useState<boolean>(false);
   const theme = useTheme();
   const isMobile = useIsMobile();
   const { isUserAuthorized } = useSession();
@@ -36,34 +36,41 @@ const Main = styled("main", {
   // 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: [] }));
-          },
-        });
+    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();
     }
-    hide();
   };
 
   useEffect(() => {
-    loadCommonStores();
-  }, []);
+    if (commonStores.storeKeys) {
+      loadCommonStores();
+    }
+  }, [commonStores.storeKeys]);
 
   return {
     display: "flex",
@@ -95,10 +102,10 @@ const Main = styled("main", {
 });
 
 export default function Layout() {
-  const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
   const isMobile = useIsMobile();
   const UserSession: UserSessionProps = useSelector(
-    (state: RootState) => state.UserSession
+    (state: any) => state.UserSession
   );
   return (
     <BrowserRouter>

package/src/main.tsx

@@ -0,0 +1,25 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BaseApp } from "./components";
+import logo from "./assets/logo.png";
+import CounterReducer from "./redux/features/CounterSlice";
+
+createRoot(document.getElementById("root")!).render(
+  <BaseApp
+    apiBaseUrl="http://localhost:8080/as-api"
+    appLogo={logo}
+    appName="UI Base Library"
+    appVersion="0.0"
+    businessCommonStoresMetaData={{}}
+    businessNavigationItems={[]}
+    businessReduxReducers={
+      {
+         counter: CounterReducer
+      }
+    }
+    businessRoutes={[]}
+    documentTitle="UI Base"
+    enableAdministrationModule={true}
+    muiPremiumKey="c2bd611fa642666253500ab9c8e4f78fTz0xMTE4MjEsRT0xNzc2OTg4Nzk5MDAwLFM9cHJlbWl1bSxMTT1zdWJzY3JpcHRpb24sUFY9aW5pdGlhbCxLVj0y"
+  />
+);

package/src/redux/features/CounterSlice.tsx

@@ -0,0 +1,13 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const CounterSlice = createSlice({
+  name: "counter",
+  initialState: { value: 0 },
+  reducers: {
+    increment: (state) => {
+      state.value = state.value + 1;
+    },
+  },
+});
+
+export default CounterSlice.reducer;

package/src/redux/features/common/AppInfoSlice.ts

@@ -15,7 +15,7 @@ export type AppInfo = {
   businessCommonStoresMetaData: { [key: string]: StoreMetaData };
   muiPremiumKey: string;
   enableAdministrationModule: boolean;
-  appTheme: {
+  appTheme?: {
     light: { primaryColor: string; secondaryColor: string };
     dark: { primaryColor: string; secondaryColor: string };
   };

package/src/redux/features/common/CommonStoreSlice.ts

@@ -1,7 +1,9 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface CommonStoresInterface {
-  [key: string]: StoreMetaData;
+  stores: { [key: string]: StoreMetaData };
+  storeKeys: Array<String>;
+  isAutoLoadLoaded: boolean;
 }
 
 interface setStoreDataProps {
@@ -16,17 +18,29 @@ export interface StoreMetaData {
   authority?: string;
 }
 
-export const commonStoresInitialState: CommonStoresInterface = {};
+export const commonStoresInitialState: CommonStoresInterface = {
+  stores: {},
+  storeKeys: [],
+  isAutoLoadLoaded: false,
+};
 
 const commonStoreSlice = createSlice({
   name: "loadingMask",
   initialState: commonStoresInitialState,
   reducers: {
-    setStoreData(state, action: PayloadAction<setStoreDataProps>) {
-      state[action.payload.storeKey].data = action.payload.data;
+    setStoresMetaData: (state, action) => {
+      state.stores = action.payload;
+      state.storeKeys = Object.keys(action.payload);
+    },
+    setStoreData: (state, action: PayloadAction<setStoreDataProps>) => {
+      state.stores[action.payload.storeKey].data = action.payload.data;
+    },
+    setAutoLoadLoaded: () => {
+      state.isAutoLoadLoaded = true;
     },
   },
 });
 
-export const { setStoreData } = commonStoreSlice.actions;
+export const { setStoreData, setStoresMetaData, setAutoLoadLoaded } =
+  commonStoreSlice.actions;
 export default commonStoreSlice.reducer;

package/src/redux/store.ts

@@ -1,28 +1,29 @@
-import { configureStore, Reducer } from "@reduxjs/toolkit";
-import AppLayoutReducer from "./features/common/AppLayoutSlice";
-import UserSessionReducer from "./features/common/UserSessionSlice";
-import LoadingMaskReducer from "./features/common/LoadingMaskSlice";
-import CommonStoreReducer from "./features/common/CommonStoreSlice";
-import AppInfoReducer from "./features/common/AppInfoSlice";
+// import { configureStore, Reducer } from "@reduxjs/toolkit";
+// import AppLayoutReducer from "./features/common/AppLayoutSlice";
+// import UserSessionReducer from "./features/common/UserSessionSlice";
+// import LoadingMaskReducer from "./features/common/LoadingMaskSlice";
+// import CommonStoreReducer from "./features/common/CommonStoreSlice";
+// import AppInfoReducer from "./features/common/AppInfoSlice";
 
-const reducers = {
-  AppLayout: AppLayoutReducer,
-  UserSession: UserSessionReducer,
-  loadingMask: LoadingMaskReducer,
-  commonStores: CommonStoreReducer,
-  AppInfo: AppInfoReducer,
-};
+// const reducers = {
+//   AppLayout: AppLayoutReducer,
+//   UserSession: UserSessionReducer,
+//   loadingMask: LoadingMaskReducer,
+//   commonStores: CommonStoreReducer,
+//   AppInfo: AppInfoReducer,
+// };
 
-export function addReducer(key: string, reducer: Reducer<any>) {
-  if (!reducers[key]) {
-    reducers[key] = reducer;
-  }
-}
+// export function addReducer(key: string, reducer: Reducer<any>) {
+//   debugger;
+//   // if (!reducers[key]) {
+//     reducers[key] = reducer;
+//   // }
+// }
 
-export const store = configureStore({
-  reducer: reducers,
-});
+// export const store = configureStore({
+//   reducer: reducers,
+// });
 
-// Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
+// // Infer the `RootState` and `AppDispatch` types from the store itself
+// export type RootState = ReturnType<typeof store.getState>;
+// export type AppDispatch = typeof store.dispatch;

package/src/util/constants.ts

@@ -1,2 +1,6 @@
 export const DATE_FORMAT = "YYYY-MM-DD";
-export const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+export const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+export const LIGHT_THEME_INITIAL_MAIN_COLOR = "#37505C";
+export const LIGHT_THEME_INITIAL_SECANDARY_COLOR = "#ff6d00";
+export const DARK_THEME_INITIAL_MAIN_COLOR = "#ea690e";
+export const DARK_THEME_INITIAL_SECANDARY_COLOR = "#74776B";

package/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+});