diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 70335590..1f24f92b 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -39,7 +39,6 @@ interface AddLearnerModalProps { onReload?: (() => void) | undefined; learnerEmailId?: string; learnerUserName?: string; - } const AddLearnerModal: React.FC = ({ open, @@ -50,7 +49,7 @@ const AddLearnerModal: React.FC = ({ userId, onReload, learnerUserName, - learnerEmailId + learnerEmailId, }) => { const [schema, setSchema] = React.useState(); const [uiSchema, setUiSchema] = React.useState(); @@ -111,21 +110,17 @@ const AddLearnerModal: React.FC = ({ data: IChangeEvent, event: React.FormEvent ) => { - if(data?.formData?.name) - { - data.formData.name = data?.formData?.name?.trim() + if (data?.formData?.name) { + data.formData.name = data?.formData?.name?.trim(); } - if(data?.formData?.father_name) - { - data.formData.father_name = data?.formData?.father_name?.trim() + if (data?.formData?.father_name) { + data.formData.father_name = data?.formData?.father_name?.trim(); } setTimeout(() => { setLearnerFormData(data.formData); }); - const formData = data.formData; - }; useEffect(() => { @@ -202,7 +197,6 @@ const AddLearnerModal: React.FC = ({ fieldId: fieldData?.state?.districtId, value: [fieldData?.state?.districtCode], }); - } try { @@ -213,11 +207,11 @@ const AddLearnerModal: React.FC = ({ father_name: apiBody.father_name, username: apiBody.username, email: apiBody?.email, - firstName:apiBody?.firstName, - middleName:apiBody?.middleName, - lastName:apiBody?.lastName, - dob:apiBody?.dob, - gender:apiBody?.gender + firstName: apiBody?.firstName, + middleName: apiBody?.middleName, + lastName: apiBody?.lastName, + dob: apiBody?.dob, + gender: apiBody?.gender, }; const customFields = apiBody.customFields; const object = { @@ -225,13 +219,10 @@ const AddLearnerModal: React.FC = ({ customFields: customFields, }; - if(learnerEmailId===userData.email) - { + if (learnerEmailId === userData.email) { delete userData.email; - } - if(learnerUserName===userData.username) - delete userData.username; + if (learnerUserName === userData.username) delete userData.username; const response = await editEditUser(userId, object); if (response) { showToastMessage( @@ -243,8 +234,7 @@ const AddLearnerModal: React.FC = ({ onClose(); } } else { - if(apiBody?.phone_number) - { + if (apiBody?.phone_number) { apiBody.mobile = apiBody?.phone_number; } const response = await createUser(apiBody); @@ -291,11 +281,12 @@ const AddLearnerModal: React.FC = ({ } } } catch (error: any) { - if (error?.response?.data?.params?.err === "User already exist.") { - showToastMessage(error?.response?.data?.params?.err, "error"); - } - else if (error?.response?.data?.params?.errmsg === "Email already exists") { - showToastMessage(error?.response?.data?.params?.errmsg, "error"); + if (error?.response?.data?.params?.err === 'User already exist.') { + showToastMessage(error?.response?.data?.params?.err, 'error'); + } else if ( + error?.response?.data?.params?.errmsg === 'Email already exists' + ) { + showToastMessage(error?.response?.data?.params?.errmsg, 'error'); } else { showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); } @@ -307,22 +298,31 @@ const AddLearnerModal: React.FC = ({ } }; - const handleChange = (event: IChangeEvent) => { - // if (!isEditModal) { - // const { firstName, lastName } = event.formData; - - // if (firstName && lastName) { - // event.formData.username = firstName + lastName; - // } else { - // event.formData.username = ""; - // } - // setCustomFormData({ ...event.formData }); + const { formData } = event; - // } - + if (!isEditModal) { + const { firstName, lastName, username } = formData; + if (firstName && lastName) { + const updatedUsername = event.formData.username + ? username + : firstName && lastName + ? (firstName + lastName).toLowerCase() + : ''; + + const updatedFormData = { + ...formData, + username: updatedUsername, + }; + + setCustomFormData(updatedFormData); + } else { + setCustomFormData({ ...event.formData }); + } + } else { + setCustomFormData({ ...formData }); + } }; - const handleError = (errors: any) => { console.log('Form errors:', errors); @@ -371,6 +371,7 @@ const AddLearnerModal: React.FC = ({ showErrorList={true} customFields={customFields} formData={customFormData ?? undefined} + setFormData={setCustomFormData} > , event: React.FormEvent ) => void | Promise; onChange: (event: IChangeEvent) => void; onError: (errors: any) => void; + setFormData?: (data: any) => void; showErrorList: boolean; widgets: { @@ -43,14 +48,19 @@ const DynamicForm: React.FC = ({ onError, customFields, children, + setFormData, }) => { const widgets = { MultiSelectCheckboxes: MultiSelectCheckboxes, CustomRadioWidget: CustomRadioWidget, MultiSelectDropdown: MultiSelectDropdown, CustomNumberWidget: CustomNumberWidget, + UsernameWithSuggestions: UsernameWithSuggestions as React.FC< + WidgetProps + >, }; const { t } = useTranslation(); + const [suggestions, setSuggestions] = useState([]); const submittedButtonStatus = useSubmittedButtonStore( (state: any) => state.submittedButtonStatus @@ -83,13 +93,16 @@ const DynamicForm: React.FC = ({ }; const sanitizeFormData = (data: any): any => { if (Array.isArray(data)) { - return data.map(item => (typeof item === "undefined" ? '' : sanitizeFormData(item))); + return data.map((item) => + typeof item === 'undefined' ? '' : sanitizeFormData(item) + ); } if (data !== null && typeof data === 'object') { return Object.fromEntries( - - Object.entries(data)?.map(([key, value]) => [key, value === "undefined" ? "" : sanitizeFormData(value)]) - + Object.entries(data)?.map(([key, value]) => [ + key, + value === 'undefined' ? '' : sanitizeFormData(value), + ]) ); } return data; @@ -186,16 +199,12 @@ const DynamicForm: React.FC = ({ ); break; } - case '^[a-zA-Z0-9.@]+$': - - { - error.message = t( - 'FORM_ERROR_MESSAGES.SPACE_AND_SPECIAL_CHARACTERS_NOT_ALLOWED' - ); - break; - - - } + case '^[a-zA-Z0-9.@]+$': { + error.message = t( + 'FORM_ERROR_MESSAGES.SPACE_AND_SPECIAL_CHARACTERS_NOT_ALLOWED' + ); + break; + } default: { if (error?.property === '.email') { const validEmail = emailPattern.test(pattern); @@ -266,6 +275,25 @@ const DynamicForm: React.FC = ({ const sanitizedData = sanitizeFormData(event.formData); onChange({ ...event, formData: sanitizedData }); } + const handleUsernameBlur = async (username: string) => { + if (username) { + try { + console.log('Username onblur called'); + // setSuggestions(["1234"]) + } catch (error) { + console.error('Error validating username:', error); + } + } + }; + + const handleSuggestionSelect = (selectedUsername: string) => { + if (setFormData) + setFormData((prev: any) => ({ + ...prev, + username: selectedUsername, + })); + setSuggestions([]); + }; return (
@@ -283,6 +311,15 @@ const DynamicForm: React.FC = ({ onError={handleError} transformErrors={transformErrors} fields={customFields} + formContext={{ + suggestions, + onSuggestionSelect: handleSuggestionSelect, + }} + onBlur={(field, value) => { + if (field === 'username') { + handleUsernameBlur(value); + } + }} > {children} diff --git a/src/components/GeneratedSchemas.ts b/src/components/GeneratedSchemas.ts index c21345b0..e8aef18f 100644 --- a/src/components/GeneratedSchemas.ts +++ b/src/components/GeneratedSchemas.ts @@ -2,7 +2,11 @@ import { UiSchema } from '@rjsf/utils'; import { JSONSchema7 } from 'json-schema'; import NumberInputField from './form/NumberInputField'; import { FormData, Field, FieldOption } from '@/utils/Interfaces'; -import { getCurrentYearPattern, getEmailPattern, getLastDayDate } from '@/utils/Helper'; +import { + getCurrentYearPattern, + getEmailPattern, + getLastDayDate, +} from '@/utils/Helper'; export const customFields = { NumberInputField: NumberInputField, @@ -57,6 +61,8 @@ export const GenerateSchemaAndUiSchema = ( if (field?.hint) { fieldUiSchema['ui:help'] = t(`FORM.${field?.hint}`); } + if (name === 'username') + fieldUiSchema['ui:widget'] = 'UsernameWithSuggestions'; break; case 'email': @@ -115,11 +121,11 @@ export const GenerateSchemaAndUiSchema = ( })); fieldUiSchema['ui:widget'] = 'CustomRadioWidget'; break; - case 'date': - fieldSchema.type = 'string'; - fieldSchema.format = 'date'; - fieldUiSchema['ui:widget'] = 'date'; - break; + case 'date': + fieldSchema.type = 'string'; + fieldSchema.format = 'date'; + fieldUiSchema['ui:widget'] = 'date'; + break; default: break; } diff --git a/src/components/UsernameWithSuggestions.tsx b/src/components/UsernameWithSuggestions.tsx new file mode 100644 index 00000000..1fb3d0f2 --- /dev/null +++ b/src/components/UsernameWithSuggestions.tsx @@ -0,0 +1,74 @@ +import { + Box, + ListItemText, + MenuItem, + TextField, + Typography, +} from '@mui/material'; +import { WidgetProps } from '@rjsf/utils'; +import React from 'react'; +interface UsernameWidgetProps { + formContext: { + suggestions: string[]; + onSuggestionSelect: (suggestion: string) => void; + }; + value: string; + onChange: (value: string) => void; + onBlur: (field: string, value: string) => void; +} +const UsernameWithSuggestions: React.FC = ({ + formContext, + value, + onBlur, + onChange, + ...rest +}) => { + const { suggestions, onSuggestionSelect } = formContext; + + const handleBlur = (event: React.FocusEvent) => { + if (onBlur) { + onBlur(event.target.name, event.target.value); + } + }; + + const handleWheel = (event: any) => { + if (event.target instanceof HTMLInputElement) { + event.target.blur(); + } + }; + + const handleUsernameChange = (event: React.ChangeEvent) => { + onChange(event.target.value); + }; + + return ( +
+ + {suggestions?.length > 0 && ( +
+ {suggestions?.map((suggestion: any, index: number) => ( + + {/* Availble suggestion : */} + onSuggestionSelect(suggestion)} + sx={{ cursor: 'pointer', color: 'green' }} + > + {suggestion} + + + ))} +
+ )} +
+ ); +}; + +export default UsernameWithSuggestions;