MOSIP-38029: Tabular View of linked devices for a SBI (#1067)

Signed-off-by: Swetha K <[email protected]> Co-authored-by: Swetha K <[email protected]>
mosip · Jan 7, 2025 · 2960401 · 2960401
1 parent 0fd3497
commit 2960401
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 13 deletions.
diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json
@@ -452,7 +452,8 @@
         "selectStatus": "حدد الحالة",
         "unexpectedError": "لقد واجهنا خطأ غير متوقع. يرجى المحاولة مرة أخرى.",
         "searchDeviceId": "البحث عن معرف الجهاز",
-        "selectDeviceId": "حدد معرف الجهاز"
+        "selectDeviceId": "حدد معرف الجهاز",
+        "linkedDevicesList": "قائمة الأجهزة المرتبطة"
     },
     "deactivateDevicePopup": {
         "headerMsg": "هل تريد إلغاء تنشيط الجهاز",

diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json
@@ -447,7 +447,8 @@
         "selectStatus": "Select Status",
         "unexpectedError": "We have encountered with an unexpected error. Please try again.",
         "searchDeviceId": "Search Device Id",
-        "selectDeviceId": "Select Device ID"
+        "selectDeviceId": "Select Device ID",
+        "linkedDevicesList": "List of Linked Devices"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Do you want to deactivate Device ",

diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json
@@ -452,7 +452,8 @@
         "selectStatus": "Sélectionnez le statut",
         "unexpectedError": "Nous avons rencontré une erreur inattendue. Veuillez réessayer.",
         "searchDeviceId": "Rechercher l'ID de l'appareil",
-        "selectDeviceId": "Sélectionner l'ID de l'appareil"
+        "selectDeviceId": "Sélectionner l'ID de l'appareil",
+        "linkedDevicesList": "Liste des appareils liés"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Voulez-vous désactiver l'appareil ",

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js
@@ -30,9 +30,17 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
         sbiId: "",
         sbiVersion: ""
     });
+    const [disableSbiId, setDisableSbiId] = useState(false);
+    const [disableSbiVersion, setDisableSbiVersion] = useState(false);
 
     useEffect(() => {
         if (preFilledFilters) {
+            if(preFilledFilters.sbiId) {
+                setDisableSbiId(true);
+            }
+            if(preFilledFilters.sbiVersion) {
+                setDisableSbiVersion(true);
+            }
             const newFilters = { ...filters, ...preFilledFilters };
             setFilters(newFilters);
             onApplyFilter(newFilters);
@@ -125,6 +133,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
                 fieldNameKey="sbiList.sbiId"
                 placeHolderKey="sbiList.searchSbiId"
                 styleSet={styleSet}
+                disableField={disableSbiId}
                 id="sbi_id_filter"
             />
             <TextInputComponent
@@ -134,6 +143,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
                 fieldNameKey="sbiList.sbiVersion"
                 placeHolderKey="sbiList.searchVersion"
                 styleSet={styleSet}
+                disableField={disableSbiVersion}
                 id="sbi_version_filter"
             />
             <DropdownComponent

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -63,8 +63,8 @@ function AdminDevicesList() {
         sbiVersion: null
     });
     const [preFilledFilters, setPreFilledFilters] = useState({
-        sbiId: "",
-        sbiVersion: ""
+        sbiId: null,
+        sbiVersion: null
     });
     const [isViewLinkedDevices, setIsViewLinkedDevices] = useState(false);
     const submenuRef = useRef([]);
@@ -123,7 +123,7 @@ function AdminDevicesList() {
                     handleServiceErrors(responseData, setErrorCode, setErrorMsg);
                 }
             } else {
-                setErrorMsg(t('adminDeviceDetailsList.errorInAdminDeviceDetailsList'));
+                setErrorMsg(t('devicesList.errorInViewDevices'));
             }
             fetchData ? setTableDataLoaded(true) : setDataLoaded(true);
             setFetchData(false);
@@ -285,7 +285,10 @@ function AdminDevicesList() {
                     )}
                     <div className="flex-col mt-5">
                         <div className="flex justify-between mb-5 max-470:flex-col">
-                            <Title title='devicesList.listOfDevices' backLink='/partnermanagement' />
+                            <Title 
+                                title={isViewLinkedDevices ? 'devicesList.linkedDevicesList' : 'devicesList.listOfDevices'}
+                                backLink='/partnermanagement' 
+                            />
                         </div>
                         <DeviceProviderServicesTab
                             activeSbi={false}
@@ -301,7 +304,7 @@ function AdminDevicesList() {
                             <div className={`bg-[#FCFCFC] w-full mt-1 rounded-t-xl shadow-lg pt-3 ${!tableDataLoaded && "py-6"}`}>
                                 <FilterButtons
                                     titleId='list_of_device_details'
-                                    listTitle='devicesList.listOfDevices'
+                                    listTitle={isViewLinkedDevices ? 'devicesList.linkedDevicesList' : 'devicesList.listOfDevices'}
                                     dataListLength={totalRecords}
                                     filter={expandFilter}
                                     onResetFilter={onResetFilter}

diff --git a/pmp-revamp-ui/src/pages/common/ErrorMessage.js b/pmp-revamp-ui/src/pages/common/ErrorMessage.js
@@ -15,7 +15,7 @@ function ErrorMessage({ errorCode, errorMessage, clickOnCancel, customStyle }) {
     }, [t, errorCode, errorMessage]);
 
     return (
-        <div className={`${customStyle ? customStyle.outerDiv : `flex justify-end max-w-7xl my-5 absolute ${isLoginLanguageRTL ? "left-0.5" : "right-0.5"}`}`}>
+        <div className={`${customStyle ? customStyle.outerDiv : `flex justify-end max-w-7xl my-3 absolute ${isLoginLanguageRTL ? "left-0.5" : "right-0.5"}`}`}>
             <div className={`bg-[#C61818] ${customStyle ? customStyle.innerDiv : 'flex justify-between items-center rounded-xl max-w-[35rem] min-h-14 max-h-[3.8rem] min-w-72 p-4'}`}>
                 <div className="flex items-center">
                     <div className={`h-full ${isLoginLanguageRTL ? 'ml-8': 'mr-8'}`}>

diff --git a/pmp-revamp-ui/src/pages/common/SuccessMessage.js b/pmp-revamp-ui/src/pages/common/SuccessMessage.js
@@ -7,7 +7,7 @@ function SuccessMessage({ successMsg, clickOnCancel, customStyle}) {
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
 
     return (
-        <div className={`${customStyle ? customStyle.outerDiv : `flex justify-end max-w-7xl my-5 absolute ${isLoginLanguageRTL ? "left-0.5" : "right-0.5"}`}`}>
+        <div className={`${customStyle ? customStyle.outerDiv : `flex justify-end max-w-7xl my-3 absolute ${isLoginLanguageRTL ? "left-0.5" : "right-0.5"}`}`}>
             <div className={` bg-fruit-salad ${customStyle ? customStyle.innerDiv : 'flex justify-between items-center rounded-xl max-w-[35rem] min-h-14 min-w-72 p-4'}`}>
                 <div className={`${isLoginLanguageRTL ? 'ml-6':'mr-6'} w-[90%]`}>
                     <p className="text-sm/4 text-white break-words font-inter" dangerouslySetInnerHTML={{ __html: successMsg }}/>

diff --git a/pmp-revamp-ui/src/pages/common/fields/TextInputComponent.js b/pmp-revamp-ui/src/pages/common/fields/TextInputComponent.js
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { isLangRTL } from '../../../utils/AppUtils';
 import { getUserProfile } from '../../../services/UserProfileService';
 
-function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, textBoxValue, onTextChange, styleSet, id, maxLength }) {
+function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, textBoxValue, onTextChange, styleSet, id, maxLength, disableField }) {
     const { t } = useTranslation();
     const [inputValue, setInputValue] = useState("");
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
@@ -41,9 +41,10 @@ function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, textBoxVa
                     onChange={handleInputChange}
                     placeholder={t(placeHolderKey)}
                     {...(maxLength && { maxLength })}
-                    className={`rounded-[4px] h-9 w-full p-2 focus:outline-none items-center ${styleSet?.inputField || ''}`}
+                    readOnly={disableField}
+                    className={`${disableField ? 'bg-platinum-gray': 'bg-white'} rounded-[4px] h-9 w-full p-2 focus:outline-none items-center ${styleSet?.inputField || ''}`}
                 />
-                {inputValue && (
+                {inputValue && !disableField && (
                     <button
                     onClick={onTextClear}
                     className={`flex items-center bg-white font-bold rounded-md px-2 min-h-9 ${isLoginLanguageRTL ? '-mr-6' : '-ml-6'} focus:ring-2 focus:ring-blue-500 items-center hover:cursor-pointer`}