@asaleh37/ui-base 25.6.2-0.1 → 25.6.2-0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.6.20.1",
+  "version": "25.6.20.2",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

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

@@ -51,7 +51,7 @@ const OrgMemberRoleForm: React.FC<OrgMemberRoleFormProps> = (props) => {
   return (
     <>
       <TransferList
-        displayField="appRoleDisplay"
+        displayField="roleName"
         options={availableOptions}
         valueField="id"
         selectedOptions={selectedOptions}

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

@@ -10,7 +10,7 @@ const OrganizationRankGrid: React.FC = () => {
   const { t } = useTranslation();
   const [data, setData] = useState([]);
   const apiActions = useApiActions({
-    findAll: "api/v1/public/organizationrank/all",
+    commonStoreKey: "CurrentOrganizationRanks",
     deleteById: "api/v1/admin/organizationrank",
     save: "api/v1/admin/organizationrank",
     findById: "api/v1/admin/organizationrank",

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

@@ -1,16 +1,25 @@
 import { useState } from "react";
 import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import { useApiActions, useWindow } from "../../../hooks";
+import { useApiActions, useSession, useWindow } from "../../../hooks";
 import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 import OrganizationMemberGrid from "./OrganizationMemberGrid";
 import { Box } from "@mui/material";
 import AttachmentImageViewer from "../../templates/attachment/AttachmentImageViewer";
+import { useSelector } from "react-redux";
+import OrgMemberRoleForm from "./OrgMemberRoleForm";
 
 const PersonGrid: React.FC = () => {
   const { t } = useTranslation();
   const [selectedPerson, setSelectedPerson] = useState<any>(null);
+  const { UserInfo } = useSession();
+  const CurrentOrganizationRanks = useSelector(
+    (state: any) => state.commonStores.stores.CurrentOrganizationRanks.data
+  );
+  const CurrentOrganizationUnits = useSelector(
+    (state: any) => state.commonStores.stores.CurrentOrganizationUnits.data
+  );
   const [data, setData] = useState([]);
   const apiActions = useApiActions({
     findAll: "api/v1/public/person/all",
@@ -19,6 +28,7 @@ const PersonGrid: React.FC = () => {
     findById: "api/v1/admin/person",
     setData: setData,
   });
+  const [selectedRecord, setSelectedRecord] = useState<any>(null);
   const {
     Window: OrganizationMembersWindow,
     setWindowState: setOrganizationMemberWindowState,
@@ -26,6 +36,14 @@ const PersonGrid: React.FC = () => {
     windowTitle: "Organizations Membership",
     windowIcon: "globe",
   });
+  const {
+    Window: OrganizationMemberRolesWindow,
+    setWindowState: setOrganizationMemberRolesWindowState,
+  } = useWindow({
+    windowIcon: "tag",
+    windowTitle: "Organization Member Roles",
+    width: "50%",
+  });
 
   const formElements: Array<FormElementProps> = [
     {
@@ -33,17 +51,34 @@ const PersonGrid: React.FC = () => {
       mode: "props",
       props: {
         hidden: true,
-        fieldLabel: "Ref Source",
-        fieldName: "refSource",
+        fieldLabel: "id",
+        fieldName: "id",
+        gridProps: {
+          hidden: true,
+        },
         required: false,
-        fieldType: "text",
+        fieldType: "number",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "organizationMemberId",
+        fieldName: "organizationMemberId",
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "number",
       },
     },
     {
       type: "field",
       mode: "props",
       props: {
-        fieldLabel: "",
+        fieldLabel: "Image",
         fieldName: "custom",
         fieldType: "custom",
         gridProps: {
@@ -72,17 +107,6 @@ const PersonGrid: React.FC = () => {
         },
       },
     },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        hidden: true,
-        fieldLabel: "PERSON_EMPLOYEE_NUMBER",
-        fieldName: "refSyncNumber",
-        required: false,
-        fieldType: "text",
-      },
-    },
     {
       type: "field",
       mode: "props",
@@ -123,6 +147,41 @@ const PersonGrid: React.FC = () => {
         fieldType: "text",
       },
     },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_RANK_ID",
+        fieldName: "organizationRankId",
+        required: false,
+        fieldType: "combobox",
+        options: CurrentOrganizationRanks,
+        optionValueField: "id",
+        optionDisplayField: "rankEnName",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_UNIT_ID",
+        fieldName: "organizationUnitId",
+        required: false,
+        fieldType: "combobox",
+        options: CurrentOrganizationUnits,
+        optionValueField: "id",
+        optionDisplayField: "organizationUnitEnName",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Membership number",
+        fieldName: "organizationMembershipNumber",
+        fieldType: "text",
+      },
+    },
     {
       type: "field",
       mode: "props",
@@ -145,6 +204,28 @@ const PersonGrid: React.FC = () => {
         fieldType: "text",
       },
     },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "Ref Source",
+        fieldName: "refSource",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "PERSON_EMPLOYEE_NUMBER",
+        fieldName: "refSyncNumber",
+        required: false,
+        fieldType: "text",
+      },
+    },
     {
       type: "field",
       mode: "props",
@@ -159,6 +240,14 @@ const PersonGrid: React.FC = () => {
 
   return (
     <>
+      <OrganizationMemberRolesWindow>
+        <OrgMemberRoleForm
+          selectedRecord={selectedRecord}
+          closeModalFn={() => {
+            setOrganizationMemberRolesWindowState(false);
+          }}
+        />
+      </OrganizationMemberRolesWindow>
       <OrganizationMembersWindow>
         <OrganizationMemberGrid selectedPerson={selectedPerson} />
       </OrganizationMembersWindow>
@@ -179,6 +268,20 @@ const PersonGrid: React.FC = () => {
         keyColumnName={"id"}
         gridTitle="PERSON_PLURAL"
         rowActions={[
+          {
+            icon: "tags",
+            label: "Current Organization User Roles",
+            isActionDisabledForRecord: (data) => {
+              return !data?.organizationMemberId;
+            },
+            actionFn: async (data) => {
+              setSelectedRecord({
+                organizationId: UserInfo?.currentOrganization?.id,
+                id: data?.organizationMemberId,
+              });
+              setOrganizationMemberRolesWindowState(true);
+            },
+          },
           {
             icon: "globe",
             label: "User Organizations",

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

@@ -3,33 +3,24 @@ import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/Te
 import { useApiActions, useAxios } from "../../../hooks";
 import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
 
 const SystemApplicationAuthorityGrid: React.FC = () => {
   const { t } = useTranslation();
   const [data, setData] = useState([]);
   const apiActions = useApiActions({
-    findAll: "api/v1/admin/systemapplicationauthority/all",
+    commonStoreKey: "SystemApplicationAuthorities",
     deleteById: "api/v1/admin/systemapplicationauthority",
     save: "api/v1/admin/systemapplicationauthority",
     findById: "api/v1/admin/systemapplicationauthority",
     setData: setData,
   });
-  const [systemApplicationModules, setSystemApplicationModules] = useState([]);
 
+  const SystemApplicationModules = useSelector(
+    (state: any) => state.commonStores.stores.SystemApplicationModules.data
+  );
   const { handleGetRequest } = useAxios();
-  const getSystemApplicationModules = async () => {
-    await handleGetRequest({
-      endPointURI: "api/v1/admin/systemapplicationmodule/application/all",
-      showMask: true,
-      successCallBkFn: (response: any) => {
-        setSystemApplicationModules(response.data);
-      },
-    });
-  };
 
-  useEffect(() => {
-    getSystemApplicationModules();
-  }, []);
   const formElements: Array<FormElementProps> = [
     {
       type: "field",
@@ -51,7 +42,7 @@ const SystemApplicationAuthorityGrid: React.FC = () => {
         fieldName: "systemModuleId",
         required: false,
         fieldType: "combobox",
-        options: systemApplicationModules,
+        options: SystemApplicationModules,
         optionValueField: "id",
         optionDisplayField: "moduleName",
       },

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

@@ -75,7 +75,7 @@ const SystemApplicationModuleGrid: React.FC = () => {
       apiActions={apiActions}
       data={data}
       setData={setData}
-      editMode={{ editMode: "row" }}
+      editMode={{ editMode: "row", reloadAfterSave: true }}
       formElements={formElements}
       keyColumnName={"id"}
       hideInfoBar={true}

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

@@ -1,66 +1,74 @@
 import { useState } from "react";
 import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import {useApiActions} from "../../../hooks";
+import { useApiActions } from "../../../hooks";
 import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
 import { useTranslation } from "react-i18next";
 
 const SystemApplicationRoleAuthorityGrid: React.FC = () => {
-	const { t } = useTranslation();
-	const [data, setData] = useState([]);
-    const apiActions = useApiActions({
-    	findAll: "api/v1/admin/systemapplicationroleauthority/all",
-    	deleteById: "api/v1/admin/systemapplicationroleauthority",
-    	save: "api/v1/admin/systemapplicationroleauthority",
-		findById: "api/v1/admin/systemapplicationroleauthority",
-    	setData: setData,
-  	});
-	
-	const formElements: Array<FormElementProps> = [
-											{
-      				type: "field",
-      				mode: "props",
-      				props: {
-        				fieldLabel: "SYSTEM_APPLICATION_ROLE_AUTHORITY_IS_ACTIVE",
-        				fieldName: "isActive",
-        				required: false,
-        				fieldType: "checkbox",
-      				},
-    			},
-					    			    			    			    			    			    						    			{
-      				type: "field",
-      				mode: "props",
-      				props: {
-        				fieldLabel: "SYSTEM_APPLICATION_ROLE_AUTHORITY_SYSTEM_APPLICATION_AUTHORITY_ID",
-        				fieldName: "systemApplicationAuthorityId",
-        				required: true,
-        				fieldType: "text",
-      				},
-    			},			
-					    						    			{
-      				type: "field",
-      				mode: "props",
-      				props: {
-        				fieldLabel: "SYSTEM_APPLICATION_ROLE_AUTHORITY_SYSTEM_APPLICATION_ROLE_ID",
-        				fieldName: "systemApplicationRoleId",
-        				required: true,
-        				fieldType: "text",
-      				},
-    			},			
-					    			    			    			    		];
+  const { t } = useTranslation();
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/systemapplicationroleauthority/all",
+    deleteById: "api/v1/admin/systemapplicationroleauthority",
+    save: "api/v1/admin/systemapplicationroleauthority",
+    findById: "api/v1/admin/systemapplicationroleauthority",
+    setData: setData,
+  });
 
-	return (
-    	<TemplateGrid
-      		apiActions={apiActions}
-      		data={data}
-      		setData={setData}
-      		editMode={{ editMode: "row"}}
-      		formElements={formElements}
-			keyColumnName={"id"}
-      		gridTitle="SYSTEM_APPLICATION_ROLE_AUTHORITY_PLURAL"
-      		girdIcon="table-cells"
-      		editAction={{ isEnabled: true, authority: "SYSTEM_APPLICATION_ROLE_AUTHORITY_EDIT" }}
-      		deleteAction={{ isEnabled: true, authority: "SYSTEM_APPLICATION_ROLE_AUTHORITY_DELETE" }}
-    	/>
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "SYSTEM_APPLICATION_ROLE_AUTHORITY_IS_ACTIVE",
+        fieldName: "isActive",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel:
+          "SYSTEM_APPLICATION_ROLE_AUTHORITY_SYSTEM_APPLICATION_AUTHORITY_ID",
+        fieldName: "systemApplicationAuthorityId",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel:
+          "SYSTEM_APPLICATION_ROLE_AUTHORITY_SYSTEM_APPLICATION_ROLE_ID",
+        fieldName: "systemApplicationRoleId",
+        required: true,
+        fieldType: "text",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="SYSTEM_APPLICATION_ROLE_AUTHORITY_PLURAL"
+      girdIcon="table-cells"
+      editAction={{
+        isEnabled: true,
+        authority: "SYSTEM_APPLICATION_ROLE_AUTHORITY_EDIT",
+      }}
+      deleteAction={{
+        isEnabled: true,
+        authority: "SYSTEM_APPLICATION_ROLE_AUTHORITY_DELETE",
+      }}
+    />
   );
 };
 

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

@@ -18,7 +18,7 @@ const SystemApplicationRoleGrid: React.FC = () => {
     width: "50%",
   });
   const apiActions = useApiActions({
-    findAll: "api/v1/admin/systemapplicationrole/all",
+    findAll: "SystemApplicationRoles",
     deleteById: "api/v1/admin/systemapplicationrole",
     save: "api/v1/admin/systemapplicationrole",
     findById: "api/v1/admin/systemapplicationrole",
@@ -85,7 +85,7 @@ const SystemApplicationRoleGrid: React.FC = () => {
         data={data}
         hideInfoBar={true}
         setData={setData}
-        editMode={{ editMode: "row" }}
+        editMode={{ editMode: "row", reloadAfterSave: true }}
         formElements={formElements}
         keyColumnName={"id"}
         gridTitle="SYSTEM_APPLICATION_ROLE_PLURAL"

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

@@ -66,7 +66,7 @@ export const constructGridColumnsFromFields: (
         align: "center",
         hidden: tableField?.hidden,
         searchable: tableField?.gridProps?.searchable,
-        flex: 1,
+        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
         minWidth: 200,
       };
 
@@ -84,7 +84,7 @@ export const constructGridColumnsFromFields: (
         align: "center",
         hidden: tableField?.hidden,
         searchable: tableField?.gridProps?.searchable,
-        flex: 1,
+        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
         minWidth: 200,
       });
       columns.push(column);
@@ -101,7 +101,7 @@ export const constructGridColumnsFromFields: (
         align: "center",
         hidden: tableField?.hidden,
         searchable: tableField?.gridProps?.searchable,
-        flex: 1,
+        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
         minWidth: 200,
       });
       columns.push(column);
@@ -139,7 +139,7 @@ export const constructGridColumnsFromFields: (
         valueField: tableField?.optionValueField || "value",
         displayField: tableField?.optionDisplayField || "display",
         options: tableField?.options || [],
-        flex: 1,
+        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
         minWidth: 200,
       });
       columns.push(column);
@@ -160,7 +160,7 @@ export const constructGridColumnsFromFields: (
         valueField: tableField?.optionValueField || "value",
         displayField: tableField?.optionDisplayField || "display",
         options: tableField?.options || [],
-        flex: 1,
+        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
         minWidth: 200,
       });
       columns.push(column);

package/src/hooks/UseSession.tsx

@@ -3,6 +3,20 @@ import { useSelector } from "react-redux";
 const useSession = () => {
   const UserSession = useSelector((state: any) => state.UserSession);
   const UserInfo = UserSession.value;
+
+  const isCurrentOrganizationAuthorizedToModule = (
+    moduleCode: string
+  ): Boolean => {
+    if (UserInfo?.currentOrganization?.systemApplicationModules) {
+      for (const subscripedModule of UserInfo.currentOrganization
+        .systemApplicationModules) {
+        if (subscripedModule.toLowerCase() == moduleCode.toLowerCase()) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
   const isUserAuthorized = (authorityCode: string): boolean => {
     if (UserSession?.value?.authorities) {
       for (let grantedAuthority of UserSession.value.authorities) {
@@ -34,7 +48,12 @@ const useSession = () => {
     }
     return false;
   };
-  return { UserSession, isUserAuthorized, UserInfo };
+  return {
+    UserSession,
+    isUserAuthorized,
+    isCurrentOrganizationAuthorizedToModule,
+    UserInfo,
+  };
 };
 
 export default useSession;

package/src/layout/MainContent.tsx

@@ -81,7 +81,10 @@ const MainContent: React.FC = () => {
                       key={"adm" + index}
                       path={route.path}
                       element={
-                        <RouteWrapper authority={route.authority}>
+                        <RouteWrapper
+                          authority={route.authority}
+                          applicationModule={route.applicationModule}
+                        >
                           <route.component />
                         </RouteWrapper>
                       }

package/src/layout/NavigationTree.tsx

@@ -234,14 +234,18 @@ export default function NavigationTree() {
   const AppInfo = useSelector((state: any) => state.AppInfo.value);
   const dispatch = useDispatch();
   const isMobile = useIsMobile();
-  const { isUserAuthorized } = useSession();
+  const { isUserAuthorized, isCurrentOrganizationAuthorizedToModule } =
+    useSession();
   const filterData = (data) => {
     const parentItems = [];
     for (let parentItem of data) {
       if (
-        parentItem.authority === undefined ||
-        parentItem.authority == null ||
-        isUserAuthorized(parentItem.authority)
+        (parentItem.authority === undefined ||
+          parentItem.authority == null ||
+          isUserAuthorized(parentItem.authority)) &&
+        (parentItem.applicationModule === undefined ||
+          parentItem.applicationModule === null ||
+          isCurrentOrganizationAuthorizedToModule(parentItem.applicationModule))
       ) {
         let newParentItem = structuredClone(parentItem);
         if (parentItem?.children) {
@@ -261,7 +265,6 @@ export default function NavigationTree() {
     ...structuredClone(AppInfo.businessNavigationItems)
   );
   const authoriedNavigationItems = filterData(mergedNavigationItems);
-  console.log("authoriedNavigationItems", authoriedNavigationItems);
   return (
     <RichTreeView
       items={authoriedNavigationItems}

package/src/layout/RouteWrapper.tsx

@@ -4,10 +4,37 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type RouteWrapperProps = {
   authority?: string;
+  applicationModule?: string;
   children?: React.ReactNode;
 };
 const RouteWrapper: React.FC<RouteWrapperProps> = (props) => {
-  const { isUserAuthorized } = useSession();
+  const { isUserAuthorized, isCurrentOrganizationAuthorizedToModule } =
+    useSession();
+  if (
+    props?.applicationModule &&
+    !isCurrentOrganizationAuthorizedToModule(props?.applicationModule)
+  ) {
+    return (
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "red",
+        }}
+      >
+        <h2>
+          <FontAwesomeIcon
+            style={{ marginRight: 10, marginLeft: 10 }}
+            icon="cancel"
+          />
+          Your organization didn't subscribe for this system module
+        </h2>
+      </Box>
+    );
+  }
   if (props?.authority && !isUserAuthorized(props.authority)) {
     return (
       <Box

package/src/main.tsx

@@ -4,7 +4,7 @@ import { BaseApp } from "./components";
 
 createRoot(document.getElementById("root")!).render(
   <BaseApp
-    apiBaseUrl="http://192.168.1.2:8081/api-base"
+    apiBaseUrl="http://localhost:8080/api-base"
     appLogo={"/logo.png"}
     appName="UI Base Library"
     appVersion="0.0"

package/src/navigationItems/Administration/adminNavigationItems.tsx

@@ -9,12 +9,11 @@ export const adminNavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
     icon: "cog",
     children: [
       {
-        id: "development_admin.organizations",
-        label: "ORGANIZATION_PLURAL",
-        authority: "ORGANIZATION_ADMIN",
-        icon: "globe",
+        id: "system_admin.Person",
+        label: "PERSON_PLURAL",
+        icon: "users",
         action: "NAVIGATION",
-        actionPayload: { path: "admin/organizations" },
+        actionPayload: { path: "admin/persons" },
       },
       {
         id: "development_admin.SystemApplication",
@@ -24,6 +23,14 @@ export const adminNavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
         action: "NAVIGATION",
         actionPayload: { path: "admin/systemapplications" },
       },
+      {
+        id: "development_admin.organizations",
+        label: "ORGANIZATION_PLURAL",
+        authority: "ORGANIZATION_ADMIN",
+        icon: "globe",
+        action: "NAVIGATION",
+        actionPayload: { path: "admin/organizations" },
+      },
       {
         id: "development_admin.organization",
         label: "Organization Info",
@@ -61,13 +68,7 @@ export const adminNavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
           },
         ],
       },
-      {
-        id: "system_admin.Person",
-        label: "PERSON_PLURAL",
-        icon: "users",
-        action: "NAVIGATION",
-        actionPayload: { path: "admin/persons" },
-      },
+
       {
         id: "system_admin.devtools",
         label: "DEVELOPMENT_TOOLS",