MOSIP-34623: UI fixes in Device Provider Services (#701)

* MOSIP-34623: UI fixes in Device Provider Services Signed-off-by: SwethaKrish4 <[email protected]> * MOSIP-34623: UI fixes in Device Provider Services Signed-off-by: SwethaKrish4 <[email protected]> * MOSIP-34623: UI fixes in Device Provider Services Signed-off-by: SwethaKrish4 <[email protected]> --------- Signed-off-by: SwethaKrish4 <[email protected]>
mosip · Aug 14, 2024 · f5d8e12 · f5d8e12
1 parent 8fef910
commit f5d8e12
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
         <div className="flex items-start gap-x-2">
-            <img src={backArrow} alt="" onClick={() => navigate(backLink)} className={`mt-[1%] ${styleSet && styleSet.backArrowIcon ? styleSet.backArrowIcon : ''} cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} tabIndex="0" onKeyPress={(e) =>onPressEnterKey(e,() => navigate(backLink))}/>
+            <img src={backArrow} alt="" onClick={goBack} className={`mt-[1%] ${styleSet && styleSet.backArrowIcon ? styleSet.backArrowIcon : ''} cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} tabIndex="0" onKeyPress={(e) =>onPressEnterKey(e, goBack)}/>
             <div className="flex-col">
                 <h1 className="font-semibold text-lg text-dark-blue">{t(title)}</h1>
+                {(status && version) && (
+                    <div className="flex mb-2">
+                        <h1 className="font-semibold text-lg text-[#707070]">{version} | </h1>
+                        <div className={`${(status === 'deactivated') ? 'bg-[#A5A5A5] text-white' : bgOfStatus(status)} flex w-fit py-1.5 px-2 ${isLoginLanguageRTL ? "ml-1" : "mr-1 ml-2"} text-xs font-semibold rounded-md`}>
+                            {getStatusCode(status, t)}
+                        </div>
+                    </div>
+                )}
                 <div className="flex space-x-1">
                     <p onClick={() => 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
@@ -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() {
                     )}
                     <div className="flex-col mt-7">
                         <div className="flex justify-between mb-5">
-                            <Title title='addDevices.addDevices' subTitle='deviceProviderServices.listOfSbisAndDevices' backLink='/partnermanagement/deviceProviderServices/sbiList' styleSet={styleForTitle}></Title>
+                            <Title title='addDevices.addDevices' subTitle={previousPath.name} backLink={previousPath.path} styleSet={styleForTitle}></Title>
                         </div>
                         <div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center">
                             <div className="flex items-center justify-center p-2">
@@ -380,12 +397,14 @@ function AddDevices() {
                                                 <input disabled={entry.isSubmitted} value={entry.make} onChange={(e) => 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 && <span className="text-sm text-crimson-red font-semibold">{invalidMake}</span>}
                                             </div>
                                             <div className="flex flex-col w-[21.5%] max-[850px]:w-[47%] max-[585px]:w-full">
                                                 <label className={`block text-dark-blue text-base font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('addDevices.model')}<span className="text-crimson-red mx-1">*</span></label>
                                                 <input disabled={entry.isSubmitted} value={entry.model} onChange={(e) => 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 && <span className="text-sm text-crimson-red font-semibold">{invalidModel}</span>}
                                             </div>
                                         </div>
                                     </form>
@@ -417,11 +436,9 @@ function AddDevices() {
                             <button onClick={addDeviceEntry} disabled={!addDeviceEnabled} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-36 h-11 border rounded-md text-sm font-semibold ${addDeviceEnabled ? 'border-[#1447B2] bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`}>
                                 {t('addDevices.addDevice')}
                             </button>
-                            {backToSBIListEnabled && (
-                                <button onClick={clickOnBack} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-36 h-11 border rounded-md text-sm font-semibold border-[#1447B2] bg-tory-blue text-white`}>
-                                    {t('addDevices.backToSBIList')}
-                                </button>
-                            )}
+                            <button onClick={clickOnBack} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-36 h-11 border rounded-md text-sm font-semibold border-[#1447B2] bg-tory-blue text-white`}>
+                                {t('addDevices.backToSBIList')}
+                            </button>
                             {showPopup && (
                                 <WarningPopup closePopUp={() => setShowPopup(false)}></WarningPopup>
                             )}