@asaleh37/ui-base 25.12.122 → 25.12.171

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

@@ -0,0 +1,347 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+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";
+import ChangePasswordPanel from "./ChangePasswordPanel";
+
+const OrgProvidedPersonGrid: 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({
+    commonStoreKey: "persons",
+    setData: setData,
+  });
+  const [selectedRecord, setSelectedRecord] = useState<any>(null);
+  const {
+    Window: OrganizationMembersWindow,
+    setWindowState: setOrganizationMemberWindowState,
+  } = useWindow({
+    windowTitle: "Organizations Membership",
+    windowIcon: "globe",
+  });
+  const {
+    Window: OrganizationMemberRolesWindow,
+    setWindowState: setOrganizationMemberRolesWindowState,
+  } = useWindow({
+    windowIcon: "tag",
+    windowTitle: "Organization Member Roles",
+    width: "50%",
+  });
+  const {
+    Window: ChangePasswordWindow,
+    setWindowState: setChangePasswordWindow,
+  } = useWindow({
+    windowIcon: "key",
+    windowTitle: "Change Password",
+    width: "fit-content",
+    height: "fit-content",
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "id",
+        fieldName: "id",
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        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: "Image",
+        fieldName: "custom",
+        fieldType: "custom",
+        gridProps: {
+          muiProps: {
+            align: "center",
+            headerAlign: "center",
+            renderCell: (params) => {
+              return (
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%",
+                  }}
+                >
+                  <AttachmentImageViewer
+                    showAsAvatar={true}
+                    attachmentCode="EMPLOYEE_PHOTOS"
+                    refKey={params.id + ""}
+                  />
+                </Box>
+              );
+            },
+          },
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Employee Number",
+        fieldName: "employeeNumber",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_EMPLOYEE_AR_NAME",
+        fieldName: "employeeArName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_EMPLOYEE_EN_NAME",
+        fieldName: "employeeEnName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_EMAIL",
+        fieldName: "email",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_MOBILE_NUMBER",
+        fieldName: "mobileNumber",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Division Code",
+        fieldName: "orgDivisionCode",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Division En Name",
+        fieldName: "orgDivisionEngName",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Division Ar Name",
+        fieldName: "orgDivisionArbName",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Department Code",
+        fieldName: "orgDepartmentCode",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Department En Name",
+        fieldName: "orgDepartmentEngName",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Department Ar Name",
+        fieldName: "orgDepartmentArbName",
+        fieldType: "text",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Section Code",
+        fieldName: "orgSectionCode",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Section En Name",
+        fieldName: "orgSectionEngName",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Section Ar Name",
+        fieldName: "orgSectionArbName",
+        fieldType: "text",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Subsection Code",
+        fieldName: "orgSubsectionCode",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Subsection En Name",
+        fieldName: "orgSubsectionEngName",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Subsection Ar Name",
+        fieldName: "orgSubsectionArbName",
+        fieldType: "text",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Rank Code",
+        fieldName: "orgRankCode",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Rank En Name",
+        fieldName: "orgRankEngName",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Rank Ar Name",
+        fieldName: "orgRankArbName",
+        fieldType: "text",
+      },
+    },
+  ];
+
+  return (
+    <>
+      <OrganizationMemberRolesWindow>
+        <OrgMemberRoleForm
+          selectedRecord={selectedRecord}
+          closeModalFn={() => {
+            setOrganizationMemberRolesWindowState(false);
+          }}
+        />
+      </OrganizationMemberRolesWindow>
+      <OrganizationMembersWindow>
+        <OrganizationMemberGrid selectedPerson={selectedPerson} />
+      </OrganizationMembersWindow>
+      <TemplateGrid
+        attachment={{ attachmentCode: "EMPLOYEE_PHOTOS" }}
+        apiActions={apiActions}
+        data={data}
+        setData={setData}
+        editMode={{
+          editMode: "none",
+        }}
+        formElements={formElements}
+        keyColumnName={"id"}
+        gridTitle="PERSON_PLURAL"
+        rowActions={[
+          {
+            icon: "globe",
+            label: "User Organizations",
+            actionFn: async (data) => {
+              setSelectedPerson(data);
+              setOrganizationMemberWindowState(true);
+            },
+          },
+        ]}
+        girdIcon="users"
+      />
+    </>
+  );
+};
+
+export default OrgProvidedPersonGrid;

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

@@ -5,6 +5,7 @@ import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTy
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import OrgMemberRoleForm from "./OrgMemberRoleForm";
+import { AppInfo } from "../../../redux/features/common/AppInfoSlice";
 
 type OrganizationMemberGridProps = {
   selectedPerson: any;
@@ -12,6 +13,7 @@ type OrganizationMemberGridProps = {
 const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
   props
 ) => {
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const [selectedRecord, setSelectedRecord] = useState<any>(null);
   const {
     Window: OrganizationMemberRolesWindow,
@@ -65,7 +67,7 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
       type: "field",
       mode: "props",
       props: {
-        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_ID",
+        fieldLabel: "Organization",
         fieldName: "organizationId",
         required: true,
         fieldType: "combobox",
@@ -74,57 +76,61 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
         optionDisplayField: "organizationEnName",
       },
     },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_RANK_ID",
-        fieldName: "organizationRankId",
-        required: false,
-        fieldType: "combobox",
-        options: SystemOrganizationRanks,
-        optionValueField: "id",
-        optionDisplayField: "rankDisplay",
+  ];
+
+  if (appInfo?.isUserProfileManaged) {
+    formElements.push(
+      {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_RANK_ID",
+          fieldName: "organizationRankId",
+          required: false,
+          fieldType: "combobox",
+          options: SystemOrganizationRanks,
+          optionValueField: "id",
+          optionDisplayField: "rankDisplay",
+        },
       },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_UNIT_ID",
-        fieldName: "organizationUnitId",
-        required: false,
-        fieldType: "combobox",
-        options: SystemOrganizationUnits,
-        optionValueField: "id",
-        optionDisplayField: "fullPath",
+      {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_UNIT_ID",
+          fieldName: "organizationUnitId",
+          required: false,
+          fieldType: "combobox",
+          options: SystemOrganizationUnits,
+          optionValueField: "id",
+          optionDisplayField: "fullPath",
+        },
       },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "Membership number",
-        fieldName: "organizationMembershipNumber",
-        fieldType: "text",
+      {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: "Membership number",
+          fieldName: "organizationMembershipNumber",
+          fieldType: "text",
+        },
       },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        hidden: true,
-        gridProps: {
+      {
+        type: "field",
+        mode: "props",
+        props: {
           hidden: true,
+          gridProps: {
+            hidden: true,
+          },
+          fieldLabel: "ORGANIZATION_MEMBER_PERSON_ID",
+          fieldName: "personId",
+          required: false,
+          fieldType: "number",
         },
-        fieldLabel: "ORGANIZATION_MEMBER_PERSON_ID",
-        fieldName: "personId",
-        required: false,
-        fieldType: "number",
-      },
-    },
-  ];
-
+      }
+    );
+  }
   return (
     <>
       <OrganizationMemberRolesWindow>
@@ -152,7 +158,10 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
             },
           },
         ]}
-        gridLoadParametersValues={{ personId: props.selectedPerson.id }}
+        gridLoadParametersValues={{
+          personId: props.selectedPerson.id,
+          employeeNumber: props.selectedPerson.employeeNumber,
+        }}
         keyColumnName={"id"}
         gridTitle="ORGANIZATION_MEMBER_PLURAL"
         girdIcon="table-cells"
@@ -160,7 +169,12 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
           isEnabled: true,
           authority: "ORGANIZATION_MEMBER_EDIT",
           preActionValidation: async (data) => {
-            data.personId = props.selectedPerson.id;
+            if (appInfo?.isUserProfileManaged) {
+              data.personId = props.selectedPerson.id;
+            } else {
+              data.organizationMembershipNumber =
+                props.selectedPerson.employeeNumber;
+            }
             return true;
           },
         }}