From 24c9ae127871f71e1905609bad1ad75a751cbb22 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Sat, 10 Aug 2024 15:27:43 +0530 Subject: [PATCH] Issue feat: Implement Edit profile --- public/locales/en/common.json | 3 +- src/components/CommonUserModal.tsx | 4 +- src/components/layouts/header/Profile.tsx | 300 +++++++++++++++++----- 3 files changed, 235 insertions(+), 72 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 62eb416e..836df0ad 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -74,7 +74,8 @@ "ALL_BLOCKS":"All Blocks", "ALL_DISTRICTS":"All Districts", "ALL_STATES":"All States", - "LOGOUT":"Log out" + "LOGOUT":"Log out", + "HI":"Hi" }, "LOGIN_PAGE": { diff --git a/src/components/CommonUserModal.tsx b/src/components/CommonUserModal.tsx index 0fce0076..d6bb0ef0 100644 --- a/src/components/CommonUserModal.tsx +++ b/src/components/CommonUserModal.tsx @@ -123,6 +123,7 @@ const CommonUserModal: React.FC = ({ setFormValue(formValues); setSchema(schema); setUiSchema(uiSchema); + console.log("teacher2") } else if (userType === FormContextType.TEAM_LEADER) { const { schema, uiSchema, formValues } = GenerateSchemaAndUiSchema( response, @@ -145,7 +146,7 @@ const CommonUserModal: React.FC = ({ } }; getAddUserFormData(); - }, []); + }, [userType]); const handleSubmit = async ( data: IChangeEvent, @@ -272,6 +273,7 @@ const CommonUserModal: React.FC = ({ name: apiBody?.name, mobile: apiBody?.mobile, father_name: apiBody?.father_name, + email:apiBody?.email }; const customFields = apiBody?.customFields; console.log(customFields); diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx index c0c06c5f..1c67450c 100644 --- a/src/components/layouts/header/Profile.tsx +++ b/src/components/layouts/header/Profile.tsx @@ -1,31 +1,34 @@ -import React, { useEffect } from "react"; -import FeatherIcon from "feather-icons-react"; +import CommonUserModal from "@/components/CommonUserModal"; +import { FormContextType, Role } from "@/utils/app.constant"; import AccountCircleIcon from "@mui/icons-material/AccountCircle"; +import FeatherIcon from "feather-icons-react"; import { useTranslation } from "next-i18next"; +import React, { useEffect } from "react"; -import { useRouter } from "next/router"; +import { getFormRead } from "@/services/CreateUserService"; +import { getUserDetailsInfo } from "@/services/UserList"; +import { Storage } from "@/utils/app.constant"; +import EditIcon from '@mui/icons-material/Edit'; +import MailIcon from '@mui/icons-material/Mail'; +import PhoneIcon from '@mui/icons-material/Phone'; import { Box, - Menu, - Typography, - ListItemButton, - List, - ListItemText, Button, IconButton, - Divider, + Menu, + Typography } from "@mui/material"; -import { Storage } from "@/utils/app.constant"; -import EditIcon from '@mui/icons-material/Edit'; -import PhoneIcon from '@mui/icons-material/Phone'; -import MailIcon from '@mui/icons-material/Mail'; -import { getUserDetailsInfo } from "@/services/UserList"; +import { useRouter } from "next/router"; const Profile = () => { const [anchorEl4, setAnchorEl4] = React.useState(null); const [profileClick, setProfileClick] = React.useState(false); - + const [openEditModal, setOpenEditModal] = React.useState(false); const [userName, setUserName] = React.useState(""); + const [userId, setUserId] = React.useState(""); + const [formdata, setFormData] = React.useState(); + const [submitValue, setSubmitValue] = React.useState(false); + const [role, setRole] = React.useState(""); const [mobile, setMobile] = React.useState(""); @@ -53,13 +56,137 @@ const Profile = () => { router.push("/logout"); }; + + const mapFields = (formFields: any, response: any) => { + let initialFormData: any = {}; + formFields.fields.forEach((item: any) => { + const userData = response?.userData; + const customFieldValue = userData?.customFields?.find( + (field: any) => field.fieldId === item.fieldId, + ); + + const getValue = (data: any, field: any) => { + console.log(data, field); + if (item.default) { + return item.default; + } + if (item?.isMultiSelect) { + if (data[item.name] && item?.maxSelections > 1) { + return [field?.value]; + } else if (item?.type === "checkbox") { + console.log(item) + console.log(String(field?.value).split(",")) + + return String(field?.value).split(","); + } else { + return field?.value?.toLowerCase(); + } + } else { + if (item?.type === "numeric") { + return parseInt(String(field?.value)); + } else if (item?.type === "text") { + return String(field?.value); + } else { + if (field?.value === "FEMALE" || field?.value === "MALE") { + console.log(true); + return field?.value?.toLowerCase(); + } + // console.log() + return field?.value?.toLowerCase(); + } + } + }; + + if (item.coreField) { + if (item?.isMultiSelect) { + if (userData[item.name] && item?.maxSelections > 1) { + initialFormData[item.name] = [userData[item.name]]; + } else if (item?.type === "checkbox") { + // console.log("checkbox") + + initialFormData[item.name] = String(userData[item.name]).split(","); + } else { + initialFormData[item.name] = userData[item.name]; + } + } else if (item?.type === "numeric") { + console.log(item?.name); + initialFormData[item.name] = Number(userData[item.name]); + } else if (item?.type === "text" && userData[item.name]) { + initialFormData[item.name] = String(userData[item.name]); + } else { + console.log(item.name); + if (userData[item.name]) { + initialFormData[item.name] = userData[item.name]; + } + } + } else { + const fieldValue = getValue(userData, customFieldValue); + + if (fieldValue) { + initialFormData[item.name] = fieldValue; + } + } + }); + + console.log("initialFormData", initialFormData); + return initialFormData; + }; + const handleEditClick = async (rowData: any) => { + handleClose4(); + if(submitValue) + { + setSubmitValue(false); + } + console.log("Edit row:", rowData); + + try { + + const fieldValue = true; + const response = await getUserDetailsInfo(userId, fieldValue); + console.log(role); + + let formFields; + if (Role.STUDENT === role) { + formFields = await getFormRead("USERS", "STUDENT"); + setFormData(mapFields(formFields, response)); + console.log("mapped formdata", formdata); + } else if (Role.TEACHER === role) { + console.log("mapped formdata", formdata); + + formFields = await getFormRead("USERS", "TEACHER"); + setFormData(mapFields(formFields, response)); + } else if (Role.TEAM_LEADER === role) { + formFields = await getFormRead("USERS", "TEAM LEADER"); + setFormData(mapFields(formFields, response)); + } + handleOpenEditModal(); + + console.log("response", response); + console.log("formFields", formFields); + } catch (error) { + console.log(error); + } + }; + const getUserName = () => { if (typeof window !== "undefined" && window.localStorage) { const name = localStorage.getItem(Storage.NAME); setUserName(name); } }; + const handleCloseAddLearnerModal = () => { + setOpenEditModal(false); + }; + const handleOpenEditModal = () => { + setOpenEditModal(true); + }; + useEffect(() => { + getUserName(); + + + + }, [formdata]); useEffect(() => { getUserName(); @@ -74,13 +201,18 @@ console.log(profileClick) if(userId && profileClick) { + setUserId(userId) + console.log("true") const response=await getUserDetailsInfo(userId) console.log(response.userData) + setUserName(response?.userData?.name); + console.log(userName) setMobile(response?.userData?.mobile); setEmail(response?.userData?.email); setRole(response?.userData?.role); const initialLetters = userName?.split(' ').map(word => word[0]) .join(''); + console.log(initialLetters) if(initialLetters) setInitials(initialLetters) } @@ -98,8 +230,11 @@ console.log(profileClick) - }, [profileClick]); + }, [profileClick, submitValue]); + const handleModalSubmit = (value: boolean) => { + submitValue?setSubmitValue(false):setSubmitValue(true); + }; return ( <> - {/* - - */} - - + + + + + + + + {initials} + + + + + {userName} + + + {role} + + + + + {mobile} + + + + + + {email} + + + + + + );