Issue feat: Integrate update learner API

public/locales/en/common.json

@@ -67,7 +67,9 @@
     "SEARCHBAR_PLACEHOLDER": "Search Learners..",
     "NEW_LEARNER": "New Learner",
     "FIRST_SELECT_REQUIRED_FIELDS": "First select required fields",
-    "LEARNER_CREATED_SUCCESSFULLY": "Leaner has been Successfully Created!"
+    "LEARNER_CREATED_SUCCESSFULLY": "Leaner has been Successfully Created!",
+    "LEARNER_UPDATED_SUCCESSFULLY": "Leaner has been Successfully Updated!"
+
   },
   "TEAM_LEADERS": {
     "SEARCHBAR_PLACEHOLDER": "Search Team leaders.."

src/components/ActionIcon.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { useTranslation } from "next-i18next";
 import { Box, Typography, Tooltip } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
+import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from "@mui/icons-material/Delete";
 
 interface ActionCellProps {
@@ -41,11 +41,11 @@ const ActionIcon: React.FC<ActionCellProps> = ({
             flexDirection: "column",
             alignItems: "center",
             cursor: "pointer",
-            opacity: 0.5, // Reduced opacity to make it appear disabled
+        //    opacity: 0.5, // Reduced opacity to make it appear disabled
             pointerEvents: "auto", // Enable pointer events to allow click
           }}
         >
-          <EditIcon sx={{ color: "rgba(0, 0, 0, 0.5)" }} />
+          <EditIcon/>
           <Typography variant="body2">Edit</Typography>
         </Box>
       </Tooltip>

src/components/AddLeanerModal.tsx

@@ -4,7 +4,7 @@ import {
   customFields,
 } from "@/components/GeneratedSchemas";
 import SimpleModal from "@/components/SimpleModal";
-import { createUser, getFormRead } from "@/services/CreateUserService";
+import { createUser, getFormRead , updateUser} from "@/services/CreateUserService";
 import { generateUsernameAndPassword } from "@/utils/Helper";
 import { FormData } from "@/utils/Interfaces";
 import {
@@ -31,12 +31,15 @@ import { showToastMessage } from "./Toastify";
 interface AddLearnerModalProps {
   open: boolean;
   onClose: () => void;
+  formData?:object;
+  isEditModal?:boolean;
+  userId?:string
 }
 interface FieldProp {
   value: string;
   label: string;
 }
-const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
+const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose, formData , isEditModal=false, userId}) => {
   const [schema, setSchema] = React.useState<any>();
   const [uiSchema, setUiSchema] = React.useState<any>();
 
@@ -80,6 +83,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
         if (response) {
           const { schema, uiSchema } = GenerateSchemaAndUiSchema(response, t);
           setSchema(schema);
+          console.log(schema)
           setUiSchema(uiSchema);
         }
       } catch (error) {
@@ -143,6 +147,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
       console.log(
         `FieldID: ${fieldId}, FieldValue: ${fieldValue}, type: ${typeof fieldValue}`
       );
+
 
       if (fieldId === null || fieldId === "null") {
         if (typeof fieldValue !== "object") {
@@ -164,8 +169,11 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
           });
         }
       }
-    });
 
+
+    });
+   if(!isEditModal)
+   {
     apiBody.customFields.push({
       fieldId: "a717bb68-5c8a-45cb-b6dd-376caa605736",
       value: [selectedBlockCode],
@@ -178,10 +186,36 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
       fieldId: "aecb84c9-fe4c-4960-817f-3d228c0c7300",
       value: [selectedDistrictCode],
     });
+   }
+
     try {
-      const response = await createUser(apiBody);
+      if(isEditModal && userId)
+      {
+        console.log(apiBody)
+        const userData={
+         "name":apiBody.name,
+         "mobile": apiBody.mobile,
+         "father_name":apiBody.father_name
+
+        };
+        const customFields=apiBody.customFields;
+        console.log(customFields)
+        const object=
+        {
+          "userData":userData,
+          "customFields":customFields
+        }
+        const response = await updateUser(userId,object)
+        showToastMessage(t("LEARNERS.LEARNER_UPDATED_SUCCESSFULLY"), "success");
+
+
+      }
+      else{  
+        const response = await createUser(apiBody);
+        showToastMessage(t("LEARNERS.LEARNER_CREATED_SUCCESSFULLY"), "success");
+
+      }
       onClose();
-      showToastMessage(t("LEARNERS.LEARNER_CREATED_SUCCESSFULLY"), "success");
     } catch (error) {
       onClose();
       console.log(error);
@@ -307,7 +341,23 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
             />
           </Box>
         </>
-        {dynamicForm && schema && uiSchema && (
+
+
+        {formData ? ( schema && uiSchema && (
+          <DynamicForm
+            schema={schema}
+            uiSchema={uiSchema}
+            onSubmit={handleSubmit}
+            onChange={handleChange}
+            onError={handleError}
+            widgets={{}}
+            showErrorList={true}
+            customFields={customFields}
+            formData={formData}
+          >
+            {/* <CustomSubmitButton onClose={primaryActionHandler} /> */}
+          </DynamicForm>
+        )) :( dynamicForm && schema && uiSchema && (
           <DynamicForm
             schema={schema}
             uiSchema={uiSchema}
@@ -320,7 +370,8 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
           >
             {/* <CustomSubmitButton onClose={primaryActionHandler} /> */}
           </DynamicForm>
-        )}
+        ))}
+
       </SimpleModal>
     </>
   );

src/components/DynamicForm.tsx

@@ -20,6 +20,8 @@ interface DynamicFormProps {
   onChange: (event: IChangeEvent<any>) => void;
   onError: (errors: any) => void;
   showErrorList: boolean;
+
+
   widgets: {
     [key: string]: React.FC<WidgetProps<any, RJSFSchema, any>>;
   };
@@ -39,6 +41,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   customFields,
   children,
 }) => {
+  console.log(formData)
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
     CustomRadioWidget: CustomRadioWidget,
@@ -113,7 +116,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   }
 
   function handleChange(event: any) {
-    console.log('Form data event:', event);
+    console.log('Form data changed:', event.formData);
     onChange(event);
   }
 
@@ -123,7 +126,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
       <FormWithMaterialUI
         schema={schema}
         uiSchema={uiSchema}
-        formData={formData}
+      formData={formData}
         onChange={handleChange}
         onSubmit={onSubmit}
         validator={validator}

src/components/KaTableComponent.tsx

@@ -28,6 +28,7 @@ interface KaTableComponentProps {
   }[];
   paginationEnable?: boolean;
   showIcons?: boolean;
+  pagination?: boolean;
 }
 
 const KaTableComponent: React.FC<KaTableComponentProps> = ({
@@ -43,6 +44,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
   onDelete,
   showIcons,
   pageSizes,
+  pagination = true,
 }) => {
   const [selectedRowIds, setSelectedRowIds] = useState<number[]>([]);
 
@@ -59,20 +61,22 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
     data,
     rowKeyField: "id",
     sortingMode: SortingMode.Single,
+    ...(pagination && {
+      paging: {
+        enabled: paginationEnable,
+        pageIndex: 0,
+        pageSize: limit,
+        pageSizes: pageSizes,
+        position: PagingPosition.Bottom,
+      },
+    }),
   };
 
   return (
     <Paper>
       <div className="ka-table-wrapper">
         <Table
           {...tableProps}
-          paging={{
-            enabled: paginationEnable,
-            pageIndex: 0,
-            pageSize: limit,
-            pageSizes: pageSizes,
-            position: PagingPosition.Bottom,
-          }}
           childComponents={{
             pagingSizes: {
               content: (props) => <PageSizeSelector {...props} />,

src/components/UserTable.tsx

@@ -3,7 +3,7 @@ import HeaderComponent from "@/components/HeaderComponent";
 import PageSizeSelector from "@/components/PageSelector";
 import { SORT, Status } from "@/utils/app.constant";
 import DeleteIcon from "@mui/icons-material/Delete";
-import EditIcon from "@mui/icons-material/Edit";
+import EditIcon from '@mui/icons-material/Edit';
 import Box from "@mui/material/Box";
 import Pagination from "@mui/material/Pagination";
 import { SelectChangeEvent } from "@mui/material/Select";
@@ -17,8 +17,14 @@ import KaTableComponent from "../components/KaTableComponent";
 import Loader from "../components/Loader";
 import { deleteUser } from "../services/DeleteUser";
 import { getCohortList } from "../services/GetCohortList";
-import { userList } from "../services/UserList";
+import { userList , getUserDetails} from "../services/UserList";
 import PersonSearchIcon from '@mui/icons-material/PersonSearch';
+import AddLearnerModal from '@/components/AddLeanerModal';
+import {
+
+  Role,
+  FieldIds,
+} from "@/utils/app.constant";
 type UserDetails = {
   userId: any;
   username: any;
@@ -152,9 +158,26 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
   const [selectedReason, setSelectedReason] = useState("");
   const [otherReason, setOtherReason] = useState("");
   const [confirmButtonDisable, setConfirmButtonDisable] = useState(false);
-  const [selectedFilter, setSelectedFilter] = useState("All");
+  const [pagination, setPagination] = useState(true);
+   const [selectedFilter, setSelectedFilter] = useState("All");
+   const [formdata, setFormData] = useState<any>();
+
   const [loading, setLoading] = useState<boolean | undefined>(undefined);
+  const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false);
+  const [userId, setUserId] = useState();
 
+  const handleOpenAddLearnerModal = () => {
+    console.log("hello")
+   setOpenAddLearnerModal(true);
+ };
+
+ const handleCloseAddLearnerModal = () => {
+   setOpenAddLearnerModal(false);
+ };
+   const handleAddLearnerClick = () => {
+     handleOpenAddLearnerModal();
+   };
+
   const [filters, setFilters] = useState<FilterDetails>({
     role: role,
   });
@@ -327,8 +350,41 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
 
     setSelectedSort(event.target.value as string);
   };
-  const handleEdit = (rowData: any) => {
+  const handleEdit =async (rowData: any) => {
     console.log("Edit row:", rowData);
+
+    try{
+      const userId=rowData.userId;
+      setUserId(userId)
+      const fieldValue=true
+      const response=await getUserDetails(userId, fieldValue);
+      if(Role.STUDENT===role)
+      {
+        const initialFormData = {
+          name: response?.userData.name,
+          mobile: String(response?.userData.mobile),
+          age:parseInt(String(response?.userData?.customFields.find((field: any) => field.fieldId === FieldIds.AGE).value)),
+          gender: response?.userData?.customFields.find((field: any) => field.fieldId === FieldIds.GENDER).value,
+          mobilisation_method:[response?.userData?.customFields.find((field: any) => field.fieldId === FieldIds.MOBILISATION_METHOD).value],
+          primary_work:[response?.userData?.customFields.find((field: any) => field.fieldId === FieldIds.PRIMARY_WORK).value],
+          father_name:response?.userData?.customFields.find((field: any) => field.name === 'father_name').value,
+          class:[response?.userData?.customFields.find((field: any) => field.fieldId === FieldIds.CLASS).value],
+          drop_out_reason:[response?.userData?.customFields.find((field: any) =>field.fieldId === FieldIds.DROP_OUT_REASON).value],
+          marital_status:[response?.userData?.customFields.find((field: any) => field.fieldId === FieldIds.MARITAL_STATUS).value],
+          phone_type_available:[response?.userData?.customFields.find((field: any) =>field.fieldId  === FieldIds.PHONE_TYPE_AVAILABLE).value],
+          own_phone_check:response?.userData?.customFields.find((field: any) =>field.fieldId  === FieldIds.OWN_PHONE_CHECK).value
+        }
+        setFormData(initialFormData)
+
+      }
+      handleOpenAddLearnerModal();
+
+    }
+    catch(error)
+   {
+      console.log(error)
+   }
+   // console.log("responce",responce)
     // Handle edit action here
   };
 
@@ -364,9 +420,16 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
         } else if (resp?.totalCount >= 10) {
           // setPageSize(resp?.totalCount);
           setPageSizeArray([5, 10]);
-        } else if (resp?.totalCount >= 5 || resp?.totalCount < 5) {
-          // setPageSize(resp?.totalCount);
+        }
+        else if(resp?.totalCount>5)
+        {
+          setPagination(false)
+
           setPageSizeArray([5]);
+
+        } else if (resp?.totalCount <= 5 ) {
+          setPagination(false)
+          // setPageSize(resp?.totalCount);
           //PageSizeSelectorFunction();
         }
 
@@ -512,6 +575,7 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
           showIcons={true}
           onEdit={handleEdit}
           onDelete={handleDelete}
+          pagination={pagination}
         />
       ) : (
         loading === false &&
@@ -551,6 +615,13 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
         confirmButtonDisable={confirmButtonDisable}
         setConfirmButtonDisable={setConfirmButtonDisable}
       />
+       <AddLearnerModal
+              open={openAddLearnerModal}
+              onClose={handleCloseAddLearnerModal}
+              formData={formdata}
+              isEditModal={true}
+              userId={userId}
+            />
     </HeaderComponent>
   );
 };