MOSIP-37738: UI Development & Integration of both View Device Details…

…, Approve/Reject Device Popup. (#997) * MOSIP-37738: UI Development & Integration of both View Device Details, Approve/Reject Device Popup Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-37738: UI Development & Integration of both View Device Details, Approve/Reject Device Popup Signed-off-by: Anil_Kumar_Majji <[email protected]> --------- Signed-off-by: Anil_Kumar_Majji <[email protected]>
mosip · Dec 6, 2024 · f65b7c0 · f65b7c0
1 parent 307f3e3
commit f65b7c0
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 16 deletions.
diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
@@ -862,6 +862,10 @@
         "header": "هل تريد الموافقة/رفض SBI للإصدار - {{sbiVersion}} ?",
         "description": "يرجى مراجعة تفاصيل SBI والأجهزة المرتبطة بها بعناية قبل اتخاذ الإجراء المناسب"
     },
+    "deviceApproveRejectPopup": {
+        "header": "هل تريد الموافقة/رفض الجهاز باستخدام {{make}} - {{model}}",
+        "description": "يرجى مراجعة تفاصيل الجهاز بعناية قبل اتخاذ الإجراء المناسب"
+    },
     "consentPopup": {
         "title": "الأحكام والشروط",
         "description": "سيتم استخدام البيانات المقدمة أثناء التسجيل، بما في ذلك اسمك ورقم هاتفك وعنوان بريدك الإلكتروني واسم المنظمة والعنوان، بواسطة بوابة إدارة الشركاء (PMP). سيتم أيضًا استخدام عنوان بريدك الإلكتروني لإعادة تعيين كلمة المرور والتحقق من البريد الإلكتروني والإشعارات في حالة انتهاء صلاحية شهادة الشريك أو المواقف المماثلة. سيتم استخدام هذه المعلومات فقط لإنشاء بيانات الاعتماد الخاصة بك، وتسهيل استخدامك لـ MOSIP. من خلال تحديد المربع أدناه، فإنك توافق على إرسال بياناتك ليتم تخزينها ومعالجتها للغرض المذكور أعلاه.",

diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
@@ -858,6 +858,10 @@
         "header": "Do you want to Approve/Reject the SBI of version - '{{sbiVersion}}' ?",
         "description": "Please review the SBI details and associated devices carefully before taking appropriate action."
     },
+    "deviceApproveRejectPopup": {
+        "header": "Do you want to Approve/Reject the device with {{make}} - {{model}} ?",
+        "description": "Please review the Device details carefully before taking appropriate action."
+    },
     "consentPopup": {
         "title": "Terms and Conditions",
         "description": "The data provided during registration, including your Name, Phone Number, Email Address, Organisation Name, and Address, will be used by the Partner Management Portal (PMP). Your email address will also be used for password resets, email verification, and notifications in the event of Partner Certificate expiration or similar situations. This information will be used solely to create your credentials, facilitating your use of MOSIP. By ticking the box below, you consent to submitting your data to be stored and processed for the above purpose.",

diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
@@ -862,6 +862,10 @@
         "header": "Voulez-vous approuver/rejeter le SBI de la version - '{{sbiVersion}}' ?",
         "description": "Veuillez examiner attentivement les détails du SBI et les appareils associés avant de prendre les mesures appropriées.."
     },
+    "deviceApproveRejectPopup": {
+        "header": "Voulez-vous approuver/rejeter l'appareil avec {{make}} - {{model}} ?",
+        "description": "Veuillez examiner attentivement les détails de l'appareil avant de prendre les mesures appropriées."
+    },
     "consentPopup": {
         "title": "Termes et conditions",
         "description": "Les données fournies lors de l'inscription, y compris votre nom, votre numéro de téléphone, votre adresse e-mail, le nom de votre organisation et votre adresse, seront utilisées par le portail de gestion des partenaires (PMP). Votre adresse e-mail sera également utilisée pour la réinitialisation du mot de passe, la vérification des e-mails et les notifications en cas d'expiration du certificat partenaire ou de situations similaires. Ces informations seront utilisées uniquement pour créer vos informations d'identification, facilitant ainsi votre utilisation de MOSIP. En cochant la case ci-dessous, vous consentez à ce que vos données soient stockées et traitées aux fins ci-dessus.",

diff --git a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -19,7 +19,7 @@ import viewIcon from "../../../svg/view_icon.svg";
 import DeactivatePopup from '../../common/DeactivatePopup.js';
 import Pagination from '../../common/Pagination.js';
 
-function AdminDevicesList () {
+function AdminDevicesList() {
     const navigate = useNavigate('');
     const { t } = useTranslation();
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
@@ -130,12 +130,25 @@ function AdminDevicesList () {
         setPageNumberAndPageSize(recordsPerPage, pageIndex, pageNo, setPageNo, pageSize, setPageSize, setFetchData);
     };
 
-    const approveRejectDeviceDetails = (devicedetails) => {
-
+    const approveRejectDeviceDetails = (device) => {
+        if (device.status === 'pending_approval') {
+            setShowDeviceDetailApproveRejectPopup(true);
+            document.body.style.overflow = "hidden";
+        }
     };
 
     const onClickApproveReject = (responseData, status, selectedDevice) => {
-
+        if (responseData) {
+            setActionId(-1);
+            setShowDeviceDetailApproveRejectPopup(false);
+            // Update the specific row in the state with the new status
+            setDevicesList((prevList) =>
+                prevList.map( deviceItem =>
+                    deviceItem.deviceId === selectedDevice.deviceId ? { ...deviceItem, status: getApproveRejectStatus(status), isActive: updateActiveState(status) } : deviceItem
+                )
+            );
+            document.body.style.overflow = "auto";
+        }
     };
 
     const closeApproveRejectPopup = () => {
@@ -144,11 +157,11 @@ function AdminDevicesList () {
     };
 
     const deactivateDevice = (selectedDevice) => {
-        
+
     };
 
     const onClickConfirmDeactivate = (deactivationResponse, selectedDevice) => {
-        
+
     };
 
     const closeDeactivatePopup = () => {
@@ -178,7 +191,7 @@ function AdminDevicesList () {
     };
 
     const viewDeviceDetails = (selectedDevice) => {
-        localStorage.setItem('selectedDeviceAttributes',JSON.stringify(selectedDevice));
+        localStorage.setItem('selectedDeviceAttributes', JSON.stringify(selectedDevice));
         navigate("/partnermanagement/admin/device-provider-services/view-device-details");
     };
 
@@ -192,12 +205,12 @@ function AdminDevicesList () {
 
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter overflow-x-scroll`}>
-            { !dataLoaded && (
+            {!dataLoaded && (
                 <LoadingIcon></LoadingIcon>
             )}
-            { dataLoaded && (
+            {dataLoaded && (
                 <>
-                    { errorMsg && (
+                    {errorMsg && (
                         <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} />
                     )}
                     <div className="flex-col mt-7">
@@ -208,7 +221,7 @@ function AdminDevicesList () {
                             activeSbi={false}
                             sbiListPath='/partnermanagement/admin/device-provider-services/sbi-list'
                             activeDevice={true}
-                            devicesListPath='/partnermanagement/admin/device-provider-services/devices-list' 
+                            devicesListPath='/partnermanagement/admin/device-provider-services/devices-list'
                         />
                         {!applyFilter && devicesList.length === 0 ? (
                             <div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center">
@@ -287,6 +300,16 @@ function AdminDevicesList () {
                                                                                         <p id="device_list_approve_reject_option" className={`py-1.5 px-4 ${device.status === 'pending_approval' ? 'text-[#3E3E3E] cursor-pointer' : 'text-[#A5A5A5] cursor-default'} ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`}>{t("approveRejectPopup.approveReject")}</p>
                                                                                         <img src={approveRejectIcon} alt="" className={`${isLoginLanguageRTL ? "pl-2" : "pr-2"}`}></img>
                                                                                     </div>
+                                                                                    {showDeviceDetailApproveRejectPopup && (
+                                                                                        <ApproveRejectPopup
+                                                                                            popupData={{ ...device, isDeviceRequest: true }}
+                                                                                            closePopUp={closeApproveRejectPopup}
+                                                                                            approveRejectResponse={(responseData, status) => onClickApproveReject(responseData, status, device)}
+                                                                                            title={`${device.make} | ${device.model}`}
+                                                                                            header={t('deviceApproveRejectPopup.header', { make: device.make, model: device.model })}
+                                                                                            description={t('deviceApproveRejectPopup.description')}
+                                                                                        />
+                                                                                    )}
                                                                                     <hr className="h-px bg-gray-100 border-0 mx-1" />
                                                                                     <div className="flex justify-between hover:bg-gray-100" onClick={() => viewDeviceDetails(device)} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => viewDeviceDetails(device))}>
                                                                                         <p id="device_list_view_option" className={`py-1.5 px-4 cursor-pointer text-[#3E3E3E] ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`}>{t("partnerList.view")}</p>

diff --git a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
@@ -77,39 +77,39 @@ function ViewAdminDeviceDetails() {
                                         {t("devicesList.deviceType")}
                                     </p>
                                     <p className="text-vulcan text-md">
-                                        {/* {deviceDetails.deviceType} */}
+                                        {deviceDetails.deviceType}
                                     </p>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                     <p className="text-suva-gray text-sm">
                                         {t("devicesList.deviceSubType")}
                                     </p>
                                     <p className="text-vulcan text-md">
-                                        {/* {deviceDetails.deviceSubType} */}
+                                        {deviceDetails.deviceSubType}
                                     </p>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                 <p className="text-suva-gray text-sm">
                                         {t("devicesList.make")}
                                     </p>
                                     <p className="text-vulcan text-md">
-                                        {/* {deviceDetails.make} */}
+                                        {deviceDetails.make}
                                     </p>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                     <p className="text-suva-gray text-sm">
                                         {t("devicesList.model")}
                                     </p>
                                     <p className="text-vulcan text-md">
-                                        {/* {deviceDetails.model} */}
+                                        {deviceDetails.model}
                                     </p>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                     <p className="text-suva-gray text-sm">
                                         {t("devicesList.createdDate")}
                                     </p>
                                     <p className="text-vulcan text-md">
-                                        {formatDate(deviceDetails.createdDate, "dateTime", false)}
+                                        {formatDate(deviceDetails.createdDateTime, "date", false)}
                                     </p>
                                 </div>
                             </div>

diff --git a/pmp-reactjs-ui/src/pages/common/ApproveRejectPopup.js b/pmp-reactjs-ui/src/pages/common/ApproveRejectPopup.js
@@ -61,6 +61,18 @@ function ApproveRejectPopup({ popupData, closePopUp, approveRejectResponse, titl
                 }
                 );
             }
+            if (popupData.isDeviceRequest) {
+                const request = createRequest({
+                    id: popupData.deviceId,
+                    approvalStatus: status === "approved" ? 'Activate' : 'De-activate'
+                });
+                response = await HttpService.patch(getPartnerManagerUrl(`/devicedetail`, process.env.NODE_ENV), request, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+                );
+            }
             const responseData = response.data;
             if (responseData && responseData.response) {
                 approveRejectResponse(responseData.response, status);