Merge pull request #58 from upendraTekdi/cohort_list

Task #222930: create new cohort by dyanamic form , font change for table header text

public/locales/en/common.json

@@ -59,7 +59,6 @@
     "NEW_FACILITATOR": "New Facilitator",
     "SEARCHBAR_PLACEHOLDER": "Search Facilitators..",
     "FACILITATOR_CREATED_SUCCESSFULLY": "Teacher has been Successfully Created"
-
   },
   "NAVBAR": {
     "SEARCHBAR_PLACEHOLDER": "Search course, topic, student, pdf etc.."
@@ -69,8 +68,6 @@
     "NEW_LEARNER": "New Learner",
     "FIRST_SELECT_REQUIRED_FIELDS": "First select required fields",
     "LEARNER_CREATED_SUCCESSFULLY": "Leaner has been Successfully Created!"
-
-
   },
   "TEAM_LEADERS": {
     "SEARCHBAR_PLACEHOLDER": "Search Team leaders.."
@@ -182,7 +179,9 @@
     "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 List",
+    "UNIT_NAME": "Unit Name"
   },
   "FORM_ERROR_MESSAGES": {
     "INVALID_INPUT": "Invalid Input.",
@@ -194,7 +193,7 @@
     "MIN_LENGTH_CHARACTERS_ERROR": "Minimum {{minLength}} characters required",
     "MAX_LENGTH_CHARACTERS_ERROR": "Maximum {{maxLength}} characters allowed",
     "NUMBER_AND_SPECIAL_CHARACTERS_NOT_ALLOWED": "Numbers and special characters are not allowed"
-},
+  },
   "TABLE_TITLE": {
     "NAME": "Name",
     "STATUS": "Status",

src/components/HeaderComponent.tsx

@@ -6,7 +6,7 @@ import {
   FormControl,
   MenuItem,
   Typography,
-  useMediaQuery
+  useMediaQuery,
 } from "@mui/material";
 import Select from "@mui/material/Select";
 import { useTheme } from "@mui/material/styles";
@@ -18,7 +18,7 @@ import {
   getStateBlockDistrictList,
 } from "../services/MasterDataService";
 import AreaSelection from "./AreaSelection";
-import {transformArray} from "../utils/Helper"
+import { transformArray } from "../utils/Helper";
 interface State {
   value: string;
   label: string;
@@ -50,8 +50,8 @@ const HeaderComponent = ({
   handleBlockChange,
   handleSortChange,
   handleFilterChange,
-  showSort=true,
-  showAddNew=true,
+  showSort = true,
+  showAddNew = true,
   showStateDropdown = true,
   handleSearch,
   handleAddUserClick,
@@ -159,19 +159,18 @@ const HeaderComponent = ({
     >
       {showStateDropdown && (
         <AreaSelection
-
-        states={transformArray(states)}
-             districts={transformArray(districts)}
-             blocks={transformArray(blocks)}
-        selectedState={selectedState}
-        selectedDistrict={selectedDistrict}
-        selectedBlock={selectedBlock}
-        handleStateChangeWrapper={handleStateChangeWrapper}
-        handleDistrictChangeWrapper={handleDistrictChangeWrapper}
-        handleBlockChangeWrapper={handleBlockChangeWrapper}
-        isMobile={isMobile}
-        isMediumScreen={isMediumScreen}
-      />
+          states={transformArray(states)}
+          districts={transformArray(districts)}
+          blocks={transformArray(blocks)}
+          selectedState={selectedState}
+          selectedDistrict={selectedDistrict}
+          selectedBlock={selectedBlock}
+          handleStateChangeWrapper={handleStateChangeWrapper}
+          handleDistrictChangeWrapper={handleDistrictChangeWrapper}
+          handleBlockChangeWrapper={handleBlockChangeWrapper}
+          isMobile={isMobile}
+          isMediumScreen={isMediumScreen}
+        />
       )}
       <Typography variant="h2" sx={{ mt: isMobile ? "12px" : "20px" }}>
         {userType}
@@ -245,7 +244,6 @@ const HeaderComponent = ({
             boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
           }}
           onClick={handleAddUserClick}
-
         >
           <Button
             //  variant="contained"
@@ -255,7 +253,7 @@ const HeaderComponent = ({
               fontSize: "14px",
               color: theme.palette.primary["100"],
             }}
-         >
+          >
             {t("COMMON.ADD_NEW")}
           </Button>
         </Box>
@@ -265,4 +263,4 @@ const HeaderComponent = ({
   );
 };
 
-export default HeaderComponent;
+export default HeaderComponent;

src/components/KaTableComponent.tsx

@@ -101,7 +101,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                     />
                   );
                 }
-                return null;
+                return <div className="table-cell">{props.value}</div>;
               },
             },
             headCell: {

src/pages/cohorts.tsx

@@ -23,6 +23,15 @@ import Loader from "@/components/Loader";
 import Image from "next/image";
 import glass from "../../public/images/empty_hourglass.svg";
 import { useCohortList } from "@/services/CohortService/cohortListHook";
+import { getFormRead } from "@/services/CreateUserService";
+import {
+  GenerateSchemaAndUiSchema,
+  customFields,
+} from "@/components/GeneratedSchemas";
+import SimpleModal from "@/components/SimpleModal";
+import DynamicForm from "@/components/DynamicForm";
+import { IChangeEvent } from "@rjsf/core";
+import { RJSFSchema } from "@rjsf/utils";
 
 type UserDetails = {
   userId: any;
@@ -100,7 +109,11 @@ const Cohorts: React.FC = () => {
   const [cohortName, setCohortName] = React.useState<string>("");
   const [loading, setLoading] = useState<boolean | undefined>(undefined);
   const [userId, setUserId] = useState("");
-
+  const [formData, setFormData] = React.useState<string[]>([]);
+  const [schema, setSchema] = React.useState<any>();
+  const [uiSchema, setUiSchema] = React.useState<any>();
+  const [openAddNewCohort, setOpenAddNewCohort] =
+    React.useState<boolean>(false);
   // use api calls
   useEffect(() => {
     if (typeof window !== "undefined" && window.localStorage) {
@@ -134,8 +147,38 @@ const Cohorts: React.FC = () => {
       console.error("Error fetching user list:", error);
     }
   };
+
+  const getFormData = async () => {
+    const res = await getFormRead("cohorts", "cohort");
+
+    const formDatas = res?.fields;
+    console.log("formDatas", formDatas);
+    setFormData(formDatas);
+  };
+
+  useEffect(() => {
+    const getAddLearnerFormData = async () => {
+      try {
+        const response = await getFormRead("cohorts", "cohort");
+        console.log("sortedFields", response);
+
+        if (response) {
+          const { schema, uiSchema } = GenerateSchemaAndUiSchema(response, t);
+          console.log("schema", schema);
+          console.log("uiSchema", uiSchema);
+          setSchema(schema);
+          setUiSchema(uiSchema);
+        }
+      } catch (error) {
+        console.error("Error fetching form data:", error);
+      }
+    };
+    getAddLearnerFormData();
+  }, []);
+
   useEffect(() => {
     fetchUserList();
+    getFormData();
   }, [pageOffset, pageLimit]);
 
   // handle functions
@@ -301,6 +344,38 @@ const Cohorts: React.FC = () => {
 
   const handleSearch = (keyword: string) => {};
 
+  const onCloseAddNewCohort = () => {
+    setOpenAddNewCohort(false);
+  };
+
+  const handleAddUserClick = () => {
+    setOpenAddNewCohort(true);
+  };
+
+  const handleChangeForm = (event: IChangeEvent<any>) => {
+    console.log("Form data changed:", event.formData);
+    // setFormData({
+    //   ...formData,
+    //   [event.target.name]: event.target.value
+    // });
+  };
+
+  const handleSubmit = async (
+    data: IChangeEvent<any, RJSFSchema, any>,
+    event: React.FormEvent<any>
+  ) => {
+    const target = event.target as HTMLFormElement;
+    const elementsArray = Array.from(target.elements);
+
+    console.log("elementsArray", elementsArray);
+    console.log("target", target);
+    console.log("Form data submitted:", data.formData);
+  };
+
+  const handleError = () => {
+    console.log("error");
+  };
+
   // props to send in header
   const userProps = {
     userType: t("SIDEBAR.COHORTS"),
@@ -316,6 +391,8 @@ const Cohorts: React.FC = () => {
     handleSortChange: handleSortChange,
     handleFilterChange: handleFilterChange,
     handleSearch: handleSearch,
+    showAddNew: true,
+    handleAddUserClick: handleAddUserClick,
   };
   return (
     <>
@@ -375,6 +452,25 @@ const Cohorts: React.FC = () => {
           </Box>
         )}
       </HeaderComponent>
+      <SimpleModal
+        open={openAddNewCohort}
+        onClose={onCloseAddNewCohort}
+        showFooter={false}
+        modalTitle={"New Cohort"}
+      >
+        {schema && uiSchema && (
+          <DynamicForm
+            schema={schema}
+            uiSchema={uiSchema}
+            onSubmit={handleSubmit}
+            onChange={handleChangeForm}
+            onError={handleError}
+            widgets={{}}
+            showErrorList={true}
+            customFields={customFields}
+          ></DynamicForm>
+        )}
+      </SimpleModal>
     </>
   );
 };

src/services/CohortService/cohortService.ts

@@ -30,3 +30,47 @@ export const updateCohortUpdate = async (
     throw error;
   }
 };
+
+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;
+  }
+};
+export const createUser = async (userData: any): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/create`;
+  try {
+    const response = await post(apiUrl, userData);
+    return response?.data?.result;
+  } catch (error) {
+    console.error("error in getting cohort list", error);
+    // 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;
+  }
+};

src/styles/style.css

@@ -12,3 +12,8 @@
   font-family: "Poppins", sans-serif;
   font-size: small;
 }
+
+.table-cell {
+  font-family: "Poppins", sans-serif;
+  font-size: small;
+}