diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json index 1c7c21ec..28ca3753 100644 --- a/pmp-revamp-ui/public/i18n/ara.json +++ b/pmp-revamp-ui/public/i18n/ara.json @@ -412,10 +412,10 @@ "sbiVersion": "إصدار SBI", "searchVersion": "البحث عن إصدار SBI", "linkedDevices": "الأجهزة المرتبطة", - "status":"حالة", + "status": "حالة", "action": "الإجراء", "partnerId": "معرف الشريك", - "orgName":"منظمة", + "orgName": "منظمة", "partnerType": "نوع الشريك", "device": "جهاز", "sbiCreatedDate": "تاريخ إنشاء SBI", @@ -502,7 +502,7 @@ "ftmChipProviderServices": "خدمات مزودي شريحة FTM", "addFtmBtn": "إضافة شريحة FTM", "partnerId": "معرف الشريك", - "orgName":"منظمة", + "orgName": "منظمة", "listOfFtm": "قائمة تفاصيل شريحة FTM", "make": "يصنع", "model": "نموذج", @@ -561,7 +561,8 @@ "description": "عند النقر فوق تأكيد، سيتم إلغاء تنشيط تفاصيل شريحة FTM الخاصة بك." }, "rootTrustCertificate": { - "organisation": "منظمة", + "rootOfTrustCertificates": "جذر شهادات الثقة", + "certificateId": "معرف الشهادة", "partnerDomain": "مجال الشريك", "issuedTo": "صدر ل", "issuedBy": "صادرة عن", @@ -572,8 +573,10 @@ "action": "فعل", "UploadCertBtn": "تحميل الشهادة", "listOfCertificates": "قائمة شهادات جذر الثقة", - "selectOrganisation": "حدد المنظمة", + "selectCertificateId": "حدد معرف الشهادة", "selectPartnerDomain": "حدد مجال الشريك", + "selectIssuedTo": "حدد صدر إلى", + "selectIssuedBy": "اختر جهة الإصدار", "selectStatus": "حدد الحالة", "deActivate": "إلغاء التنشيط", "view": "منظر" @@ -585,10 +588,14 @@ "dropdownPlaceholder": "حدد مجال الشريك", "successMsg": "تم تحميل شهادة جذر الثقة لـ {{partnerDomain}} بنجاح" }, - "viewRootOfTrustCertificate": { - "viewRootOfTrustCertificate": "عرض شهادة جذر الثقة", + "rootTrustCertificateList": { + "rootTrustCertificateList": "قائمة جذر شهادات الثقة", + "rootOfTrustCertificates": "شهادات الثقة الجذرية", "caCertificates": "شهادات كاليفورنيا" }, + "intermediateTrustCertificateList": { + "intermediateRootTrustCertificates": "شهادات ثقة الجذر المتوسطة" + }, "partnerList": { "partnerTitle": "الشركاء", "listOfPartnerTitle": "قائمة الشركاء", diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json index 928daff4..b25662bc 100644 --- a/pmp-revamp-ui/public/i18n/eng.json +++ b/pmp-revamp-ui/public/i18n/eng.json @@ -556,7 +556,8 @@ "description": "On clicking Confirm, your FTM Chip details will be deactivated." }, "rootTrustCertificate": { - "organisation": "Organisation", + "rootOfTrustCertificates": "Root of Trust Certificates", + "certificateId": "Certificate Id", "partnerDomain": "Partner Domain", "issuedTo": "Issued To", "issuedBy": "Issued By", @@ -567,8 +568,10 @@ "action": "Action", "UploadCertBtn": "Upload Certificate", "listOfCertificates": "List of Root of Trust certificates", - "selectOrganisation": "Select Organisation", + "selectCertificateId": "Select Certificate Id", "selectPartnerDomain": "Select Partner Domain", + "selectIssuedTo": "Select Issued To", + "selectIssuedBy": "Select Issued By", "selectStatus": "Select Status", "deActivate": "Deactivate", "view": "View" @@ -581,10 +584,14 @@ "dropdownPlaceholder": "Select partner domain", "successMsg": "Root of Trust Certificate for {{partnerDomain}} is uploaded successfully" }, - "viewRootOfTrustCertificate": { - "viewRootOfTrustCertificate": "View Root of Trust Certificate", + "rootTrustCertificateList": { + "rootTrustCertificateList": "List of Root of Trust Certificates", + "rootOfTrustCertificates": "Root Trust Certificates", "caCertificates": "Ca Certificates" }, + "intermediateTrustCertificateList": { + "intermediateRootTrustCertificates": "Intermediate Root Trust Certificates" + }, "partnerList": { "partnerTitle": "Partners", "listOfPartnerTitle": "List of Partners", diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json index e7338024..b0f6adfe 100644 --- a/pmp-revamp-ui/public/i18n/fra.json +++ b/pmp-revamp-ui/public/i18n/fra.json @@ -561,7 +561,8 @@ "description": "En cliquant sur Confirmer, les détails de votre puce FTM seront désactivés." }, "rootTrustCertificate": { - "organisation": "Organisation", + "rootOfTrustCertificates": "Certificats racine de confiance", + "certificateId": "Id du certificat", "partnerDomain": "Domaine partenaire", "issuedTo": "Délivré à", "issuedBy": "Délivré par", @@ -572,8 +573,10 @@ "action": "Action", "UploadCertBtn": "Télécharger le certificat", "listOfCertificates": "Liste des certificats Root of Trust", - "selectOrganisation": "Sélectionnez une organisation", + "selectCertificateId": "Sélectionnez l'identifiant du certificat", "selectPartnerDomain": "Sélectionnez un domaine partenaire", + "selectIssuedTo": "Sélectionnez Délivré à", + "selectIssuedBy": "Sélectionnez Publié par", "selectStatus": "Sélectionnez le statut", "deActivate": "Désactiver", "view": "Voir" @@ -585,10 +588,14 @@ "dropdownPlaceholder": "Sélectionnez un domaine partenaire", "successMsg": "Le certificat racine de confiance pour {{partnerDomain}} a été téléchargé avec succès" }, - "viewRootOfTrustCertificate": { - "viewRootOfTrustCertificate": "Afficher le certificat racine de confiance", + "rootTrustCertificateList": { + "rootTrustCertificateList": "Liste des certificats racine de confiance", + "rootOfTrustCertificates": "Certificats de confiance racine", "caCertificates": "Certificats CA" }, + "intermediateTrustCertificateList": { + "intermediateRootTrustCertificates": "Certificats de confiance racine intermédiaires" + }, "partnerList":{ "partnerTitle": "Partenaires", "listOfPartnerTitle": "Liste des partenaires", diff --git a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js index 3b31abb3..fc12aeaf 100644 --- a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js +++ b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { useTranslation } from "react-i18next"; import { getUserProfile } from "../../../services/UserProfileService"; import { isLangRTL, onPressEnterKey } from "../../../utils/AppUtils"; -import { formatDate, getStatusCode, handleMouseClickForDropdown, toggleSortAscOrder, toggleSortDescOrder, bgOfStatus,} from "../../../utils/AppUtils"; +import { formatDate, getStatusCode, handleMouseClickForDropdown, toggleSortAscOrder, toggleSortDescOrder, bgOfStatus, } from "../../../utils/AppUtils"; import LoadingIcon from "../../common/LoadingIcon"; import ErrorMessage from "../../common/ErrorMessage"; import Title from "../../common/Title"; @@ -12,6 +12,8 @@ import FilterButtons from "../../common/FilterButtons"; import RootTrustCertificatesFilter from "./RootTrustCertificatesFilter"; import SortingIcon from "../../common/SortingIcon"; import Pagination from "../../common/Pagination"; +import RootTrustCertificateTab from "./RootTrustCertificateTab"; +import EmptyList from "../../common/EmptyList"; function RootTrustCertificateList() { const { t } = useTranslation(); @@ -20,7 +22,7 @@ function RootTrustCertificateList() { const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); const [errorCode, setErrorCode] = useState(""); const [errorMsg, setErrorMsg] = useState(""); - const [dataLoaded, setDataLoaded] = useState(false); + const [dataLoaded, setDataLoaded] = useState(true); const [certificateData, setCertificateData] = useState([]); const [filteredCertificateData, setFilteredCertificateData] = useState([]); const [order, setOrder] = useState("ASC"); @@ -30,6 +32,7 @@ function RootTrustCertificateList() { const [isDescending, setIsDescending] = useState(false); const [viewCertificateId, setViewCertificateId] = useState(-1); const [selectedRecordsPerPage, setSelectedRecordsPerPage] = useState(8); + const [tableDataLoaded, setTableDataLoaded] = useState(true); const defaultFilterQuery = { orgName: "", partnerDomain: "", @@ -42,11 +45,8 @@ function RootTrustCertificateList() { }, [submenuRef]); const tableHeaders = [ - { id: "orgName", headerNameKey: "rootTrustCertificate.organisation" }, - { - id: "partnerDomain", - headerNameKey: "rootTrustCertificate.partnerDomain", - }, + { id: "certificateId", headerNameKey: "rootTrustCertificate.certificateId" }, + { id: "partnerDomain", headerNameKey: "rootTrustCertificate.partnerDomain", }, { id: "issuedTo", headerNameKey: "rootTrustCertificate.issuedTo" }, { id: "issuedBy", headerNameKey: "rootTrustCertificate.issuedBy" }, { id: "validFrom", headerNameKey: "rootTrustCertificate.validFrom" }, @@ -56,36 +56,30 @@ function RootTrustCertificateList() { { id: "action", headerNameKey: "rootTrustCertificate.action" }, ]; - useEffect(() => { - const fetchData = async () => { - try { - setDataLoaded(false); - - const trustCertDummyData = []; - - const sortedData = trustCertDummyData.sort( - (a, b) => new Date(b.timeOfUpload) - new Date(a.timeOfUpload) - ); - setCertificateData(sortedData); - setFilteredCertificateData(sortedData); - setDataLoaded(true); - } catch (err) { - console.error("Error fetching data:", err); - setErrorMsg(err); - } - }; - fetchData(); - }, []); + const rootTrustCertificatesList = [ + {certId: "10081", partnerDomain: "AUTH", issuedTo: "client_auth1", issuedBy: "mosip_auth1", validFrom: "2024-12-10T19:35:01.085+00:00", validTill: "2025-12-10T19:35:01.085+00:00", timeOfUpload: "2024-12-09T19:35:01.085+00:00", status: "active"}, + {certId: "10082", partnerDomain: "AUTH", issuedTo: "client_auth2", issuedBy: "mosip_auth1", validFrom: "2024-11-21T19:35:01.085+00:00", validTill: "2025-12-21T19:35:01.085+00:00", timeOfUpload: "2024-12-20T19:35:01.085+00:00", status: "deactivated"}, + {certId: "10083", partnerDomain: "DEVICE", issuedTo: "device_client3", issuedBy: "mosip_device1", validFrom: "2024-09-11T19:35:01.085+00:00", validTill: "2025-12-09T19:35:01.085+00:00", timeOfUpload: "2024-12-11T19:35:01.085+00:00", status: "active"}, + {certId: "10084", partnerDomain: "FTM", issuedTo: "client_ftm2", issuedBy: "mosip_auth1", validFrom: "2024-12-10T19:35:31.085+00:00", validTill: "2025-12-10T19:35:01.085+00:00", timeOfUpload: "2024-12-09T19:35:01.085+00:00", status: "deactivated"}, + {certId: "10085", partnerDomain: "DEVICE", issuedTo: "device_client1", issuedBy: "mosip_device1", validFrom: "2024-12-08T19:35:01.085+00:00", validTill: "2025-12-08T19:35:01.085+00:00", timeOfUpload: "2024-12-05T19:35:01.085+00:00", status: "deactivated"}, + {certId: "10086", partnerDomain: "AUTH", issuedTo: "client_auth3", issuedBy: "mosip_auth1", validFrom: "2024-12-10T19:35:01.085+00:00", validTill: "2025-12-10T19:35:01.085+00:00", timeOfUpload: "2024-12-07T19:35:01.085+00:00", status: "active"}, + {certId: "10087", partnerDomain: "DEVICE", issuedTo: "device_client1", issuedBy: "mosip_device1", validFrom: "2024-12-19T19:35:01.085+00:00", validTill: "2025-12-19T19:35:01.085+00:00", timeOfUpload: "2024-12-08T19:35:01.085+00:00", status: "active"}, + {certId: "10088", partnerDomain: "FTM", issuedTo: "client_ftm3", issuedBy: "mosip_auth1", validFrom: "2024-12-27T19:35:01.085+00:00", validTill: "2025-12-27T19:35:01.085+00:00", timeOfUpload: "2024-12-24T19:35:01.085+00:00", status: "deactivated"}, + {certId: "10089", partnerDomain: "AUTH", issuedTo: "client_auth2", issuedBy: "mosip_auth1", validFrom: "2024-12-14T19:35:01.085+00:00", validTill: "2025-12-14T19:35:01.085+00:00", timeOfUpload: "2024-12-13T19:35:01.085+00:00", status: "active"}, + {certId: "100810", partnerDomain: "FTM", issuedTo: "client_ftm2", issuedBy: "mosip_auth1", validFrom: "2024-12-03T19:35:01.085+00:00", validTill: "2025-12-03T19:35:01.085+00:00", timeOfUpload: "2024-12-03T19:35:01.085+00:00", status: "active"}, + {certId: "100811", partnerDomain: "DEVICE", issuedTo: "device_client1", issuedBy: "mosip_device1", validFrom: "2024-12-06T19:35:01.085+00:00", validTill: "2025-12-06T19:35:01.085+00:00", timeOfUpload: "2024-12-11T19:35:01.085+00:00", status: "deactivated"}, + {certId: "100812", partnerDomain: "DEVICE", issuedTo: "device_client1", issuedBy: "mosip_device1", validFrom: "2024-12-01T19:35:01.085+00:00", validTill: "2025-12-01T19:35:01.085+00:00", timeOfUpload: "2024-12-04T19:35:01.085+00:00", status: "active"}, + {certId: "100813", partnerDomain: "AUTH", issuedTo: "client_auth3", issuedBy: "mosip_auth1", validFrom: "2024-12-22T19:35:01.085+00:00", validTill: "2025-12-22T19:35:01.085+00:00", timeOfUpload: "2024-12-20T19:35:01.085+00:00", status: "active"}, + {certId: "100814", partnerDomain: "AUTH", issuedTo: "client_auth3", issuedBy: "mosip_auth1", validFrom: "2024-12-05T19:35:01.085+00:00", validTill: "2025-12-15T19:35:01.085+00:00", timeOfUpload: "2024-12-04T19:35:01.085+00:00", status: "active"}, + {certId: "100815", partnerDomain: "FTM", issuedTo: "client_ftm1", issuedBy: "mosip_auth1", validFrom: "2024-12-18T19:35:01.085+00:00", validTill: "2025-12-18T19:35:01.085+00:00", timeOfUpload: "2024-12-15T19:35:01.085+00:00", status: "deactivated"}, +]; const showUploadCertificate = () => { navigate('/partnermanagement/admin/certificates/upload-root-trust-certificate') }; const showCertificateDetails = (selectedCertificateData) => { - localStorage.setItem( - "selectedCertificateData", - JSON.stringify(selectedCertificateData) - ); + }; const cancelErrorMsg = () => { @@ -93,59 +87,11 @@ function RootTrustCertificateList() { }; //This part is related to Sorting - const sortAscOrder = (header) => { - const isDateCol = header === "timeOfUpload" ? true : false; - toggleSortAscOrder( - header, - isDateCol, - filteredCertificateData, - setFilteredCertificateData, - order, - setOrder, - isDescending, - setIsDescending, - activeSortAsc, - setActiveSortAsc, - activeSortDesc, - setActiveSortDesc - ); - }; - - const sortDescOrder = (header) => { - const isDateCol = header === "timeOfUpload" ? true : false; - toggleSortDescOrder( - header, - isDateCol, - filteredCertificateData, - setFilteredCertificateData, - order, - setOrder, - isDescending, - setIsDescending, - activeSortAsc, - setActiveSortAsc, - activeSortDesc, - setActiveSortDesc - ); - }; const style = { backArrowIcon: "!mt-[9%]", }; - useEffect(() => { - let filteredRows = certificateData; - Object.keys(filterQuery).forEach((key) => { - if (filterQuery[key] !== "") { - filteredRows = filteredRows.filter( - (item) => item[key] === filterQuery[key] - ); - } - }); - setFilteredCertificateData(filteredRows); - setFirstIndex(0); - }, [filterQuery, certificateData]); - const onResetFilter = () => { window.location.reload(); }; @@ -156,325 +102,157 @@ function RootTrustCertificateList() { firstIndex + selectedRecordsPerPage ); - //This part is related to Filter - const onFilterChange = (fieldName, selectedFilter) => { - setFilterQuery((oldFilterQuery) => ({ - ...oldFilterQuery, - [fieldName]: selectedFilter, - })); - //useEffect will be triggered which will do the filter + const showDeactivateCertificate = (selectedClientdata) => { + }; - const showDeactivateCertificate = (selectedClientdata) => { - if (selectedClientdata.status === "ACTIVE") { - document.body.style.overflow = "hidden"; - } + const styles = { + loadingDiv: "!py-[20%]" }; return ( -
- {!dataLoaded && } +
+ {!dataLoaded && + + } {dataLoaded && ( <> {errorMsg && ( - + )}
-
- - {certificateData.length > 0 && ( - <button - id="root_certificate_upload_btn" - onClick={() => showUploadCertificate()} - type="button" - className={`h-12 text-sm font-semibold px-7 text-white bg-tory-blue rounded-md`} - > - {t("rootTrustCertificate.UploadCertBtn")} - </button> - )} - </div> - <div className="flex-col justify-center ml-3 h-full"> - {certificateData.length === 0 ? ( - <div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center"> - <div className="flex justify-between py-2 pt-4 text-sm font-semibold text-[#6F6E6E]"> - <div className="flex w-full justify-between"> - <h6 className="ml-5 mr-3"> - {t("rootTrustCertificate.organisation")} - </h6> - <h6>{t("rootTrustCertificate.partnerDomain")}</h6> - <h6>{t("rootTrustCertificate.issuedTo")}</h6> - <h6>{t("rootTrustCertificate.issuedBy")}</h6> - <h6>{t("rootTrustCertificate.validFrom")}</h6> - <h6>{t("rootTrustCertificate.validTill")}</h6> - <h6>{t("rootTrustCertificate.timeOfUpload")}</h6> - <h6>{t("rootTrustCertificate.status")}</h6> - <h6 className="mx-4"> - {t("rootTrustCertificate.action")} - </h6> - </div> - </div> - - <hr className="h-px mx-3 bg-gray-200 border-0" /> + <div className="justify-between mb-5 flex-col"> + <div className="flex justify-between"> + <Title title="rootTrustCertificate.rootOfTrustCertificates" backLink="/partnermanagement" styleSet={style} /> + {certificateData.length === 0 ? + <button onClick={showUploadCertificate} id='create_policy_group_btn' type="button" className="h-10 text-sm px-3 font-semibold text-white bg-tory-blue rounded-md max-330:h-fit"> + {t('rootTrustCertificate.UploadCertBtn')} + </button> + : null + } + </div> - <div className="flex items-center justify-center p-24"> - <div className="flex flex-col items-center"> - <img src={rectangleGrid} alt="" /> - <button - id="root_certificate_upload_btn" - onClick={() => showUploadCertificate()} - type="button" - className="text-white font-semibold mt-8 bg-tory-blue rounded-md text-sm h-11 px-5 py-3" - > - {t("rootTrustCertificate.UploadCertBtn")} - </button> - </div> - </div> + <RootTrustCertificateTab + activeRootTustCertificates={true} + rootTustCertificatesPath={'/partnermanagement/admin/certificates/root-trust-certificate'} + activeIntermediateTrustCertificates={false} + intermediateTrustCertificatesPath={''} + /> + {certificateData.length !== 0 ? ( + <div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center"> + <EmptyList + tableHeaders={tableHeaders} + showCustomButton={true} + customButtonName='rootTrustCertificate.UploadCertBtn' + buttonId='upload_root_trust_certificate_btn' + onClickButton={showUploadCertificate} + /> </div> ) : ( <> - <div className="bg-[#FCFCFC] w-full mt-1 rounded-t-xl shadow-lg pt-3"> + <div className={`bg-[#FCFCFC] w-full mt-1 rounded-t-xl shadow-lg pt-3 ${!tableDataLoaded && "py-6"}`}> <FilterButtons - listTitle="rootTrustCertificate.listOfCertificates" + listTitle="rootTrustCertificateList.rootTrustCertificateList" dataListLength={filteredCertificateData.length} filter={filter} onResetFilter={onResetFilter} setFilter={setFilter} - ></FilterButtons> + /> <hr className="h-0.5 mt-3 bg-gray-200 border-0" /> {filter && ( <RootTrustCertificatesFilter - filteredCertificateData={filteredCertificateData} - onFilterChange={onFilterChange} - ></RootTrustCertificatesFilter> + // onFilterChange={onFilterChange} + /> )} - - <div className="mx-[2%] overflow-x-scroll"> - <table className="table-fixed"> - <thead> - <tr> - {tableHeaders.map((header, index) => { - return ( - <th - key={index} - className="py-4 text-sm font-semibold text-[#6F6E6E] w-[14%]" - > - <div className="mx-2 flex gap-x-0 items-center"> - {t(header.headerNameKey)} - {header.id !== "action" && ( - <SortingIcon - headerId={header.id} - sortDescOrder={sortDescOrder} - sortAscOrder={sortAscOrder} - order={order} - activeSortDesc={activeSortDesc} - activeSortAsc={activeSortAsc} - ></SortingIcon> - )} - </div> - </th> - ); - })} - </tr> - </thead> - <tbody> - {tableRows.map((certificate, index) => { - return ( - <tr - id={"root_certificate_list_item" + (index + 1)} - key={index} - className={`border-t border-[#E5EBFA] cursor-pointer text-[0.8rem] text-[#191919] font-semibold break-words ${certificate.status.toLowerCase() === - "deactivated" - ? "text-[#969696]" - : "text-[#191919]" - }`} - > - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {certificate.orgName} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {certificate.partnerDomain} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {certificate.issuedTo} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {certificate.issuedBy} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {formatDate( - certificate.validFrom, - "date", - false - )} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {formatDate( - certificate.validTill, - "date", - false - )} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="px-2" - > - {formatDate( - certificate.timeOfUpload, - "date", - false - )} - </td> - <td - onClick={() => - showCertificateDetails(certificate) - } - className="" - > - <div - className={`${bgOfStatus( - certificate.status - )} flex w-fit py-1.5 px-2 m-3 text-xs font-semibold rounded-md`} - > - {getStatusCode(certificate.status, t)} - </div> - </td> - <td className="text-center"> - <div - ref={(el) => - (submenuRef.current[index] = el) - } - > - <p - id={ - "root_certificate_list_view" + - (index + 1) - } - onClick={() => - setViewCertificateId( - index === viewCertificateId - ? null - : index - ) - } - className={`font-semibold mb-0.5 cursor-pointer text-center`} - tabIndex="0" - onKeyPress={(e) => - onPressEnterKey(e, () => - setViewCertificateId( - index === viewCertificateId - ? null - : index - ) - ) - } - > - ... - </p> - {viewCertificateId === index && ( - <div - className={`absolute w-[7%] z-50 bg-white text-xs font-semibold rounded-lg shadow-md border min-w-fit ${isLoginLanguageRTL - ? "left-9 text-right" - : "right-9 text-left" - }`} - > - <p - id="root_certificate_details_view_btn" - onClick={() => - showCertificateDetails(certificate) - } - className={`py-1.5 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100 ${isLoginLanguageRTL - ? "pl-10" - : "pr-10" - }`} - tabIndex="0" - onKeyPress={(e) => - onPressEnterKey(e, () => - showCertificateDetails( - certificate - ) - ) - } - > - {t("rootTrustCertificate.view")} - </p> - <hr className="h-px bg-gray-100 border-0 mx-1" /> - <p - id="root_certificate_deactive_btn" - onClick={() => - showDeactivateCertificate(certificate) - } - className={`py-1.5 px-4 ${isLoginLanguageRTL - ? "pl-10" - : "pr-10" - } ${certificate.status === "approved" - ? "text-crimson-red cursor-pointer" - : "text-[#A5A5A5] cursor-auto" - } hover:bg-gray-100`} - tabIndex="0" - onKeyPress={(e) => - onPressEnterKey(e, () => - showDeactivateCertificate( - certificate - ) - ) - } - > - {t("rootTrustCertificate.deActivate")} - </p> - </div> - )} - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </div> + {!tableDataLoaded && <LoadingIcon styleSet={styles} />} + {tableDataLoaded && certificateData.length !== 0 ? + <EmptyList + tableHeaders={tableHeaders} + /> + : ( + <> + <div className="mx-[2%] overflow-x-scroll"> + <table className="table-fixed"> + <thead> + <tr> + {tableHeaders.map((header, index) => { + return ( + <th key={index} className="py-4 text-sm font-semibold text-[#6F6E6E] w-[14%]"> + <div className="flex gap-x-0 items-center"> + {t(header.headerNameKey)} + {header.id !== "action" && ( + <SortingIcon + headerId={header.id} + // sortDescOrder={sortDescOrder} + // sortAscOrder={sortAscOrder} + order={order} + activeSortDesc={activeSortDesc} + activeSortAsc={activeSortAsc} + /> + )} + </div> + </th> + ); + })} + </tr> + </thead> + <tbody> + {rootTrustCertificatesList.map((certificate, index) => { + return ( + <tr id={"root_certificate_list_item" + (index + 1)} key={index} className={`border-t border-[#E5EBFA] cursor-pointer text-[0.8rem] text-[#191919] font-semibold break-words ${certificate.status.toLowerCase() === "deactivated" ? "text-[#969696]" : "text-[#191919]"}`}> + <td onClick={() => showCertificateDetails(certificate)} className={`${isLoginLanguageRTL ? 'pr-[0.2rem]' : 'pl-[0.2rem]'}`}>{certificate.certId}</td> + <td onClick={() => showCertificateDetails(certificate)} className={`${isLoginLanguageRTL ? 'pr-[0.2rem]' : 'pl-[0.2rem]'}`}>{certificate.partnerDomain}</td> + <td onClick={() => showCertificateDetails(certificate)}>{certificate.issuedTo}</td> + <td onClick={() => showCertificateDetails(certificate)}>{certificate.issuedBy}</td> + <td onClick={() => showCertificateDetails(certificate)} className="px-1">{formatDate(certificate.validFrom, "date", false)}</td> + <td onClick={() => showCertificateDetails(certificate)} className={`${isLoginLanguageRTL ? 'pr-[0.2rem]' : 'pl-[0.2rem]'}`}>{formatDate(certificate.validTill, "date", false)}</td> + <td onClick={() => showCertificateDetails(certificate)}>{formatDate(certificate.timeOfUpload, "dateTime", false)}</td> + <td onClick={() => showCertificateDetails(certificate)}> + <div className={`${bgOfStatus(certificate.status)} flex w-fit py-1.5 px-2 my-2 text-xs font-semibold rounded-md`}> + {getStatusCode(certificate.status, t)} + </div> + </td> + <td className="text-center"> + <div ref={(el) => (submenuRef.current[index] = el)}> + <p id={"root_certificate_list_view" + (index + 1)} onClick={() => setViewCertificateId(index === viewCertificateId ? null : index)} className={`font-semibold mb-0.5 cursor-pointer text-center`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => setViewCertificateId(index === viewCertificateId ? null : index))} + > + ... + </p> + {viewCertificateId === index && ( + <div className={`absolute w-[7%] z-50 bg-white text-xs font-semibold rounded-lg shadow-md border min-w-fit ${isLoginLanguageRTL ? "left-9 text-right" : "right-9 text-left"}`}> + <p id="root_certificate_details_view_btn" onClick={() => showCertificateDetails(certificate)} className={`py-1.5 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100 ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => showCertificateDetails(certificate))} + > + {t("rootTrustCertificate.view")} + </p> + <hr className="h-px bg-gray-100 border-0 mx-1" /> + <p id="root_certificate_deactive_btn" onClick={() => showDeactivateCertificate(certificate)} + className={`py-1.5 px-4 ${isLoginLanguageRTL ? "pl-10" : "pr-10"} ${certificate.status === "active" ? "cursor-pointer" : "text-[#A5A5A5] cursor-auto"} hover:bg-gray-100`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => showDeactivateCertificate(certificate))} + > + {t("rootTrustCertificate.deActivate")} + </p> + </div> + )} + </div> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + <Pagination + dataListLength={filteredCertificateData.length} + selectedRecordsPerPage={selectedRecordsPerPage} + setSelectedRecordsPerPage={setSelectedRecordsPerPage} + setFirstIndex={setFirstIndex} + /> + </> + ) + } </div> - <Pagination - dataListLength={filteredCertificateData.length} - selectedRecordsPerPage={selectedRecordsPerPage} - setSelectedRecordsPerPage={setSelectedRecordsPerPage} - setFirstIndex={setFirstIndex} - ></Pagination> </> )} </div> @@ -482,7 +260,7 @@ function RootTrustCertificateList() { </> )} </div> - ); + ) } export default RootTrustCertificateList; diff --git a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateTab.js b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateTab.js new file mode 100644 index 00000000..3049d33a --- /dev/null +++ b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateTab.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { getUserProfile } from '../../../services/UserProfileService'; +import { isLangRTL, onPressEnterKey } from '../../../utils/AppUtils'; + +function RootTrustCertificateTab({ activeRootTustCertificates, rootTustCertificatesPath, activeIntermediateTrustCertificates, intermediateTrustCertificatesPath }) { + + const { t } = useTranslation(); + const navigate = useNavigate(); + + const changeToRootOfTustCertificates = () => { + navigate(rootTustCertificatesPath) + }; + + const changeToIntermediateRootOfTrustCertificates = () => { + navigate(intermediateTrustCertificatesPath) + }; + + return ( + <div className='flex text-xs bg-[#FCFCFC] font-bold space-x-16 items-start rounded-lg px-[1.5%] pt-[2%] mt-3'> + <div className={`flex-col justify-center`}> + <h6 id='root_of_trust_certificates_tab' onClick={changeToRootOfTustCertificates} + className={`${activeRootTustCertificates ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] cursor-pointer text-sm`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, changeToRootOfTustCertificates)}> + {t('rootTrustCertificateList.rootOfTrustCertificates')} + </h6> + <div className={`h-1 w-[9rem] ${activeRootTustCertificates ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div> + </div> + <div className={`flex-col justify-center`}> + <h6 id='intermediate_root_of_trust_certificates_tab' onClick={changeToIntermediateRootOfTrustCertificates} + className={`${activeIntermediateTrustCertificates ? "text-[#1447b2]" : "text-[#031640]"} mb-[7%] cursor-pointer text-sm`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, changeToIntermediateRootOfTrustCertificates)}> + {t('intermediateTrustCertificateList.intermediateRootTrustCertificates')} + </h6> + <div className={`h-1 w-[15rem] ${activeIntermediateTrustCertificates ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div> + </div> + </div> + ) +} + +export default RootTrustCertificateTab; \ No newline at end of file diff --git a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificatesFilter.js b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificatesFilter.js index a3932957..7bb8a5b1 100644 --- a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificatesFilter.js +++ b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificatesFilter.js @@ -2,68 +2,99 @@ import { useState, useEffect } from 'react'; import DropdownComponent from '../../common/fields/DropdownComponent.js'; import { useTranslation } from 'react-i18next'; -import { createDropdownData } from '../../../utils/AppUtils.js'; +import { createDropdownData, isLangRTL } from '../../../utils/AppUtils.js'; +import TextInputComponent from '../../common/fields/TextInputComponent.js'; +import { getUserProfile } from '../../../services/UserProfileService.js'; -function RootTrustCertificatesFilter({ filteredCertificateData, onFilterChange }) { +function RootTrustCertificatesFilter({ onFilterChange }) { const { t } = useTranslation(); - const [organisationNameData, setOrganisationNameData] = useState([]); + const [certificateIdData, setCertificateIdData] = useState([]); const [partnerDomainData, setPartnerDomainData] = useState([]); const [statusData, setStatusData] = useState([]); + const [statusDropdownData, setStatusDropdownData] = useState([ + { status: 'active' }, + { status: 'deactivated' } + ]); + const [filters, setFilters] = useState({ + certificateId: "", + partnerDomain: "", + issuedTo: "", + issuedBy: "", + status: "", + }); useEffect(() => { const fetchData = async () => { - setOrganisationNameData(createDropdownData('orgName', '', true, filteredCertificateData, t, t('rootTrustCertificate.selectOrganisation'))); - setPartnerDomainData(createDropdownData('partnerDomain', '', true, filteredCertificateData, t, t('rootTrustCertificate.selectPartnerDomain'))); - setStatusData(createDropdownData('status', '', true, filteredCertificateData, t, t('rootTrustCertificate.selectStatus'))); + setStatusData( + createDropdownData("status", "", true, statusDropdownData, t, t("partnerList.selectStatus")) + ); }; fetchData(); }, [t]); - const onFilterChangeEvent = (fieldName, selectedFilter) => { onFilterChange(fieldName, selectedFilter); } const styles = { - dropdownButton: "!text-[#343434] min-w-72" - } + dropdownButton: "min-w-64", + }; + + const styleSet = { + inputField: "min-w-64", + inputLabel: "mb-2", + outerDiv: "ml-4" + }; return ( <> <div className="flex w-full p-2 justify-start bg-[#F7F7F7] flex-wrap"> - <DropdownComponent - fieldName='orgName' - dropdownDataList={organisationNameData} - onDropDownChangeEvent={onFilterChangeEvent} - fieldNameKey='rootTrustCertificate.organisation' - placeHolderKey='rootTrustCertificate.selectOrganisation' + <DropdownComponent + fieldName='certificateId' + dropdownDataList={certificateIdData} + onDropDownChangeEvent={onFilterChangeEvent} + fieldNameKey='rootTrustCertificate.certificateId' + placeHolderKey='rootTrustCertificate.selectCertificateId' styleSet={styles} isPlaceHolderPresent={true} - id='root_cert_organisation_filter' - > - </DropdownComponent> - <DropdownComponent - fieldName='partnerDomain' - dropdownDataList={partnerDomainData} - onDropDownChangeEvent={onFilterChangeEvent} - fieldNameKey='rootTrustCertificate.partnerDomain' + id='root_cert_id_filter' + /> + <DropdownComponent + fieldName='partnerDomain' + dropdownDataList={partnerDomainData} + onDropDownChangeEvent={onFilterChangeEvent} + fieldNameKey='rootTrustCertificate.partnerDomain' placeHolderKey='rootTrustCertificate.selectPartnerDomain' styleSet={styles} isPlaceHolderPresent={true} id='root_cert_partner_domain_filter' - > - </DropdownComponent> - <DropdownComponent - fieldName='status' - dropdownDataList={statusData} - onDropDownChangeEvent={onFilterChangeEvent} - fieldNameKey='rootTrustCertificate.status' + /> + <TextInputComponent + fieldName='issuedTo' + onDropDownChangeEvent={onFilterChangeEvent} + fieldNameKey='rootTrustCertificate.issuedTo' + placeHolderKey='rootTrustCertificate.selectIssuedTo' + styleSet={styleSet} + id='root_cert_issued_to_filter' + /> + <TextInputComponent + fieldName='issuedBy' + onDropDownChangeEvent={onFilterChangeEvent} + fieldNameKey='rootTrustCertificate.issuedBy' + placeHolderKey='rootTrustCertificate.selectIssuedBy' + styleSet={styleSet} + id='root_cert_issued_by_domain_filter' + /> + <DropdownComponent + fieldName='status' + dropdownDataList={statusData} + onDropDownChangeEvent={onFilterChangeEvent} + fieldNameKey='rootTrustCertificate.status' placeHolderKey='rootTrustCertificate.selectStatus' styleSet={styles} isPlaceHolderPresent={true} id='root_cert_status_filter' - > - </DropdownComponent> + /> </div> </> ); diff --git a/pmp-revamp-ui/src/pages/admin/certificates/UploadRootTrustCertificate.js b/pmp-revamp-ui/src/pages/admin/certificates/UploadRootTrustCertificate.js index d0995bb5..36bddac4 100644 --- a/pmp-revamp-ui/src/pages/admin/certificates/UploadRootTrustCertificate.js +++ b/pmp-revamp-ui/src/pages/admin/certificates/UploadRootTrustCertificate.js @@ -137,7 +137,7 @@ function UploadRootTrustCertificate() { )} <div className="flex-col mt-7"> <div className="flex justify-between"> - <Title title="uploadRootofTrustCertificate.uploadRootofTrustCertificate" subTitle='viewRootOfTrustCertificate.viewRootOfTrustCertificate' backLink="/partnermanagement/admin/certificates/root-trust-certificate-list" /> + <Title title="uploadRootofTrustCertificate.uploadRootofTrustCertificate" subTitle='rootTrustCertificate.rootOfTrustCertificates' backLink="/partnermanagement/admin/certificates/root-trust-certificate-list" /> </div> <div className="flex-col justify-center mt-3 h-full"> {!uploadSuccess ?