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

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

Hide file tree

Showing 9 changed files with 60 additions and 21 deletions.
diff --git a/pmp-revamp-ui/src/AppRoutes.js b/pmp-revamp-ui/src/AppRoutes.js
@@ -43,12 +43,13 @@ import ViewAdminApiKeyDetails from './pages/admin/authenticationServices/ViewAdm
 import AdminFtmList from './pages/admin/ftmProviderServices/AdminFtmList.js';
 import ViewAdminFtmChipDetails from './pages/admin/ftmProviderServices/ViewAdminFtmChipDetails.js';
 import AdminSbiList from './pages/admin/deviceProviderServices/AdminSbiList.js';
-import AdminDevicesList from './pages/admin/deviceProviderServices/AdminDevicesList.js';
+import LinkedDevicesList from './pages/admin/deviceProviderServices/LinkedDevicesList.js';
 import ViewAdminSbiDetails from './pages/admin/deviceProviderServices/ViewAdminSbiDetails.js';
 import ViewAdminDeviceDetails from './pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js';
 import RootCertificatesList from './pages/admin/certificates/RootCertificatesList.js';
 import IntermediateCertificatesList from './pages/admin/certificates/IntermediateCertificatesList.js';
 import ViewCertificateDetails from './pages/admin/certificates/ViewCertificateDetails.js';
+import AllDevicesList from './pages/admin/deviceProviderServices/AllDevicesList.js';
 
 function AppRoutes() {
 
@@ -257,9 +258,13 @@ function AppRoutes() {
           path: 'admin/device-provider-services/sbi-list',
           element: <GuardedRoute><MainLayout><AdminSbiList /></MainLayout></GuardedRoute>
         },
+        {
+          path: 'admin/device-provider-services/linked-devices-list',
+          element: <GuardedRoute><MainLayout><LinkedDevicesList /></MainLayout></GuardedRoute>
+        },
         {
           path: 'admin/device-provider-services/devices-list',
-          element: <GuardedRoute><MainLayout><AdminDevicesList /></MainLayout></GuardedRoute>
+          element: <GuardedRoute><MainLayout><AllDevicesList /></MainLayout></GuardedRoute>
         },
         {
           path: 'admin/device-provider-services/view-sbi-details',

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js
@@ -43,7 +43,6 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
             }
             const newFilters = { ...filters, ...preFilledFilters };
             setFilters(newFilters);
-            onApplyFilter(newFilters);
         }
         const fetchData = async () => {
             const deviceTypeData = await fetchDeviceTypeDropdownData();

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() {
+function AdminDevicesList({ title, isLinkedDevicesList }) {
     const location = useLocation();
     const navigate = useNavigate('');
     const { t } = useTranslation();
@@ -66,7 +66,6 @@ function AdminDevicesList() {
         sbiId: null,
         sbiVersion: null
     });
-    const [isViewLinkedDevices, setIsViewLinkedDevices] = useState(false);
     const submenuRef = useRef([]);
 
     const tableHeaders = [
@@ -87,7 +86,7 @@ function AdminDevicesList() {
         handleMouseClickForDropdown(submenuRef, () => setActionId(-1));
     }, [submenuRef]);
 
-    const fetchDeviceDetails = async () => {
+    const fetchDeviceDetails = async (sbiId, sbiVersion) => {
         const queryParams = new URLSearchParams();
         queryParams.append('sortFieldName', sortFieldName);
         queryParams.append('sortType', sortType);
@@ -106,8 +105,8 @@ function AdminDevicesList() {
         if (filterAttributes.deviceType) queryParams.append('deviceType', filterAttributes.deviceType);
         if (filterAttributes.deviceSubType) queryParams.append('deviceSubType', filterAttributes.deviceSubType);
         if (filterAttributes.deviceId) queryParams.append('deviceId', filterAttributes.deviceId);
-        if (filterAttributes.sbiId) queryParams.append('sbiId', filterAttributes.sbiId);
-        if (filterAttributes.sbiVersion) queryParams.append('sbiVersion', filterAttributes.sbiVersion);
+        if (filterAttributes.sbiId || sbiId) queryParams.append('sbiId', filterAttributes.sbiId || sbiId);
+        if (filterAttributes.sbiVersion || sbiVersion) queryParams.append('sbiVersion', filterAttributes.sbiVersion || sbiVersion);
 
         const url = `${getPartnerManagerUrl('/devicedetail/search/v2', process.env.NODE_ENV)}?${queryParams.toString()}`;
         try {
@@ -148,15 +147,14 @@ function AdminDevicesList() {
                 sbiVersion: sbiVersion,
             }));
             setApplyFilter(true);
-            setIsViewLinkedDevices(true);
         }
-        fetchDeviceDetails();
+        fetchDeviceDetails(sbiId, sbiVersion);
     }, [sortFieldName, sortType, pageNo, pageSize]);
 
     useEffect(() => {
 
         if (isApplyFilterClicked) {
-            fetchDeviceDetails();
+            fetchDeviceDetails(null, null);
             setIsApplyFilterClicked(false);
         }
     }, [isApplyFilterClicked]);
@@ -251,7 +249,7 @@ function AdminDevicesList() {
     const viewDeviceDetails = (selectedDevice) => {
         const requiredData = {
             ...selectedDevice,
-            isViewLinkedDevices: isViewLinkedDevices
+            isViewLinkedDevices: isLinkedDevicesList
         }
         localStorage.setItem('selectedDeviceAttributes', JSON.stringify(requiredData));
         navigate("/partnermanagement/admin/device-provider-services/view-device-details");
@@ -265,6 +263,10 @@ function AdminDevicesList() {
         loadingDiv: "!py-[20%]"
     };
 
+    const backToSbi = () => {
+        navigate('/partnermanagement/admin/device-provider-services/sbi-list')
+    }
+
     useEffect(() => {
         if (showDeviceDetailApproveRejectPopup) {
             escapeKeyHandler(closeApproveRejectPopup);
@@ -286,14 +288,19 @@ function AdminDevicesList() {
                     <div className="flex-col mt-5">
                         <div className="flex justify-between mb-5 max-470:flex-col">
                             <Title 
-                                title={isViewLinkedDevices ? 'devicesList.linkedDevicesList' : 'devicesList.listOfDevices'}
+                                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={false}
+                            activeSbi={isLinkedDevicesList ? true: false}
                             sbiListPath='/partnermanagement/admin/device-provider-services/sbi-list'
-                            activeDevice={true}
+                            activeDevice={isLinkedDevicesList ? false : true}
                             devicesListPath='/partnermanagement/admin/device-provider-services/devices-list'
                         />
                         {!applyFilter && devicesList.length === 0 ? (
@@ -304,7 +311,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={isViewLinkedDevices ? 'devicesList.linkedDevicesList' : 'devicesList.listOfDevices'}
+                                    listTitle={title}
                                     dataListLength={totalRecords}
                                     filter={expandFilter}
                                     onResetFilter={onResetFilter}

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js
@@ -172,7 +172,7 @@ function AdminSbiList() {
 
     const showLinkedDevices = (selectedSbi) => {
         if (selectedSbi.countOfAssociatedDevices > 0) {
-            navigate(`/partnermanagement/admin/device-provider-services/devices-list?sbiId=${selectedSbi.sbiId}&sbiVersion=${selectedSbi.sbiVersion}`);
+            navigate(`/partnermanagement/admin/device-provider-services/linked-devices-list?sbiId=${selectedSbi.sbiId}&sbiVersion=${selectedSbi.sbiVersion}`);
         }
     };
 

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js
@@ -0,0 +1,12 @@
+import AdminDevicesList from "./AdminDevicesList.js";
+
+function AllDevicesList () {
+
+    return (
+        <AdminDevicesList
+            title='devicesList.listOfDevices'
+            isLinkedDevicesList={false} 
+        />
+    );
+}
+export default AllDevicesList;
diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/DeviceProviderServicesTab.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/DeviceProviderServicesTab.js
@@ -8,11 +8,15 @@ function DeviceProviderServiceTab({ activeSbi, sbiListPath, activeDevice, device
     const navigate = useNavigate();
 
     const changeToSbi = () => {
-        navigate(sbiListPath)
+        if(!activeSbi) {
+            navigate(sbiListPath)
+        }
     };
 
     const changeToDevice = () => {
-        navigate(devicesListPath)
+        if(!activeDevice) {
+            navigate(devicesListPath)
+        }
     };
 
     return (

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js
@@ -0,0 +1,12 @@
+import AdminDevicesList from "./AdminDevicesList";
+
+function LinkedDevicesList () {
+
+    return (
+        <AdminDevicesList
+            title='devicesList.linkedDevicesList'
+            isLinkedDevicesList={true}
+        />
+    );
+}
+export default LinkedDevicesList;
diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
@@ -25,7 +25,7 @@ function ViewAdminDeviceDetails() {
 
     const  backToDevicesList = () => {
         if(deviceDetails.isViewLinkedDevices) {
-            return `/partnermanagement/admin/device-provider-services/devices-list?sbiId=${deviceDetails.sbiId}&sbiVersion=${deviceDetails.sbiVersion}`;
+            return `/partnermanagement/admin/device-provider-services/linked-devices-list?sbiId=${deviceDetails.sbiId}&sbiVersion=${deviceDetails.sbiVersion}`;
         } else {
             return '/partnermanagement/admin/device-provider-services/devices-list';
         }

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
@@ -29,7 +29,7 @@ function ViewAdminSbiDetails() {
 
     const showLinkedDevices = () => {
         if (sbiDetails.countOfAssociatedDevices > 0) {
-            navigate(`/partnermanagement/admin/device-provider-services/devices-list?sbiId=${sbiDetails.sbiId}&sbiVersion=${sbiDetails.sbiVersion}`);
+            navigate(`/partnermanagement/admin/device-provider-services/linked-devices-list?sbiId=${sbiDetails.sbiId}&sbiVersion=${sbiDetails.sbiVersion}`);
         }
     };