From 3bc20037f9459db9e9f8407e09373257cd38bbec Mon Sep 17 00:00:00 2001 From: Mayura Deshmukh <52281514+mayuradesh@users.noreply.github.com> Date: Fri, 31 May 2024 13:45:12 +0530 Subject: [PATCH] MOSIP-32346 UI layout pagination sorting fixed (#399) * MOSIP-32346 UI layout issues fixed Signed-off-by: Mayura Deshmukh * MOSIP-32346 UI layout issues fixed Signed-off-by: Mayura Deshmukh * MOSIP-32346 UI layout pagination sorting fixed Signed-off-by: Mayura Deshmukh --------- Signed-off-by: Mayura Deshmukh --- pmp-reactjs-ui/package-lock.json | 111 +++++ pmp-reactjs-ui/package.json | 1 + pmp-reactjs-ui/src/App.css | 30 ++ .../certificates/PartnerCertificatesList.js | 2 +- .../src/pages/dashboard/Dashboard.js | 2 +- pmp-reactjs-ui/src/pages/policies/Policies.js | 403 ++++++++---------- .../src/pages/policies/ViewPolicyDetails.js | 2 +- 7 files changed, 331 insertions(+), 220 deletions(-) diff --git a/pmp-reactjs-ui/package-lock.json b/pmp-reactjs-ui/package-lock.json index ac599ea0c..1a1906c7e 100644 --- a/pmp-reactjs-ui/package-lock.json +++ b/pmp-reactjs-ui/package-lock.json @@ -21,6 +21,7 @@ "react-cookie": "^7.1.4", "react-dom": "^18.2.0", "react-i18next": "^14.1.1", + "react-icons": "^5.2.1", "react-paginate": "^8.2.0", "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", @@ -3706,6 +3707,95 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz", + "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -15209,6 +15299,14 @@ } } }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17342,6 +17440,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/pmp-reactjs-ui/package.json b/pmp-reactjs-ui/package.json index 0e33139a8..d8570d640 100644 --- a/pmp-reactjs-ui/package.json +++ b/pmp-reactjs-ui/package.json @@ -16,6 +16,7 @@ "react-cookie": "^7.1.4", "react-dom": "^18.2.0", "react-i18next": "^14.1.1", + "react-icons": "^5.2.1", "react-paginate": "^8.2.0", "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", diff --git a/pmp-reactjs-ui/src/App.css b/pmp-reactjs-ui/src/App.css index 74b5e0534..ea8509893 100644 --- a/pmp-reactjs-ui/src/App.css +++ b/pmp-reactjs-ui/src/App.css @@ -36,3 +36,33 @@ transform: rotate(360deg); } } + +.pagination { + list-style: none; + height: 31.5px; + width: 31.5px; + display: flex; + justify-content: center; + align-items: center; + margin-top: 2px; + cursor: pointer; +} + +.active { + background-color: #1447B2; + border-radius: 10%; + color: white; + padding: 12px; + font-size: small; +} + +.page-item { + list-style: none; + font-size: small; + height: 25px; + width: 25px; + margin: 8px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js b/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js index 7ee3d0e2c..cb7fe3212 100644 --- a/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js +++ b/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js @@ -133,7 +133,7 @@ function PartnerCertificatesList() { }; return ( -
+
{!dataLoaded && ( )} diff --git a/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js b/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js index 01e44b199..429d6b111 100644 --- a/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js +++ b/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js @@ -102,7 +102,7 @@ function Dashboard() { }; return ( -
+
{!dataLoaded && ( )} diff --git a/pmp-reactjs-ui/src/pages/policies/Policies.js b/pmp-reactjs-ui/src/pages/policies/Policies.js index d8deb2eb1..2e9afc8d0 100644 --- a/pmp-reactjs-ui/src/pages/policies/Policies.js +++ b/pmp-reactjs-ui/src/pages/policies/Policies.js @@ -9,6 +9,8 @@ import ErrorMessage from '../common/ErrorMessage'; import LoadingIcon from "../common/LoadingIcon"; import rectangleGrid from '../../svg/rectangle_grid.svg'; import backArrow from '../../svg/back_arrow.svg'; +import { AiFillLeftCircle, AiFillRightCircle } from "react-icons/ai"; // icons form react-icons +import { IconContext } from "react-icons"; // for customizing icons function Policies() { @@ -26,8 +28,6 @@ function Policies() { const [activeSortDesc, setActiveSortDesc] = useState(""); const [firstIndex, setFirstIndex] = useState(0); const [selectedRecordsPerPage, setSelectedRecordsPerPage] = useState(5); - const [previous, setPrevious] = useState(false); - const [next, setNext] = useState(false); const [isDescending, setIsDescending] = useState(true); const itemsPerPageOptions = [5, 10, 15, 20]; const [isItemsPerPageOpen, setIsItemsPerPageOpen] = useState(false); @@ -48,39 +48,40 @@ function Policies() { { id: "action", headerNameKey: 'policies.action' } ]; - // const tableValues = [ - // { "partnerId": "P10001", "partnerType": "Authentication", "policyGroup": "Policy Group Name1", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10002", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name2", "policyName": "KYC", "createDate": "2024-05-21T03:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10003", "partnerType": "Authentication", "policyGroup": "Policy Group Name3", "policyName": "Full KYC", "createDate": "2024-05-21T02:16:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10004", "partnerType": "Authentication", "policyGroup": "Policy Group Name4", "policyName": "Full KYC", "createDate": "2024-05-21T02:14:42.422+00:00", "status": "Pending for Approval", "Action": "..." }, - // { "partnerId": "P10005", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name5", "policyName": "KYC", "createDate": "2024-05-21T02:13:42.422+00:00", "status": "Deactivated", "Action": "..." }, - // { "partnerId": "P10006", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name6", "policyName": "KYC1", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10007", "partnerType": "Authentication", "policyGroup": "Policy Group Name7", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10008", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name8", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10009", "partnerType": "Authentication", "policyGroup": "Policy Group Name9", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10010", "partnerType": "Authentication", "policyGroup": "Policy Group Name10", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10011", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name11", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10012", "partnerType": "Authentication", "policyGroup": "Policy Group Name11", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10013", "partnerType": "Authentication", "policyGroup": "Policy Group Name11", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Pending for Approval", "Action": "..." }, - // { "partnerId": "P10014", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name12", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Deactivated", "Action": "..." }, - // { "partnerId": "P10015", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name12", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10016", "partnerType": "Authentication", "policyGroup": "Policy Group Name10", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10017", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name13", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10018", "partnerType": "Authentication", "policyGroup": "Policy Group Name14", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10019", "partnerType": "Authentication", "policyGroup": "Policy Group Name16", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10020", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name16", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10021", "partnerType": "Authentication", "policyGroup": "Policy Group Name17", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10022", "partnerType": "Authentication", "policyGroup": "Policy Group Name14", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Pending for Approval", "Action": "..." }, - // { "partnerId": "P10023", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name2", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Deactivated", "Action": "..." }, - // { "partnerId": "P10024", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name1", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10025", "partnerType": "Authentication", "policyGroup": "Policy Group Name18", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10026", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name19", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10027", "partnerType": "Authentication", "policyGroup": "Policy Group Name20", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10028", "partnerType": "Authentication", "policyGroup": "Policy Group Name21", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10029", "partnerType": "MISP Partner", "policyGroup": "Policy Group Name22", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Rejected", "Action": "..." }, - // { "partnerId": "P10030", "partnerType": "Authentication", "policyGroup": "Policy Group Name23", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Approved", "Action": "..." }, - // { "partnerId": "P10031", "partnerType": "Authentication", "policyGroup": "Policy Group Name24", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Pending for Approval", "Action": "..." } - // ]; + /* + const tableValues = [ + { "partnerId": "P10001", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name1", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10002", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name2", "policyName": "KYC", "createDate": "2024-05-21T03:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10003", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name3", "policyName": "Full KYC", "createDate": "2024-05-21T02:16:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10004", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name4", "policyName": "Full KYC", "createDate": "2024-05-21T02:14:42.422+00:00", "status": "InProgress", "Action": "..." }, + { "partnerId": "P10005", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name5", "policyName": "KYC", "createDate": "2024-05-21T02:13:42.422+00:00", "status": "Deactivated", "Action": "..." }, + { "partnerId": "P10006", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name6", "policyName": "KYC1", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10007", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name7", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10008", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name8", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10009", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name9", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10010", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name10", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10011", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name11", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10012", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name11", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10013", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name11", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "InProgress", "Action": "..." }, + { "partnerId": "P10014", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name12", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Deactivated", "Action": "..." }, + { "partnerId": "P10015", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name12", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10016", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name10", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10017", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name13", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10018", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name14", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10019", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name16", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10020", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name16", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10021", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name17", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10022", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name14", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "InProgress", "Action": "..." }, + { "partnerId": "P10023", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name2", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "Deactivated", "Action": "..." }, + { "partnerId": "P10024", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name1", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10025", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name18", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10026", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name19", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10027", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name20", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10028", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name21", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10029", "partnerType": "MISP_Partner", "policyGroup": "Policy Group Name22", "policyName": "KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "rejected", "Action": "..." }, + { "partnerId": "P10030", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name23", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "approved", "Action": "..." }, + { "partnerId": "P10031", "partnerType": "AUTH_PARTNER", "policyGroup": "Policy Group Name24", "policyName": "Full KYC", "createDate": "2024-05-21T02:11:42.422+00:00", "status": "InProgress", "Action": "..." } + ];*/ useEffect(() => { const fetchData = async () => { @@ -223,9 +224,8 @@ function Policies() { } //This part related to Pagination logic - let pageCount = Math.ceil(filteredPoliciesList.length / selectedRecordsPerPage); - let lastIndex = firstIndex + selectedRecordsPerPage; - let tableRows = filteredPoliciesList.slice(firstIndex, lastIndex); + let tableRows = filteredPoliciesList.slice(firstIndex, firstIndex + (selectedRecordsPerPage)); + const handlePageChange = (event) => { const newIndex = (event.selected * selectedRecordsPerPage) % filteredPoliciesList.length; setFirstIndex(newIndex); @@ -237,7 +237,7 @@ function Policies() { }; return ( -
+
{!dataLoaded && ( )} @@ -271,7 +271,7 @@ function Policies() {
- { policiesList.length === 0 + {policiesList.length === 0 ?
@@ -297,203 +297,172 @@ function Policies() {
- : - <> -
-
-
- {t('policies.listOfPolicies') + ' (' + filteredPoliciesList.length + ")"} -
-
- - {filter && } + > + {t('policies.filterBtn')} + + + + + {filter && } +
-
-
- {filter && - } +
+ {filter && + } -
- - - - {tableHeaders.map((header, index) => { - return ( - - ) - })} - - - - {tableRows.map((partner, index) => { - return ( - - - - - - - - + + + {tableRows.map((partner, index) => { return ( -

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

+ + + + + + + + + ) }) } + +
-
- {t(header.headerNameKey)} - {header.id !== "action" && ( -
- toggleSortAscOrder(header.id)} alt="" - xmlns="http://www.w3.org/2000/svg" - width="8" height="8" viewBox="0 0 7 6"> - - - toggleSortDescOrder(header.id)} alt="" - xmlns="http://www.w3.org/2000/svg" - width="8" height="8" viewBox="0 0 7 6"> - - -
- )} -
-
{partner.partnerId}{getPartnerTypeDescription(partner.partnerType, t)}{partner.policyGroup}{partner.policyName}{formatDate(partner.createDate, 'dateTime')} -
- {getStatusCode(partner.status, t)} -
- 		-
-

setViewPolicyId(index)} className="mr-9 font-semibold mb-0.5 cursor-pointer">...

- { - viewPolicyId === index && ( -
showViewPolicyDetails()} - className="absolute bg-white text-xs font-medium rounded-lg shadow-md border"> -

- {t('policies.view')} -

+
+ + + + {tableHeaders.map((header, index) => { + return ( + - ) - }) - } - -
+
+ {t(header.headerNameKey)} + {header.id !== "action" && ( +
+ toggleSortAscOrder(header.id)} alt="Ascending" + xmlns="http://www.w3.org/2000/svg" + width="8" height="8" viewBox="0 0 7 6"> + + + toggleSortDescOrder(header.id)} alt="Descending" + xmlns="http://www.w3.org/2000/svg" + width="8" height="8" viewBox="0 0 7 6"> + +
- ) - } -
- -
-
-
-
-
- - perviousPage()} - xmlns="http://www.w3.org/2000/svg" - width="28" height="28" viewBox="0 0 32 32"> - - - - - - - - } - nextLabel={ - - - - - - - - } - onPageChange={handlePageChange} - pageRangeDisplayed={3} - pageCount={pageCount} - renderOnZeroPageCount={null} - containerClassName="flex gap-x-4 mx-4 items-center" - pageLinkClassName={`text-tory-blue font-semibold text-xs`} - activeLinkClassName='text-white bg-tory-blue py-[18%] px-3 rounded-md' - breakClassName='text-tory-blue text-md' - /> - -
-
{t('policies.itemsPerPage')}
-
-
setIsItemsPerPageOpen(!isItemsPerPageOpen)}> -

- {selectedRecordsPerPage} -

- - - -
- {isItemsPerPageOpen && ( -
- {itemsPerPageOptions.map((num, i) => { + )} +
+ + ) + })} +
{partner.partnerId}{getPartnerTypeDescription(partner.partnerType, t)}{partner.policyGroup}{partner.policyName}{formatDate(partner.createDate, 'dateTime')} +
+ {getStatusCode(partner.status, t)} +
+ 		+
+

setViewPolicyId(index)} className="mr-9 font-semibold mb-0.5 cursor-pointer">...

+ { + viewPolicyId === index && ( +
showViewPolicyDetails()} + className="absolute bg-white text-xs font-medium rounded-lg shadow-md border"> +

+ {t('policies.view')} +

+
+ ) + } +
+
+
+
+
+
+ handlePageChange(event)} + pageCount={Math.ceil(filteredPoliciesList.length / selectedRecordsPerPage)} + breakLabel="..." + previousLabel={ + + + + } + nextLabel={ + + + + } + /> +
+
{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} +

+ ) + }) + } +
+ )} +
-
- + ) }
- + )}
) - function perviousPage() { - setPrevious(true); // Functions related to pagination - setNext(false); // to handle previous & next - } - function nextPage() { - setNext(true); - setPrevious(false); - } } export default Policies; \ No newline at end of file diff --git a/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js b/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js index d762a9556..94d107d5c 100644 --- a/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js +++ b/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js @@ -57,7 +57,7 @@ function ViewPolicyDetails() { return ( <> -
+
moveToPolicies()} className="mt-1 cursor-pointer" />