-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mosip-33215 : Implemented Sorting, Copy ID pop-up, Pagination & Filte…
…rs in OIDC Clients List (#442) * MOSIP-33725: Implemented Sorting & Pagination in OIDC Clients Listtablular Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-33215: Implemented Copy ID Pop-up Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-33215: Implemented filters in OIDC Clients List Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-33215: Updated text in all the languages Signed-off-by: Anil_Kumar_Majji <[email protected]> --------- Signed-off-by: Anil_Kumar_Majji <[email protected]>
- Loading branch information
1 parent
d907ff3
commit f38450b
Showing
8 changed files
with
351 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
pmp-reactjs-ui/src/pages/authenticationServices/CopyIdPopUp.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-[16%] z-50 font-inter"> | ||
| <div className={`bg-white w-[20%] mx-auto rounded-lg shadow-lg h-[35%]`}> | ||
| <header className={`flex justify-between p-[5%]`}> | ||
| <div className={`flex-col`}> | ||
| <h1 className={`font-bold text-md text-[#333333]`}>{policyName}</h1> | ||
| <p className={`text-xs font-bold text-[#717171]`}># {partnerId}</p> | ||
| </div> | ||
| <img src={close_icon} className={`h-7`} onClick={() => dismiss()} /> | ||
| </header> | ||
| <hr className={`py-[4%]`} /> | ||
| <div className={` flex-col text-center items-center`}> | ||
| <h1 className={`text-[#6A6A6A] font-bold opacity-8 mb-[0.5%]`}>{t('oidcClientsList.oidcClientId')}</h1> | ||
| <p className={`font-bold text-xs`}>4fcqta1MRkzMnG5nEkbGPlBZmbJFRenR-sPCUWHEdsA</p> | ||
| <button type="button" onClick={() => copyId()} className={`flex items-center justify-center gap-x-2 mt-[7%] border-2 py-[3%] w-[40%] rounded-2xl ${copied ? "text-[#FFFFFF] bg-[#1447B2] border-0" : "text-[#1447B2] border-[#1447B2]"} ${isLoginLanguageRTL ? "mr-20" : "ml-20"} cursor-pointer`}> | ||
| <svg xmlns="http://www.w3.org/2000/svg" | ||
| width="13.808" height="16.481" viewBox="0 0 13.808 16.481"> | ||
| <path id="content_copy_FILL0_wght300_GRAD0_opsz24" | ||
| d="M154.728-846.637a1.555,1.555,0,0,1-1.143-.468,1.555,1.555,0,0,1-.468-1.143V-858.39a1.554,1.554,0,0,1,.468-1.143,1.554,1.554,0,0,1,1.143-.468H162.2a1.554,1.554,0,0,1,1.143.468,1.555,1.555,0,0,1,.468,1.143v10.142a1.555,1.555,0,0,1-.468,1.143,1.555,1.555,0,0,1-1.143.468Zm0-1.336H162.2a.261.261,0,0,0,.188-.086.261.261,0,0,0,.086-.188V-858.39a.261.261,0,0,0-.086-.188.261.261,0,0,0-.188-.086h-7.469a.261.261,0,0,0-.188.086.261.261,0,0,0-.086.188v10.142a.261.261,0,0,0,.086.188A.261.261,0,0,0,154.728-847.974Zm-3.118,4.454a1.555,1.555,0,0,1-1.143-.468A1.555,1.555,0,0,1,150-845.13v-11.478h1.336v11.478a.261.261,0,0,0,.086.188.261.261,0,0,0,.188.086h8.806v1.336Zm2.844-4.454v0Z" | ||
| transform="translate(-150 860)" fill={`${copied ? "#FFFFFF" :"#1447b2" }`}/> | ||
| </svg> | ||
|
|
||
| {!copied ? "Copy" : "Copied!"} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default CopyIdPopUp; |
110 changes: 110 additions & 0 deletions
110
pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsFilter.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <> | ||
| <div className="flex w-full p-2 justify-start bg-gray-50 flex-wrap"> | ||
| <DropdownComponent | ||
| fieldName='partnerId' | ||
| dropdownDataList={partnerIdData} | ||
| onDropDownChangeEvent={onFilterChangeEvent} | ||
| fieldNameKey='oidcClientsList.partnerId' | ||
| placeHolderKey='oidcClientsList.selectPartnerId' | ||
| styleSet={styles}> | ||
| </DropdownComponent> | ||
| <DropdownComponent | ||
| fieldName='policyGroup' | ||
| dropdownDataList={policyGroupData} | ||
| onDropDownChangeEvent={onFilterChangeEvent} | ||
| fieldNameKey='oidcClientsList.policyGroup' | ||
| placeHolderKey='oidcClientsList.selectPolicyGroup' | ||
| styleSet={styles}> | ||
| </DropdownComponent> | ||
| <DropdownComponent | ||
| fieldName='oidcClientName' | ||
| dropdownDataList={oidcClientNameData} | ||
| onDropDownChangeEvent={onFilterChangeEvent} | ||
| fieldNameKey='oidcClientsList.oidcClientName' | ||
| placeHolderKey='oidcClientsList.selectOidcClientType' | ||
| styleSet={styles}> | ||
| </DropdownComponent> | ||
| <DropdownComponent | ||
| fieldName='policyName' | ||
| dropdownDataList={policyNameData} | ||
| onDropDownChangeEvent={onFilterChangeEvent} | ||
| fieldNameKey='oidcClientsList.policyName' | ||
| placeHolderKey='oidcClientsList.selectPolicyName' | ||
| styleSet={styles}> | ||
| </DropdownComponent> | ||
| <DropdownComponent | ||
| fieldName='status' | ||
| dropdownDataList={statusData} | ||
| onDropDownChangeEvent={onFilterChangeEvent} | ||
| fieldNameKey='oidcClientsList.status' | ||
| placeHolderKey='oidcClientsList.selectStatus' | ||
| styleSet={styles}> | ||
| </DropdownComponent> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default OidcClientsFilter; |
Oops, something went wrong.