From f5d8e126c76f705f1954103acd022dd5ed3d7264 Mon Sep 17 00:00:00 2001 From: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:44:42 +0530 Subject: [PATCH] MOSIP-34623: UI fixes in Device Provider Services (#701) * MOSIP-34623: UI fixes in Device Provider Services Signed-off-by: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> * MOSIP-34623: UI fixes in Device Provider Services Signed-off-by: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> * MOSIP-34623: UI fixes in Device Provider Services Signed-off-by: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> --------- Signed-off-by: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> --- pmp-reactjs-ui/public/i18n/ara.json | 8 ++-- pmp-reactjs-ui/public/i18n/eng.json | 8 ++-- pmp-reactjs-ui/public/i18n/fra.json | 6 ++- pmp-reactjs-ui/src/pages/common/Title.js | 23 ++++++++-- .../deviceProviderServices/AddDevices.js | 43 +++++++++++++------ .../pages/deviceProviderServices/AddSbi.js | 15 ++++--- .../deviceProviderServices/DevicesList.js | 21 +++++++-- .../pages/deviceProviderServices/SbiList.js | 28 +++++++----- .../ViewDeviceDetails.js | 15 +++++-- .../deviceProviderServices/WarningPopup.js | 12 ++++-- pmp-reactjs-ui/src/utils/AppUtils.js | 9 ++++ 11 files changed, 137 insertions(+), 51 deletions(-) diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json index cdf32f125..0a9fa4d08 100644 --- a/pmp-reactjs-ui/public/i18n/ara.json +++ b/pmp-reactjs-ui/public/i18n/ara.json @@ -340,12 +340,13 @@ "listOfDevices": "قائمة الأجهزة ل" }, "addSbis": { - "addSbi": "أضف الهيئة الفرعية للتنفيذ", + "addSbi": "إضافة SBI", + "addSbiDetails": "إضافة تفاصيل SBI", "guidence": "بعد تقديم التفاصيل أدناه بنجاح، سيتم إرسال طلب SBI إلى المسؤول للموافقة عليه", "partnerIdTooltip": "تتوفر فقط معرفات الشركاء لمزود الجهاز الذي تم تحميل شهادة الشريك الخاصة به في القائمة المنسدلة. إذا لم تجد معرف الشريك الخاص بك، فيرجى تحميل شهادة الشريك أولاً", "sbiVersion": "نسخة الهيئة الفرعية للتنفيذ", "enterVersionOfSoftware": "أدخل إصدار SBI", - "binaryHash": "التجزئة الثنائية", + "binaryHash": "تجزئة ثنائية SBI", "enterBinaryHash": "أدخل التجزئة الثنائية لـ SBI", "enterVersion": "أدخل الإصدار", "sbiCreatedDate": "تاريخ إنشاء الهيئة الفرعية للتنفيذ", @@ -356,6 +357,7 @@ "errorInAddingSbi": "أثناء إضافة واجهة القياسات الحيوية الآمنة (SBI) واجهنا خطأ." }, "sbiList": { + "listOfSbi": "قائمة SBI", "addSbiDevice": "إضافة جهاز SBI", "addSbi": "إضافة SBI", "devices": "الأجهزة", @@ -368,7 +370,7 @@ "partnerType": "نوع الشريك", "createdDate": "تاريخ ووقت إنشاء SBI", "expiryDate": "تاريخ ووقت انتهاء صلاحية SBI", - "deactivate": "إلغاء التنشيط", + "deactivate": "إلغاء تنشيط SBI", "submittedOn": "تم إرساله", "errorInSbiList": "أثناء جلب قوائم SBI، واجهنا خطأً.", "guidence": "ملاحظة: 1. لا يمكن للمستخدم إضافة أجهزة إلا بعد موافقة مسؤول الشريك على SBI. 2. لا يمكن للمستخدم إضافة أجهزة بعد انتهاء صلاحية SBI" diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json index 64087376d..a812c05b6 100644 --- a/pmp-reactjs-ui/public/i18n/eng.json +++ b/pmp-reactjs-ui/public/i18n/eng.json @@ -339,11 +339,12 @@ }, "addSbis": { "addSbi": "Add SBI", + "addSbiDetails": "Add SBI details", "guidence": "After the below details are successfully submitted, the SBI request will be sent to admin for approval.", "partnerIdTooltip": "Only those partner IDs of Device Provider whose partner certificate is uploaded is available in the dropdown. If you don't find your partner ID, please upload partner certificate first", "sbiVersion": "SBI Version", "enterVersionOfSoftware": "Enter version of SBI", - "binaryHash": "Binary Hash", + "binaryHash": "SBI Binary Hash", "enterBinaryHash": "Enter binary hash of SBI", "sbiCreatedDate": "SBI Created Date", "selectDate": "Select Date", @@ -352,6 +353,7 @@ "errorInAddingSbi": "While adding SBI, we have encountered with an error." }, "sbiList": { + "listOfSbi": "List of SBI", "addSbiDevice": "Add SBI-Device", "addSbi": "Add SBI", "devices": "devices", @@ -363,7 +365,7 @@ "partnerType": "Partner Type", "createdDate": "SBI Created Date & Time", "expiryDate": "SBI Expiry Date & Time", - "deactivate": "Deactivate", + "deactivate": "Deactivate SBI", "submittedOn": "Submitted On", "errorInSbiList": "While fetching SBI Lists, we have encountered with an error.", "guidence": "Note: 1. User can add devices only after the SBI is approved by Partner Admin. 2. User cannot add devices anymore after the SBI is expired" @@ -407,7 +409,7 @@ "errorInDeviceSubType": "While fetching device sub types, we have encountered with an error.", "errorInDeviceType": "While fetching device types, we have encountered with an error.", "errorInAddingDevice": "While adding device, we have encountered with an error.", - "limitExceedWarning": "Maximum of 25 devices can be added at a time. Click Confirm to refresh this page and add more devices. Please note that all the previously submitted devices will not be visible upon refreshing but can be viewed in List of Devices Page", + "limitExceedWarning": "Maximum of 25 devices can be added at a time. Click Confirm to refresh this page and add more devices. Please note that all the previously submitted devices will not be visible upon refreshing but can be viewed in List of Devices Page.", "inActiveDeviceMappingToSbiError": "We have encountered with an error, please contact your administrator." }, "viewDeviceDetails": { diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json index 42d941507..508ac864e 100644 --- a/pmp-reactjs-ui/public/i18n/fra.json +++ b/pmp-reactjs-ui/public/i18n/fra.json @@ -341,11 +341,12 @@ }, "addSbis": { "addSbi": "Ajouter un SBI", + "addSbiDetails": "Ajouter les détails SBI", "guidence": "Une fois les détails ci-dessous soumis avec succès, la demande SBI sera envoyée à l'administrateur pour approbation.", "partnerIdTooltip": "Seuls les identifiants de partenaire du fournisseur d'appareils dont le certificat partenaire est téléchargé sont disponibles dans la liste déroulante. Si vous ne trouvez pas votre identifiant de partenaire, veuillez d'abord télécharger le certificat partenaire", "sbiVersion": "Version SBI", "enterVersionOfSoftware": "Entrez la version de SBI", - "binaryHash": "Hachage binaire", + "binaryHash": "Hachage binaire SBI", "enterBinaryHash": "Entrez le hachage binaire de SBI", "enterVersion": "Entrez la version", "sbiCreatedDate": "Date de création du SBI", @@ -356,6 +357,7 @@ "errorInAddingSbi": "Lors de l'ajout de SBI, nous avons rencontré une erreur." }, "sbiList": { + "listOfSbi": "Liste des SBI", "addSbiDevice": "Ajouter un périphérique SBI", "addSbi": "Ajouter un SBI", "devices": "appareils", @@ -368,7 +370,7 @@ "partnerType": "Type de partenaire", "createdDate": "Date et heure de création du SBI", "expiryDate": "Date et heure d'expiration du SBI", - "deactivate": "Désactiver", + "deactivate": "Désactiver SBI", "submittedOn": "Soumis le", "errorInSbiList": "Lors de la récupération des listes SBI, nous avons rencontré une erreur.", "guidence": "Remarque : 1. L'utilisateur ne peut ajouter des appareils qu'une fois le SBI approuvé par l'administrateur partenaire. 2. L'utilisateur ne peut plus ajouter d'appareils une fois le SBI expiré" diff --git a/pmp-reactjs-ui/src/pages/common/Title.js b/pmp-reactjs-ui/src/pages/common/Title.js index d30337565..84c15ea23 100644 --- a/pmp-reactjs-ui/src/pages/common/Title.js +++ b/pmp-reactjs-ui/src/pages/common/Title.js @@ -1,18 +1,35 @@ import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { getUserProfile } from '../../services/UserProfileService'; -import { isLangRTL, moveToHome, onPressEnterKey } from '../../utils/AppUtils'; +import { isLangRTL, moveToHome, onPressEnterKey, getStatusCode, bgOfStatus } from '../../utils/AppUtils'; import backArrow from '../../svg/back_arrow.svg'; -function Title({ title, subTitle, subTitle2, backLink, backLink2, styleSet}) { +function Title({ title, subTitle, subTitle2, backLink, backLink2, status, version, styleSet}) { const { t } = useTranslation(); const navigate = useNavigate(); const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); + + const goBack = () => { + if (backLink2) { + navigate(backLink2); + } else { + navigate(backLink); + } + }; + return (
- navigate(backLink)} className={`mt-[1%] ${styleSet && styleSet.backArrowIcon ? styleSet.backArrowIcon : ''} cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} tabIndex="0" onKeyPress={(e) =>onPressEnterKey(e,() => navigate(backLink))}/> + onPressEnterKey(e, goBack)}/>

{t(title)}

+ {(status && version) && ( +
+

{version} |

+
+ {getStatusCode(status, t)} +
+
+ )}

moveToHome(navigate)} className="font-semibold text-tory-blue text-xs cursor-pointer" tabIndex="0" onKeyPress={(e) => onPressEnterKey(e,() => moveToHome(navigate))}> {t('commons.home')} diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js index 7f6024015..979ed866d 100644 --- a/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js +++ b/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js @@ -4,7 +4,7 @@ import { useNavigate, useBlocker } from "react-router-dom"; import { getUserProfile } from '../../services/UserProfileService.js'; import { HttpService } from '../../services/HttpService.js'; import Title from '../common/Title.js'; -import { isLangRTL, createDropdownData, createRequest, getPartnerManagerUrl, handleServiceErrors } from '../../utils/AppUtils.js'; +import { isLangRTL, createDropdownData, createRequest, getPartnerManagerUrl, handleServiceErrors, validateInput } from '../../utils/AppUtils.js'; import LoadingIcon from "../common/LoadingIcon.js"; import ErrorMessage from '../common/ErrorMessage.js'; import SuccessMessage from "../common/SuccessMessage"; @@ -23,9 +23,11 @@ function AddDevices() { const [deviceEntries, setDeviceEntries] = useState([]); const [deviceTypeDropdownData, setDeviceTypeDropdownData] = useState([]); const [addDeviceEnabled, setAddDeviceEnabled] = useState(false); - const [backToSBIListEnabled, setBackToSBIListEnabled] = useState(false); const [showPopup, setShowPopup] = useState(false); const [isSubmitClicked, setIsSubmitClicked] = useState(false); + const [previousPath, setPreviousPath] = useState(true); + const [invalidMake, setInvalidMake] = useState(""); + const [invalidModel, setInvalidModel] = useState(""); let isCancelledClicked = false; const blocker = useBlocker( @@ -73,8 +75,19 @@ function AddDevices() { }; }, [deviceEntries, isSubmitClicked]); + useEffect(() => { + const pathData = localStorage.getItem('previousPath'); + if (!pathData) { + setErrorMsg(t('devicesList.unexpectedError')); + return; + } + let path = JSON.parse(pathData); + setPreviousPath(path); + }, []); + useEffect(() => { async function initialize() { + setDataLoaded(false); const deviceTypeData = await fetchDeviceTypeDropdownData(); setDeviceTypeDropdownData(deviceTypeData); const initialEntry = await createEmptyDeviceEntry(deviceTypeData); @@ -166,6 +179,12 @@ function AddDevices() { const handleInputChange = async (index, field, value) => { const newEntries = [...deviceEntries]; newEntries[index][field] = value; + if (field === 'make') { + setInvalidMake(validateInput(value, t)); + } + if (field === 'model') { + setInvalidModel(validateInput(value, t)); + } if (field === 'deviceType') { const subtypeData = await fetchDeviceSubTypeDropdownData(value); newEntries[index].deviceSubTypeDropdownData = createDropdownData('fieldCode', '', false, subtypeData, t); @@ -176,7 +195,7 @@ function AddDevices() { const isFormValid = (index) => { const entry = deviceEntries[index]; - return entry.deviceType && entry.deviceSubType && entry.make && entry.model; + return entry.deviceType && entry.deviceSubType && entry.make && entry.model && !invalidMake && !invalidModel; }; const clearForm = async (index) => { @@ -197,8 +216,8 @@ function AddDevices() { deviceProviderId: getUserProfile().userName, deviceTypeCode: entry.deviceType, deviceSubTypeCode: entry.deviceSubType, - make: entry.make, - model: entry.model + make: entry.make.trim(), + model: entry.model.trim() }); try { const response = await HttpService.post(getPartnerManagerUrl(`/devicedetail`, process.env.NODE_ENV), request); @@ -267,10 +286,8 @@ function AddDevices() { }; const updateButtonStates = () => { - const anySubmitted = deviceEntries.some(entry => entry.isSubmitted); const allSubmitted = deviceEntries.every(entry => entry.isSubmitted); setAddDeviceEnabled(allSubmitted); - setBackToSBIListEnabled(anySubmitted); }; const addDeviceEntry = async () => { @@ -332,7 +349,7 @@ function AddDevices() { )}

- +
@@ -380,12 +397,14 @@ function AddDevices() { handleInputChange(index, 'make', e.target.value)} maxLength={36} className={`h-10 px-2 py-3 border border-[#707070] rounded-md text-base text-dark-blue ${entry.isSubmitted ? 'bg-[#EBEBEB]' : 'bg-white'} leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar`} placeholder={t('addDevices.enterMake')} /> + {invalidMake && {invalidMake}}
handleInputChange(index, 'model', e.target.value)} maxLength={36} className={`h-10 px-2 py-3 border border-[#707070] rounded-md text-base text-dark-blue ${entry.isSubmitted ? 'bg-[#EBEBEB]' : 'bg-white'} leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar`} placeholder={t('addDevices.enterModel')} /> + {invalidModel && {invalidModel}}
@@ -417,11 +436,9 @@ function AddDevices() { - {backToSBIListEnabled && ( - - )} + {showPopup && ( setShowPopup(false)}> )} diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/AddSbi.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/AddSbi.js index 30fe864c0..92556c0e7 100644 --- a/pmp-reactjs-ui/src/pages/deviceProviderServices/AddSbi.js +++ b/pmp-reactjs-ui/src/pages/deviceProviderServices/AddSbi.js @@ -7,7 +7,7 @@ import { getUserProfile } from '../../services/UserProfileService'; import Title from "../common/Title"; import { isLangRTL, getPartnerTypeDescription, moveToSbisList, getPartnerManagerUrl, createDropdownData, - handleServiceErrors, createRequest + handleServiceErrors, createRequest, validateInput } from "../../utils/AppUtils"; import LoadingIcon from "../common/LoadingIcon"; import ErrorMessage from "../common/ErrorMessage"; @@ -32,6 +32,7 @@ function AddSbi() { const [expiryDate, setExpiryDate] = useState(""); const [partnerIdDropdownData, setPartnerIdDropdownData] = useState([]); const [IsSubmitClicked, setIsSubmitClicked] = useState(false); + const [invalidVersion, setInvalidVersion] = useState(""); let isCancelledClicked = false; @@ -100,6 +101,7 @@ function AddSbi() { }, []); const onChangeSbiVersion = (value) => { + setInvalidVersion(validateInput(value, t)); setSbiVersion(value) }; @@ -194,7 +196,7 @@ function AddSbi() { }; const isFormValid = () => { - return partnerId && sbiVersion && binaryHash + return partnerId && sbiVersion && binaryHash && !invalidVersion; }; const clickOnCancel = () => { @@ -218,7 +220,7 @@ function AddSbi() { )}
- +
@@ -255,14 +257,15 @@ function AddSbi() {
- + onChangeSbiVersion(e.target.value)} maxLength={64} className="h-10 w-full px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" placeholder={t('addSbis.enterVersionOfSoftware')} /> + {invalidVersion && {invalidVersion}}
- - onChangeBinaryHash(e.target.value)} maxLength={36} + + onChangeBinaryHash(e.target.value)} maxLength={26} className="h-10 w-full px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" placeholder={t('addSbis.enterBinaryHash')} />
diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/DevicesList.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/DevicesList.js index e55f480e8..0bec61901 100644 --- a/pmp-reactjs-ui/src/pages/deviceProviderServices/DevicesList.js +++ b/pmp-reactjs-ui/src/pages/deviceProviderServices/DevicesList.js @@ -114,6 +114,11 @@ function DevicesList() { }; const addDevices = () => { + const previousPath = { + name: 'devicesList.listOfDevices', + path: '/partnermanagement/deviceProviderServices/devicesList' + }; + localStorage.setItem('previousPath', JSON.stringify(previousPath)); navigate('/partnermanagement/deviceProviderServices/addDevices'); } @@ -150,6 +155,13 @@ function DevicesList() { } const showDeviceDetails = (selectedDeviceData) => { + if (selectedDeviceData.approvalStatus !== "deactivated" && selectedDeviceData.approvalStatus !== "rejected") { + localStorage.setItem('selectedDeviceData', JSON.stringify(selectedDeviceData)); + navigate('/partnermanagement/deviceProviderServices/viewDeviceDetails') + } + } + + const viewDeviceDetails = (selectedDeviceData) => { localStorage.setItem('selectedDeviceData', JSON.stringify(selectedDeviceData)); navigate('/partnermanagement/deviceProviderServices/viewDeviceDetails') } @@ -177,8 +189,11 @@ function DevicesList() {
{devicesList.length > 0 ? @@ -267,7 +282,7 @@ function DevicesList() { { tableRows.map((device, index, currentArray) => { return ( - <tr key={index} className={`border-t border-[#E5EBFA] text-[0.8rem] text-[#191919] font-semibold break-words ${device.isActive === false ? "text-[#969696]" : "text-[#191919] cursor-pointer"}`}> + <tr key={index} className={`border-t border-[#E5EBFA] text-[0.8rem] text-[#191919] font-semibold break-words ${(device.approvalStatus === "deactivated" || device.approvalStatus === "rejected") ? "text-[#969696]" : "text-[#191919] cursor-pointer"}`}> <td onClick={() => showDeviceDetails(device)} className="px-2 mx-2">{device.deviceTypeCode}</td> <td onClick={() => showDeviceDetails(device)} className="px-2 mx-2">{device.deviceSubTypeCode}</td> <td onClick={() => showDeviceDetails(device)} className="px-2 mx-2">{device.make}</td> @@ -285,7 +300,7 @@ function DevicesList() { ...</p> {viewDeviceId === index && ( <div className={`absolute w-[7%] ${currentArray.length - 1 === index ? '-bottom-2' : currentArray.length - 2 === index ? '-bottom-2' : 'top-7'} z-20 bg-white text-xs font-semibold rounded-lg shadow-md border min-w-fit ${isLoginLanguageRTL ? "left-10 text-right" : "right-10 text-left"}`}> - <p onClick={() => showDeviceDetails(device)} className={`py-2 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100 ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => showDeviceDetails(device))}> + <p onClick={() => viewDeviceDetails(device)} className={`py-2 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100 ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => viewDeviceDetails(device))}> {t('devicesList.view')} </p> <hr className="h-px bg-gray-100 border-0 mx-1" /> diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/SbiList.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/SbiList.js index 6b57ba830..1b126660f 100644 --- a/pmp-reactjs-ui/src/pages/deviceProviderServices/SbiList.js +++ b/pmp-reactjs-ui/src/pages/deviceProviderServices/SbiList.js @@ -70,6 +70,11 @@ function SbiList() { const addDevices = (sbi) => { console.log(sbi) setSelectedSbiData(sbi); + const previousPath = { + name: 'sbiList.listOfSbi', + path: '/partnermanagement/deviceProviderServices/sbiList' + }; + localStorage.setItem('previousPath', JSON.stringify(previousPath)); navigate('/partnermanagement/deviceProviderServices/addDevices'); }; @@ -82,6 +87,7 @@ function SbiList() { const sbiData = { sbiId: sbi.sbiId, sbiVersion: sbi.sbiVersion, + status: sbi.status, canAddDevices: canAddDevices(sbi), partnerId: sbi.partnerId }; @@ -130,7 +136,7 @@ function SbiList() { } return ( - <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} overflow-x-scroll font-inter`}> + <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} max-[500px]:overflow-x-scroll font-inter`}> {!dataLoaded && ( <LoadingIcon></LoadingIcon> )} @@ -143,9 +149,9 @@ function SbiList() { </div> </div> )} - <div className="flex-col mt-7"> + <div className="flex-col mt-7 !mb-4"> <div className="flex justify-between mb-5"> - <Title title='deviceProviderServices.listOfSbisAndDevices' backLink='/partnermanagement' styleSet={styleForTitle}> + {sbiList.length > 0 ?
@@ -180,7 +186,7 @@ function SbiList() {
-

{sbi.sbiVersion}

+

{sbi.sbiVersion}

{getStatusCode(sbi.status, t)} @@ -221,24 +227,24 @@ function SbiList() {
-
+

{t('sbiList.partnerId')}

-

{sbi.partnerId}

+

{sbi.partnerId}

{t('sbiList.partnerType')}

-

{getPartnerTypeDescription(sbi.partnerType, t)}

+

{getPartnerTypeDescription(sbi.partnerType, t)}

{t('sbiList.submittedOn')}

-

{formatDate(sbi.crDtimes, 'date')}

+

{formatDate(sbi.crDtimes, 'date')}

-
+

{t('sbiList.createdDate')}

-

{sbi.sbiSoftwareCreatedDtimes}

+

{sbi.sbiSoftwareCreatedDtimes}

{t('sbiList.expiryDate')}

diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/ViewDeviceDetails.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/ViewDeviceDetails.js index fa9ccc23c..72cbb563f 100644 --- a/pmp-reactjs-ui/src/pages/deviceProviderServices/ViewDeviceDetails.js +++ b/pmp-reactjs-ui/src/pages/deviceProviderServices/ViewDeviceDetails.js @@ -4,7 +4,6 @@ import { bgOfStatus, formatDate, getStatusCode, isLangRTL, moveToSbisList } from import { getUserProfile } from '../../services/UserProfileService'; import { useNavigate } from 'react-router-dom'; import Title from '../common/Title'; -import LoadingIcon from "../common/LoadingIcon"; import somethingWentWrongIcon from '../../svg/something_went_wrong_icon.svg'; function ViewDeviceDetails() { @@ -47,7 +46,7 @@ function ViewDeviceDetails() { <>
- +
{unexpectedError && (
@@ -67,8 +66,8 @@ function ViewDeviceDetails() {
-

- {deviceDetails.deviceProviderId} +

+ {deviceDetails.make} - {deviceDetails.model}

@@ -130,6 +129,14 @@ function ViewDeviceDetails() { {deviceDetails.crDtimes}

+
+

+ {t("addSbis.sbiVersion")} +

+

+ {selectedSbidata.sbiVersion} +

+
diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/WarningPopup.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/WarningPopup.js index 4ae98135a..b5dfc86bf 100644 --- a/pmp-reactjs-ui/src/pages/deviceProviderServices/WarningPopup.js +++ b/pmp-reactjs-ui/src/pages/deviceProviderServices/WarningPopup.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { isLangRTL } from "../../utils/AppUtils"; import { getUserProfile } from "../../services/UserProfileService.js"; @@ -9,7 +9,6 @@ function WarningPopup({ closePopUp }) { const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); const closingPopUp = () => { - document.body.style.overflow = "auto" closePopUp() }; @@ -17,12 +16,19 @@ function WarningPopup({ closePopUp }) { window.location.reload(); } + useEffect(() => { + document.body.style.overflow = 'hidden'; + return () => { + document.body.style.overflow = 'auto'; + }; + }, []); + return (
-

+

{t('addDevices.limitExceedWarning')}

diff --git a/pmp-reactjs-ui/src/utils/AppUtils.js b/pmp-reactjs-ui/src/utils/AppUtils.js index 4ad7aeeb9..62c59b74b 100644 --- a/pmp-reactjs-ui/src/utils/AppUtils.js +++ b/pmp-reactjs-ui/src/utils/AppUtils.js @@ -258,6 +258,15 @@ export const validateName = (value, length, t) => { } }; +export const validateInput = (value, t) => { + const regexPattern = /^(?!\s+$)[a-zA-Z0-9-_ ,.&:]*$/; + if (!regexPattern.test(value)) { + return t('commons.specialCharNotAllowed'); + } else { + return ""; + } +}; + export const validateUrl = (index, value, length, urlArr, t) => { const urlPattern = /^(http|https):\/\/[^ "]+$/; if (value === "") {