-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MOSIP-37737: UI Development of View Device Details (#991)
Signed-off-by: Anil_Kumar_Majji <[email protected]>
- Loading branch information
1 parent
7b568cf
commit 2ef46fc
Showing
8 changed files
with
146 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
131 changes: 131 additions & 0 deletions
131
pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { bgOfStatus, formatDate, getStatusCode, isLangRTL, onPressEnterKey } from '../../../utils/AppUtils'; | ||
| import { getUserProfile } from '../../../services/UserProfileService'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import Title from '../../common/Title'; | ||
| import somethingWentWrongIcon from '../../../svg/something_went_wrong_icon.svg'; | ||
|
|
||
| function ViewAdminDeviceDetails() { | ||
| const { t } = useTranslation(); | ||
| const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); | ||
| const navigate = useNavigate(); | ||
| const [unexpectedError, setUnexpectedError] = useState(false); | ||
| const [deviceDetails, setDeviceDetails] = useState({}); | ||
|
|
||
| useEffect(() => { | ||
| const selectedDeviceAttributes = localStorage.getItem('selectedDeviceAttributes'); | ||
| if(!selectedDeviceAttributes) { | ||
| setUnexpectedError(true); | ||
| return; | ||
| } | ||
| const selectedDevice = JSON.parse(selectedDeviceAttributes); | ||
| setDeviceDetails(selectedDevice); | ||
| }, []); | ||
|
|
||
| const moveToDevicesList = () => { | ||
| navigate('/partnermanagement/admin/device-provider-services/devices-list'); | ||
| }; | ||
|
|
||
| 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' subTitle2='sbiList.listOfSbi' backLink='/partnermanagement/admin/device-provider-services/devices-list' backLink2='/partnermanagement/admin/device-provider-services/sbi-list'/> | ||
| </div> | ||
|
|
||
| {unexpectedError && ( | ||
| <div className={`bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center`}> | ||
| <div className="flex items-center justify-center p-24"> | ||
| <div className="flex flex-col justify-center items-center"> | ||
| <img className="max-w-60 min-w-52 my-2" src={somethingWentWrongIcon} alt="" /> | ||
| <p className="text-sm font-semibold text-[#6F6E6E] py-4">{t('devicesList.unexpectedError')}</p> | ||
| <button onClick={moveToDevicesList} type="button" | ||
| className={`w-32 h-10 flex items-center justify-center font-semibold rounded-md text-sm mx-8 py-3 bg-tory-blue text-white`}> | ||
| {t('commons.goBack')} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| {!unexpectedError && ( | ||
| <div className="bg-snow-white h-fit mt-1 rounded-md shadow-lg font-inter"> | ||
| <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col"> | ||
| <div className="flex-col"> | ||
| <p className="font-semibold text-lg text-dark-blue mb-2"> | ||
| {deviceDetails.make} - {deviceDetails.model} | ||
| </p> | ||
| <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start"> | ||
| <div className={`${bgOfStatus(deviceDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}> | ||
| {getStatusCode(deviceDetails.status, t)} | ||
| </div> | ||
| <div className={`font-semibold ${isLoginLanguageRTL ? "mr-3" : "ml-3"} text-sm text-dark-blue`}> | ||
| {t("viewOidcClientDetails.createdOn") + ' ' + | ||
| formatDate(deviceDetails.createdDateTime, "date", true)} | ||
| </div> | ||
| <div className="mx-2 text-gray-300">|</div> | ||
| <div className="font-semibold text-sm text-dark-blue"> | ||
| {formatDate(deviceDetails.createdDateTime, "time", true)} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={`${isLoginLanguageRTL ? "pr-8 ml-8" : "pl-8 mr-8"} pt-3 mb-2`}> | ||
| <div className="flex flex-wrap py-1 max-[450px]:flex-col"> | ||
| <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}> | ||
| <p className="text-suva-gray text-sm"> | ||
| {t("devicesList.deviceType")} | ||
| </p> | ||
| <p className="text-vulcan text-md"> | ||
| {/* {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} */} | ||
| </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} */} | ||
| </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} */} | ||
| </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)} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <hr className="h-px w-full bg-gray-200 border-0" /> | ||
| <div className={`flex justify-end py-8 ${isLoginLanguageRTL ? "ml-8" : "mr-8"}`}> | ||
| <button id="view_admin_device_details_back_btn" onClick={moveToDevicesList} | ||
| className="h-10 w-28 text-sm p-3 py-2 text-tory-blue bg-white border border-blue-800 font-semibold rounded-md text-center" onKeyPress={(e) => onPressEnterKey(e, moveToDevicesList)}> | ||
| {t("commons.back")} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ViewAdminDeviceDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters