diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 2f32cd09..4ec42fa5 100644 --- a/public/locales/en/common.json +++ b/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.." diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx index 39031ee3..ee1f1447 100644 --- a/src/components/ActionIcon.tsx +++ b/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 = ({ 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 }} > - + Edit diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 9ce872a5..6c6f8e03 100644 --- a/src/components/AddLeanerModal.tsx +++ b/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 = ({ open, onClose }) => { +const AddLearnerModal: React.FC = ({ open, onClose, formData , isEditModal=false, userId}) => { const [schema, setSchema] = React.useState(); const [uiSchema, setUiSchema] = React.useState(); @@ -80,6 +83,7 @@ const AddLearnerModal: React.FC = ({ 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 = ({ 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 = ({ open, onClose }) => { }); } } - }); + + }); + if(!isEditModal) + { apiBody.customFields.push({ fieldId: "a717bb68-5c8a-45cb-b6dd-376caa605736", value: [selectedBlockCode], @@ -178,10 +186,36 @@ const AddLearnerModal: React.FC = ({ 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 = ({ open, onClose }) => { /> - {dynamicForm && schema && uiSchema && ( + + + {formData ? ( schema && uiSchema && ( + + {/* */} + + )) :( dynamicForm && schema && uiSchema && ( = ({ open, onClose }) => { > {/* */} - )} + ))} + ); diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index 0117402a..717ef03d 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -20,6 +20,8 @@ interface DynamicFormProps { onChange: (event: IChangeEvent) => void; onError: (errors: any) => void; showErrorList: boolean; + + widgets: { [key: string]: React.FC>; }; @@ -39,6 +41,7 @@ const DynamicForm: React.FC = ({ customFields, children, }) => { + console.log(formData) const widgets = { MultiSelectCheckboxes: MultiSelectCheckboxes, CustomRadioWidget: CustomRadioWidget, @@ -113,7 +116,7 @@ const DynamicForm: React.FC = ({ } 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 = ({ = ({ @@ -43,6 +44,7 @@ const KaTableComponent: React.FC = ({ onDelete, showIcons, pageSizes, + pagination = true, }) => { const [selectedRowIds, setSelectedRowIds] = useState([]); @@ -59,6 +61,15 @@ const KaTableComponent: React.FC = ({ data, rowKeyField: "id", sortingMode: SortingMode.Single, + ...(pagination && { + paging: { + enabled: paginationEnable, + pageIndex: 0, + pageSize: limit, + pageSizes: pageSizes, + position: PagingPosition.Bottom, + }, + }), }; return ( @@ -66,13 +77,6 @@ const KaTableComponent: React.FC = ({
, diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx index 87843bd4..f2ec8754 100644 --- a/src/components/UserTable.tsx +++ b/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 = ({ 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(); + const [loading, setLoading] = useState(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({ role: role, }); @@ -327,8 +350,41 @@ const UserTable: React.FC = ({ 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 = ({ 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 = ({ role , userType, searchPlaceholde showIcons={true} onEdit={handleEdit} onDelete={handleDelete} + pagination={pagination} /> ) : ( loading === false && @@ -551,6 +615,13 @@ const UserTable: React.FC = ({ role , userType, searchPlaceholde confirmButtonDisable={confirmButtonDisable} setConfirmButtonDisable={setConfirmButtonDisable} /> + ); }; diff --git a/src/services/CreateUserService.ts b/src/services/CreateUserService.ts index 367144a9..23a5f95d 100644 --- a/src/services/CreateUserService.ts +++ b/src/services/CreateUserService.ts @@ -1,6 +1,11 @@ -import { get, post } from './RestClient'; +import { get, post, patch } from './RestClient'; import { createUserParam } from '../utils/Interfaces'; - +export interface UserDetailParam { + userData?: object; + + customFields?: any; + +} export const getFormRead = async ( context: string, contextType: string @@ -34,4 +39,19 @@ export const createUser = async (userData: any): Promise => { console.error('error in getting cohort list', error); // throw error; } +}; + +export const updateUser = async ( + userId: string, + {userData, + customFields}: UserDetailParam +): Promise => { + const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/update/${userId}`; + try { + const response = await patch(apiUrl, {userData, customFields}); + return response; + } catch (error) { + console.error("error in fetching user details", error); + return error; + } }; \ No newline at end of file diff --git a/src/services/UserList.ts b/src/services/UserList.ts index f62e793e..fbcc1513 100644 --- a/src/services/UserList.ts +++ b/src/services/UserList.ts @@ -1,4 +1,4 @@ -import { post } from "./RestClient"; +import { post, get } from "./RestClient"; export interface userListParam { limit: number; @@ -38,3 +38,22 @@ export const userList = async ({ throw error; } }; + + +export const getUserDetails = async ( + userId?: string | string[], + fieldValue?: boolean +): Promise => { + const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/read/${userId}?fieldvalue=${fieldValue}`; + try { + const response = await get(apiUrl); + return response?.data?.result; + } catch (error) { + console.error('error in fetching user details', error); + return error; + } +}; + + + + diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index 7b35bfa5..401e432f 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -35,4 +35,16 @@ export enum RoleId { ADMIN = "ee482faf-8a41-45fe-9656-5533dd6a787c", } +export enum FieldIds { + AGE = "2f07caa6-61b8-4a6a-92f4-94b5596a4864", + GENDER = "c81e50d4-87a2-4dc1-9de6-85591c581f5c", + MOBILISATION_METHOD="7adad9b7-0cf2-4a48-bc60-56a80dc02107", + PRIMARY_WORK = "2914814c-2a0f-4422-aff8-6bd3b09d3069", + CLASS="9a4ad601-023b-467f-bbbe-bda1885f87c7", + DROP_OUT_REASON="4f48571b-88fd-43b9-acb3-91afda7901ac", + MARITAL_STATUS="ff472647-6c40-42e6-b200-dc74b241e915", + PHONE_TYPE_AVAILABLE="da594b2e-c645-4a96-af15-6e2d24587c9a", + OWN_PHONE_CHECK="d119d92f-fab7-4c7d-8370-8b40b5ed23dc" +} +