MOSIP-38029: Added back to SBI in linked devices list (#1081)

Signed-off-by: Swetha K <[email protected]> Co-authored-by: Swetha K <[email protected]>
mosip · Jan 9, 2025 · 40fc6f6 · 40fc6f6
1 parent fabc7ad
commit 40fc6f6
Show file tree

Hide file tree

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

diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json
@@ -450,7 +450,8 @@
         "unexpectedError": "We have encountered with an unexpected error. Please try again.",
         "searchDeviceId": "Search Device ID",
         "selectDeviceId": "Select Device ID",
-        "linkedDevicesList": "List of Linked Devices"
+        "linkedDevicesList": "List of Linked Devices",
+        "backToSbi": "Back to List of SBI"
     },
     "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
@@ -455,7 +455,8 @@
         "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",
-        "linkedDevicesList": "Liste des appareils liés"
+        "linkedDevicesList": "Liste des appareils liés",
+        "backToSbi": "Retour à la liste des SBI"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Voulez-vous désactiver l'appareil ",

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -21,7 +21,7 @@ import viewIcon from "../../../svg/view_icon.svg";
 import DeactivatePopup from '../../common/DeactivatePopup.js';
 import Pagination from '../../common/Pagination.js';
 
-function AdminDevicesList({ title, isLinkedDevicesList }) {
+function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
     const location = useLocation();
     const navigate = useNavigate('');
     const { t } = useTranslation();
@@ -291,11 +291,6 @@ function AdminDevicesList({ title, isLinkedDevicesList }) {
                                 title={title}
                                 backLink='/partnermanagement' 
                             />
-                            {isLinkedDevicesList && (
-                                <button onClick={backToSbi} className="h-10 w-fit text-sm p-3 py-2 text-white bg-tory-blue border border-blue-800 font-semibold rounded-md text-center">
-                                    Back to SBI List
-                                </button>
-                            )}
                         </div>
                         <DeviceProviderServicesTab
                             activeSbi={isLinkedDevicesList ? true: false}
@@ -311,11 +306,14 @@ function AdminDevicesList({ title, isLinkedDevicesList }) {
                             <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={title}
+                                    listTitle={subTitle}
                                     dataListLength={totalRecords}
                                     filter={expandFilter}
                                     onResetFilter={onResetFilter}
                                     setFilter={setExpandFilter}
+                                    addBackArrow={isLinkedDevicesList ? true : false}
+                                    goBack={isLinkedDevicesList && backToSbi}
+                                    backArrowTitle={isLinkedDevicesList && 'devicesList.backToSbi'}
                                 />
                                 <hr className="h-0.5 mt-3 bg-gray-200 border-0" />
                                 {expandFilter && (

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js
@@ -5,6 +5,7 @@ function AllDevicesList () {
     return (
         <AdminDevicesList
             title='devicesList.listOfDevices'
+            subTitle='devicesList.listOfDevices'
             isLinkedDevicesList={false} 
         />
     );

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js
@@ -4,7 +4,8 @@ function LinkedDevicesList () {
 
     return (
         <AdminDevicesList
-            title='devicesList.linkedDevicesList'
+            title='sbiList.listOfSbis'
+            subTitle='devicesList.linkedDevicesList'
             isLinkedDevicesList={true}
         />
     );

diff --git a/pmp-revamp-ui/src/pages/common/FilterButtons.js b/pmp-revamp-ui/src/pages/common/FilterButtons.js
@@ -1,15 +1,24 @@
 import { useTranslation } from 'react-i18next';
 import { getUserProfile } from '../../services/UserProfileService';
 import { isLangRTL, onPressEnterKey } from '../../utils/AppUtils';
+import backArrow from '../../svg/back_arrow.svg';
 
-function FilterButtons({ titleId, listTitle, dataListLength, filter, onResetFilter, setFilter }) {
+function FilterButtons({ titleId, listTitle, dataListLength, filter, onResetFilter, setFilter, goBack, backArrowTitle, addBackArrow }) {
 
     const { t } = useTranslation();
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
     return (
-        <div className="flex w-full p-2">
-            <div id={titleId} className="flex w-full pl-[2%] pt-1 items-center justify-start font-semibold text-dark-blue text-base" >
-                {t(listTitle) + ' (' + dataListLength + ")"}
+        <div className="flex items-center w-full p-2">
+            <div id={titleId} className="flex-col w-full pl-[2%] pt-1 items-center justify-start font-semibold text-dark-blue text-base" >
+                {addBackArrow && (
+                    <div className='flex flex-row'>
+                        <button id='subtitle_back_icon' onClick={goBack} className={`mt-1 cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} >
+                            <img src={backArrow} alt="" />
+                        </button>
+                        <p className={`${isLoginLanguageRTL ? 'pr-2' : 'pl-2'}`}>{t(backArrowTitle)}</p>
+                    </div>
+                )}
+                <p>{t(listTitle) + ' (' + dataListLength + ")"}</p>
             </div>
             <div className="w-full flex justify-end relative items-center">
                 {filter &&