MOSIP-34634 : Ui fix (#695)

* MOSIP-34634 : Ui fix Signed-off-by: sudeep <[email protected]> * MOSIP-34634 : Ui fix Signed-off-by: sudeep <[email protected]> * MOSIP-34634 : Ui fix Signed-off-by: sudeep <[email protected]> * MOSIP-34634 : Ui fix Signed-off-by: sudeep <[email protected]> * MOSIP-34634 : Ui fix Signed-off-by: sudeep <[email protected]> --------- Signed-off-by: sudeep <[email protected]>
mosip · Aug 12, 2024 · c3cb9a5 · c3cb9a5
1 parent bab4ad0
commit c3cb9a5
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 64 deletions.
diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
@@ -336,7 +336,8 @@
     },
     "deviceProviderServices": {
         "listOfSbisAndDevices": "قائمة الهيئات الفرعية للتنفيذ والأجهزة",
-        "addSbiDevices": "إضافة SBI - الجهاز"
+        "addSbiDevices": "إضافة SBI - الجهاز",
+        "listOfDevices": "قائمة الأجهزة ل"
     },
     "addSbis": {
         "addSbi": "أضف الهيئة الفرعية للتنفيذ",
@@ -372,7 +373,7 @@
         "errorInSbiList": "أثناء جلب قوائم SBI، واجهنا خطأً."
     },
     "devicesList": {
-        "addDevice": "أضف أداة",
+        "addDevices": "إضافة أجهزة",
         "listOfDevices": "قائمة الأجهزة",
         "deviceType": "نوع الجهاز",
         "deviceSubType": "نوع الجهاز الفرعي",

diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
@@ -334,7 +334,8 @@
     },
     "deviceProviderServices": {
         "listOfSbisAndDevices": "List Of SBIs And Devices",
-        "addSbiDevices": "Add SBI - Device"
+        "addSbiDevices": "Add SBI - Device",
+        "listOfDevices": "List Of Devices for"
     },
     "addSbis": {
         "addSbi": "Add SBI",
@@ -367,7 +368,7 @@
         "errorInSbiList": "While fetching SBI Lists, we have encountered with an error."
     },
     "devicesList": {
-        "addDevice": "Add a Device",
+        "addDevices": "Add Devices",
         "listOfDevices": "List of Devices",
         "deviceType": "Device Type",
         "deviceSubType": "Device Sub Type",

diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
@@ -336,7 +336,8 @@
     },
     "deviceProviderServices": {
         "listOfSbisAndDevices": "Liste des SBI et des appareilsBI - Device",
-        "addSbiDevices": "Ajouter SBI - Appareil"
+        "addSbiDevices": "Ajouter SBI - Appareil",
+        "listOfDevices": "Liste des appareils pour"
     },
     "addSbis": {
         "addSbi": "Ajouter un SBI",
@@ -372,7 +373,7 @@
         "errorInSbiList": "Lors de la récupération des listes SBI, nous avons rencontré une erreur."
     },
     "devicesList": {
-        "addDevice": "Ajouter un périphérique",
+        "addDevices": "Ajouter des périphériques",
         "listOfDevices": "Liste des appareils",
         "deviceType": "Type d'appareil",
         "deviceSubType": "Sous-type d'appareil",

diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/AddDevices.js
@@ -216,15 +216,15 @@ function AddDevices() {
     const addInactiveDeviceMappingToSbi = async (deviceDetailId, index) => {
         setDataLoaded(false);
         try {
-            const sbiData = localStorage.getItem('selectedSbiData');
+            const selectedSbi = localStorage.getItem('selectedSbiData');
 
-            if (!sbiData) {
+            if (!selectedSbi) {
                 setErrorMsg(t('devicesList.errorInAddingDevice'));
                 return;
             }
 
-            const selectedSbi = JSON.parse(sbiData);
-            const { sbiId, partnerId } = selectedSbi;
+            const sbiData = JSON.parse(selectedSbi);
+            const { sbiId, partnerId } = sbiData;
 
             const request = createRequest({
                 deviceDetailId: deviceDetailId,

diff --git a/pmp-reactjs-ui/src/pages/deviceProviderServices/DevicesList.js b/pmp-reactjs-ui/src/pages/deviceProviderServices/DevicesList.js
@@ -37,6 +37,8 @@ function DevicesList() {
     const [devicesList, setDevicesList] = useState([]);
     const [filteredDevicesList, setFilteredDevicesList] = useState([]);
     const [viewDeviceId, setViewDeviceId] = useState(-1);
+    const [canAddDevices, setCanAddDevices] = useState(true);
+    const [selectedSbidata, setSelectedSbidata] = useState(true);
 
     const defaultFilterQuery = {
         deviceTypeCode: "",
@@ -50,27 +52,29 @@ function DevicesList() {
     }, [submenuRef]);
 
     useEffect(() => {
+        const selectedSbi = localStorage.getItem('selectedSbiData');
+        if (!selectedSbi) {
+            moveToSbisList(navigate);
+            return;
+        }
+        let sbiData = JSON.parse(selectedSbi);
+        setSelectedSbidata(sbiData);
+        console.log(sbiData)
+        if(!sbiData.canAddDevices){
+            setCanAddDevices(false);
+        }
         const fetchData = async () => {
             try {
                 setDataLoaded(false);
 
-                const sbiData = localStorage.getItem('selectedSbiData');
-                if (!sbiData) {
-                    moveToSbisList(navigate);
-                }
-
-                const selectedSbi = JSON.parse(sbiData);
-                console.log(selectedSbi);
-
-                let sbiId = selectedSbi.sbiId;
+                let sbiId = sbiData.sbiId;
                 const response = await HttpService.get(getPartnerManagerUrl(`/partners/getAllDevicesForSBI/${sbiId}`, process.env.NODE_ENV), {
                     headers: {
                         'Content-Type': 'application/json'
                     }
                 });
                 if (response) {
                     const responseData = response.data;
-                    console.log(responseData)
                     if (responseData && responseData.response) {
                         const resData = responseData.response;
                         const sortedData = resData.sort((a, b) => new Date(b.crDtimes) - new Date(a.crDtimes));
@@ -106,8 +110,8 @@ function DevicesList() {
         setErrorMsg("");
     };
 
-    const addDevice = () => {
-        console.log('addDevice');
+    const addDevices = () => {
+        navigate('/partnermanagement/deviceProviderServices/addDevices');
     }
 
     //This part is related to Filter
@@ -133,12 +137,12 @@ function DevicesList() {
     }
 
     const sortAscOrder = (header) => {
-        const isDateCol = (header === "crDtimes") ? true : false;
+        const isDateCol = (header === "crDtimes");
         toggleSortAscOrder(header, isDateCol, filteredDevicesList, setFilteredDevicesList, order, setOrder, isDescending, setIsDescending, activeSortAsc, setActiveSortAsc, activeSortDesc, setActiveSortDesc);
     }
 
     const sortDescOrder = (header) => {
-        const isDateCol = (header === "crDtimes") ? true : false;
+        const isDateCol = (header === "crDtimes");
         toggleSortDescOrder(header, isDateCol, filteredDevicesList, setFilteredDevicesList, order, setOrder, isDescending, setIsDescending, activeSortAsc, setActiveSortAsc, activeSortDesc, setActiveSortDesc);
     }
 
@@ -169,10 +173,11 @@ function DevicesList() {
                     )}
                     <div className="flex-col mt-7">
                         <div className="flex justify-between mb-5">
-                            <Title title='deviceProviderServices.listOfSbisAndDevices' backLink='/partnermanagement/deviceProviderServices/sbiList' styleSet={styleForTitle}></Title>
+                            <Title title={`${t('deviceProviderServices.listOfDevices')} ${selectedSbidata.sbiVersion}`} backLink='/partnermanagement/deviceProviderServices/sbiList' styleSet={styleForTitle}></Title>
                             {devicesList.length > 0 ?
-                                <button onClick={() => addDevice()} type="button" className="h-10 text-sm font-semibold px-7 text-white bg-tory-blue rounded-md">
-                                    {t('devicesList.addDevice')}
+                                <button onClick={() => addDevices()} type="button" disabled={!canAddDevices}
+                                className={`h-10 text-sm font-semibold px-7  rounded-md ${canAddDevices ? "bg-tory-blue text-white" : "bg-gray-400 opacity-55"}`}>
+                                    {t('devicesList.addDevices')}
                                 </button>
                                 : null
                             }
@@ -200,9 +205,9 @@ function DevicesList() {
                                 <div className="flex items-center justify-center p-24">
                                     <div className="flex flex-col justify-center">
                                         <img src={rectangleGrid} alt="" />
-                                        <button onClick={() => addDevice()} type="button"
-                                            className={`text-white font-semibold mt-8 bg-tory-blue rounded-md text-sm mx-8 py-3`}>
-                                            {t('devicesList.addDevice')}
+                                        <button onClick={() => addDevices()} type="button" disabled={!canAddDevices}
+                                            className={`font-semibold mt-8 rounded-md text-sm mx-8 py-3 ${canAddDevices ? "bg-tory-blue text-white" : "bg-gray-400 opacity-55"}`}>
+                                            {t('devicesList.addDevices')}
                                         </button>
                                     </div>
                                 </div>