MOSIP:36498- UI Development: Server Side Filter

Signed-off-by: sudeep <[email protected]>
mosip · Oct 22, 2024 · 888bee1 · 888bee1
1 parent 87beff1
commit 888bee1
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 42 deletions.
diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
@@ -145,7 +145,8 @@
         "sdkPartner": "شريك SDK",
         "printPartner": "شريك الطباعة",
         "internalPartner": "الشريك الداخلي",
-        "manualAdjudication": "التحكيم اليدوي"
+        "manualAdjudication": "التحكيم اليدوي",
+        "partnerAdmin": "مشرف الشريك"
     },
     "statusCodes": {
         "approved": "موافقة",

diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
@@ -145,7 +145,8 @@
         "sdkPartner": "SDK Partner",
         "printPartner": "Print Partner",
         "internalPartner": "Internal Partner",
-        "manualAdjudication": "Manual Adjudication"
+        "manualAdjudication": "Manual Adjudication",
+        "partnerAdmin": "Partner Admin"
     },
     "statusCodes": {
         "approved": "Approved",

diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
@@ -145,7 +145,8 @@
         "sdkPartner": "Partenaire SDK",
         "printPartner": "Partenaire d'impression",
         "internalPartner": "Partenaire interne",
-        "manualAdjudication": "Arbitrage manuelle"
+        "manualAdjudication": "Arbitrage manuelle",
+        "partnerAdmin": "Administrateur partenaire"
     },
     "statusCodes": {
         "approved": "Approuvée",

diff --git a/pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js b/pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js
@@ -8,6 +8,7 @@ import {
   handleServiceErrors,
   getStatusCode,
   handleMouseClickForDropdown,
+  createRequest
 } from "../../../utils/AppUtils";
 import LoadingIcon from "../../common/LoadingIcon";
 import ErrorMessage from "../../common/ErrorMessage";
@@ -29,6 +30,9 @@ function PartnersList() {
   const [dataLoaded, setDataLoaded] = useState(false);
   const [partnersData, setPartnersData] = useState([]);
   const [filteredPartnersData, setFilteredPartnersData] = useState([]);
+  const [partnerFiltersDropdownData, setPartnerFiltersDropdownData] = useState([]);
+  const [certUploadStatusDropdownData, setCertUploadStatusDropdownData] = useState(['uploaded','not_uploaded']);
+  const [statusDropdownData, setStatusDropdownData] = useState(['active','deactivated']);
   const [order, setOrder] = useState("ASC");
   const [activeSortAsc, setActiveSortAsc] = useState("");
   const [activeSortDesc, setActiveSortDesc] = useState("");
@@ -98,8 +102,55 @@ function PartnersList() {
       }
     }
     fetchData();
+    setFiltersDropdownData();
   }, [sortFieldName, sortType, pageNo, pageSize]);
 
+  async function fetchPartnerTypeData() {
+    const request = createRequest(
+      { "filters": [], "pagination": { "pageFetch": 100, "pageStart": 0 }, "sort": [] }
+    );
+
+    try {
+      const response = await HttpService.post(getPartnerManagerUrl(`/partners/partnertype/search`, process.env.NODE_ENV), request);
+      if (response) {
+        const responseData = response.data;
+        if (responseData && responseData.response) {
+          const response = responseData.response.data;
+          return response;
+        } else {
+          handleServiceErrors(responseData, setErrorCode, setErrorMsg);
+          return [];
+        }
+      } else {
+        setErrorMsg(t('partnerList.errorInPartnersList'));
+        return [];
+      }
+    } catch (err) {
+      setErrorMsg(err);
+      console.log("Error fetching data: ", err);
+      return [];
+    }
+  }
+
+  async function setFiltersDropdownData() {
+    const partnerTypesDataResponse = await fetchPartnerTypeData();
+    let partnerTypes = [];
+
+    if (Array.isArray(partnerTypesDataResponse)) {
+      partnerTypes = partnerTypesDataResponse.map(partner => partner.code);
+    }
+
+    setPartnerFiltersDropdownData({
+      partnerType: partnerTypes,
+      status: statusDropdownData,
+      certificateUploadStatus: certUploadStatusDropdownData,
+    });
+  }
+
+  const onApplyFilter = (filters) => {
+    console.log('Filters sent from child:', filters);
+  };
+
   const getPaginationValues = (recordsPerPage, pageIndex) =>{
     // console.log(recordsPerPage, pageIndex);
     if(pageNo !== pageIndex || pageSize !== recordsPerPage) {
@@ -260,8 +311,8 @@ function PartnersList() {
                     <hr className="h-0.5 mt-3 bg-gray-200 border-0" />
                     {filter && (
                       <PartnerListFilter
-                        filteredPartnersData={filteredPartnersData}
-                        onFilterChange={onFilterChange}
+                        partnerFiltersDropdownData={[partnerFiltersDropdownData]}
+                        onApplyFilter={onApplyFilter}
                       />
                     )}
                     {!tableDataLoaded && <LoadingIcon styleSet={styles}></LoadingIcon>}

diff --git a/pmp-reactjs-ui/src/pages/admin/partners/PartnersListFilter.js b/pmp-reactjs-ui/src/pages/admin/partners/PartnersListFilter.js
@@ -3,14 +3,18 @@ import DropdownComponent from "../../common/fields/DropdownComponent.js";
 import TextInputComponent from "../../common/fields/TextInputComponent.js";
 import { useTranslation } from "react-i18next";
 import { createDropdownData } from "../../../utils/AppUtils.js";
+import { isLangRTL } from '../../../utils/AppUtils';
+import { getUserProfile } from '../../../services/UserProfileService';
 
-function PartnerListFilter({ filteredPartnersData, onFilterChange }) {
+function PartnerListFilter({ partnerFiltersDropdownData, onApplyFilter }) {
   const { t } = useTranslation();
 
   const [partnerType, setPartnerType] = useState([]);
   const [status, setStatus] = useState([]);
   const [certUploadStatus, setCertUploadStatus] = useState([]);
+  const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
   const [filters, setFilters] = useState({
+    partnerId: "",
     partnerType: "",
     status: "",
     orgName: "",
@@ -21,15 +25,15 @@ function PartnerListFilter({ filteredPartnersData, onFilterChange }) {
 
   useEffect(() => {
     setPartnerType(
-      createDropdownData("partnerType", "", true, filteredPartnersData, t, t("partnerList.selectPartnerType"))
+      createDropdownData("partnerType", "", true, partnerFiltersDropdownData, t, t("partnerList.selectPartnerType"))
     );
     setStatus(
-      createDropdownData("status", "", true, filteredPartnersData, t, t("partnerList.selectStatus"))
+      createDropdownData("status", "", true, partnerFiltersDropdownData, t, t("partnerList.selectStatus"))
     );
     setCertUploadStatus(
-      createDropdownData("certificateUploadStatus", "", true, filteredPartnersData, t, t("partnerList.selectCertUploadStatus"))
+      createDropdownData("certificateUploadStatus", "", true, partnerFiltersDropdownData, t, t("partnerList.selectCertUploadStatus"))
     );
-  }, [filteredPartnersData, t]);
+  }, [partnerFiltersDropdownData, t]);
 
   const onFilterChangeEvent = (fieldName, selectedFilter) => {
     setFilters((prevFilters) => ({
@@ -38,8 +42,12 @@ function PartnerListFilter({ filteredPartnersData, onFilterChange }) {
     }));
   };
 
+  const areFiltersEmpty = () => {
+    return Object.values(filters).every(value => value === "");
+  };
+
   const styles = {
-    dropdownButton: "!text-[#343434] min-w-72",
+    dropdownButton: "min-w-72",
   };
 
   return (
@@ -66,7 +74,7 @@ function PartnerListFilter({ filteredPartnersData, onFilterChange }) {
         fieldName="orgName"
         onTextChange={onFilterChangeEvent}
         fieldNameKey="partnerList.organisation"
-        placeHolderKey="partnerList.searchPartnerId"
+        placeHolderKey="partnerList.searchOrganisation"
         styleSet={styles}
         id="partner_organisation_filter"
       />
@@ -106,12 +114,14 @@ function PartnerListFilter({ filteredPartnersData, onFilterChange }) {
         isPlaceHolderPresent={true}
         id="status_filter"
       />
-      <div className="ml-auto mt-6 mr-6">
+      <div className={`mt-6 mr-6 ${isLoginLanguageRTL ? "mr-auto" : "ml-auto"}`}>
         <button
           id="apply_filter__btn"
-          onClick={() => onFilterChange(filters)}
+          onClick={() => onApplyFilter(filters)}
           type="button"
-          className="h-10 text-sm font-semibold px-7 text-white bg-tory-blue rounded-md ml-6"
+          disabled={areFiltersEmpty()}
+          className={`h-10 text-sm font-semibold px-7 text-white rounded-md ml-6 
+          ${areFiltersEmpty() ? 'bg-[#A5A5A5] cursor-not-allowed' : 'bg-tory-blue'}`}
         >
           {t("partnerList.applyFilter")}
         </button>

diff --git a/pmp-reactjs-ui/src/utils/AppUtils.js b/pmp-reactjs-ui/src/utils/AppUtils.js
@@ -33,7 +33,8 @@ export const getPartnerTypeDescription = (partnerType, t) => {
         "SDK_PARTNER": 'partnerTypes.sdkPartner',
         "PRINT_PARTNER": 'partnerTypes.printPartner',
         "INTERNAL_PARTNER": 'partnerTypes.internalPartner',
-        "MANUAL_ADJUDICATION": 'partnerTypes.manualAdjudication'
+        "MANUAL_ADJUDICATION": 'partnerTypes.manualAdjudication',
+        "PARTNER_ADMIN": 'partnerTypes.partnerAdmin',
     };
 
     if (partnerType) {
@@ -303,38 +304,37 @@ export const createDropdownData = (fieldName, fieldDesc, isBlankEntryRequired, d
         });
     }
     dataList.forEach(item => {
-        let alreadyAdded = false;
-        dataArr.forEach(item1 => {
-            if (item1.fieldValue === item[fieldName]) {
-                alreadyAdded = true;
-            }
-        });
-        if (!alreadyAdded) {
-            if (fieldName === "partnerType") {
-                dataArr.push({
-                    fieldCode: getPartnerTypeDescription(item[fieldName], t),
-                    fieldValue: item[fieldName]
-                });
-            } else if (fieldName === "status" || fieldName === "certificateExpiryStatus") {
-                dataArr.push({
-                    fieldCode: getStatusCode(item[fieldName], t),
-                    fieldValue: item[fieldName]
-                });
-            } else {
-                if (fieldDesc) {
+        const fieldValues = Array.isArray(item[fieldName]) ? item[fieldName] : [item[fieldName]];
+
+        fieldValues.forEach(fieldValue => {
+            let alreadyAdded = dataArr.some(item1 => item1.fieldValue === fieldValue);
+            if (!alreadyAdded) {
+                if (fieldName === "partnerType") {
                     dataArr.push({
-                        fieldCode: item[fieldName],
-                        fieldValue: item[fieldName],
-                        fieldDescription: item[fieldDesc]
+                        fieldCode: getPartnerTypeDescription(fieldValue, t),
+                        fieldValue: fieldValue
                     });
-                } else {
+                } else if (fieldName === "status" || fieldName === "certificateExpiryStatus" || fieldName === "certificateUploadStatus") {
                     dataArr.push({
-                        fieldCode: item[fieldName],
-                        fieldValue: item[fieldName]
+                        fieldCode: getStatusCode(fieldValue, t),
+                        fieldValue: fieldValue
                     });
+                } else {
+                    if (fieldDesc) {
+                        dataArr.push({
+                            fieldCode: fieldValue,
+                            fieldValue: fieldValue,
+                            fieldDescription: item[fieldDesc]
+                        });
+                    } else {
+                        dataArr.push({
+                            fieldCode: fieldValue,
+                            fieldValue: fieldValue
+                        });
+                    }
                 }
             }
-        }
+        });
     });
     return dataArr;
 }