Merge pull request #13 from Rushikesh-Sonawane99/release-1.0.0

Issue #PS-1253:feat: API Integration to render add learner form

src/components/GeneratedSchemas.ts

@@ -1,42 +1,16 @@
 import { UiSchema } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
-import { apiResponse } from '@/utils/schema';
 import NumberInputField from './form/NumberInputField';
+import { FormData, Field, FieldOption } from '@/utils/Interfaces';
 
-interface FieldOption {
-  label: string;
-  value: string;
-}
-
-interface Field {
-  label: string;
-  name: string;
-  type: 'text' | 'numeric' | 'drop_down' | 'checkbox' | 'radio';
-  isEditable: boolean;
-  isPIIField?: boolean | null;
-  placeholder?: string;
-  validation?: string[];
-  options: FieldOption[];
-  isMultiSelect: boolean;
-  maxSelections?: number | null;
-  hint?: string | null;
-  pattern?: string | null;
-  maxLength?: number | null;
-  minLength?: number | null;
-  fieldId: string;
-  dependsOn: boolean;
-  required?: boolean;
-}
-
-const customFields = {
+export const customFields = {
   NumberInputField: NumberInputField
 };
 
-const GenerateSchemaAndUiSchema = (apiResponse: any) => {
-
+export const GenerateSchemaAndUiSchema = (formData: FormData) => {
   const schema: JSONSchema7 = { //Form schema
-    title: 'A registration form',
-    description: 'A simple form example',
+    title: formData.title,
+    description: '',
     type: 'object',
     required: [],
     properties: {},
@@ -45,7 +19,8 @@ const GenerateSchemaAndUiSchema = (apiResponse: any) => {
 
   const uiSchema: UiSchema = {}; //form ui schema
 
-  apiResponse.fields.forEach((field: Field) => {
+// console.log('FormData', formData)
+formData?.fields?.forEach((field: Field) => {
     const {
       label,
       name,
@@ -180,10 +155,5 @@ const GenerateSchemaAndUiSchema = (apiResponse: any) => {
     }
   });
 
-  return { schema, uiSchema };
+  return { schema, uiSchema, customFields };
 };
-
-const { schema, uiSchema } = GenerateSchemaAndUiSchema(apiResponse);
-console.log(schema, uiSchema);
-
-export { schema, uiSchema, customFields };

src/pages/add-learner.tsx

@@ -1,15 +1,38 @@
 import DynamicForm from '@/components/DynamicForm';
-import React from 'react';
-import { schema, uiSchema, customFields } from '@/components/GeneratedSchemas';
+import React, { useEffect } from 'react';
+import { GenerateSchemaAndUiSchema, customFields } from '@/components/GeneratedSchemas';
 import { IChangeEvent } from '@rjsf/core';
 import ISubmitEvent from '@rjsf/core';
 import { Box } from '@mui/material';
 import { RJSFSchema } from '@rjsf/utils';
 import SendCredentialModal from '@/components/SendCredentialModal';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { getFormRead } from '@/services/CreateUserService';
+import { FormData } from '@/utils/Interfaces';
+import { FormContext, FormContextType } from '@/utils/app.constant';
 
 const addLearner = () => {
   const [openModal, setOpenModal] = React.useState(false);
+  const [schema, setSchema] = React.useState<any>();
+  const [uiSchema, setUiSchema] = React.useState<any>();
+
+  useEffect(() => {
+    const getAddLearnerFormData = async () => {
+      try {
+        const response: FormData = await getFormRead(FormContext.USERS, FormContextType.STUDENT);
+        console.log('sortedFields', response);
+
+        if (response) {
+          const { schema, uiSchema } = GenerateSchemaAndUiSchema(response);
+          setSchema(schema);
+          setUiSchema(uiSchema);
+        }
+      } catch (error) {
+        console.error('Error fetching form data:', error);
+      }
+    };
+    getAddLearnerFormData();
+  }, []);
 
   const handleSubmit = (
     data: IChangeEvent<any, RJSFSchema, any>,
@@ -47,20 +70,24 @@ const addLearner = () => {
   };
 
   return (
-    <Box margin={'5rem'}>
-      <DynamicForm
-        schema={schema}
-        uiSchema={uiSchema}
-        onSubmit={handleSubmit}
-        onChange={handleChange}
-        onError={handleError}
-        widgets={{}}
-        showErrorList={true}
-        customFields={customFields}
-      />
+    <>
+      {schema && uiSchema && (
+        <Box margin={'5rem'}>
+          <DynamicForm
+            schema={schema}
+            uiSchema={uiSchema}
+            onSubmit={handleSubmit}
+            onChange={handleChange}
+            onError={handleError}
+            widgets={{}}
+            showErrorList={true}
+            customFields={customFields}
+          />
 
-      <SendCredentialModal open={openModal} onClose={handleCloseModal} />
-    </Box>
+          <SendCredentialModal open={openModal} onClose={handleCloseModal} />
+        </Box>
+      )}
+    </>
   );
 };
 

src/services/CreateUserService.ts

@@ -0,0 +1,20 @@
+import { get } from "./RestClient";
+
+export const getFormRead = async (context: string, contextType: string): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/form/read?context=${context}&contextType=${contextType}`;
+  try {
+    let response = await get(apiUrl);
+
+    const sortedFields = response?.data?.result.fields?.sort((a: { order: string; }, b: { order: string; }) => parseInt(a.order) - parseInt(b.order));
+    const formData = {
+      formid: response?.data?.result?.formid,
+      title: response?.data?.result?.title,
+      fields: sortedFields
+    };
+    return formData;
+
+  } catch (error) {
+    console.error('error in getting cohort details', error);
+    // throw error;
+  }
+};

src/utils/Helper.ts

@@ -271,7 +271,7 @@ export const accessGranted = (
 
 export function getTranslatedText(key: string, options?: any): string {
   if (!i18n?.t) {
-    throw new Error('i18n instance is not initialized');
+    // throw new Error('i18n instance is not initialized');
   }
-  return i18n.t(key, options) as string;
+  // return i18n.t(key, options) as string;
 }

src/utils/Interfaces.ts

@@ -325,3 +325,38 @@ export interface Session {
 export interface SessionCardFooterProps {
   item: Session;
 }
+
+
+export interface FieldOption {
+  label: string;
+  value: string;
+}
+
+export interface Field {
+  name: string;
+  type: 'text' | 'numeric' | 'drop_down' | 'checkbox' | 'radio';
+  label: string;
+  order: string;
+  coreField: number;
+  dependsOn: string | boolean | null;
+  isEditable: boolean;
+  isPIIField: boolean | null;
+  validation?: string[];
+  placeholder: string;
+  isMultiSelect: boolean;
+  maxSelections: number | null;
+  sourceDetails: Record<string, any>;
+  options: FieldOption[];
+  hint?: string | null;
+  pattern?: string | null;
+  maxLength?: number | null;
+  minLength?: number | null;
+  fieldId: string;
+  required?: boolean;
+}
+
+export interface FormData {
+  formid: string;
+  title: string;
+  fields: Field[];
+}

src/utils/app.constant.ts

@@ -37,3 +37,13 @@ export enum cohortPrivileges {
   STUDENT = 'student',
 
 }
+
+export enum FormContext {
+  USERS = 'USERS'
+}
+
+export enum FormContextType {
+  STUDENT = 'STUDENT',
+  TEACHER = 'TEACHER',
+  TEAM_LEADER = 'TEAMLEADER',
+}