Merge pull request #369 from suvarnakale/shiksha-2.0

Issue #PS-1252 feat: script added to get rjsf readable schema and uis…

src/components/DynamicForm.tsx

@@ -1,13 +1,10 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { IChangeEvent } from '@rjsf/core';
-import ISubmitEvent from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
 import { Theme as MaterialUITheme } from '@rjsf/mui';
 import { withTheme } from '@rjsf/core';
 import MultiSelectCheckboxes from './MultiSelectCheckboxes';
-import CustomCheckboxWidget from './CustomCheckboxWidget';
 import CustomRadioWidget from './CustomRadioWidget';
-import CustomErrorList from './CustomErrorList';
 import { RJSFSchema, WidgetProps } from '@rjsf/utils';
 
 const FormWithMaterialUI = withTheme(MaterialUITheme);
@@ -37,15 +34,14 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
 }) => {
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
-    CustomCheckboxWidget: CustomCheckboxWidget,
     CustomRadioWidget: CustomRadioWidget,
   };
-  console.log('CustomErrorList', CustomErrorList);
+  // console.log('CustomErrorList', CustomErrorList);
 
   const handleError = (errors: any) => {
     if (errors.length > 0) {
       // Adjust the selector based on the actual structure of the form element names
-      const property = errors[0].property.replace(/^root\./, '');
+      const property = errors[0].property?.replace(/^root\./, '');
       const errorField = document.querySelector(
         `[name$="${property}"]`
       ) as HTMLElement;

src/components/GeneratedSchemas.tsx

@@ -0,0 +1,144 @@
+import { UiSchema } from '@rjsf/utils';
+import { JSONSchema7 } from 'json-schema';
+import { apiResponse } from '@/utils/schema';
+
+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?: any[];
+  options: FieldOption[];
+  isMultiSelect: boolean;
+  maxSelections?: number | null;
+  hint?: string | null;
+  pattern?: string | null;
+  maxLength?: number | null;
+  minLength?: number | null;
+  fieldId: string;
+  dependsOn: boolean;
+}
+
+const GenerateSchemaAndUiSchema = (apiResponse: any) => {
+  const schema: JSONSchema7 = {
+    title: 'A registration form',
+    description: 'A simple form example',
+    type: 'object',
+    required: [],
+    properties: {},
+    dependencies: {},
+  };
+
+  const uiSchema: UiSchema = {};
+
+  apiResponse.result.forEach((field: Field) => {
+    const {
+      label,
+      name,
+      type,
+      isEditable,
+      validation,
+      options,
+      isMultiSelect,
+      maxSelections,
+      dependsOn,
+    } = field;
+
+    let fieldSchema: any = {
+      title: label,
+    };
+
+    let fieldUiSchema: any = {};
+
+    switch (type) {
+      case 'text':
+        fieldSchema.type = 'string';
+        break;
+      case 'numeric':
+        fieldSchema.type = 'number';
+        break;
+      case 'drop_down':
+        fieldSchema.type = 'string';
+        fieldSchema.oneOf = options.map((opt: FieldOption) => ({
+          const: opt.value,
+          title: opt.label,
+        }));
+        fieldUiSchema['ui:widget'] = 'select';
+        break;
+      case 'checkbox':
+        fieldSchema.type = 'array';
+        fieldSchema.items = {
+          type: 'string',
+          oneOf: options.map((opt: FieldOption) => ({
+            const: opt.value,
+            title: opt.label,
+          })),
+        };
+        fieldSchema.uniqueItems = true;
+        fieldUiSchema['ui:widget'] = 'checkboxes';
+        break;
+      case 'radio':
+        fieldSchema.type = 'string';
+        fieldSchema.oneOf = options.map((opt: FieldOption) => ({
+          const: opt.value,
+          title: opt.label,
+        }));
+        fieldUiSchema['ui:widget'] = 'CustomRadioWidget';
+        break;
+      default:
+        break;
+    }
+
+    if (isEditable === false) {
+      fieldUiSchema['ui:disabled'] = true;
+    }
+
+    if (dependsOn) {
+      // Handle dependencies logic if needed
+    }
+
+    if (isMultiSelect && type === 'drop_down') {
+      fieldSchema.type = 'array';
+      fieldSchema.items = {
+        type: 'string',
+        oneOf: options.map((opt: FieldOption) => ({
+          const: opt.value,
+          title: opt.label,
+        })),
+      };
+      fieldSchema.uniqueItems = true;
+      fieldUiSchema['ui:widget'] = 'select';
+    }
+
+    if (isMultiSelect && type === 'checkbox') {
+      fieldSchema.type = 'array';
+      fieldSchema.items = {
+        type: 'string',
+        oneOf: options.map((opt: FieldOption) => ({
+          const: opt.value,
+          title: opt.label,
+        })),
+      };
+      fieldSchema.uniqueItems = true;
+      fieldUiSchema['ui:widget'] = 'MultiSelectCheckboxes';
+    }
+
+    if (schema !== undefined && schema.properties) {
+      schema.properties[name] = fieldSchema;
+      uiSchema[name] = fieldUiSchema;
+    }
+  });
+
+  return { schema, uiSchema };
+};
+
+const { schema, uiSchema } = GenerateSchemaAndUiSchema(apiResponse);
+
+export { schema, uiSchema };

src/pages/addLearner.tsx

@@ -1,7 +1,6 @@
 import DynamicForm from '@/components/DynamicForm';
 import React from 'react';
-import { schema, uiSchema } from '@/utils/schema';
-// import { schema, uiSchema } from '@/components/GeneratedSchemas';
+import { schema, uiSchema } from '@/components/GeneratedSchemas';
 import { IChangeEvent } from '@rjsf/core';
 import ISubmitEvent from '@rjsf/core';
 import { Box } from '@mui/material';