Merge pull request #47 from suvarnakale/release-1.0.0

Issue #PS-1522 #PS-1523 feat: create center feature added

public/locales/en/common.json

@@ -394,7 +394,10 @@
     "REASON_FOR_DROP_OUT_FROM_SCHOOL": "Reason for drop out from School",
     "EMAIL": "Email",
     "YEAR_OF_JOINING_SCP": "Year of joining SCP",
-    "ASSIGN_CENTERS": "Assign Centers"
+    "ASSIGN_CENTERS": "Assign Centers",
+    "TYPE_OF_COHORT": "Type of cohort",
+    "UNIT_NAME": "Unit name",
+    "NOTE_THIS_WILL_BE_CENTER_NAME": "Note this will be Center name"
   },
   "FORM_ERROR_MESSAGES": {
     "INVALID_INPUT": "Invalid Input.",

src/components/DynamicForm.tsx

@@ -26,7 +26,7 @@ interface DynamicFormProps {
   widgets: {
     [key: string]: React.FC<WidgetProps<any, RJSFSchema, any>>;
   };
-  customFields: {
+  customFields?: {
     [key: string]: React.FC<RegistryFieldsType<any, RJSFSchema, any>>;
   };
   children?: ReactNode;

src/components/GeneratedSchemas.ts

@@ -49,6 +49,7 @@ export const GenerateSchemaAndUiSchema = (
     switch (type) {
       case 'text':
         fieldSchema.type = 'string';
+        fieldUiSchema['ui:help'] = t(`FORM.${field?.hint}`);
         break;
       case 'email':
         fieldSchema.type = 'string';

src/components/center/CreateCenterModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Box,
   Typography,
@@ -19,12 +19,29 @@ import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useTheme, styled } from '@mui/material/styles';
 import { showToastMessage } from '../Toastify';
+import { createCohort, getFormRead } from '@/services/CreateUserService';
+import { GenerateSchemaAndUiSchema } from '../GeneratedSchemas';
+import DynamicForm from '../DynamicForm';
+import { IChangeEvent } from '@rjsf/core';
+import { RJSFSchema } from '@rjsf/utils';
 
 interface CreateBlockModalProps {
   open: boolean;
   handleClose: () => void;
+  onCenterAdded: () => void;
 }
 
+interface CustomField {
+  fieldId: any;
+  value: any;
+}
+
+interface CohortDetails {
+  name: string;
+  type: string;
+  parentId: string | null;
+  customFields: CustomField[];
+}
 const CustomRadio = styled(Radio)(({ theme }) => ({
   color: theme.palette.text.primary,
   '&.Mui-checked': {
@@ -35,12 +52,15 @@ const CustomRadio = styled(Radio)(({ theme }) => ({
 const CreateCenterModal: React.FC<CreateBlockModalProps> = ({
   open,
   handleClose,
+  onCenterAdded,
 }) => {
   const { t } = useTranslation();
   const theme = useTheme<any>();
 
   const [centerName, setCenterName] = useState<string>('');
   const [centerType, setCenterType] = useState<string>('Regular');
+  const [schema, setSchema] = React.useState<any>();
+  const [uiSchema, setUiSchema] = React.useState<any>();
 
   const handleTextFieldChange = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -59,6 +79,63 @@ const CreateCenterModal: React.FC<CreateBlockModalProps> = ({
     handleClose();
   };
 
+  useEffect(() => {
+    const getForm = async () => {
+      try {
+        const res = await getFormRead('cohorts', 'cohort');
+        console.log(res);
+        const { schema, uiSchema } = GenerateSchemaAndUiSchema(res, t);
+        console.log(schema, uiSchema);
+        setSchema(schema);
+        setUiSchema(uiSchema);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getForm();
+  }, []);
+
+  const handleSubmit = async (
+    data: IChangeEvent<any, RJSFSchema, any>,
+    event: React.FormEvent<any>
+  ) => {
+    const formData = data.formData;
+    console.log('Form data submitted:', formData);
+
+    const parentId = localStorage.getItem('blockParentId');
+    const cohortDetails: CohortDetails = {
+      name: formData.name,
+      type: 'COHORT',
+      parentId: parentId,
+      customFields: [],
+    };
+
+    Object.entries(formData).forEach(([fieldKey, fieldValue]) => {
+      const fieldSchema = schema.properties[fieldKey];
+      const fieldId = fieldSchema?.fieldId;
+      if (fieldId !== null) {
+        cohortDetails.customFields.push({
+          fieldId: fieldId,
+          value: formData.cohort_type,
+        });
+      }
+    });
+    const cohortData = await createCohort(cohortDetails);
+    if (cohortData) {
+      showToastMessage(t('CENTERS.CENTER_CREATED'), 'success');
+      onCenterAdded();
+      handleClose();
+    }
+  };
+
+  const handleChange = (event: IChangeEvent<any>) => {
+    console.log('Form data changed:', event.formData);
+  };
+
+  const handleError = (errors: any) => {
+    console.log('Form errors:', errors);
+  };
+
   return (
     <Modal open={open} onClose={handleClose} closeAfterTransition>
       <Fade in={open}>
@@ -100,8 +177,8 @@ const CreateCenterModal: React.FC<CreateBlockModalProps> = ({
               <CloseIcon />
             </IconButton>
           </Box>
-          <Divider sx={{ mb: 2, mx: -2 }} />
-          <FormControl component="fieldset" sx={{ mb: 2 }}>
+          <Divider sx={{ mb: -2, mx: -2 }} />
+          {/* <FormControl component="fieldset" sx={{ mb: 2 }}>
             <FormLabel sx={{ fontSize: '12px' }} component="legend">
               {t('CENTERS.CENTER_TYPE')}
             </FormLabel>
@@ -117,16 +194,27 @@ const CreateCenterModal: React.FC<CreateBlockModalProps> = ({
                 label={t('CENTERS.REMOTE')}
               />
             </RadioGroup>
-          </FormControl>
-          <TextField
+          </FormControl> */}
+          {/* <TextField
             fullWidth
             label={t('CENTERS.UNIT_NAME')}
             id="outlined-size-normal"
             sx={{ mb: 1, mt: 2 }}
             value={centerName}
             onChange={handleTextFieldChange}
-          />
-          <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
+          /> */}
+          {schema && uiSchema && (
+            <DynamicForm
+              schema={schema}
+              uiSchema={uiSchema}
+              onSubmit={handleSubmit}
+              onChange={handleChange}
+              onError={handleError}
+              widgets={{}}
+              showErrorList={true}
+            />
+          )}
+          {/* <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
             {t('CENTERS.NOTE')}
           </Typography>
           <Divider sx={{ mb: 2, mx: -2 }} />
@@ -141,7 +229,7 @@ const CreateCenterModal: React.FC<CreateBlockModalProps> = ({
             }}
           >
             {t('BLOCKS.CREATE')}
-          </Button>
+          </Button> */}
         </Box>
       </Fade>
     </Modal>

src/pages/centers/index.tsx

@@ -63,6 +63,7 @@ const TeachingCenters = () => {
     React.useState(false);
   const handleFilterModalOpen = () => setFilterModalOpen(true);
   const handleFilterModalClose = () => setFilterModalOpen(false);
+  const [isCenterAdded, setIsCenterAdded] = useState(false);
 
   const store = useStore();
   const userRole = store.userRole;
@@ -125,6 +126,7 @@ const TeachingCenters = () => {
             const blockData = response.map((block: any) => {
               const blockName = block.cohortName;
               const blockId = block.cohortId;
+              localStorage.setItem('blockParentId', blockId);
               const stateField = block?.customField.find(
                 (field: any) => field.label === 'State'
               );
@@ -190,7 +192,11 @@ const TeachingCenters = () => {
       }
     };
     getCohortListForTL();
-  }, [isTeamLeader]);
+  }, [isTeamLeader, isCenterAdded]);
+
+  const handleCenterAdded = () => {
+    setIsCenterAdded(true);
+  };
 
   useEffect(() => {
     const filtered = centerData.filter((center) =>
@@ -393,6 +399,7 @@ const TeachingCenters = () => {
               <CreateCenterModal
                 open={openCreateCenterModal}
                 handleClose={handleCreateCenterClose}
+                onCenterAdded={handleCenterAdded}
               />
               <Box
                 className="linerGradient"

src/services/CreateUserService.ts

@@ -35,3 +35,14 @@ export const createUser = async (userData: any): Promise<any> => {
     // throw error;
   }
 };
+
+export const createCohort = async (userData: any): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohort/create`;
+  try {
+    const response = await post(apiUrl, userData);
+    return response?.data?.result;
+  } catch (error) {
+    console.error('error in getting cohort list', error);
+    // throw error;
+  }
+};