From 16f4ab2f3e958c18cfc564ec5b5b9602d44ae103 Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Fri, 26 Jul 2024 16:58:31 +0530 Subject: [PATCH] Task #222930: create new cohort by dyanamic form , font change for table header --- public/locales/en/common.json | 9 +- src/components/HeaderComponent.tsx | 38 ++++---- src/components/KaTableComponent.tsx | 2 +- src/pages/cohorts.tsx | 98 ++++++++++++++++++++- src/services/CohortService/cohortService.ts | 44 +++++++++ src/styles/style.css | 5 ++ 6 files changed, 169 insertions(+), 27 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 522c7d18..8de45f5c 100644 --- a/public/locales/en/common.json +++ b/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", diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index 7fde5b88..596894e9 100644 --- a/src/components/HeaderComponent.tsx +++ b/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 { getStateList, } 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, @@ -137,19 +137,18 @@ const HeaderComponent = ({ > {showStateDropdown && ( + 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} + /> )} {userType} @@ -223,7 +222,6 @@ const HeaderComponent = ({ boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)", }} onClick={handleAddUserClick} - > @@ -243,4 +241,4 @@ const HeaderComponent = ({ ); }; -export default HeaderComponent; \ No newline at end of file +export default HeaderComponent; diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx index 9f919f33..70adefc2 100644 --- a/src/components/KaTableComponent.tsx +++ b/src/components/KaTableComponent.tsx @@ -101,7 +101,7 @@ const KaTableComponent: React.FC = ({ /> ); } - return null; + return
{props.value}
; }, }, headCell: { diff --git a/src/pages/cohorts.tsx b/src/pages/cohorts.tsx index 63a23bbb..6e398c41 100644 --- a/src/pages/cohorts.tsx +++ b/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(""); const [loading, setLoading] = useState(undefined); const [userId, setUserId] = useState(""); - + const [formData, setFormData] = React.useState([]); + const [schema, setSchema] = React.useState(); + const [uiSchema, setUiSchema] = React.useState(); + const [openAddNewCohort, setOpenAddNewCohort] = + React.useState(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) => { + console.log("Form data changed:", event.formData); + // setFormData({ + // ...formData, + // [event.target.name]: event.target.value + // }); + }; + + const handleSubmit = async ( + data: IChangeEvent, + event: React.FormEvent + ) => { + 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 = () => { )} + + {schema && uiSchema && ( + + )} + ); }; diff --git a/src/services/CohortService/cohortService.ts b/src/services/CohortService/cohortService.ts index b3d64463..d5f0e730 100644 --- a/src/services/CohortService/cohortService.ts +++ b/src/services/CohortService/cohortService.ts @@ -30,3 +30,47 @@ export const updateCohortUpdate = async ( throw error; } }; + +export const getFormRead = async ( + context: string, + contextType: string +): Promise => { + 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 => { + 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 => { + 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; + } +}; diff --git a/src/styles/style.css b/src/styles/style.css index 74ef8b9e..a5b7ac95 100644 --- a/src/styles/style.css +++ b/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; +}