diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json index a6a55883a..ecc7971a0 100644 --- a/pmp-reactjs-ui/public/i18n/ara.json +++ b/pmp-reactjs-ui/public/i18n/ara.json @@ -202,6 +202,29 @@ "commentBoxDesc": "اذكر الغرض من طلب عميل OIDC", "errorInCreateOIDC": "أثناء طلب عميل OIDC، واجهنا خطأ" }, + "oidcClientsList": { + "partnerId":"معرف الشريك", + "policyGroup":"مجموعة السياسات", + "policyName":"اسم السياسة", + "oidcClientName": "اسم عميل OIDC", + "createdDate":"تاريخ الإنشاء", + "status": "حالة", + "oidcClientId":"معرف عميل OIDC", + "action":"فعل", + "listOfOidcClientRequests": "قائمة طلبات عملاء OIDC", + "createOidcClient": "إنشاء عميل OIDC", + "filterBtn": "منقي", + "view": "منظر", + "edit": "يحرر", + "deActivate": "إلغاء التنشيط", + "copy": "ينسخ", + "copied": "نسخ", + "selectPartnerId":"حدد معرف الشريك", + "selectOidcClientType": "حدد عميل OIDC", + "selectPolicyGroup":"حدد مجموعة السياسات", + "selectPolicyName":"حدد اسم السياسة", + "selectStatus":"حدد الحالة" + }, "serverError": { "PMS_COR_001": "معلمة الإدخال مفقود", "PMS_PRT_002": " مجموعة السياسة غير موجود", diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json index 5d1997e03..9e3198306 100644 --- a/pmp-reactjs-ui/public/i18n/eng.json +++ b/pmp-reactjs-ui/public/i18n/eng.json @@ -206,7 +206,7 @@ "partnerId":"Partner ID", "policyGroup":"Policy Group", "policyName":"Policy Name", - "oidcClientname": "OIDC Client Name", + "oidcClientName": "OIDC Client Name", "createdDate":"Created Date", "status": "Status", "oidcClientId":"OIDC Client ID", @@ -216,7 +216,14 @@ "filterBtn": "Filter", "view": "View", "edit": "Edit", - "deActivate": "Deactivate" + "deActivate": "Deactivate", + "copy": "Copy", + "copied": "Copied!", + "selectPartnerId":"Select Partner ID", + "selectOidcClientType": "Select OIDC Client", + "selectPolicyGroup":"Select Policy Group", + "selectPolicyName":"Select Policy Name", + "selectStatus":"Select Status" }, "serverError": { "PMS_COR_001": "Missing Input Parameter", diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json index 6c110d015..af87a36a6 100644 --- a/pmp-reactjs-ui/public/i18n/fra.json +++ b/pmp-reactjs-ui/public/i18n/fra.json @@ -203,6 +203,29 @@ "commentBoxDesc": "Mentionner le but de la demande du client OIDC", "errorInCreateOIDC": "Lors de la demande du client OIDC, nous avons rencontré une erreur" }, + "oidcClientsList": { + "partnerId":"ID partenaire", + "policyGroup":"Groupe de politiques", + "policyName":"Nom de la politique", + "oidcClientName": "Nom du client OIDC", + "createdDate":"Date de création", + "status": "Statut", + "oidcClientId":"ID client OIDC", + "action":"Action", + "listOfOidcClientRequests": "Liste des demandes des clients OIDC", + "createOidcClient": "Créer un client OIDC", + "filterBtn": "Filtre", + "view": "Voir", + "edit": "Modifier", + "deActivate": "Désactiver", + "copy": "Copie", + "copied": "Copié!", + "selectPartnerId":"Sélectionnez l'ID du partenaire", + "selectOidcClientType": "Sélectionnez le client OIDC", + "selectPolicyGroup":"Sélectionnez un groupe de stratégies", + "selectPolicyName":"Sélectionnez le nom de la stratégie", + "selectStatus":"Sélectionnez le statut" + }, "serverError": { "PMS_COR_001": "Paramètre d'entrée manquant", "PMS_PRT_002": "Le groupe de stratégies n'existe pas", diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/CopyIdPopUp.js b/pmp-reactjs-ui/src/pages/authenticationServices/CopyIdPopUp.js new file mode 100644 index 000000000..64ae372a0 --- /dev/null +++ b/pmp-reactjs-ui/src/pages/authenticationServices/CopyIdPopUp.js @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { getUserProfile } from '../../services/UserProfileService'; +import { isLangRTL } from '../../utils/AppUtils'; +import close_icon from '../../svg/close_icon.svg'; + +function CopyIdPopUp({ closePopUp, policyName, partnerId }) { + const [copied, setCopied] = useState(false); + const { t } = useTranslation(); + const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); + + const copyId = () => { + setCopied(!copied); + }; + const dismiss = () => { + policyName=''; + partnerId=''; + closePopUp(false); + } + + return ( +
+
+
+
+

{policyName}

+

# {partnerId}

+
+ dismiss()} /> +
+
+
+

{t('oidcClientsList.oidcClientId')}

+

4fcqta1MRkzMnG5nEkbGPlBZmbJFRenR-sPCUWHEdsA

+ +
+
+
+ ) +} + +export default CopyIdPopUp; \ No newline at end of file diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsFilter.js b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsFilter.js new file mode 100644 index 000000000..7203df762 --- /dev/null +++ b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsFilter.js @@ -0,0 +1,110 @@ +import { useState, useEffect } from "react"; +import DropdownComponent from '../common/fields/DropdownComponent.js'; +import { useTranslation } from 'react-i18next'; +import { getStatusCode } from "../../utils/AppUtils.js"; + +function OidcClientsFilter({ filteredOidcClientsList, onFilterChange }) { + const { t } = useTranslation(); + const [partnerIdData, setPartnerIdData] = useState([]); + const [oidcClientNameData, setOidcClientNameData] = useState([]); + const [policyGroupData, setpolicyGroupData] = useState([]); + const [policyNameData, setPolicyNameData] = useState([]); + const [statusData, setStatusData] = useState([]); + + useEffect(() => { + const getData = (fieldName) => { + let dataArr = []; + dataArr.push({ + fieldCode: "", + fieldValue: "" + }); + filteredOidcClientsList.forEach(item => { + let alreadyAdded = false; + dataArr.forEach(item1 => { + if (item1.fieldValue === item[fieldName]) { + alreadyAdded = true; + } + }); + if (!alreadyAdded) { + if (fieldName === "status") { + dataArr.push({ + fieldCode: getStatusCode(item[fieldName], t), + fieldValue: item[fieldName] + }); + } else { + dataArr.push({ + fieldCode: item[fieldName], + fieldValue: item[fieldName] + }); + } + } + }); + return dataArr; + } + const fetchData = async () => { + setPartnerIdData(getData('partnerId')); + setOidcClientNameData(getData('oidcClientName')); + setpolicyGroupData(getData('policyGroup')); + setPolicyNameData(getData('policyName')); + setStatusData(getData('status')); + }; + fetchData(); + }, [filteredOidcClientsList, t]); + + const onFilterChangeEvent = (fieldName, selectedFilter) => { + onFilterChange(fieldName, selectedFilter); + } + + const styles = { + dropdownButton: "!text-[#343434]" + } + + return ( + <> +
+ + + + + + + + + + +
+ + ) +} + +export default OidcClientsFilter; \ No newline at end of file diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js index 67bcbb558..39985d526 100644 --- a/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js +++ b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js @@ -8,6 +8,8 @@ import { IconContext } from "react-icons"; // for customizing icons import backArrow from '../../svg/back_arrow.svg'; import rectangleGrid from '../../svg/rectangle_grid.svg'; import ReactPaginate from 'react-paginate'; +import CopyIdPopUp from './CopyIdPopUp'; +import OidcClientsFilter from './OidcClientsFilter'; import PoliciesFilter from '../policies/PoliciesFilter'; function OidcClientsList() { @@ -18,12 +20,21 @@ function OidcClientsList() { const [activeApiKey, setActiveApiKey] = useState(false); const [filter, setFilter] = useState(false); const [isData, setIsData] = useState(true); - + const [selectedRecordsPerPage, setSelectedRecordsPerPage] = useState(5); const [order, setOrder] = useState("ASC"); const [activeSortAsc, setActiveSortAsc] = useState(""); const [activeSortDesc, setActiveSortDesc] = useState(""); const [isDescending, setIsDescending] = useState(true); + const [showPopup, setShowPopup] = useState(false); + const [firstIndex, setFirstIndex] = useState(0); + const itemsPerPageOptions = [5, 10, 15, 20]; + const [isItemsPerPageOpen, setIsItemsPerPageOpen] = useState(false); const [viewClientId, setViewClientId] = useState(-1); + const defaultFilterQuery = { + partnerId: "", + policyGroupName: "" + }; + const [filterQuery, setFilterQuery] = useState({ ...defaultFilterQuery }); const tableValues = [ { "partnerId": "P28394091", "policyGroup": "Policy Group 01", "policyName": "Full KYC", "oidcClientName": "Client 13", "createdDate": "11/10/2025", "status": "Approved", "oidcClientId": "1" }, @@ -55,14 +66,15 @@ function OidcClientsList() { { id: "partnerId", headerNameKey: 'oidcClientsList.partnerId' }, { id: "policyGroup", headerNameKey: "oidcClientsList.policyGroup" }, { id: "policyName", headerNameKey: "oidcClientsList.policyName" }, - { id: "oidcClientName", headerNameKey: "oidcClientsList.oidcClientname" }, + { id: "oidcClientName", headerNameKey: "oidcClientsList.oidcClientName" }, { id: "createdDate", headerNameKey: "oidcClientsList.createdDate" }, { id: "status", headerNameKey: "oidcClientsList.status" }, { id: "oidcClientId", headerNameKey: "oidcClientsList.oidcClientId" }, { id: "action", headerNameKey: 'oidcClientsList.action' } ]; - - const [filteredOidcClientsList, setfilteredOidcClientsList] = useState(tableValues); + + const [oidcClientsList, setOidcClientsList] = useState(tableValues); + const [filteredOidcClientsList, setFilteredOidcClientsList] = useState(oidcClientsList); const moveToHome = () => { navigate('/partnermanagement') @@ -85,7 +97,32 @@ function OidcClientsList() { else if (status === "Deactivated") { return ("bg-[#EAECF0] text-[#525252]") } + }; + + const showCopyPopUp = (status) => { + if (status.toLowerCase() === "approved") { + setShowPopup(true); + } + }; + + //This part is related to Filter + const onFilterChange = (fieldName, selectedFilter) => { + setFilterQuery(oldFilterQuery => ({ + ...oldFilterQuery, + [fieldName]: selectedFilter + })); } + useEffect(() => { + let filteredRows = oidcClientsList; + Object.keys(filterQuery).forEach(key => { + //console.log(`${key} : ${filterQuery[key]}`); + if (filterQuery[key] !== '') { + filteredRows = filteredRows.filter(item => item[key] === filterQuery[key]); + } + }); + setFilteredOidcClientsList(filteredRows); + setFirstIndex(0); + }, [filterQuery]); //This part is related to Sorting const toggleSortDescOrder = (sortItem) => { @@ -96,7 +133,7 @@ function OidcClientsList() { const dateB = new Date(b.createdDate); return isDescending ? dateA - dateB : dateB - dateA; }); - setfilteredOidcClientsList(sortedOidcClients); + setFilteredOidcClientsList(sortedOidcClients); setOrder("DESC") setIsDescending(!isDescending); setActiveSortDesc(sortItem); @@ -106,7 +143,7 @@ function OidcClientsList() { const sortedOidcClients = [...tableValues].sort((a, b) => a[sortItem].toLowerCase() > b[sortItem].toLowerCase() ? 1 : -1 ); - setfilteredOidcClientsList(sortedOidcClients); + setFilteredOidcClientsList(sortedOidcClients); setOrder("DESC") setActiveSortDesc(sortItem); setActiveSortAsc(sortItem); @@ -122,7 +159,7 @@ function OidcClientsList() { return isDescending ? dateA - dateB : dateB - dateA; }); - setfilteredOidcClientsList(sortedOidcClients); + setFilteredOidcClientsList(sortedOidcClients); setOrder("ASC") setIsDescending(!isDescending); setActiveSortDesc(sortItem); @@ -132,7 +169,7 @@ function OidcClientsList() { const sortedOidcClients = [...tableValues].sort((a, b) => a[sortItem].toLowerCase() < b[sortItem].toLowerCase() ? 1 : -1 ); - setfilteredOidcClientsList(sortedOidcClients); + setFilteredOidcClientsList(sortedOidcClients); setOrder("ASC") setActiveSortDesc(sortItem); setActiveSortAsc(sortItem); @@ -140,6 +177,19 @@ function OidcClientsList() { } }; + //This part related to Pagination Logic + let tableRows = filteredOidcClientsList.slice(firstIndex, firstIndex + (selectedRecordsPerPage)); + + const handlePageChange = (event) => { + const newIndex = (event.selected * selectedRecordsPerPage) % filteredOidcClientsList.length; + setFirstIndex(newIndex); + }; + const changeItemsPerPage = (num) => { + setIsItemsPerPageOpen(false); + setSelectedRecordsPerPage(num); + setFirstIndex(0); + }; + return (
@@ -198,7 +248,7 @@ function OidcClientsList() { {activeOidcClient && () } @@ -210,15 +260,15 @@ function OidcClientsList() {
- {t('oidcClientsList.listOfOidcClientRequests')} + {t('oidcClientsList.listOfOidcClientRequests') + ' (' + filteredOidcClientsList.length + ")"}
- {/* {filter && - - } */} + {filter && + + + }
@@ -271,7 +321,7 @@ function OidcClientsList() { { - filteredOidcClientsList.map((client, index) => { + tableRows.map((client, index) => { return ( @@ -285,12 +335,16 @@ function OidcClientsList() { + {showPopup && ( + + )}
{client.partnerId} - + showCopyPopUp(client.status)} + xmlns="http://www.w3.org/2000/svg" width="22.634" height="15.433" viewBox="0 0 22.634 15.433">

setViewClientId(index)} className={`${isLoginLanguageRTL ? "ml-9" : "mr-9"} font-semibold mb-0.5 cursor-pointer`}>...

@@ -317,6 +371,58 @@ function OidcClientsList() {
+
+
+ handlePageChange(event)} + pageCount={Math.ceil(filteredOidcClientsList.length / selectedRecordsPerPage)} + breakLabel="..." + previousLabel={ + + {isLoginLanguageRTL ? : } + + } + nextLabel={ + + {isLoginLanguageRTL ? : } + + } + /> +
+
{t('policies.itemsPerPage')}
+
+
setIsItemsPerPageOpen(!isItemsPerPageOpen)}> +

+ {selectedRecordsPerPage} +

+ + + +
+ {isItemsPerPageOpen && ( +
+ {itemsPerPageOptions.map((num, i) => { + return ( +

changeItemsPerPage(num)} + className="px-3 py-2 cursor-pointer hover:bg-gray-200"> + {num} +

+ ) + }) + } +
+ )} +
+
+
}
diff --git a/pmp-reactjs-ui/src/svg/close_icon.svg b/pmp-reactjs-ui/src/svg/close_icon.svg new file mode 100644 index 000000000..a9d3dbcd5 --- /dev/null +++ b/pmp-reactjs-ui/src/svg/close_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/pmp-reactjs-ui/src/svg/content_copy_icon.svg b/pmp-reactjs-ui/src/svg/content_copy_icon.svg new file mode 100644 index 000000000..66e738b8e --- /dev/null +++ b/pmp-reactjs-ui/src/svg/content_copy_icon.svg @@ -0,0 +1,3 @@ + + +