Merge pull request #277 from IndustryFusion/IFDPP-358-Frontend-Backen…

…d_CRUD_Contract added refresh in dashboard asset.
IndustryFusion · Nov 25, 2024 · a84211c · a84211c
2 parents ce09d33 + c92e0d3
commit a84211c
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 12 deletions.
diff --git a/frontend/src/components/dashboard/dashboard-assets.tsx b/frontend/src/components/dashboard/dashboard-assets.tsx
@@ -135,6 +135,14 @@ const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPr
     }
   }
 
+  const handleRefresh = () => {
+    try {
+      dispatch(fetchAssets());
+    } catch (error) {
+      console.error("Fetched assets:", error)
+    }
+  };
+
 
   const handleClick = async (selectedAsset: Asset) => {
     const response = await axios.get(API_URL + `/mongodb-templates/type/${btoa(selectedAsset.type)}`, {
@@ -215,14 +223,14 @@ const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPr
   return (
     <>
       <Toast ref={toast} />
-      <div style={{ zoom: "74%" }}>
+      <div style={{ zoom: "74%", width:"33%" }}>
         <div className="dashboard-assets">
           <div className="card h-auto " style={{ width: "100%" }}>
             <div className=" flex justify-content-between">
               <h5 className="heading-text">Assets</h5>
               {/* <img src="/refresh.png" alt="table-icon" width="30px" height="30px" /> */}
             </div>
-            <div className="mb-5" style={{paddingLeft: "15px"}}>
+            <div className="mb-5 flex justify-content-center align-items-center">
               <span className="p-input-icon-left">
                 <i className="pi pi-search" />
                 <InputText
@@ -232,6 +240,14 @@ const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPr
                   placeholder={t('placeholder:searchByProduct')}
                   className="mb-10" style={{ borderRadius: "10px", width: "460px"}} />
               </span>
+              <Button 
+                icon="pi pi-refresh" 
+                onClick={handleRefresh} 
+                className="p-button-outlined refresh-button" 
+                tooltip="Refresh Assets"
+                tooltipOptions={{ position: 'left' }}
+                label='Refresh'
+              />
             </div>
             {loading ? (
               <div className="dashboard-spinner">

diff --git a/frontend/src/pages/binding/create/[contractIfricId].tsx b/frontend/src/pages/binding/create/[contractIfricId].tsx
@@ -12,7 +12,7 @@ import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 import "../../../styles/add-binding.css";
 import { getCompanyDetailsById, verifyCompanyCertificate } from '../../../utility/auth';
-import { getTemplateByName, getCompanyCertificate, getContractByType, getAssetByType, getAssetCertificateById, createBinding } from '@/utility/contract';
+import { getTemplateByName, getCompanyCertificate, getContractByType, getAssetManagementData, getAssetCertificateById, createBinding } from '@/utility/contract';
 import { Dropdown } from 'primereact/dropdown';
 import moment from 'moment';
 import Navbar from '@/components/navBar/navbar';
@@ -173,12 +173,17 @@ const CreateBinding: React.FC = () => {
                     setSelectedAssetProperties(selectedProperties);
 
                     // fetch assets of template type
-                    const assetResponse = await getAssetByType(btoa(template.properties.asset_type.default));
-                    if(assetResponse?.data) {
-                        const options = assetResponse.data.map((value: { id: string }) => ({
-                            label: value.id,
-                            value: value.id
-                        }));
+                    const assetResponse = await getAssetManagementData(userData.company_ifric_id, template.properties.asset_type.default);
+                    if(assetResponse) {
+                        const options = assetResponse.map((value: Record<string,any>) => {
+                            const productKey = Object.keys(value).find(key => key.includes('product_name'));
+                            if(productKey && value[productKey]) {
+                                return {
+                                    label: value[productKey].value,
+                                    value: value.id
+                                }
+                            }
+                        });
                         setAssetOptions(options);
                     }
                 }
@@ -223,12 +228,12 @@ const CreateBinding: React.FC = () => {
                         }
                     }
                 } else {
-                    setAssetVerified(null);
+                    setAssetVerified(false);
                     toast.current?.show({ severity: 'warn', summary: 'Warn', detail: "Asset Certificate not found" });
                 }
             }
         } catch (error) {
-            setAssetVerified(null);
+            setAssetVerified(false);
             console.error('Error fetching data:', error);
             toast.current?.show({ severity: 'error', summary: 'Error', detail: 'Failed to load necessary data' });
         }

diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css
@@ -359,6 +359,20 @@ textarea {
     height: 100px;
 }
 
+/* Refresh Button */
+.refresh-button {
+    background-color: var(--white) !important;
+    color: var(--black-primary) !important;
+    border: 1px solid #ced4da;
+    border-radius: 8px !important;
+    font-family: "League Spartan", sans-serif !important;
+    font-weight: 500 !important;
+  }
+
+.refresh-button:hover {
+    background-color: var(--grey-box) !important;
+}
+
 @media screen and (min-width: 1550px) {
     .chart-content,
     .assets-content {

diff --git a/frontend/src/utility/contract.ts b/frontend/src/utility/contract.ts
@@ -342,4 +342,32 @@ export const getAllContractByAssetType = async () => {
       throw error;
     }
   }
-};
+};
+
+export const getAssetManagementData = async (company_ifric_id: string, type: string) => {
+  try {
+    const result: Record<string,any> = [];
+    const response = await api.get(
+        `${BACKEND_API_URL}/asset/asset-management/${company_ifric_id}`, {
+        headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        },
+    });
+    if(response.data) {
+      response.data.forEach((value: Record<string,any>) => {
+        if(value.type === type) {
+          result.push(value);
+        }
+      })
+    }
+    return result;
+  } catch (error: any) {
+    if (error?.response && error?.response?.status === 401) {
+      updatePopupVisible(true);
+      return null;
+    } else {
+      throw error;
+    }
+  }
+}