From 0ec82b9bc604b8cb4ba6fedc35e12b2e87e381cb Mon Sep 17 00:00:00 2001
From: chaitanyakole <chaitanya.kole@tekditechnologies.com>
Date: Mon, 11 Nov 2024 22:49:55 +0530
Subject: [PATCH] Added some validations and changes in code

---
 public/locales/en/common.json    |   3 +-
 src/components/AddNewCenters.tsx |  41 ++++++------
 src/components/DynamicForm.tsx   |   2 +-
 src/pages/cohorts.tsx            | 106 +++++++++++++------------------
 src/pages/tenant.tsx             |  76 +++++-----------------
 src/pages/userSchema.json        |  10 +--
 6 files changed, 86 insertions(+), 152 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index efbbf811..1d8bcb8e 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -389,7 +389,8 @@
     "NAME_CANNOT_INCLUDE_DIGITS": "Name can not include digits",
     "INVALID_EMAIL_FORMAT": "Invalid email format",
     "ENTER_VALID_EMAIL": "Enter a valid email address",
-    "ENTER_VALID_MOBILE_NUMBER": "Enter a valid Mobile Number"
+    "ENTER_VALID_MOBILE_NUMBER": "Enter a valid Mobile Number",
+    "ENTER_VALID_DATA": "Enter a valid data"
   },
   "TABLE_TITLE": {
     "NAME": "Name",
diff --git a/src/components/AddNewCenters.tsx b/src/components/AddNewCenters.tsx
index 68e719bf..ae6ebf2e 100644
--- a/src/components/AddNewCenters.tsx
+++ b/src/components/AddNewCenters.tsx
@@ -4,7 +4,10 @@ import {
   customFields,
 } from "@/components/GeneratedSchemas";
 import SimpleModal from "@/components/SimpleModal";
-import { createCohort, tenantCreate } from "@/services/CohortService/cohortService";
+import {
+  createCohort,
+  tenantCreate,
+} from "@/services/CohortService/cohortService";
 import { CohortTypes, FormContextType } from "@/utils/app.constant";
 import { useLocationState } from "@/utils/useLocationState";
 import { Box, Button, Typography } from "@mui/material";
@@ -25,7 +28,6 @@ interface CohortDetails {
   name?: string;
   domain?: any;
   status?: string;
-  
 }
 
 interface AddLearnerModalProps {
@@ -38,7 +40,7 @@ interface AddLearnerModalProps {
 
 const uiSchema = {
   district: {
-    "ui:widget": '',
+    "ui:widget": "",
     "ui:options": {},
   },
   status: {
@@ -47,10 +49,10 @@ const uiSchema = {
   },
 
   block: {
-    "ui:widget": '',
+    "ui:widget": "",
     "ui:options": {},
   },
-}
+};
 
 const AddNewCenters: React.FC<AddLearnerModalProps> = ({
   open,
@@ -62,6 +64,8 @@ const AddNewCenters: React.FC<AddLearnerModalProps> = ({
   const [schema] = useState(Tenatschema);
   const [showForm, setShowForm] = useState(false);
   const { t } = useTranslation();
+  const [updateBtnDisabled, setUpdateBtnDisabled] = React.useState(true);
+
   const roleType = FormContextType.ADMIN_CENTER;
   const {
     selectedBlockCohortId,
@@ -70,44 +74,44 @@ const AddNewCenters: React.FC<AddLearnerModalProps> = ({
     selectedBlockCode,
     dynamicFormForBlock,
   } = useLocationState(open, onClose, roleType);
-  
+
   const setSubmittedButtonStatus = useSubmittedButtonStore(
     (state: any) => state.setSubmittedButtonStatus
   );
 
   const handleSubmit = async (
-    data: IChangeEvent<any, RJSFSchema, any>, 
+    data: IChangeEvent<any, RJSFSchema, any>,
     event: React.FormEvent<any>
-  ) => {    
+  ) => {
     const formData = data?.formData;
-      if (!formData) {
+    if (!formData) {
       showToastMessage("Form data is required", "error");
       return;
     }
-  
+
     const cohortDetails: CohortDetails = {
       name: formData?.name,
       domain: formData?.domain,
       // status: formData?.status,
     };
-  
-    const cohortData = await tenantCreate(cohortDetails);    
-    if (cohortData?.responseCode=== 200|| cohortData?.responseCode===201) {
+
+    const cohortData = await tenantCreate(cohortDetails);
+    if (cohortData?.responseCode === 200 || cohortData?.responseCode === 201) {
       showToastMessage(t("TENANT.CREATE_SUCCESSFULLY"), "success");
       onClose();
     } else {
       showToastMessage("Please Input Data", "warning");
     }
   };
-  
+
   const handleChange = (data: IChangeEvent<any>) => {
+    setUpdateBtnDisabled(false);
     console.log("Form changed:", data.formData);
   };
 
   const handleError = (errors: any) => {
     console.log("Form errors:", errors);
-  }
-  
+  };
 
   return (
     <SimpleModal
@@ -125,8 +129,8 @@ const AddNewCenters: React.FC<AddLearnerModalProps> = ({
             widgets={{}}
             showErrorList={true}
             customFields={customFields}
-            onChange={handleChange}  
-            onError={handleError}  
+            onChange={handleChange}
+            onError={handleError}
             id="new-center-form"
           >
             <Box
@@ -151,6 +155,7 @@ const AddNewCenters: React.FC<AddLearnerModalProps> = ({
               <Button
                 variant="contained"
                 type="submit"
+                disabled={updateBtnDisabled}
                 onClick={() => setSubmittedButtonStatus(true)}
                 sx={{
                   fontSize: "14px",
diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
index 8ff64385..c22a6816 100644
--- a/src/components/DynamicForm.tsx
+++ b/src/components/DynamicForm.tsx
@@ -209,7 +209,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
             default: {
               const validRange = currentYearPattern.test(pattern);
               if (!validRange) {
-                error.message = t("FORM_ERROR_MESSAGES.ENTER_VALID_YEAR");
+                error.message = t("FORM_ERROR_MESSAGES.ENTER_VALID_DATA");
               }
               break;
             }
diff --git a/src/pages/cohorts.tsx b/src/pages/cohorts.tsx
index 4c0e1f11..f8dd73db 100644
--- a/src/pages/cohorts.tsx
+++ b/src/pages/cohorts.tsx
@@ -132,6 +132,9 @@ const Center: React.FC = () => {
   const [statesInformation, setStatesInformation] = useState<any>([]);
   const [selectedRowData, setSelectedRowData] = useState<any>("");
   const [Addmodalopen, setAddmodalopen] = React.useState<any>(false);
+  const [updateBtnDisabled, setUpdateBtnDisabled] = React.useState(true);
+  const [addFormData, setAddFormData] = useState({});
+  const [addBtnDisabled, setAddBtnDisabled] = useState(true);
 
   const selectedBlockStore = useSubmittedButtonStore(
     (state: any) => state.selectedBlockStore
@@ -166,17 +169,34 @@ const Center: React.FC = () => {
   );
 
   const uiSchema = {
+    name: {
+      "ui:widget": "text",
+      "ui:placeholder": "Enter full name",
+      "ui:options": {},
+    },
+    type: {
+      "ui:widget": "text",
+      // "ui:placeholder": "Select type",
+      // "ui:options": {
+      //   defaultValue: "cohort",
+      // },
+      "ui:disabled": true, // This will make the field readonly
+    },
     district: {
-      "ui:widget": "",
+      "ui:widget": "text",
+      "ui:placeholder": "Enter district",
       "ui:options": {},
     },
     status: {
       "ui:widget": "CustomRadioWidget",
-      "ui:options": {},
+      "ui:options": {
+        defaultValue: "active",
+      },
+      // "ui:disabled": true,
     },
-
     block: {
-      "ui:widget": "",
+      "ui:widget": "text",
+      "ui:placeholder": "Enter block",
       "ui:options": {},
     },
   };
@@ -202,19 +222,19 @@ const Center: React.FC = () => {
     },
     mobileNo: {
       "ui:widget": "text",
-      "ui:placeholder": "Enter your 10-digit mobile number",
-      "ui:help": "Please enter a valid 10-digit mobile number.",
+      "ui:placeholder": "Mobile number",
+      // "ui:help": "Please enter a valid 10-digit mobile number.",
     },
     email: {
       "ui:widget": "text",
       "ui:placeholder": "Enter your email address",
       "ui:options": {},
     },
-    dob: {
-      "ui:widget": "date",
-      "ui:placeholder": "Select your date of birth",
-      "ui:help": "Date of birth in YYYY-MM-DD format.",
-    },
+    // dob: {
+    //   "ui:widget": "date",
+    //   "ui:placeholder": "Select your date of birth",
+    //   // "ui:help": "Date of birth in YYYY-MM-DD format.",
+    // },
   };
 
   const [filters, setFilters] = useState<cohortFilterDetails>({
@@ -225,6 +245,7 @@ const Center: React.FC = () => {
   });
   const handleCloseAddLearnerModal = () => {
     setOpenAddNewCohort(false);
+    setUpdateBtnDisabled(true);
   };
   const isMobile = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down("sm")
@@ -714,6 +735,7 @@ const Center: React.FC = () => {
 
   const handleCloseModal = () => {
     setConfirmationModalOpen(false);
+    setUpdateBtnDisabled(true);
   };
 
   const handleActionForDelete = async () => {
@@ -869,10 +891,12 @@ const Center: React.FC = () => {
 
   const onCloseEditMOdel = () => {
     setIsEditModalOpen(false);
+    setUpdateBtnDisabled(true);
   };
 
   const onCloseEditForm = () => {
     setIsEditForm(false);
+    setUpdateBtnDisabled(true);
   };
   const handleInputName = (event: ChangeEvent<HTMLInputElement>) => {
     const updatedName = event.target.value;
@@ -880,10 +904,12 @@ const Center: React.FC = () => {
   };
 
   const handleChangeForm = (event: IChangeEvent<any>) => {
+    setUpdateBtnDisabled(false);
+    setAddBtnDisabled(false);
     console.log("Form data changed:", event.formData);
   };
-  const handleError = () => {
-    console.log("error");
+  const handleError = (error: any) => {
+    console.log("error", error);
   };
 
   const handleUpdateAction = async (
@@ -893,53 +919,6 @@ const Center: React.FC = () => {
     setLoading(true);
     const formData = data?.formData;
     const schemaProperties = schema.properties;
-
-    // let apiBody: any = {
-    //   customFields: [],
-    // };
-    // Object.entries(formData).forEach(([fieldKey, fieldValue]) => {
-    //   const fieldSchema = schemaProperties[fieldKey];
-    //   const fieldId = fieldSchema?.fieldId;
-
-    //   console.log(
-    //     `FieldID: ${fieldId}, FieldValue: ${JSON.stringify(fieldSchema)}, type: ${typeof fieldValue}`
-    //   );
-
-    //   if (fieldId === null || fieldId === "null") {
-    //     if (typeof fieldValue !== "object") {
-    //       apiBody[fieldKey] = fieldValue;
-    //     }
-    //   } else {
-    //     if (
-    //       fieldSchema?.hasOwnProperty("isDropdown") ||
-    //       fieldSchema?.hasOwnProperty("isCheckbox") ||
-    //       fieldSchema?.type === "radio"
-    //     ) {
-    //       apiBody.customFields.push({
-    //         fieldId: fieldId,
-    //         value: Array.isArray(fieldValue) ? fieldValue : [fieldValue],
-    //       });
-    //     } else {
-    //       if (fieldSchema?.checkbox && fieldSchema.type === "array") {
-    //         if (String(fieldValue).length != 0) {
-    //           apiBody.customFields.push({
-    //             fieldId: fieldId,
-    //             value: String(fieldValue).split(","),
-    //           });
-    //         }
-    //       } else {
-    //         if (fieldId) {
-    //           apiBody.customFields.push({
-    //             fieldId: fieldId,
-    //             value: String(fieldValue),
-    //           });
-    //         }
-    //       }
-    //     }
-    //   }
-    // });
-
-    // const customFields = apiBody?.customFields;
     try {
       setLoading(true);
       setConfirmButtonDisable(true);
@@ -1107,6 +1086,7 @@ const Center: React.FC = () => {
   };
   const handleAddmodal = () => {
     setAddmodalopen(false);
+    setAddFormData({});
   };
 
   const handleAddAction = async (data: any) => {
@@ -1316,7 +1296,8 @@ const Center: React.FC = () => {
                 <Button
                   variant="contained"
                   type="submit"
-                  form="update-center-form" // Add this line
+                  form="update-center-form"
+                  disabled={updateBtnDisabled}
                   sx={{
                     fontSize: "14px",
                     fontWeight: "500",
@@ -1350,7 +1331,7 @@ const Center: React.FC = () => {
               widgets={{}}
               showErrorList={true}
               customFields={customFields}
-              formData={editFormData}
+              formData={addFormData}
               id="update-center-form"
             >
               <Box
@@ -1378,6 +1359,7 @@ const Center: React.FC = () => {
                 <Button
                   variant="contained"
                   type="submit"
+                  disabled={addBtnDisabled}
                   sx={{
                     fontSize: "14px",
                     fontWeight: "500",
diff --git a/src/pages/tenant.tsx b/src/pages/tenant.tsx
index fe5d660b..d6c632d8 100644
--- a/src/pages/tenant.tsx
+++ b/src/pages/tenant.tsx
@@ -164,6 +164,9 @@ const Tenant: React.FC = () => {
   const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
   const [selectedRowData, setSelectedRowData] = useState<any>("");
   const [roles, setRoles] = useState([]);
+  const [updateBtnDisabled, setUpdateBtnDisabled] = React.useState(true);
+  const [addBtnDisabled, setAddBtnDisabled] = React.useState(true);
+  const [addFormData, setAddFormData] = useState({});
 
   const uiSchema = {
     name: {
@@ -254,6 +257,7 @@ const Tenant: React.FC = () => {
     districts: "",
   });
   const handleCloseAddLearnerModal = () => {
+    setUpdateBtnDisabled(true);
     setOpenAddNewCohort(false);
   };
   const isMobile = useMediaQuery((theme: Theme) =>
@@ -653,6 +657,7 @@ const Tenant: React.FC = () => {
 
   const handleCloseModal = () => {
     setConfirmationModalOpen(false);
+    setUpdateBtnDisabled(true);
   };
 
   const handleActionForDelete = async (selectedRowData: RowData) => {
@@ -811,10 +816,12 @@ const Tenant: React.FC = () => {
 
   const onCloseEditMOdel = () => {
     setIsEditModalOpen(false);
+    setUpdateBtnDisabled(true);
   };
 
   const onCloseEditForm = () => {
     setIsEditForm(false);
+    setUpdateBtnDisabled(true);
   };
   const handleInputName = (event: ChangeEvent<HTMLInputElement>) => {
     const updatedName = event.target.value;
@@ -822,7 +829,9 @@ const Tenant: React.FC = () => {
   };
 
   const handleChangeForm = (event: IChangeEvent<any>) => {
-    console.log("Form data changed:", event.formData);
+    setUpdateBtnDisabled(false);
+    setAddBtnDisabled(false);
+    // console.log("Form data changed:", event.formData);
   };
   const handleError = () => {
     console.log("error");
@@ -834,64 +843,6 @@ const Tenant: React.FC = () => {
   ) => {
     setLoading(true);
     const formData = data?.formData;
-    // const schemaProperties = schema.properties;
-
-    // const fieldSchema = schemaProperties[fieldKey];
-    // const fieldId = fieldSchema?.fieldId;
-
-    //   console.log(
-    //     `FieldID: ${fieldId}, FieldValue: ${JSON.stringify(fieldSchema)}, type: ${typeof fieldValue}`
-    //   );
-
-    // let apiBody: any = {
-    //   customFields: [],
-    // };
-    // Object.entries(formData).forEach(([fieldKey, fieldValue]) => {
-    // const fieldSchema = schemaProperties[fieldKey];
-    // const fieldId = fieldSchema?.fieldId;
-
-    // console.log(
-    //   `FieldID: ${fieldId}, FieldValue: ${JSON.stringify(fieldSchema)}, type: ${typeof fieldValue}`
-    // );
-
-    // if (fieldId === null || fieldId === "null") {
-    //   if (typeof fieldValue !== "object") {
-    //     apiBody[fieldKey] = fieldValue;
-    //   }
-    // } else {
-    //   if (
-    //     fieldSchema?.hasOwnProperty("isDropdown") ||
-    //     fieldSchema?.hasOwnProperty("isCheckbox") ||
-    //     fieldSchema?.type === "radio"
-    //   ) {
-    //     apiBody.customFields.push({
-    //       fieldId: fieldId,
-    //       value: Array.isArray(fieldValue) ? fieldValue : [fieldValue],
-    //     });
-    //   } else {
-    //     if (fieldSchema?.checkbox && fieldSchema.type === "array") {
-    //       if (String(fieldValue).length != 0) {
-    //         apiBody.customFields.push({
-    //           fieldId: fieldId,
-    //           value: String(fieldValue).split(","),
-    //         });
-    //       }
-    //     } else {
-    //       if (fieldId) {
-    //         apiBody.customFields.push({
-    //           fieldId: fieldId,
-    //           value: String(fieldValue),
-    //         });
-    //       }
-    //     }
-    //   }
-    // }
-    // };
-
-    // const customFields = apiBody?.customFields;
-    // console.log({customFields});
-    console.log({ selectedCohortId, selectedRowData });
-
     try {
       setLoading(true);
       setConfirmButtonDisable(true);
@@ -966,6 +917,7 @@ const Tenant: React.FC = () => {
   };
   const handleAddmodal = () => {
     setAddmodalopen(false);
+    setAddFormData({});
   };
 
   useEffect(() => {
@@ -1270,7 +1222,7 @@ const Tenant: React.FC = () => {
             widgets={{}}
             showErrorList={true}
             customFields={customFields}
-            formData={editFormData}
+            formData={addFormData}
             id="update-center-form"
           >
             <Box
@@ -1307,6 +1259,7 @@ const Tenant: React.FC = () => {
                   height: "40px",
                   marginLeft: "10px",
                 }}
+                disabled={addBtnDisabled}
                 onClick={() => {
                   setSubmittedButtonStatus(true);
                 }}
@@ -1415,7 +1368,8 @@ const Tenant: React.FC = () => {
                 <Button
                   variant="contained"
                   type="submit"
-                  form="update-center-form" // Add this line
+                  form="update-center-form"
+                  disabled={updateBtnDisabled}
                   sx={{
                     fontSize: "14px",
                     fontWeight: "500",
diff --git a/src/pages/userSchema.json b/src/pages/userSchema.json
index e9a7741c..f56c4c58 100644
--- a/src/pages/userSchema.json
+++ b/src/pages/userSchema.json
@@ -19,19 +19,11 @@
       "validation": [],
       "description": "Enter a 10-digit mobile number."
     },
-    "dob": {
-      "title": "Date of Birth",
-      "fieldId": null,
-      "type": "string",
-      "format": "date",
-      "validation": [],
-      "description": "Enter date of birth in DD/MM/YYYY format."
-    },
     "email": {
       "title": "Email Address",
       "type": "string",
       "format": "email",
-      "pattern": "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
+      "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$",
       "validation": ["required"],
       "description": "Enter a valid email address."
     },