MOSIP:36498- UI Development: Server Side Filter (#853)

Signed-off-by: sudeep <[email protected]>

pmp-reactjs-ui/public/i18n/ara.json

@@ -568,7 +568,13 @@
         "selectEmailAddress": "حدد عنوان البريد الإلكتروني",
         "selectPolicyGroup": "حدد مجموعة السياسات",
         "selectStatus": "حدد الحالة",
-       "errorInPartnersList": "أثناء جلب تفاصيل الشركاء، واجهنا خطأً."
+        "errorInPartnersList": "أثناء جلب تفاصيل الشركاء، واجهنا خطأً.",
+        "selectCertUploadStatus": "حدد الشهادة. حالة التحميل",
+        "applyFilter": "تطبيق الفلتر",
+        "searchPartnerId": "معرف شريك البحث",
+        "searchOrganisation": "منظمة البحث",
+        "searchEmailAddress": "بحث في عنوان البريد الإلكتروني",
+        "searchPolicyGroup": "مجموعة سياسات البحث"
     },
     "viewPartnerDetails": {
         "viewPartnerDetails": "عرض تفاصيل الشريك",

pmp-reactjs-ui/public/i18n/eng.json

@@ -564,7 +564,13 @@
         "selectEmailAddress": "Select Email Address",
         "selectPolicyGroup": "Select Policy Group",
         "selectStatus": "Select Status",
-       "errorInPartnersList": "While fetching partners details, we have encountered with an error."
+        "errorInPartnersList": "While fetching partners details, we have encountered with an error.",
+        "selectCertUploadStatus": "Select Cert. Upload Status",
+        "applyFilter": "Apply Filter",
+        "searchPartnerId": "Search Partner ID",
+        "searchOrganisation": "Search Organisation",
+        "searchEmailAddress": "Search Email Address",
+        "searchPolicyGroup": "Search Policy Group"
     },
     "viewPartnerDetails": {
         "viewPartnerDetails": "View Partner Details",

pmp-reactjs-ui/public/i18n/fra.json

@@ -568,7 +568,13 @@
         "selectEmailAddress": "Sélectionnez l'adresse e-mail",
         "selectPolicyGroup":"Sélectionnez un groupe de stratégies",
         "selectStatus":"Sélectionnez le statut",
-       "errorInPartnersList": "Lors de la récupération des détails des partenaires, nous avons rencontré une erreur."
+        "errorInPartnersList": "Lors de la récupération des détails des partenaires, nous avons rencontré une erreur.",
+        "selectCertUploadStatus": "Sélectionnez Cert. Statut de téléchargement",
+        "applyFilter": "Appliquer le filtre",
+        "searchPartnerId": "ID du partenaire de recherche",
+        "searchOrganisation": "Rechercher une organisation",
+        "searchEmailAddress": "Rechercher une adresse e-mail",
+        "searchPolicyGroup": "Groupe de stratégies de recherche"
      },
      "viewPartnerDetails": {
         "viewPartnerDetails": "Afficher les détails du partenaire",

pmp-reactjs-ui/src/pages/admin/partners/PartnersListFilter.js

@@ -1,164 +1,122 @@
 import { useState, useEffect } from "react";
 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";
 
 function PartnerListFilter({ filteredPartnersData, onFilterChange }) {
-  console.log(filteredPartnersData)
   const { t } = useTranslation();
-  const [partnerIdData, setPartnerIdData] = useState([]);
-  const [partnerTypeData, setPartnerTypeData] = useState([]);
-  const [organisationNameData, setOrganisationNameData] = useState([]);
-  const [emailIdData, setEmailIdData] = useState([]);
-  const [policyGroupData, setPolicyGroupData] = useState([]);
-  const [statusData, setStatusData] = useState([]);
 
-  console.log(partnerIdData)
-  console.log(partnerTypeData)
-  useEffect(() => {
-    const fetchData = async () => {
-      setPartnerIdData(
-        createDropdownData(
-          "partnerID",
-          "",
-          true,
-          filteredPartnersData,
-          t,
-          t("partnerList.selectPartnerId")
-        )
-      );
-
-      setPartnerTypeData(
-        createDropdownData(
-          "partnerType",
-          "",
-          true,
-          filteredPartnersData,
-          t,
-          t("partnerList.selectPartnerType")
-        )
-      );
-
-      setOrganisationNameData(
-        createDropdownData(
-          "orgName",
-          "",
-          true,
-          filteredPartnersData,
-          t,
-          t("partnerList.selectOrganisation")
-        )
-      );
+  const [partnerType, setPartnerType] = useState([]);
+  const [status, setStatus] = useState([]);
+  const [certUploadStatus, setCertUploadStatus] = useState([]);
+  const [filters, setFilters] = useState({
+    partnerType: "",
+    status: "",
+    orgName: "",
+    emailID: "",
+    certUploadStatus: "",
+    policyGroup: ""
+  });
 
-      setEmailIdData(
-        createDropdownData(
-          "emailID",
-          "",
-          true,
-          filteredPartnersData,
-          t,
-          t("partnerList.selectEmailAddress")
-        )
-      );
-
-      setPolicyGroupData(
-        createDropdownData(
-          "policyGroup",
-          "",
-          true,
-          filteredPartnersData,
-          t,
-          t("partnerList.selectPolicyGroup")
-        )
-      );
-
-      setStatusData(
-        createDropdownData(
-          "status",
-          "",
-          true,
-          filteredPartnersData,
-          t,
-          t("rootTrustCertificate.selectStatus")
-        )
-      );
-    };
-    fetchData();
-  }, [t]);
+  useEffect(() => {
+    setPartnerType(
+      createDropdownData("partnerType", "", true, filteredPartnersData, t, t("partnerList.selectPartnerType"))
+    );
+    setStatus(
+      createDropdownData("status", "", true, filteredPartnersData, t, t("partnerList.selectStatus"))
+    );
+    setCertUploadStatus(
+      createDropdownData("certificateUploadStatus", "", true, filteredPartnersData, t, t("partnerList.selectCertUploadStatus"))
+    );
+  }, [filteredPartnersData, t]);
 
   const onFilterChangeEvent = (fieldName, selectedFilter) => {
-    onFilterChange(fieldName, selectedFilter);
+    setFilters((prevFilters) => ({
+      ...prevFilters,
+      [fieldName]: selectedFilter
+    }));
   };
 
   const styles = {
     dropdownButton: "!text-[#343434] min-w-72",
   };
 
   return (
-    <>
-      <div className="flex w-full p-2 justify-start bg-[#F7F7F7] flex-wrap">
-        <DropdownComponent
-          fieldName="partnerID"
-          dropdownDataList={partnerIdData}
-          onDropDownChangeEvent={onFilterChangeEvent}
-          fieldNameKey="partnerList.partnerId"
-          placeHolderKey="partnerList.selectPartnerId"
-          styleSet={styles}
-          isPlaceHolderPresent={true}
-          id="partner_id_filter"
-        ></DropdownComponent>
-        <DropdownComponent
-          fieldName="partnerType"
-          dropdownDataList={partnerTypeData}
-          onDropDownChangeEvent={onFilterChangeEvent}
-          fieldNameKey="partnerList.partnerType"
-          placeHolderKey="partnerList.selectPartnerType"
-          styleSet={styles}
-          isPlaceHolderPresent={true}
-          id="partner_type_filter"
-        ></DropdownComponent>
-        <DropdownComponent
-          fieldName="orgName"
-          dropdownDataList={organisationNameData}
-          onDropDownChangeEvent={onFilterChangeEvent}
-          fieldNameKey="partnerList.organisation"
-          placeHolderKey="partnerList.selectOrganisation"
-          styleSet={styles}
-          isPlaceHolderPresent={true}
-          id="partner_organisation_filter"
-        ></DropdownComponent>
-        <DropdownComponent
-          fieldName="emailID"
-          dropdownDataList={emailIdData}
-          onDropDownChangeEvent={onFilterChangeEvent}
-          fieldNameKey="partnerList.email"
-          placeHolderKey="partnerList.selectEmailAddress"
-          styleSet={styles}
-          isPlaceHolderPresent={true}
-          id="email_address_filter"
-        ></DropdownComponent>
-        <DropdownComponent
-          fieldName="policyGroup"
-          dropdownDataList={policyGroupData}
-          onDropDownChangeEvent={onFilterChangeEvent}
-          fieldNameKey="partnerList.policyGroup"
-          placeHolderKey="partnerList.selectPolicyGroup"
-          styleSet={styles}
-          isPlaceHolderPresent={true}
-          id="policy_group_filter"
-        ></DropdownComponent>
-        <DropdownComponent
-          fieldName="status"
-          dropdownDataList={statusData}
-          onDropDownChangeEvent={onFilterChangeEvent}
-          fieldNameKey="partnerList.status"
-          placeHolderKey="partnerList.selectStatus"
-          styleSet={styles}
-          isPlaceHolderPresent={true}
-          id="partner_status_filter"
-        ></DropdownComponent>
+    <div className="flex w-full p-2 justify-start bg-[#F7F7F7] flex-wrap">
+      <TextInputComponent
+        fieldName="partnerId"
+        onTextChange={onFilterChangeEvent}
+        fieldNameKey="partnerList.partnerId"
+        placeHolderKey="partnerList.searchPartnerId"
+        styleSet={styles}
+        id="partner_id_filter"
+      />
+      <DropdownComponent
+        fieldName="partnerType"
+        dropdownDataList={partnerType}
+        onDropDownChangeEvent={onFilterChangeEvent}
+        fieldNameKey="partnerList.partnerType"
+        placeHolderKey="partnerList.selectPartnerType"
+        styleSet={styles}
+        isPlaceHolderPresent={true}
+        id="partner_type_filter"
+      />
+      <TextInputComponent
+        fieldName="orgName"
+        onTextChange={onFilterChangeEvent}
+        fieldNameKey="partnerList.organisation"
+        placeHolderKey="partnerList.searchPartnerId"
+        styleSet={styles}
+        id="partner_organisation_filter"
+      />
+      <TextInputComponent
+        fieldName="policyGroup"
+        onTextChange={onFilterChangeEvent}
+        fieldNameKey="partnerList.policyGroup"
+        placeHolderKey="partnerList.searchPolicyGroup"
+        styleSet={styles}
+        id="policy_group_filter"
+      />
+      <TextInputComponent
+        fieldName="emailID"
+        onTextChange={onFilterChangeEvent}
+        fieldNameKey="partnerList.email"
+        placeHolderKey="partnerList.searchEmailAddress"
+        styleSet={styles}
+        id="email_address_filter"
+      />
+      <DropdownComponent
+        fieldName="certUploadStatus"
+        dropdownDataList={certUploadStatus}
+        onDropDownChangeEvent={onFilterChangeEvent}
+        fieldNameKey="partnerList.certUploadStatus"
+        placeHolderKey="partnerList.selectCertUploadStatus"
+        styleSet={styles}
+        isPlaceHolderPresent={true}
+        id="cert_upload_status_filter"
+      />
+      <DropdownComponent
+        fieldName="status"
+        dropdownDataList={status}
+        onDropDownChangeEvent={onFilterChangeEvent}
+        fieldNameKey="partnerList.status"
+        placeHolderKey="partnerList.selectStatus"
+        styleSet={styles}
+        isPlaceHolderPresent={true}
+        id="status_filter"
+      />
+      <div className="ml-auto mt-6 mr-6">
+        <button
+          id="apply_filter__btn"
+          onClick={() => onFilterChange(filters)}
+          type="button"
+          className="h-10 text-sm font-semibold px-7 text-white bg-tory-blue rounded-md ml-6"
+        >
+          {t("partnerList.applyFilter")}
+        </button>
       </div>
-    </>
+    </div>
   );
 }
 

pmp-reactjs-ui/src/pages/common/fields/TextInputComponent.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, onTextChange, styleSet, id }) {
+    const { t } = useTranslation();
+    const [inputValue, setInputValue] = useState('');
+
+    const handleInputChange = (event) => {
+        const newValue = event.target.value;
+        setInputValue(newValue);
+        onTextChange(fieldName, newValue);
+    };
+
+    return (
+        <div className={`ml-4 mb-2 ${(styleSet && styleSet.outerDiv) ? styleSet.outerDiv : ''}`}>
+            <label className={`flex items-center text-dark-blue text-sm mb-2 ${(styleSet && styleSet.inputLabel) ? styleSet.inputLabel : ''}`}>
+                <p className={`font-semibold`}>{t(fieldNameKey)}</p>
+            </label>
+
+            <input
+                id={id}
+                type="text"
+                value={inputValue}
+                onChange={handleInputChange}
+                placeholder={t(placeHolderKey)}
+                className={`w-full min-w-72 px-2 py-2 border border-[#707070] rounded-[4px] text-[15px] 
+                    ${styleSet && styleSet.inputField ? styleSet.inputField : ''} focus:outline-none `}
+            />
+        </div>
+    );
+}
+
+export default TextInputComponent;