Merge pull request #217 from IndustryFusion/feature/onboardform_corre…

…ctions onboardform corrections
IndustryFusion · May 24, 2024 · 6547a39 · 6547a39
2 parents 394208f + 8c580fa
commit 6547a39
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/frontend/src/components/dashboard/edit-onboard-form.tsx b/frontend/src/components/dashboard/edit-onboard-form.tsx
@@ -25,10 +25,12 @@ import { Password } from "primereact/password";
 import { Toast, ToastMessage } from "primereact/toast";
 import { ChangeEvent, Dispatch, SetStateAction, useEffect, useRef, useState } from "react"
 import { useTranslation } from "next-i18next";
+import "../../styles/dashboard.css"
 import { OnboardData } from "@/types/onboard-form";
 
 type OnboardDataKey = keyof OnboardData;
 
+
 interface EditOnboardAssetProp {
     editOnboardAssetProp: {
         showEditOnboard: boolean,
@@ -60,11 +62,10 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                     },
                     withCredentials: true,
                 })
-                
+
             const productName = response.data.product_name === undefined && response.data.asset_communication_protocol === undefined
                 ? "" : `${response.data.product_name}-${response.data.asset_communication_protocol}`;
                 const podName =productName.toLowerCase();
-
             const assetProtocol = response.data.asset_communication_protocol === undefined ? "" : response.data.asset_communication_protocol;
 
 
@@ -73,7 +74,8 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                 ...prevState,
                 ...response.data,
                 pod_name: podName,
-                protocol: assetProtocol
+                protocol: assetProtocol,
+                app_config: JSON.stringify(response.data.app_config)
             }));
 
         } catch (error) {
@@ -102,30 +104,35 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
     const handleInputTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>, key: OnboardDataKey) => {
         setOnboard({ ...onboard, [key]: e.target.value })
     }
+
      const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
         const modifiedOnboard = {
             ...onboard,
-            app_config: "|" + onboard.app_config
-        };
+            app_config: JSON.parse(onboard.app_config)
+        }
+        const payload = JSON.stringify(modifiedOnboard);
+
         try {
-            const response = await axios.patch(API_URL + `/onboarding-asset/${editOnboardAssetProp.onboardAssetId}`, modifiedOnboard, {
+            const response = await axios.patch(API_URL + `/onboarding-asset/${editOnboardAssetProp.onboardAssetId}`, payload, {
                 headers: {
                     "Content-Type": "application/json",
                     Accept: "application/json",
                 },
                 withCredentials: true,
             })
+            console.log("onboard edit",response.data);
+
             const { success, status, message } = response.data;
             if (status === 204 && success === true) {
                 setEditOnboardAssetProp(
                     {
                         ...editOnboardAssetProp,
                         showEditOnboard: false,
                         successToast:true
-
                     }
                 )
+                showToast('success', 'Success', 'onboard form updated successfully');
             }
 
         }catch (error) {
@@ -135,6 +142,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
             }
         }
     }
+
     const footerContent = (
         <div>
             <div className="finish-btn">
@@ -144,10 +152,12 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
             </div>
         </div>
     )
+
     const headerElement = (
         <p className="m-0 ml-5"> Update Onboard Form</p>
     )
 
+
     return (
         <>
           <Toast ref={toast} />
@@ -163,7 +173,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                 )}
                 draggable={false} resizable={false}
             >
-                <div className="card ">
+                <div className="card onboard-form">
                     <form >
                         <div className="p-fluid p-formgrid p-grid px-3">
                             <div className="field">

diff --git a/frontend/src/components/dashboard/onboard-form.tsx b/frontend/src/components/dashboard/onboard-form.tsx
@@ -85,6 +85,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
             setOnboardForm({ ...onboardForm, [key]: value })
         }
     }
+
     const handleInputTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>, key: OnboardDataKey) => {
         setOnboardForm({ ...onboardForm, [key]: e.target.value })
     }
@@ -122,7 +123,8 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
     }
 
     const headerElement = (
-        <div>
+        <div className="onboardform-header">
+            <h3>Onboard Form</h3>
             <p className="m-0"> Please onboard the asset gateway before moving to dashboard.  </p>
             <p className="m-0">Submit the form to start the Asset onboard</p>
         </div>
@@ -145,14 +147,16 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
             <Dialog visible={showBlockerProp} modal
                 header={headerElement}
                 footer={footerContent}
-                style={{ width: '50rem' }} onHide={() => {
+                style={{ width: '50rem' }} 
+                onHide={() => {
                     setShowBlockerProp(false)
                     setOnboardAssetProp(false)
                 }
                 }
-                draggable={false} resizable={false}
+                draggable={false} 
+                resizable={false}
             >
-                <div className="card ">
+                <div className="card onboard-form">
                     <form >
                         <div className="p-fluid p-formgrid p-grid px-3">
                             <div className="field">
@@ -226,7 +230,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                 <label htmlFor="pdt_mqtt_port">Pdt Mqtt Port</label>
                                 <InputNumber
                                     id="pdt_mqtt_port"
-                                    value={onboardForm.pdt_mqtt_port}
+                                    //value={onboardForm.pdt_mqtt_port}
                                     placeholder="ex:8883"
                                     useGrouping={false}
                                     onChange={(e) => handleInputChange(e.value, "pdt_mqtt_port")}

diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css
@@ -11,6 +11,20 @@
     background: #ecfeff !important;
     color: #0e7490 !important;
 }
+.onboard-form input::placeholder {
+    color: #ccc;
+    font-style: italic;
+    font-size: 13px;
+  }
+.onboardform-header h3{
+    margin-bottom: 7px;
+    letter-spacing: 0.2px;
+}
+.onboardform-header p{
+    font-size: 13.5px;
+}
+
+
 
 .dashboard-container {
     padding-bottom: 2.5rem;