Issue #PS-000 fix: Added depends on field for DOB

tekdi · Jan 29, 2025 · 82c6bd1 · 82c6bd1
1 parent 5d600e9
commit 82c6bd1
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 18 deletions.
diff --git 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<AddLearnerModalProps> = ({
 }) => {
   const [schema, setSchema] = React.useState<any>();
   const [uiSchema, setUiSchema] = React.useState<any>();
-  const [customFormData, setCustomFormData] = React.useState<any>(formData);
-
+  const [customFormData, setCustomFormData] = React.useState<any>(formData ?? {});
   const [reloadProfile, setReloadProfile] = React.useState(false);
   const [openModal, setOpenModal] = React.useState(false);
   const [learnerFormData, setLearnerFormData] = React.useState<any>();
   const [fullname, setFullname] = React.useState<any>();
+  const [originalSchema, setOriginalSchema] = React.useState(schema);
 
   const { data: formResponse, isPending } = useFormRead(
     FormContext.USERS,
@@ -79,6 +79,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
       const { schema, uiSchema } = GenerateSchemaAndUiSchema(formResponse, t);
       setSchema(schema);
       setUiSchema(uiSchema);
+      setOriginalSchema({ ...schema });
     }
   }, [formResponse]);
 
@@ -298,26 +299,116 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
     }
   };
 
-   const handleChange = (event: IChangeEvent<any>) => {
+  const handleChange = (event: IChangeEvent<any>) => {
     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<AddLearnerModalProps> = ({
             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
@@ -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
@@ -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[];