diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json index 154ecba5..70647a1a 100644 --- a/pmp-reactjs-ui/public/i18n/ara.json +++ b/pmp-reactjs-ui/public/i18n/ara.json @@ -611,7 +611,7 @@ }, "policyGroupList": { "policies": "السياسات", - "policyGroup":"مجموعة السياسات", + "policyGroup":"مجموعات السياسات", "authPolicy": "سياسة المصادقة", "dataSharePolicy": "سياسة مشاركة البيانات", "createPolicyGroup": "إنشاء مجموعة سياسات", @@ -622,7 +622,10 @@ "status":"حالة", "action":"فعل", "listOfPolicyGroups": "قائمة مجموعات السياسات", - "errorInPolicyGroupList": "أثناء جلب قائمة مجموعات السياسات، واجهنا خطأً." + "errorInPolicyGroupList": "أثناء جلب قائمة مجموعات السياسات، واجهنا خطأً.", + "searchPolicyGroupId": "معرف مجموعة سياسة البحث", + "searchPolicyGroupName": "البحث عن اسم مجموعة السياسات", + "searchPolicyGroupDescription": "وصف مجموعة سياسة البحث" }, "authPoliciesList": { "createAuthPolicy": "إنشاء سياسة المصادقة", diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json index 6bd5ec1c..0fb6874d 100644 --- a/pmp-reactjs-ui/public/i18n/eng.json +++ b/pmp-reactjs-ui/public/i18n/eng.json @@ -607,7 +607,7 @@ }, "policyGroupList": { "policies": "Policies", - "policyGroup":"Policy Group", + "policyGroup":"Policy Groups", "authPolicy": "Auth Policy", "dataSharePolicy": "Data Share Policy", "createPolicyGroup": "Create Policy Group", @@ -618,7 +618,10 @@ "status":"Status", "action":"Action", "listOfPolicyGroups": "List of Policy Groups", - "errorInPolicyGroupList": "While fetching policy groups list, we have encountered with an error." + "errorInPolicyGroupList": "While fetching policy groups list, we have encountered with an error.", + "searchPolicyGroupId": "Search Policy Group ID", + "searchPolicyGroupName": "Search Policy Group Name", + "searchPolicyGroupDescription": "Search Policy Group Description" }, "authPoliciesList": { "createAuthPolicy": "Create Auth Policy", diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json index bdadce15..47de4da4 100644 --- a/pmp-reactjs-ui/public/i18n/fra.json +++ b/pmp-reactjs-ui/public/i18n/fra.json @@ -610,7 +610,7 @@ }, "policyGroupList": { "policies": "Politiques", - "policyGroup":"Groupe de politiques", + "policyGroup":"Groupes de politiques", "authPolicy": "Politique d'authentification", "dataSharePolicy": "Politique de partage des données", "createPolicyGroup": "Créer un groupe de politiques", @@ -621,7 +621,10 @@ "status":"Statut", "action":"Action", "listOfPolicyGroups": "Liste des groupes de politiques", - "errorInPolicyGroupList": "Lors de la récupération de la liste des groupes de stratégies, nous avons rencontré une erreur." + "errorInPolicyGroupList": "Lors de la récupération de la liste des groupes de stratégies, nous avons rencontré une erreur.", + "searchPolicyGroupId": "ID de groupe de politiques de recherche", + "searchPolicyGroupName": "Rechercher le nom du groupe de politiques", + "searchPolicyGroupDescription": "Description du groupe de politiques de recherche" }, "authPoliciesList": { "createAuthPolicy": "Créer une politique d'authentification", diff --git a/pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js b/pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js index d982145e..7eb27ed0 100644 --- a/pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js +++ b/pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js @@ -9,6 +9,7 @@ import { getStatusCode, handleMouseClickForDropdown, getPartnerTypeDescription, + resetPageNumber, applyFilter, setPageNumberAndPageSize, onResetFilter } from "../../../utils/AppUtils"; import LoadingIcon from "../../common/LoadingIcon"; import ErrorMessage from "../../common/ErrorMessage"; @@ -83,8 +84,7 @@ function PartnersList() { queryParams.append('pageSize', pageSize); //reset page number to 0 if filter applied or page number is out of bounds - const totalNumberOfPages = Math.ceil(totalRecords / pageSize); - const effectivePageNo = pageNo > totalNumberOfPages || resetPageNo ? 0 : pageNo; + const effectivePageNo = resetPageNumber(totalRecords, pageNo, pageSize, resetPageNo); queryParams.append('pageNo', effectivePageNo); setResetPageNo(false); @@ -129,20 +129,11 @@ function PartnersList() { }, [sortFieldName, sortType, pageNo, pageSize, filters]); const onApplyFilter = (filters) => { - console.log(filters) - setIsFilterApplied(true); - setResetPageNo(true); - setTriggerServerMethod(true); - setFilters(filters); + applyFilter(filters, setIsFilterApplied, setResetPageNo, setTriggerServerMethod, setFilters); }; const getPaginationValues = (recordsPerPage, pageIndex) => { - // console.log(recordsPerPage, pageIndex); - if (pageNo !== pageIndex || pageSize !== recordsPerPage) { - setPageNo(pageIndex); - setPageSize(recordsPerPage); - setTriggerServerMethod(true); - } + setPageNumberAndPageSize(recordsPerPage, pageIndex, pageNo, setPageNo, pageSize, setPageSize, setTriggerServerMethod); } const viewPartnerDetails = (selectedPartnerData) => { @@ -181,10 +172,6 @@ function PartnersList() { backArrowIcon: "!mt-[9%]", }; - const onResetFilter = () => { - window.location.reload(); - }; - const showDeactivatePartner = (selectedPartnerdata) => { if (selectedPartnerdata.isActive === true) { const request = createRequest({ diff --git a/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupList.js b/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupList.js index 585b2406..31ce214a 100644 --- a/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupList.js +++ b/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupList.js @@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { getUserProfile } from '../../../services/UserProfileService'; import { - isLangRTL, formatDate, handleMouseClickForDropdown, onPressEnterKey, createRequest, getPolicyManagerUrl, handleServiceErrors + isLangRTL, formatDate, handleMouseClickForDropdown, onPressEnterKey, createRequest, getPolicyManagerUrl, + handleServiceErrors, resetPageNumber, applyFilter, setPageNumberAndPageSize, onResetFilter } from '../../../utils/AppUtils'; import ErrorMessage from '../../common/ErrorMessage'; import LoadingIcon from "../../common/LoadingIcon"; @@ -16,6 +17,7 @@ import viewIcon from "../../../svg/view_icon.svg"; import deactivateIcon from "../../../svg/deactivate_icon.svg"; import Pagination from '../../common/Pagination.js'; import { HttpService } from '../../../services/HttpService.js'; +import PolicyGroupListFilter from './PolicyGroupListFilter.js'; function PolicyGroupList() { const navigate = useNavigate(''); @@ -43,6 +45,13 @@ function PolicyGroupList() { const [tableDataLoaded, setTableDataLoaded] = useState(true); const [totalRecords, setTotalRecords] = useState(0); const [resetPageNo, setResetPageNo] = useState(false); + const [isFilterApplied, setIsFilterApplied ] = useState(false); + const [filters, setFilters] = useState({ + id: null, + name: null, + desc: null, + status: null, + }); const submenuRef = useRef([]); useEffect(() => { @@ -61,12 +70,14 @@ function PolicyGroupList() { useEffect(() => { const fetchData = async () => { //reset page number to 0 if filter applied or page number is out of bounds - const totalNumberOfPages = Math.ceil(totalRecords / pageSize); - const effectivePageNo = pageNo > totalNumberOfPages || resetPageNo ? 0 : pageNo; + const effectivePageNo = resetPageNumber(totalRecords, pageNo, pageSize, resetPageNo); setResetPageNo(false); + // filter + let filterRequest = getFiltersRequest(); + const request = createRequest ({ - filters: [], + filters: filterRequest, sort: [{sortField : sortFieldName, sortType: sortType}], pagination: { pageStart: effectivePageNo, @@ -86,7 +97,8 @@ function PolicyGroupList() { if (responseData && responseData.response) { const resData = responseData.response.data; setTotalRecords(responseData.response.totalRecord); - setPolicyGroupList(resData); + if (resData !== null) setPolicyGroupList(resData); + else setPolicyGroupList([]); } else { handleServiceErrors(responseData, setErrorCode, setErrorMsg); } @@ -102,15 +114,60 @@ function PolicyGroupList() { } } fetchData(); - }, [sortFieldName, sortType, pageNo, pageSize]); + }, [sortFieldName, sortType, pageNo, pageSize, filters]); - const getPaginationValues = (recordsPerPage, pageIndex) => { - // console.log(recordsPerPage, pageIndex); - if (pageNo !== pageIndex || pageSize !== recordsPerPage) { - setPageNo(pageIndex); - setPageSize(recordsPerPage); - setTriggerServerMethod(true); + const getFiltersRequest = () => { + let filtersArr = []; + if (filters.id) { + let addFilter = { + value: filters.id, + columnName: "id", + type: "contains" + } + filtersArr.push(addFilter); + } + if (filters.name) { + let addFilter = { + value: filters.name, + columnName: "name", + type: "contains" + } + filtersArr.push(addFilter); + } + if (filters.desc) { + let addFilter = { + value: filters.desc, + columnName: "desc", + type: "contains" + } + filtersArr.push(addFilter); + } + if (filters.status) { + let addFilter = {}; + if (filters.status === "active") { + addFilter = { + value: "true", + columnName: "isActive", + type: "equals" + } + } else if (filters.status === "deactivated") { + addFilter = { + value: "false", + columnName: "isActive", + type: "equals" + } + } + filtersArr.push(addFilter); } + return filtersArr + }; + + const onApplyFilter = (filters) => { + applyFilter(filters, setIsFilterApplied, setResetPageNo, setTriggerServerMethod, setFilters); + }; + + const getPaginationValues = (recordsPerPage, pageIndex) => { + setPageNumberAndPageSize(recordsPerPage, pageIndex, pageNo, setPageNo, pageSize, setPageSize, setTriggerServerMethod); } const createPolicyGroup = () => { @@ -121,10 +178,6 @@ function PolicyGroupList() { setErrorMsg(""); }; - const onResetFilter = () => { - window.location.reload(); - }; - const viewPolicyGroupDetails = (policyGroup) => { }; @@ -158,6 +211,39 @@ function PolicyGroupList() { loadingDiv: "!py-[20%]" } + const renderNoData = () => ( + <> +
+
+
+
{t('policyGroupList.policyGroupId')}
+
{t('policyGroupList.policyGroupName')}
+
{t('policyGroupList.policyGroupDescription')}
+
{t('policyGroupList.createdDate')}
+
{t('policyGroupList.status')}
+
{t('policyGroupList.action')}
+
+
+ +
+ +
+
+ {/* Ensure rectangleGrid has a valid import path and alt text for accessibility */} + No data available icon + {isFilterApplied ? +

{t("partnerList.noData")}

+ : + + } +
+
+ + ); + return (
{ !dataLoaded && ( @@ -171,7 +257,7 @@ function PolicyGroupList() {
- {policyGroupList.length > 0 ? + { isFilterApplied || policyGroupList.length > 0 ? @@ -186,33 +272,9 @@ function PolicyGroupList() { activeDataSharePolicy={activeDataSharePolicy} setActiveDataSharePolicy={setActiveDataSharePolicy}> - { policyGroupList.length === 0 - ? ( + { !isFilterApplied && policyGroupList.length === 0 ? (
- { activePolicyGroup && ( -
-
-
{t('policyGroupList.policyGroupId')}
-
{t('policyGroupList.policyGroupName')}
-
{t('policyGroupList.policyGroupDescription')}
-
{t('policyGroupList.createdDate')}
-
{t('policyGroupList.status')}
-
{t('policyGroupList.action')}
-
-
- )} -
-
-
- - {activePolicyGroup && - () - } -
-
+ {renderNoData()}
) : (
@@ -224,77 +286,77 @@ function PolicyGroupList() { setFilter={setFilter} />
+ {filter && ( + + )} + {!tableDataLoaded && } + {tableDataLoaded && isFilterApplied && policyGroupList.length === 0 ? renderNoData() : ( <>
- {!tableDataLoaded && - - } - {tableDataLoaded && policyGroupList.length !== 0 && ( - - - - {tableHeaders.map((header, index) => { - return ( - - ); - })} - - - - {policyGroupList.map((policyGroup, index) => { +
-
- {t(header.headerNameKey)} - {header.id !== "action" && ( - - )} -
-
+ + + {tableHeaders.map((header, index) => { return ( - - - - - - - - + ); })} - -
policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{policyGroup.id} policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{policyGroup.name} policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{policyGroup.desc} policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{formatDate(policyGroup.crDtimes, "dateTime", false)} policyGroup.isActive && viewPolicyGroupDetails(policyGroup)}> -
- {policyGroup.isActive ? t('statusCodes.activated') : t('statusCodes.deactivated')} -
- 		-
(submenuRef.current[index] = el)}> -

setViewPolicyGroupId(index === viewPolicyGroupId ? null : index)} className={`font-semibold mb-0.5 cursor-pointer text-center`} - tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => setViewPolicyGroupId(index === viewPolicyGroupId ? null : index))}> - ... -

- {viewPolicyGroupId === index && ( -
-
viewPolicyGroupDetails(policyGroup)} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => viewPolicyGroupDetails(policyGroup))}> -

{t("partnerList.view")}

- -
-
-
showDeactivatePolicyGroup(policyGroup)} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => showDeactivatePolicyGroup(policyGroup))}> -

{t("partnerList.deActivate")}

- -
-
- )} -
-
+
+ {t(header.headerNameKey)} + {header.id !== "action" && ( + + )} +
+
- )} + + + + {policyGroupList.map((policyGroup, index) => { + return ( + + policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{policyGroup.id} + policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{policyGroup.name} + policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{policyGroup.desc} + policyGroup.isActive && viewPolicyGroupDetails(policyGroup)} className="px-2 break-all">{formatDate(policyGroup.crDtimes, "dateTime", false)} + policyGroup.isActive && viewPolicyGroupDetails(policyGroup)}> +
+ {policyGroup.isActive ? t('statusCodes.activated') : t('statusCodes.deactivated')} +
+ + +
(submenuRef.current[index] = el)}> +

setViewPolicyGroupId(index === viewPolicyGroupId ? null : index)} className={`font-semibold mb-0.5 cursor-pointer text-center`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => setViewPolicyGroupId(index === viewPolicyGroupId ? null : index))}> + ... +

+ {viewPolicyGroupId === index && ( +
+
viewPolicyGroupDetails(policyGroup)} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => viewPolicyGroupDetails(policyGroup))}> +

{t("partnerList.view")}

+ +
+
+
showDeactivatePolicyGroup(policyGroup)} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => showDeactivatePolicyGroup(policyGroup))}> +

{t("partnerList.deActivate")}

+ +
+
+ )} +
+ + + ); + })} + +
+ )}
) } diff --git a/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupListFilter.js b/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupListFilter.js new file mode 100644 index 00000000..51660e16 --- /dev/null +++ b/pmp-reactjs-ui/src/pages/admin/policyManager/PolicyGroupListFilter.js @@ -0,0 +1,107 @@ +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"; +import { isLangRTL } from '../../../utils/AppUtils'; +import { getUserProfile } from '../../../services/UserProfileService'; + +function PolicyGroupListFilter({ onApplyFilter }) { + const { t } = useTranslation(); + const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); + const [isFilterActive, setIsFilterActive] = useState(false); + const [status, setStatus] = useState([]); + const [statusDropdownData, setStatusDropdownData] = useState([ + { status: 'active' }, + { status: 'deactivated' } + ]); + const [filters, setFilters] = useState({ + id: "", + name: "", + desc: "", + status: "", + }); + + useEffect(() => { + const fetchData = async () => { + setStatus( + createDropdownData("status", "", true, statusDropdownData, t, t("partnerList.selectStatus")) + ); + }; + + fetchData(); + }, [t]); + + const onFilterChangeEvent = (fieldName, selectedFilter) => { + setIsFilterActive(true); + setFilters((prevFilters) => ({ + ...prevFilters, + [fieldName]: selectedFilter + })); + }; + + const areFiltersEmpty = () => { + return !isFilterActive && Object.values(filters).every(value => value === ""); + }; + + const styles = { + dropdownButton: "min-w-64", + }; + + const styleSet = { + inputField: "min-w-64 w-auto", + }; + + return ( +
+ + + + +
+ +
+
+ ); + +} +export default PolicyGroupListFilter; \ No newline at end of file diff --git a/pmp-reactjs-ui/src/utils/AppUtils.js b/pmp-reactjs-ui/src/utils/AppUtils.js index 8cabebe7..2384bfdf 100644 --- a/pmp-reactjs-ui/src/utils/AppUtils.js +++ b/pmp-reactjs-ui/src/utils/AppUtils.js @@ -425,4 +425,31 @@ export const downloadCertificate = (certificateData, fileName) => { // Cleanup window.URL.revokeObjectURL(url); document.body.removeChild(link); +}; + +export const resetPageNumber = (totalRecords, pageNo, pageSize, resetPageNo) => { + const totalNumberOfPages = Math.ceil(totalRecords / pageSize); + const effectivePageNo = pageNo > totalNumberOfPages || resetPageNo ? 0 : pageNo; + return effectivePageNo; +}; + +export const applyFilter = (filters, setIsFilterApplied, setResetPageNo, setTriggerServerMethod, setFilters) => { + // console.log(filters) + setIsFilterApplied(true); + setResetPageNo(true); + setTriggerServerMethod(true); + setFilters(filters); +}; + +export const setPageNumberAndPageSize = (recordsPerPage, pageIndex, pageNo, setPageNo, pageSize, setPageSize, setTriggerServerMethod) => { + // console.log(recordsPerPage, pageIndex); + if (pageNo !== pageIndex || pageSize !== recordsPerPage) { + setPageNo(pageIndex); + setPageSize(recordsPerPage); + setTriggerServerMethod(true); + } +}; + +export const onResetFilter = () => { + window.location.reload(); }; \ No newline at end of file