[MOSIP-38029, MOSIP-38409]: UI Development - View of linked devices f…

…or a SBI (#1065) * MOSIP-38029: UI Development - View of linked devices for a SBI Signed-off-by: Swetha K <[email protected]> * MOSIP-38029: UI Development - View of linked devices for a SBI Signed-off-by: Swetha K <[email protected]> * MOSIP-38029: UI Development - View of linked devices for a SBI Signed-off-by: Swetha K <[email protected]> * MOSIP-38409: Added partner status in view partner-policy-linking Signed-off-by: Swetha K <[email protected]> * MOSIP-38409: Added partner status in view partner-policy-linking Signed-off-by: Swetha K <[email protected]> --------- Signed-off-by: Swetha K <[email protected]> Co-authored-by: Swetha K <[email protected]>
mosip · Jan 6, 2025 · d2e7ab2 · d2e7ab2
1 parent 918a4a6
commit d2e7ab2
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 22 deletions.
diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json
@@ -451,7 +451,8 @@
         "selectModelName": "حدد اسم النموذج",
         "selectStatus": "حدد الحالة",
         "unexpectedError": "لقد واجهنا خطأ غير متوقع. يرجى المحاولة مرة أخرى.",
-        "searchDeviceId": "البحث عن معرف الجهاز"
+        "searchDeviceId": "البحث عن معرف الجهاز",
+        "selectDeviceId": "حدد معرف الجهاز"
     },
     "deactivateDevicePopup": {
         "headerMsg": "هل تريد إلغاء تنشيط الجهاز",
@@ -525,7 +526,8 @@
         "searchModel": "نموذج البحث",
         "expired": "منتهي الصلاحية",
         "errorInFtmList": "أثناء جلب تفاصيل شريحة FTM، واجهنا خطأً.",
-        "ftmId": "معرف FTM"
+        "ftmId": "معرف FTM",
+        "selectFtmId": "حدد معرف FTM"
     },
     "addFtm": {
         "addFtmChipDetails": "إضافة تفاصيل شريحة FTM",
@@ -846,7 +848,8 @@
         "policyId": "معرف السياسة",
         "policyName": "اسم السياسة",
         "organisation": "اسم المنظمة",
-        "policyGroup": "مجموعة السياسات"
+        "policyGroup": "مجموعة السياسات",
+        "partnerStatus": "حالة الشريك"
     },
     "deactivatePolicyPopup": {
         "headerMsg": "هل تريد تعطيل السياسة",

diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json
@@ -446,7 +446,8 @@
         "selectModelName": "Select Model Name",
         "selectStatus": "Select Status",
         "unexpectedError": "We have encountered with an unexpected error. Please try again.",
-        "searchDeviceId": "Search Device Id"
+        "searchDeviceId": "Search Device Id",
+        "selectDeviceId": "Select Device ID"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Do you want to deactivate Device ",
@@ -520,7 +521,8 @@
         "searchModel": "Search Model",
         "expired": "Expired",
         "errorInFtmList": "While fetching FTM chip details, we have encountered with an error.",
-        "ftmId": "FTM ID"
+        "ftmId": "FTM ID",
+        "selectFtmId": "Select FTM ID"
     },
     "addFtm": {
         "addFtmChipDetails": "Add FTM Chip details",
@@ -841,7 +843,8 @@
         "policyId": "Policy ID",
         "policyName": "Policy Name",
         "organisation": "Organisation Name",
-        "policyGroup": "Policy Group"
+        "policyGroup": "Policy Group",
+        "partnerStatus": "Partner Status"
     },
     "deactivatePolicyPopup": {
         "headerMsg": "Do you want to deactivate Policy",

diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json
@@ -451,7 +451,8 @@
         "selectModelName": "Sélectionnez le nom du modèle",
         "selectStatus": "Sélectionnez le statut",
         "unexpectedError": "Nous avons rencontré une erreur inattendue. Veuillez réessayer.",
-        "searchDeviceId": "Rechercher l'ID de l'appareil"
+        "searchDeviceId": "Rechercher l'ID de l'appareil",
+        "selectDeviceId": "Sélectionner l'ID de l'appareil"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Voulez-vous désactiver l'appareil ",
@@ -525,7 +526,8 @@
         "searchModel": "Rechercher un modèle",
         "expired": "Expiré",
         "errorInFtmList": "Lors de la récupération des détails de la puce FTM, nous avons rencontré une erreur.",
-        "ftmId": "Identifiant FTM"
+        "ftmId": "Identifiant FTM",
+        "selectFtmId": "Sélectionnez l'ID FTM"
     },
     "addFtm": {
         "addFtmChipDetails": "Ajouter les détails de la puce FTM",
@@ -846,7 +848,8 @@
         "policyId": "ID de stratégie",
         "policyName": "Nom de la Politique",
         "organisation": "Nom de l'organisation",
-        "policyGroup": "Groupe de politiques"
+        "policyGroup": "Groupe de politiques",
+        "partnerStatus": "Statut de partenaire"
     },
     "deactivatePolicyPopup": {
         "headerMsg": "Voulez-vous désactiver la politique",

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js
@@ -6,7 +6,7 @@ import { createDropdownData, fetchDeviceTypeDropdownData, fetchDeviceSubTypeDrop
 import { isLangRTL } from '../../../utils/AppUtils.js';
 import { getUserProfile } from '../../../services/UserProfileService.js';
 
-function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
+function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, preFilledFilters}) {
     const { t } = useTranslation();
     const [status, setStatus] = useState([]);
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
@@ -32,6 +32,11 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
     });
 
     useEffect(() => {
+        if (preFilledFilters) {
+            const newFilters = { ...filters, ...preFilledFilters };
+            setFilters(newFilters);
+            onApplyFilter(newFilters);
+        }
         const fetchData = async () => {
             const deviceTypeData = await fetchDeviceTypeDropdownData();
             setDeviceTypeDropdownData(createDropdownData("fieldCode", "", true, deviceTypeData, t, t("addDevices.selectDeviceType")));
@@ -54,6 +59,10 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
             setDeviceSubTypeDropdownData([])
             // return if no deviceType is selected
             if(selectedFilter === ""){
+                setFilters((prevFilters) => ({
+                    ...prevFilters,
+                    ['deviceSubType']: "",
+                }));
                 return;
             }
             try {
@@ -111,6 +120,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
             />
             <TextInputComponent
                 fieldName="sbiId"
+                textBoxValue={preFilledFilters.sbiId}
                 onTextChange={onFilterChangeEvent}
                 fieldNameKey="sbiList.sbiId"
                 placeHolderKey="sbiList.searchSbiId"
@@ -119,6 +129,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
             />
             <TextInputComponent
                 fieldName="sbiVersion"
+                textBoxValue={preFilledFilters.sbiVersion}
                 onTextChange={onFilterChangeEvent}
                 fieldNameKey="sbiList.sbiVersion"
                 placeHolderKey="sbiList.searchVersion"

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { getUserProfile } from '../../../services/UserProfileService';
 import ErrorMessage from '../../common/ErrorMessage';
 import LoadingIcon from '../../common/LoadingIcon';
@@ -22,6 +22,7 @@ import DeactivatePopup from '../../common/DeactivatePopup.js';
 import Pagination from '../../common/Pagination.js';
 
 function AdminDevicesList() {
+    const location = useLocation();
     const navigate = useNavigate('');
     const { t } = useTranslation();
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
@@ -61,6 +62,11 @@ function AdminDevicesList() {
         sbiId: null,
         sbiVersion: null
     });
+    const [preFilledFilters, setPreFilledFilters] = useState({
+        sbiId: "",
+        sbiVersion: ""
+    });
+    const [isViewLinkedDevices, setIsViewLinkedDevices] = useState(false);
     const submenuRef = useRef([]);
 
     const tableHeaders = [
@@ -127,9 +133,23 @@ function AdminDevicesList() {
             console.error('Error fetching data:', err);
             setErrorMsg(err);
         }
-    }
+    };
 
     useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const sbiId = params.get('sbiId');
+        const sbiVersion = params.get('sbiVersion');
+
+        if (sbiId || sbiVersion) {
+            setExpandFilter(true);
+            setPreFilledFilters((prev) => ({
+                ...prev,
+                sbiId: sbiId,
+                sbiVersion: sbiVersion,
+            }));
+            setApplyFilter(true);
+            setIsViewLinkedDevices(true);
+        }
         fetchDeviceDetails();
     }, [sortFieldName, sortType, pageNo, pageSize]);
 
@@ -229,7 +249,11 @@ function AdminDevicesList() {
     };
 
     const viewDeviceDetails = (selectedDevice) => {
-        localStorage.setItem('selectedDeviceAttributes', JSON.stringify(selectedDevice));
+        const requiredData = {
+            ...selectedDevice,
+            isViewLinkedDevices: isViewLinkedDevices
+        }
+        localStorage.setItem('selectedDeviceAttributes', JSON.stringify(requiredData));
         navigate("/partnermanagement/admin/device-provider-services/view-device-details");
     };
 
@@ -285,7 +309,12 @@ function AdminDevicesList() {
                                 />
                                 <hr className="h-0.5 mt-3 bg-gray-200 border-0" />
                                 {expandFilter && (
-                                    <AdminDeviceDetailsFilter onApplyFilter={onApplyFilter} />
+                                    <AdminDeviceDetailsFilter 
+                                        onApplyFilter={onApplyFilter}
+                                        setErrorCode={setErrorCode} 
+                                        setErrorMsg={setErrorMsg}
+                                        preFilledFilters={preFilledFilters}
+                                    />
                                 )}
                                 {!tableDataLoaded && <LoadingIcon styleSet={styles}></LoadingIcon>}
                                 {tableDataLoaded && applyFilter && devicesList.length === 0 ?

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js
@@ -167,6 +167,12 @@ function AdminSbiList() {
         navigate("/partnermanagement/admin/device-provider-services/view-sbi-details");
     };
 
+    const showLinkedDevices = (selectedSbi) => {
+        if (selectedSbi.countOfAssociatedDevices > 0) {
+            navigate(`/partnermanagement/admin/device-provider-services/devices-list?sbiId=${selectedSbi.sbiId}&sbiVersion=${selectedSbi.sbiVersion}`);
+        }
+    };
+
     const approveRejectSbi = (selectedSbi) => {
         if (selectedSbi.status === 'pending_approval') {
             setShowSbiApproveRejectPopUp(true);
@@ -325,7 +331,7 @@ function AdminSbiList() {
                                                                         </div>
                                                                     </td>
                                                                     <td className={`px-2 text-center`}>
-                                                                        <div className={`flex items-center justify-center ${sbi.countOfAssociatedDevices > 0 ? 'cursor-pointer' : 'cursor-default'}`}>
+                                                                        <div onClick={() => showLinkedDevices(sbi)} className={`flex items-center justify-center ${sbi.countOfAssociatedDevices > 0 ? 'cursor-pointer' : 'cursor-default'}`} tabIndex="0" onKeyDown={(e) => onPressEnterKey(e, () => showLinkedDevices(sbi))}>
                                                                             <img src={sbi.status === 'deactivated' ? deactiveLinkedDevices : activeLinkedDevices} alt='' />
                                                                             <p className={`${sbi.status === 'deactivated' ? 'text-[#969696]' : 'text-tory-blue'} px-2`}>{sbi.countOfAssociatedDevices}</p>
                                                                         </div>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
@@ -23,15 +23,23 @@ function ViewAdminDeviceDetails() {
         setDeviceDetails(selectedDevice);
     }, []);
 
+    const  backToDevicesList = () => {
+        if(deviceDetails.isViewLinkedDevices) {
+            return `/partnermanagement/admin/device-provider-services/devices-list?sbiId=${deviceDetails.sbiId}&sbiVersion=${deviceDetails.sbiVersion}`;
+        } else {
+            return '/partnermanagement/admin/device-provider-services/devices-list';
+        }
+    }
+
     const moveToDevicesList = () => {
-        navigate('/partnermanagement/admin/device-provider-services/devices-list');
+        navigate(backToDevicesList());
     };
 
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter relative`}>
             <div className={`flex-col mt-4 bg-anti-flash-white h-full font-inter break-words max-[450px]:text-sm mb-[2%]`}>
                 <div className="flex justify-between mb-3">
-                    <Title title={'viewDeviceDetails.viewDeviceDetails'} subTitle='devicesList.listOfDevices' backLink='/partnermanagement/admin/device-provider-services/devices-list'/>
+                    <Title title={'viewDeviceDetails.viewDeviceDetails'} subTitle='devicesList.listOfDevices' backLink={backToDevicesList()}/>
                 </div>
 
                 {unexpectedError && (

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
@@ -27,6 +27,12 @@ function ViewAdminSbiDetails() {
         navigate('/partnermanagement/admin/device-provider-services/sbi-list');
     };
 
+    const showLinkedDevices = () => {
+        if (sbiDetails.countOfAssociatedDevices > 0) {
+            navigate(`/partnermanagement/admin/device-provider-services/devices-list?sbiId=${sbiDetails.sbiId}&sbiVersion=${sbiDetails.sbiVersion}`);
+        }
+    };
+
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter relative`}>
             <div className={`flex-col mt-4 bg-anti-flash-white h-full font-inter break-words max-[450px]:text-sm mb-[2%]`}>
@@ -100,7 +106,7 @@ function ViewAdminSbiDetails() {
                                     <p className="font-[600] text-suva-gray text-sm">
                                         {t("sbiList.linkedDevices")}
                                     </p>
-                                    <p className="font-[600] text-vulcan text-md">
+                                    <p className={`font-[600] text-vulcan text-md ${sbiDetails.countOfAssociatedDevices > 0 && 'cursor-pointer'}`} onClick={() => showLinkedDevices()}>
                                         {sbiDetails.countOfAssociatedDevices}
                                     </p>
                                 </div>

diff --git a/pmp-revamp-ui/src/pages/admin/policyRequests/ViewPolicyRequestDetails.js b/pmp-revamp-ui/src/pages/admin/policyRequests/ViewPolicyRequestDetails.js
@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import Title from '../../common/Title';
 import adminImage from "../../../svg/admin.png";
 import partnerImage from "../../../svg/partner.png";
+import dotImg from "../../../svg/dot.svg";
 
 function ViewPolicyRequestDetails() {
     const { t } = useTranslation();
@@ -78,31 +79,42 @@ function ViewPolicyRequestDetails() {
                                 </p>
                             </div>
                         </div>
-                        <div className={`flex flex-wrap pt-3`}>
-                            <div className={`w-[50%] max-[600px]:w-[100%] mb-3 px-2`}>
+                        <div className="flex flex-wrap py-1 max-[450px]:flex-col">
+                            <div className={`mb-3 w-[50%] max-[600px]:w-[100%]`}>
                                 <p className="font-[600] text-suva-gray text-sm">
                                     {t("viewPolicyRequest.policyId")}
                                 </p>
                                 <p className="font-[600] text-vulcan text-md break-normal">
                                     {policyRequestDetails.policyId}
                                 </p>
                             </div>
-                            <div className={`w-[50%] max-[600px]:w-[100%] px-2`}>
+                            <div className={`w-[50%] max-[600px]:w-[100%] mb-3 px-2`}>
                                 <p className="font-[600] text-suva-gray text-sm">
                                     {t("viewPolicyRequest.policyName")}
                                 </p>
                                 <p className="font-[600] text-vulcan text-md">
                                     {policyRequestDetails.policyName}
                                 </p>
                             </div>
-                            <div className={`w-[49%] max-[600px]:w-[100%] my-3 ${isLoginLanguageRTL ? "ml[1%]" : "mr-[1%]"}`}>
+                        </div>
+                        <div className="flex flex-wrap py-1 max-[450px]:flex-col">
+                            <div className={`mb-3 w-[50%] max-[600px]:w-[100%]`}>
                                 <p className="font-[600] text-suva-gray text-sm">
                                     {t("viewPolicyRequest.policyGroup")}
                                 </p>
                                 <p className="font-[600] text-vulcan text-md">
                                     {policyRequestDetails.policyGroupName}
                                 </p>
                             </div>
+                            <div className={`w-[50%] max-[600px]:w-[100%] mb-3 px-2`}>
+                                <p className="font-[600] text-suva-gray text-sm">
+                                    {t("viewPolicyRequest.partnerStatus")}
+                                </p>
+                                <p className={`flex w-fit py-1 px-3 text-sm rounded-md my-1 font-semibold ${bgOfStatus(policyRequestDetails.partnerStatus)} text-md`}>
+                                    <img src={dotImg} alt="" /> 
+                                    <span className={`${isLoginLanguageRTL ? 'pr-2' : 'pl-2'}`}>{getStatusCode(policyRequestDetails.partnerStatus, t)}</span>
+                                </p>
+                            </div>
                         </div>
                         <hr className="h-px mt-3 w-full bg-gray-200 border-0" />
                         <div className="py-3">

diff --git a/pmp-revamp-ui/src/svg/dot.svg b/pmp-revamp-ui/src/svg/dot.svg