From 2960401c0790705166a6ac5c3d9b5c3fe9aa6ce0 Mon Sep 17 00:00:00 2001 From: SwethaKrish4 <110164892+SwethaKrish4@users.noreply.github.com> Date: Tue, 7 Jan 2025 13:29:21 +0530 Subject: [PATCH] MOSIP-38029: Tabular View of linked devices for a SBI (#1067) Signed-off-by: Swetha K Co-authored-by: Swetha K --- pmp-revamp-ui/public/i18n/ara.json | 3 ++- pmp-revamp-ui/public/i18n/eng.json | 3 ++- pmp-revamp-ui/public/i18n/fra.json | 3 ++- .../AdminDeviceDetailsFilter.js | 10 ++++++++++ .../deviceProviderServices/AdminDevicesList.js | 13 ++++++++----- pmp-revamp-ui/src/pages/common/ErrorMessage.js | 2 +- pmp-revamp-ui/src/pages/common/SuccessMessage.js | 2 +- .../src/pages/common/fields/TextInputComponent.js | 7 ++++--- 8 files changed, 30 insertions(+), 13 deletions(-) diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json index 75acfbd9c..dc727bea1 100644 --- 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 index 7d38e7be4..7361707c4 100644 --- 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 index 0a5926604..01c11025b 100644 --- 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 index 403ecbf46..d46bd188b 100644 --- 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" />
- + <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 index 8291c09de..d4e46585d 100644 --- 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 index f6bef7bcf..8886cda70 100644 --- 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 index 8fc752ad9..26cbf3e16 100644 --- 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`}