diff --git a/public/locales/en/common.json b/public/locales/en/common.json index ec231b01..0e97950d 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -126,7 +126,12 @@ "NO_BLOCK_AVAILABLE": "No blocks available", "PLEASE_SELECT_BLOCK_LIST": "Please select block from block list", "ALL_CENTERS": "All centers", - "NO_CENTERS": "No centers" + "NO_CENTERS": "No centers", + "MULTIPLE_TEAM_LEADERS_ASSIGNED": "Selected block {{selectedBlockForTL}} already has {{assignedTeamLeader}} Team Leaders assigned.", + "SINGLE_TEAM_LEADERS_ASSIGNED":"Selected block {{selectedBlockForTL}} already has {{assignedTeamLeader}} Team Leader assigned.", + "CONTINUE_ASSIGNED_TEAM_LEADER":"Still do you want to continue to assign team leader to {{selectedBlockForTL}}", + "ASSIGNED_TEAM_LEADERS":"{{assignedTeamLeaderNames}} and more..", + "CONTINUE":"Continue" }, "LOGIN_PAGE": { "USERNAME": "Username", diff --git a/src/components/CommonUserModal.tsx b/src/components/CommonUserModal.tsx index c306c664..cfdc7f91 100644 --- a/src/components/CommonUserModal.tsx +++ b/src/components/CommonUserModal.tsx @@ -20,11 +20,12 @@ import { FormContextType, Role, RoleId, + Status, apiCatchingDuration, } from "@/utils/app.constant"; import { useLocationState } from "@/utils/useLocationState"; import useSubmittedButtonStore from "@/utils/useSharedState"; -import { Box, Button, useTheme } from "@mui/material"; +import { Box, Button, Checkbox, FormControlLabel, Typography, useTheme } from "@mui/material"; import { IChangeEvent } from "@rjsf/core"; import { RJSFSchema } from "@rjsf/utils"; import { useQuery } from "@tanstack/react-query"; @@ -35,6 +36,9 @@ import { transformArray } from "../utils/Helper"; import AreaSelection from "./AreaSelection"; import SendCredentialModal from "./SendCredentialModal"; import { showToastMessage } from "./Toastify"; +import { cohortMemberList } from "@/services/UserList"; +import CustomModal from "./CustomModal"; +import { setConfig } from "next/config"; interface UserModalProps { open: boolean; @@ -46,6 +50,8 @@ interface UserModalProps { userType: string; } + + const CommonUserModal: React.FC = ({ open, onClose, @@ -60,6 +66,10 @@ const CommonUserModal: React.FC = ({ const [uiSchema, setUiSchema] = React.useState(); const [openModal, setOpenModal] = React.useState(false); const [adminInfo, setAdminInfo] = React.useState(); + const [createTLAlertModal, setcreateTLAlertModal] = useState(false); + const [confirmButtonDisable, setConfirmButtonDisable] = useState(true); + const [checkedConfirmation, setCheckedConfirmation] = useState(false); + const messageKeyMap: Record = { [FormContextType.STUDENT]: "LEARNERS.LEARNER_CREATED_SUCCESSFULLY", [FormContextType.TEACHER]: "FACILITATORS.FACILITATOR_CREATED_SUCCESSFULLY", @@ -167,7 +177,10 @@ const CommonUserModal: React.FC = ({ stateFieldId, dynamicFormForBlock, stateDefaultValue, + assignedTeamLeader, + assignedTeamLeaderNames } = useLocationState(open, onClose, roleType); + console.log(assignedTeamLeaderNames) useEffect(() => { const getAddUserFormData = () => { @@ -464,7 +477,6 @@ const CommonUserModal: React.FC = ({ const handleChange = (event: IChangeEvent) => { console.log("Form data changed:", event.formData); }; - const handleError = (errors: any) => { console.log("Form errors:", errors); }; @@ -472,7 +484,7 @@ const CommonUserModal: React.FC = ({ setCreateFacilitator(false); setOpenModal(false); }; - + const handleAction = () => { setTimeout(() => { setCreateFacilitator(true); @@ -499,6 +511,45 @@ const CommonUserModal: React.FC = ({ setSubmitButtonEnable(true); } }, [dynamicForm, dynamicFormForBlock, open]); + + + const handleChangeCheckBox = (event: React.ChangeEvent) => { + setCheckedConfirmation(event.target.checked); + + }; + + const wrappedHandleContinueAction = () => { + handleCloseConfirmation(); + setOpenModal(true); + //onClose(); + + + +} + + const handleCancelAction = async () => { + // await handleDeleteAction(); + handleCloseConfirmation(); +//setAssignedTeamLeaderNames([]); + }; + const handleCloseConfirmation= () => { + // await handleDeleteAction(); + // handleCloseConfirmation(); + setcreateTLAlertModal(false); + setCheckedConfirmation(false); + setConfirmButtonDisable(true); + // setAssignedTeamLeaderNames([]); + + }; + + + useEffect(() => { + if (checkedConfirmation) { + setConfirmButtonDisable(false); + } else { + setConfirmButtonDisable(true); + } + }, [checkedConfirmation]); useEffect(() => { if (typeof window !== "undefined" && window.localStorage) { const admin = localStorage.getItem("adminInfo"); @@ -554,7 +605,18 @@ const CommonUserModal: React.FC = ({ !isEditModal && noError ) { - setOpenModal(true); + // setOpenModal(true); + console.log(assignedTeamLeaderNames.length) + if(assignedTeamLeaderNames.length!==0 && userType===FormContextType.TEAM_LEADER) + { + setcreateTLAlertModal(true); + // setOpenModal(true) + + } + else{ + //onClose(); + setOpenModal(true) + } } console.log("Submit button was clicked"); }} @@ -664,8 +726,91 @@ const CommonUserModal: React.FC = ({ : Role.TEACHER } /> + + + + + + + + + + + + +{assignedTeamLeaderNames.length>1 ?( + <> + {t('COMMON.MULTIPLE_TEAM_LEADERS_ASSIGNED', { selectedBlockForTL: selectedBlock[0],assignedTeamLeader: assignedTeamLeader})} + + + ):(<> + + {t('COMMON.SINGLE_TEAM_LEADERS_ASSIGNED', { selectedBlockForTL: selectedBlock[0],assignedTeamLeader: assignedTeamLeader})} + + ) +} + + + + {assignedTeamLeaderNames.length>1 ?( + <> + {t('COMMON.ASSIGNED_TEAM_LEADERS', { assignedTeamLeaderNames:assignedTeamLeaderNames[0]})} + + + + + ):(<> + {assignedTeamLeaderNames[0]} + ) + + } + + + } + label={ t('COMMON.CONTINUE_ASSIGNED_TEAM_LEADER', {selectedBlockForTL: selectedBlock[0]})} + sx={{ marginTop: "12px", color: "#555" }} + /> + + ); }; -export default CommonUserModal; +export default CommonUserModal; \ No newline at end of file diff --git a/src/components/CustomModal.tsx b/src/components/CustomModal.tsx index 18f00c94..3a32cdd9 100644 --- a/src/components/CustomModal.tsx +++ b/src/components/CustomModal.tsx @@ -15,7 +15,7 @@ import CloseIcon from "@mui/icons-material/Close"; interface CustomModalProps { open: boolean; handleClose: () => void; - title: string; + title?: string; subtitle?: string; primaryBtnText: string; secondaryBtnText?: string; @@ -25,6 +25,7 @@ interface CustomModalProps { backdropClose?: boolean; primaryBtnDisabled?: boolean; children: React.ReactNode; + width?:string } const CustomModal: React.FC = ({ @@ -40,6 +41,7 @@ const CustomModal: React.FC = ({ backdropClose = true, primaryBtnDisabled = true, children, + width }) => { // const isSmallScreen = useMediaQuery((theme: Theme) => // theme.breakpoints.down("sm"), @@ -61,7 +63,7 @@ const CustomModal: React.FC = ({ top: "50%", left: "50%", transform: "translate(-50%, -50%)", - width: isSmallScreen ? "90%" : isLargeScreen ? "65%" : "85%", + width: isSmallScreen ? "90%" : isLargeScreen ? width : width, maxWidth: "90%", bgcolor: "background.paper", boxShadow: 24, diff --git a/src/components/DeleteUserModal.tsx b/src/components/DeleteUserModal.tsx index 2103d2f8..c873e360 100644 --- a/src/components/DeleteUserModal.tsx +++ b/src/components/DeleteUserModal.tsx @@ -86,6 +86,7 @@ const DeleteUserModal: React.FC = ({ return ( = ({ open, onClose, @@ -59,6 +68,7 @@ const ReassignCenterModal: React.FC = ({ centers }) => { + console.log(userId) const { t } = useTranslation(); const theme = useTheme(); const roleType = userType; @@ -110,8 +120,29 @@ const { (state: any) => state.reassignButtonStatus ); console.log(names); - + // const [filters, setFilters] = useState({ + // // cohortId:selectedBlockCohortId, + // role: Role.TEAM_LEADER, + // status:[Status.ACTIVE] + + // }); const [searchInput, setSearchInput] = useState(""); + const [reassignAlertModal, setReassignAlertModal] = useState(false); + const [assignedTeamLeader, setAssignedTeamLeader] = useState(""); + const [selectedBlockForTL, setSelectedBlockForTL] = useState(""); + const [assignedTeamLeaderNames, setAssignedTeamLeaderNames] = useState([]); + const [confirmButtonDisable, setConfirmButtonDisable] = useState(true); + const [checkedConfirmation, setCheckedConfirmation] = useState(false); + const [selectedBlockCohortIdForTL, setSelectedBlockCohortIdForTL] = useState(""); + const [selectedTLUserID, setSelectedTLUserID] = useState(userId); + + + // const [reassignOpen, setReassignOpen] = useState(false); + + + + + //const [selectedBlockId, setselectedBlockId] = useState(blockName); @@ -261,6 +292,8 @@ const { "success" ); } else { + + const reassignBlockObject = { limit: 200, offset: 0, @@ -275,15 +308,46 @@ const { const selectedBlockCohortId = cohortDetails?.find( (item: any) => item?.type === "BLOCK" )?.cohortId; - - if (!selectedBlockCohortId) { + setSelectedBlockCohortIdForTL(selectedBlockCohortId) + // setFilters({ + // cohortId:selectedBlockCohortId, + // role: Role.TEAM_LEADER, + // status:[Status.ACTIVE]} + // ) +const filters: FilterDetails= +{ + cohortId:selectedBlockCohortId, + role: Role.TEAM_LEADER, + status:[Status.ACTIVE]} +console.log(filters) + // let limit=200; + // let offset=0; + let sort= ["name", "asc"] + let resp; + try { + resp = await cohortMemberList({ filters, sort }); + } catch (apiError) { + console.log("API call failed, proceeding to else block"); + resp = null; + } + if (!selectedBlockCohortId) { showToastMessage( t("COMMON.COHORT_ID_NOT_FOUND", { block: checkedCenters[0] }), "info" ); return; } - + if(resp?.userDetails) + { + handleClose(); + setReassignAlertModal(true) + setAssignedTeamLeader(resp?.userDetails?.length) + setSelectedBlockForTL(checkedCenters[0]) + const userNames = resp?.userDetails?.map((user: any )=> user.name); + setSelectedTLUserID(userId) + setAssignedTeamLeaderNames(userNames) + } + else{ const previousBlockObject = { limit: 200, offset: 0, @@ -303,8 +367,11 @@ const { unSelectedBlockCohortIds.push(previousBlockId); + let cohortCode = formattedBlocks +.filter((item:any) => item.label === checkedCenters[0]) +.map((item:any) => item.value); let cohortIds = blocks - .filter((item:any) => item.label !== checkedCenters[0]) + .filter((item:any) => item.value !== cohortCode[0]) .map((item:any) => item.cohortId); cohortIds.push(previousBlockId) payload = { @@ -324,7 +391,7 @@ const { let customFields = [ { fieldId: blockField.fieldId, - value: selectedCenterCode, + value: cohortCode, }, ]; console.log(selectedBlockCode,checkedCenters[0]) @@ -355,9 +422,10 @@ const { "success" ); reassignButtonStatus ? setReassignButtonStatus(false) : setReassignButtonStatus(true); - + } } } catch (error) { + console.log(error) showToastMessage( t( userType === Role.TEAM_LEADERS @@ -414,12 +482,126 @@ console.log(formattedBlocks) setCheckedCenters([centerName]); } }; - - console.log(filteredCohorts) + const handleChange = (event: React.ChangeEvent) => { + setCheckedConfirmation(event.target.checked); + + }; + + const wrappedHandleReassignAction = async () => { + try{ + console.log(selectedTLUserID) + // await handleDeleteAction(); + const previousBlockObject = { + limit: 200, + offset: 0, + filters: { + status: ["active"], + name: blockName, + }, + }; + + const previousResponse = await getCenterList(previousBlockObject); + const previousCohortDetails = previousResponse?.result?.results?.cohortDetails; + const previousBlockId = previousCohortDetails?.find( + (item: any) => item?.type === "BLOCK" + )?.cohortId; + +let unSelectedBlockCohortIds: string[] = []; + +console.log(previousBlockId) +unSelectedBlockCohortIds.push(previousBlockId); +let cohortCode = formattedBlocks +.filter((item:any) => item.label === selectedBlockForTL) +.map((item:any) => item.value); +let cohortIds = blocks +.filter((item:any) => item.value !== cohortCode) +.map((item:any) => item.cohortId); +cohortIds.push(previousBlockId) + const payload = { + userId: [selectedTLUserID], + cohortId: [selectedBlockCohortIdForTL], + removeCohortId:cohortIds, + }; + + await bulkCreateCohortMembers(payload); + handleClose(); + + const userDetails = await getUserDetailsInfo(selectedTLUserID); + const blockField = userDetails?.userData?.customFields.find( + (field: any) => field.label === "BLOCKS" + ); + const selectedCenterCode = filteredCBlocks.find(location => location.label === selectedBlockForTL)?.value; + let customFields = [ + { + fieldId: blockField.fieldId, + value: selectedCenterCode, + }, + ]; + console.log(selectedBlockCode,selectedBlockForTL) + if(selectedDistrict[0]!==districtName) + { + customFields = [ + { + fieldId: blockField.fieldId, + value: cohortCode, + }, + { + fieldId: districtFieldId, + value: selectedDistrictCode, + }, + ]; + } + const updateObject = { + userData: {}, + customFields: customFields, + }; + if (selectedTLUserID) { + + await updateUser(selectedTLUserID, updateObject); + } + + showToastMessage( + t("COMMON.BLOCKS_REASSIGN_SUCCESSFULLY"), + "success" + ); + reassignButtonStatus ? setReassignButtonStatus(false) : setReassignButtonStatus(true); + } + catch(error) + { + console.log(error) + showToastMessage( + t("COMMON.SOMETHING_WENT_WRONG"), + "error" + ); + } +finally{ handleCloseConfirmation(); +} + }; + const handleCancelAction = async () => { + // await handleDeleteAction(); + handleCloseConfirmation(); + }; + const handleCloseConfirmation= () => { + // await handleDeleteAction(); + // handleCloseConfirmation(); + setReassignAlertModal(false) + setCheckedConfirmation(false); + setConfirmButtonDisable(true) + }; + + + useEffect(() => { + if (checkedConfirmation) { + setConfirmButtonDisable(false); + } else { + setConfirmButtonDisable(true); + } + }, [checkedConfirmation]); return ( <> + { ( + + + +{assignedTeamLeaderNames.length>1 ?( + <> + {t('COMMON.MULTIPLE_TEAM_LEADERS_ASSIGNED', { selectedBlockForTL: selectedBlockForTL,assignedTeamLeader: assignedTeamLeader})} + + + ):(<> + + {t('COMMON.SINGLE_TEAM_LEADERS_ASSIGNED', { selectedBlockForTL: selectedBlockForTL,assignedTeamLeader: assignedTeamLeader})} + + ) +} + + + + {assignedTeamLeaderNames.length>1 ?( + <> + {t('COMMON.ASSIGNED_TEAM_LEADERS', { assignedTeamLeaderNames:assignedTeamLeaderNames[0]})} + + + + + ):(<> + {assignedTeamLeaderNames[0]} + ) + + } + + + } + label={ t('COMMON.CONTINUE_ASSIGNED_TEAM_LEADER', {selectedBlockForTL: selectedBlockForTL})} + sx={{ marginTop: "12px", color: "#555" }} + /> + + + )} ); }; diff --git a/src/services/UserList.ts b/src/services/UserList.ts index 632e7c2d..0ce35335 100644 --- a/src/services/UserList.ts +++ b/src/services/UserList.ts @@ -1,10 +1,10 @@ import { post, get } from "./RestClient"; export interface userListParam { - limit: number; + limit?: number; // page: number; filters: { - role: string; + role?: string; status?: string; states?: string; districts?: string; @@ -12,7 +12,7 @@ export interface userListParam { }; fields?: any; sort?: object; - offset: number; + offset?: number; } export const userList = async ({ diff --git a/src/utils/useLocationState.tsx b/src/utils/useLocationState.tsx index 07a51343..76ec2c07 100644 --- a/src/utils/useLocationState.tsx +++ b/src/utils/useLocationState.tsx @@ -5,11 +5,20 @@ import { getCenterList, } from "../services/MasterDataService"; // Update the import path as needed import { getCohortList } from "@/services/CohortService/cohortService"; -import { FormContextType, QueryKeys } from "./app.constant"; +import { FormContextType, QueryKeys, Status, Role } from "./app.constant"; import { useTranslation } from "react-i18next"; import { useQueryClient } from "@tanstack/react-query"; import { formatedBlocks, formatedDistricts } from "@/services/formatedCohorts"; - +import { cohortMemberList } from "@/services/UserList"; +type FilterDetails = { + role: any; + status?: any; + districts?: any; + states?: any; + blocks?: any; + name?: any; + cohortId?: any +}; interface FieldProp { value: string; label: string; @@ -50,6 +59,8 @@ export const useLocationState = ( const [stateDefaultValue, setStateDefaultValue] = useState(""); const { t } = useTranslation(); const queryClient = useQueryClient(); + const [assignedTeamLeader, setAssignedTeamLeader] = useState(""); + const [assignedTeamLeaderNames, setAssignedTeamLeaderNames] = useState([]); const handleStateChangeWrapper = useCallback( async (selectedNames: string[], selectedCodes: string[]) => { @@ -154,17 +165,53 @@ export const useLocationState = ( }; const response = await getCenterList(object); const getCohortDetails = response?.result?.results?.cohortDetails; + console.log(getCohortDetails) const blockId = getCohortDetails?.map((item: any) => { if (item?.type === "BLOCK") { return item?.cohortId; } - }); + }) + const blockCohortId = getCohortDetails?.find( + (item: any) => item?.type === "BLOCK" + )?.cohortId; if (blockId) { console.log("blockId", blockId[0]); setSelectedBlockCohortId(blockId[0]); } else { console.log("No Block Id found"); } + + + const filters: FilterDetails= + { + cohortId:blockCohortId, + role: Role.TEAM_LEADER, + status:[Status.ACTIVE]} + + let sort= ["name", "asc"] + let resp; + try { + resp = await cohortMemberList({ filters, sort }); + } catch (apiError) { + console.log("API call failed, proceeding to else block"); + resp = null; + } + if(resp?.userDetails) + { + + // onClose(); + // setcreateTLAlertModal(true) + setAssignedTeamLeader(resp?.userDetails?.length) + // setSelectedBlockForTL(selectedBlock[0]) + const userNames = resp?.userDetails?.map((user: any )=> user.name); + //setSelectedTLUserID(userId) + setAssignedTeamLeaderNames(userNames) + } + else{ + setAssignedTeamLeader(""); + setAssignedTeamLeaderNames([]) + } + } else { const getCentersObject = { limit: 0, @@ -180,9 +227,14 @@ export const useLocationState = ( }; const response = await getCenterList(getCentersObject); console.log(response?.result?.results?.cohortDetails[0].cohortId); - setSelectedBlockCohortId( - response?.result?.results?.cohortDetails[0].cohortId - ); + // setSelectedBlockCohortId( + // response?.result?.results?.cohortDetails[0].cohortId + // ); + const blockCohortId = response?.result?.results?.cohortDetails?.find( + (item: any) => item?.type === "BLOCK" + )?.cohortId; + console.log(blockCohortId) + setSelectedBlockCohortId(blockCohortId) // const result = response?.result?.cohortDetails; const dataArray = response?.result?.results?.cohortDetails; @@ -195,7 +247,9 @@ export const useLocationState = ( console.log(dataArray); setAllCenters(cohortInfo); } - console.log(selected); + + + console.log(selected); } catch (error) { setAllCenters([]); @@ -462,7 +516,9 @@ export const useLocationState = ( setSelectedBlock, setSelectedDistrict, setSelectedDistrictCode, - setSelectedBlockCode + setSelectedBlockCode, + assignedTeamLeaderNames, + assignedTeamLeader }; };