Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MOSIP-38029, MOSIP-38409]: UI Development - View of linked devices for a SBI #1065

Merged
merged 5 commits into from
Jan 6, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions pmp-revamp-ui/public/i18n/ara.json
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,8 @@
"selectModelName": "حدد اسم النموذج",
"selectStatus": "حدد الحالة",
"unexpectedError": "لقد واجهنا خطأ غير متوقع. يرجى المحاولة مرة أخرى.",
"searchDeviceId": "البحث عن معرف الجهاز"
"searchDeviceId": "البحث عن معرف الجهاز",
"selectDeviceId": "حدد معرف الجهاز"
},
"deactivateDevicePopup": {
"headerMsg": "هل تريد إلغاء تنشيط الجهاز",
Expand Down Expand Up @@ -525,7 +526,8 @@
"searchModel": "نموذج البحث",
"expired": "منتهي الصلاحية",
"errorInFtmList": "أثناء جلب تفاصيل شريحة FTM، واجهنا خطأً.",
"ftmId": "معرف FTM"
"ftmId": "معرف FTM",
"selectFtmId": "حدد معرف FTM"
},
"addFtm": {
"addFtmChipDetails": "إضافة تفاصيل شريحة FTM",
Expand Down Expand Up @@ -846,7 +848,8 @@
"policyId": "معرف السياسة",
"policyName": "اسم السياسة",
"organisation": "اسم المنظمة",
"policyGroup": "مجموعة السياسات"
"policyGroup": "مجموعة السياسات",
"partnerStatus": "حالة الشريك"
},
"deactivatePolicyPopup": {
"headerMsg": "هل تريد تعطيل السياسة",
Expand Down
9 changes: 6 additions & 3 deletions pmp-revamp-ui/public/i18n/eng.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 ",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
9 changes: 6 additions & 3 deletions pmp-revamp-ui/public/i18n/fra.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 ",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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")));
Expand All @@ -54,6 +59,10 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
setDeviceSubTypeDropdownData([])
// return if no deviceType is selected
if(selectedFilter === ""){
setFilters((prevFilters) => ({
...prevFilters,
['deviceSubType']: "",
}));
return;
}
try {
Expand Down Expand Up @@ -111,6 +120,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
/>
<TextInputComponent
fieldName="sbiId"
textBoxValue={preFilledFilters.sbiId}
onTextChange={onFilterChangeEvent}
fieldNameKey="sbiList.sbiId"
placeHolderKey="sbiList.searchSbiId"
Expand All @@ -119,6 +129,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg}) {
/>
<TextInputComponent
fieldName="sbiVersion"
textBoxValue={preFilledFilters.sbiVersion}
onTextChange={onFilterChangeEvent}
fieldNameKey="sbiList.sbiVersion"
placeHolderKey="sbiList.searchVersion"
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
Expand Down Expand Up @@ -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 = [
Expand Down Expand Up @@ -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]);

Expand Down Expand Up @@ -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");
};

Expand Down Expand Up @@ -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 ?
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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%]`}>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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">
Expand Down
13 changes: 13 additions & 0 deletions pmp-revamp-ui/src/svg/dot.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading