From 168f94d33f1d630aa6a603165645684c9059c102 Mon Sep 17 00:00:00 2001 From: Rushikesh-Sonawane99 Date: Thu, 1 Aug 2024 15:17:39 +0530 Subject: [PATCH 1/2] Issue #PS-1255 chore: Modified validations for edit user profile --- src/components/AddFacilitator.tsx | 32 ++++++++++----------- src/components/AddLeanerModal.tsx | 24 ++++++++-------- src/pages/learner/[userId].tsx | 44 ++++++++++++++++++++--------- src/pages/user-profile/[userId].tsx | 41 ++++++++++++++++++--------- src/utils/Helper.ts | 2 +- 5 files changed, 87 insertions(+), 56 deletions(-) diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx index b712415a..c93fde95 100644 --- a/src/components/AddFacilitator.tsx +++ b/src/components/AddFacilitator.tsx @@ -21,14 +21,14 @@ import { tenantId } from '../../app.config'; interface AddFacilitatorModalprops { open: boolean; onClose: () => void; - formData?: object; + userFormData?: object; isEditModal?: boolean; userId?: string; } const AddFacilitatorModal: React.FC = ({ open, onClose, - formData, + userFormData, isEditModal = false, userId, }) => { @@ -104,18 +104,18 @@ const AddFacilitatorModal: React.FC = ({ const target = event.target as HTMLFormElement; const elementsArray = Array.from(target.elements); - for (const element of elementsArray) { - if ( - (element instanceof HTMLInputElement || - element instanceof HTMLSelectElement || - element instanceof HTMLTextAreaElement) && - (element.value === '' || - (Array.isArray(element.value) && element.value.length === 0)) - ) { - element.focus(); - return; - } - } + // for (const element of elementsArray) { + // if ( + // (element instanceof HTMLInputElement || + // element instanceof HTMLSelectElement || + // element instanceof HTMLTextAreaElement) && + // (element.value === '' || + // (Array.isArray(element.value) && element.value.length === 0)) + // ) { + // element.focus(); + // return; + // } + // } const formData = data.formData; console.log('Form data submitted:', formData); @@ -235,7 +235,7 @@ const AddFacilitatorModal: React.FC = ({ showFooter={false} modalTitle={t('COMMON.NEW_FACILITATOR')} > - {formData + {userFormData ? schema && uiSchema && ( = ({ widgets={{}} showErrorList={true} customFields={customFields} - formData={formData} + formData={userFormData} > {/* */} diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index cfbe3d69..6583b3fc 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -75,18 +75,18 @@ const AddLearnerModal: React.FC = ({ const target = event.target as HTMLFormElement; const elementsArray = Array.from(target.elements); - for (const element of elementsArray) { - if ( - (element instanceof HTMLInputElement || - element instanceof HTMLSelectElement || - element instanceof HTMLTextAreaElement) && - (element.value === '' || - (Array.isArray(element.value) && element.value.length === 0)) - ) { - element.focus(); - return; - } - } + // for (const element of elementsArray) { + // if ( + // (element instanceof HTMLInputElement || + // element instanceof HTMLSelectElement || + // element instanceof HTMLTextAreaElement) && + // (element.value === '' || + // (Array.isArray(element.value) && element.value.length === 0)) + // ) { + // element.focus(); + // return; + // } + // } console.log('Form data submitted:', data.formData); const formData = data.formData; diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx index b3e29c51..099a3c16 100644 --- a/src/pages/learner/[userId].tsx +++ b/src/pages/learner/[userId].tsx @@ -198,25 +198,28 @@ const LearnerProfile: React.FC = () => { let initialFormData: any = {}; formFields.fields.forEach((item: any) => { const userData = response?.userData; - const customField = userData?.customFields?.find( + const customFieldValue = userData?.customFields?.find( (field: any) => field.fieldId === item.fieldId ); const getValue = (data: any, field: any) => { + if (item.default) { + return item.default; + } if (item?.isMultiSelect) { if (data[item.name] && item?.maxSelections > 1) { - return [field.value]; + return [field?.value]; } else if (item?.type === 'checkbox') { - return String(field.value).split(','); + return String(field?.value).split(','); } else { - return field.value; + return field?.value; } } else { if (item?.type === 'numeric') { - return Number(field.value); + return parseInt(String(field?.value)); } else if (item?.type === 'text') { - return String(field.value); + return String(field?.value); } else { - return field.value; + return field?.value; } } }; @@ -224,18 +227,31 @@ const LearnerProfile: React.FC = () => { if (item?.isMultiSelect) { if (userData[item.name] && item?.maxSelections > 1) { initialFormData[item.name] = [userData[item.name]]; - } else { - initialFormData[item.name] = userData[item.name] || ''; + } + else if (item?.type === "checkbox") { + initialFormData[item.name]= String(userData[item.name]).split(","); } - } else if (item?.type === 'numeric') { + 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') { + } else if (item?.type === "text" && userData[item.name]) { initialFormData[item.name] = String(userData[item.name]); - } else { - initialFormData[item.name] = userData[item.name]; + } + else { + // console.log(item.name); + if (userData[item.name]) { + initialFormData[item.name] = userData[item.name]; + } } } else { - initialFormData[item.name] = getValue(userData, customField); + const fieldValue = getValue(userData, customFieldValue); + + if (fieldValue) { + initialFormData[item.name] = fieldValue; + } } }); console.log('initialFormData', initialFormData); diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx index 05fa5e42..1028356b 100644 --- a/src/pages/user-profile/[userId].tsx +++ b/src/pages/user-profile/[userId].tsx @@ -60,7 +60,7 @@ const TeacherProfile = () => { const [blockName, setBlockName] = useState(''); const [isError, setIsError] = React.useState(false); const [isData, setIsData] = React.useState(false); - const [formData, setFormData] = useState<{ [key: string]: any }>({}); + const [userFormData, setUserFormData] = useState<{ [key: string]: any }>({}); const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false); const handleOpenAddLearnerModal = () => { @@ -85,7 +85,7 @@ const TeacherProfile = () => { let initialFormData: any = {}; formFields.fields.forEach((item: any) => { const userData = response?.userData; - const customField = userData?.customFields?.find( + const customFieldValue = userData?.customFields?.find( (field: any) => field.fieldId === item.fieldId ); const getValue = (data: any, field: any) => { @@ -94,15 +94,21 @@ const TeacherProfile = () => { } if (item?.isMultiSelect) { if (data[item.name] && item?.maxSelections > 1) { - return [field.value]; + if (field.value) { + return [field.value]; + } + return null; } else if (item?.type === 'checkbox') { - return String(field.value).split(','); + if (field.value) { + return String(field.value).split(','); + } + return null; } else { return field.value; } } else { if (item?.type === 'numeric') { - return Number(field.value); + return parseInt(String(field.value)); } else if (item?.type === 'text') { return String(field.value); } else { @@ -114,18 +120,27 @@ const TeacherProfile = () => { if (item?.isMultiSelect) { if (userData[item.name] && item?.maxSelections > 1) { initialFormData[item.name] = [userData[item.name]]; + } else if (item?.type === 'checkbox') { + initialFormData[item.name] = String(userData[item.name]).split(','); } else { - initialFormData[item.name] = userData[item.name] || ''; + initialFormData[item.name] = userData[item.name]; } } else if (item?.type === 'numeric') { initialFormData[item.name] = Number(userData[item.name]); - } else if (item?.type === 'text') { + } else if (item?.type === 'text' && userData[item.name]) { initialFormData[item.name] = String(userData[item.name]); } else { - initialFormData[item.name] = userData[item.name]; + if (userData[item.name]) { + initialFormData[item.name] = userData[item.name]; + } } } else { - initialFormData[item.name] = getValue(userData, customField); + // For Custom Fields + const fieldValue = getValue(userData, customFieldValue); + + if (fieldValue) { + initialFormData[item.name] = fieldValue; + } } }); console.log('initialFormData', initialFormData); @@ -136,10 +151,10 @@ const TeacherProfile = () => { try { let formFields; const response = await getUserDetails(userId, true); - formFields = await getFormRead('USERS', 'TEACHER'); //TODO: Change for TL + formFields = await getFormRead('USERS', 'TEACHER'); console.log('response', response); console.log('formFields', formFields); - setFormData(mapFields(formFields, response?.result)); + setUserFormData(mapFields(formFields, response?.result)); } catch (error) { console.error('Error fetching data or initializing form:', error); } @@ -190,7 +205,7 @@ const TeacherProfile = () => { const fetchFormData = async () => { try { const formContextType = - (userRole === Role.TEAM_LEADER && selfUserId === userId) + userRole === Role.TEAM_LEADER && selfUserId === userId ? FormContextType.TEAM_LEADER : FormContextType.TEACHER; const response: FormData = await getFormRead( @@ -543,7 +558,7 @@ const TeacherProfile = () => { diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts index d2b863dc..24646f56 100644 --- a/src/utils/Helper.ts +++ b/src/utils/Helper.ts @@ -125,7 +125,7 @@ export const toPascalCase = (name: string | any) => { } return name - .toLowerCase() + ?.toLowerCase() .split(' ') .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); From da4316929db6479f43f7717993ccb4857b16e7e6 Mon Sep 17 00:00:00 2001 From: Rushikesh-Sonawane99 Date: Thu, 1 Aug 2024 15:21:09 +0530 Subject: [PATCH 2/2] Issue #PS-1255 chore: Applied formatting for code --- src/components/AddFacilitator.tsx | 2 +- src/components/AddLeanerModal.tsx | 158 +++++++++++++++--------------- src/pages/learner/[userId].tsx | 17 ++-- 3 files changed, 87 insertions(+), 90 deletions(-) diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx index c93fde95..22840fb7 100644 --- a/src/components/AddFacilitator.tsx +++ b/src/components/AddFacilitator.tsx @@ -98,7 +98,7 @@ const AddFacilitatorModal: React.FC = ({ data: IChangeEvent, event: React.FormEvent ) => { - if(!isEditModal){ + if (!isEditModal) { setOpenModal(true); } const target = event.target as HTMLFormElement; diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 6583b3fc..7dff10a5 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -24,7 +24,7 @@ interface AddLearnerModalProps { formData?: object; isEditModal?: boolean; userId?: string; - onReload?: (() => void)| undefined; + onReload?: (() => void) | undefined; } const AddLearnerModal: React.FC = ({ open, @@ -33,7 +33,7 @@ const AddLearnerModal: React.FC = ({ formData, isEditModal = false, userId, - onReload + onReload, }) => { const [schema, setSchema] = React.useState(); const [uiSchema, setUiSchema] = React.useState(); @@ -174,11 +174,11 @@ const AddLearnerModal: React.FC = ({ userData: userData, customFields: customFields, }; - const response = await editEditUser(userId, object); + const response = await editEditUser(userId, object); if (response) { showToastMessage(t('COMMON.LEARNER_UPDATED_SUCCESSFULLY'), 'success'); - setReloadProfile(true); - onReload?.(); + setReloadProfile(true); + onReload?.(); } } else { const response = await createUser(apiBody); @@ -215,41 +215,41 @@ const AddLearnerModal: React.FC = ({ justifyContent: 'space-between', }} > - <> - - + <> + + ); @@ -272,45 +272,45 @@ const AddLearnerModal: React.FC = ({ return ( <> - - {formData - ? schema && - uiSchema && ( - - {/* */} - - ) - : schema && - uiSchema && ( - - {/* */} - - )} - + + {formData + ? schema && + uiSchema && ( + + {/* */} + + ) + : schema && + uiSchema && ( + + {/* */} + + )} + ); }; diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx index 099a3c16..b65d976a 100644 --- a/src/pages/learner/[userId].tsx +++ b/src/pages/learner/[userId].tsx @@ -115,7 +115,7 @@ const LearnerProfile: React.FC = () => { const [reload, setReload] = React.useState(false); const handleReload = () => { - setReload(prev => !prev); + setReload((prev) => !prev); }; const StyledMenu = styled((props: MenuProps) => ( @@ -227,20 +227,17 @@ const LearnerProfile: React.FC = () => { if (item?.isMultiSelect) { if (userData[item.name] && item?.maxSelections > 1) { initialFormData[item.name] = [userData[item.name]]; - } - else if (item?.type === "checkbox") { - initialFormData[item.name]= String(userData[item.name]).split(","); - } - else { + } else if (item?.type === 'checkbox') { + initialFormData[item.name] = String(userData[item.name]).split(','); + } else { initialFormData[item.name] = userData[item.name]; } - } else if (item?.type === "numeric") { + } else if (item?.type === 'numeric') { console.log(item?.name); initialFormData[item.name] = Number(userData[item.name]); - } else if (item?.type === "text" && userData[item.name]) { + } else if (item?.type === 'text' && userData[item.name]) { initialFormData[item.name] = String(userData[item.name]); - } - else { + } else { // console.log(item.name); if (userData[item.name]) { initialFormData[item.name] = userData[item.name];