From 82c6bd1e7bdec319bd7c1f58c250f6dc39feee6b Mon Sep 17 00:00:00 2001 From: Vivek Kasture Date: Wed, 29 Jan 2025 20:49:14 +0530 Subject: [PATCH] Issue #PS-000 fix: Added depends on field for DOB --- src/components/AddLeanerModal.tsx | 125 +++++++++++++++++++++++++---- src/components/GeneratedSchemas.ts | 27 +++++++ src/utils/Interfaces.ts | 2 +- 3 files changed, 136 insertions(+), 18 deletions(-) diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 2f485bf7..b4c3a890 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -9,7 +9,7 @@ import { createUser } from '@/services/CreateUserService'; import { sendEmailOnLearnerCreation } from '@/services/NotificationService'; import { editEditUser } from '@/services/ProfileService'; import useSubmittedButtonStore from '@/store/useSubmittedButtonStore'; -import { generateUsernameAndPassword } from '@/utils/Helper'; +import { calculateAge, generateUsernameAndPassword } from '@/utils/Helper'; import { FormContext, FormContextType, @@ -33,7 +33,7 @@ interface AddLearnerModalProps { open: boolean; onClose: () => void; onLearnerAdded?: () => void; - formData?: object; + formData?: any; isEditModal?: boolean; userId?: string; onReload?: (() => void) | undefined; @@ -53,12 +53,12 @@ const AddLearnerModal: React.FC = ({ }) => { const [schema, setSchema] = React.useState(); const [uiSchema, setUiSchema] = React.useState(); - const [customFormData, setCustomFormData] = React.useState(formData); - + const [customFormData, setCustomFormData] = React.useState(formData ?? {}); const [reloadProfile, setReloadProfile] = React.useState(false); const [openModal, setOpenModal] = React.useState(false); const [learnerFormData, setLearnerFormData] = React.useState(); const [fullname, setFullname] = React.useState(); + const [originalSchema, setOriginalSchema] = React.useState(schema); const { data: formResponse, isPending } = useFormRead( FormContext.USERS, @@ -79,6 +79,7 @@ const AddLearnerModal: React.FC = ({ const { schema, uiSchema } = GenerateSchemaAndUiSchema(formResponse, t); setSchema(schema); setUiSchema(uiSchema); + setOriginalSchema({ ...schema }); } }, [formResponse]); @@ -298,26 +299,116 @@ const AddLearnerModal: React.FC = ({ } }; - const handleChange = (event: IChangeEvent) => { + const handleChange = (event: IChangeEvent) => { const { formData } = event; - + + let newFormData = { ...formData }; + + + console.log('Form data changed:', event.formData); + console.log('schema:', schema); + const dob = event.formData.dob; + const dependencyKeys = Object.keys(schema.dependencies)[0]; + const dependentFields = schema?.dependencies?.dob?.properties; + + // if (!isUsernameEdited) { + // if (event.formData.firstName && event.formData.lastName) { + // event.formData.username = + // event.formData.firstName + event.formData.lastName; + // } else { + // event.formData.username = null; + // } + // } + + if (dob) { + const age = calculateAge(new Date(dob)); + + if (age >= 18) { + const newSchema = { ...schema }; + const dependentFieldKeys = Object.keys(dependentFields); + + newSchema.properties = Object.keys(newSchema.properties) + .filter((key) => !dependentFieldKeys.includes(key)) + .reduce((acc: any, key) => { + acc[key] = newSchema.properties[key]; + return acc; + }, {}); + + // Remove dependent fields from the formData + const updatedFormData = { ...event.formData }; + dependentFieldKeys.forEach((key) => { + delete updatedFormData[key]; + }); + + newSchema.dependencies = Object.keys(newSchema.dependencies) + .filter((key) => !dependentFieldKeys.includes(key)) + .reduce((acc: any, key) => { + // Remove dependentFieldKeys from properties within dependencies + const filteredProperties = Object.keys( + newSchema.dependencies[key].properties + ) + .filter((propKey) => !dependentFieldKeys.includes(propKey)) + .reduce((nestedAcc: any, propKey) => { + nestedAcc[propKey] = + newSchema.dependencies[key].properties[propKey]; + return nestedAcc; + }, {}); + + // Add filtered dependencies back + acc[key] = { properties: filteredProperties }; + return acc; + }, {}); + + setSchema(newSchema); + // setFormData(updatedFormData); + // setCustomFormData(updatedFormData); + newFormData = { ...updatedFormData }; + } else if (age < 18) { + const newSchema = { ...originalSchema }; + // Add dependent fields and reorder them in the schema + const reorderedFields: any[] = []; + const filteredFields = Object.keys(newSchema.properties).filter( + (key) => !Object.keys(dependentFields).includes(key) + ); + + filteredFields.forEach((key) => { + reorderedFields.push(key); + if (key === dependencyKeys) { + reorderedFields.push(...Object.keys(dependentFields)); + } + }); + + newSchema.properties = reorderedFields.reduce((acc: any, key: any) => { + acc[key] = dependentFields[key] || newSchema.properties[key]; + return acc; + }, {}); + + setSchema(newSchema); + // setFormData({ ...event.formData }); + // setCustomFormData({ ...event.formData }); + newFormData = { ...event.formData }; + } + } else { + // setFormData(event.formData); + } + if (!isEditModal) { - const { firstName, lastName, username } = formData; - + const { firstName, lastName, username } = newFormData; + if (firstName && lastName) { - setCustomFormData({ - ...formData, - + ...newFormData, }); - } else { - setCustomFormData({ ...formData }); } - } else { - setCustomFormData({ ...formData }); + // else { + // setCustomFormData({ ...formData }); + // } } + // else { + // setCustomFormData({ ...formData }); + // } }; - + const handleError = (errors: any) => { console.log('Form errors:', errors); @@ -365,7 +456,7 @@ const AddLearnerModal: React.FC = ({ widgets={{}} showErrorList={true} customFields={customFields} - formData={customFormData ?? undefined} + formData={customFormData} setFormData={setCustomFormData} isEdit={isEditModal} > diff --git a/src/components/GeneratedSchemas.ts b/src/components/GeneratedSchemas.ts index e8aef18f..58946376 100644 --- a/src/components/GeneratedSchemas.ts +++ b/src/components/GeneratedSchemas.ts @@ -258,6 +258,33 @@ export const GenerateSchemaAndUiSchema = ( } fieldSchema.validation = field.validation; } + if (field.dependsOn) { + const dependencyField = field.dependsOn; + + schema.dependencies = schema.dependencies || {}; + + schema.dependencies[dependencyField] = + schema.dependencies[dependencyField] || + ({ + properties: {}, + } as JSONSchema7); + + const dependencyObject = schema.dependencies[ + dependencyField + ] as JSONSchema7; + + dependencyObject.properties = { + ...dependencyObject.properties, + [name]: fieldSchema, + }; + + schema.dependencies[dependencyField] = dependencyObject; + } else { + if (schema.properties) { + schema.properties[name] = fieldSchema; + uiSchema[name] = fieldUiSchema; + } + } if (schema !== undefined && schema.properties) { schema.properties[name] = fieldSchema; diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index 09e4c0dd..f79232be 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -439,7 +439,7 @@ export interface Field { label: string; order: string; coreField: number; - dependsOn: string | boolean | null; + dependsOn: string | null; isEditable: boolean; isPIIField: boolean | null; validation?: string[];