diff --git a/src/components/AreaSelection.tsx b/src/components/AreaSelection.tsx index 2aa4e7e1..f3c0d21d 100644 --- a/src/components/AreaSelection.tsx +++ b/src/components/AreaSelection.tsx @@ -212,11 +212,11 @@ const shouldRenderSelectCheckmarks = tagName={t("CENTERS.CENTERS")} selectedCategories={selectedCenter} onCategoryChange={handleCenterChangeWrapper} - disabled={selectedBlock.length === 0 || selectedCenter[0] === ""} + disabled={selectedBlock.length === 0 || selectedCenter[0] === "" ||selectedBlock[0]===t("COMMON.ALL_BLOCKS")|| (selectedBlock?.length > 0 && allCenters?.length <= 0)} overall={!inModal} defaultValue={ // blockDefaultValue? blockDefaultValue: - selectedBlock?.length > 0 && blocks?.length <= 0 + selectedBlock?.length > 0 && allCenters?.length <= 0 ? t("COMMON.NO_CENTERS") : t("COMMON.ALL_CENTERS") } diff --git a/src/components/FormControl.tsx b/src/components/FormControl.tsx index ac5ee06d..b8e5c949 100644 --- a/src/components/FormControl.tsx +++ b/src/components/FormControl.tsx @@ -85,8 +85,10 @@ const MultipleSelectCheckmarks: React.FC = ({ } onChange={handleChange} input={} - renderValue={(selected) => selected?.join(", ")} - MenuProps={MenuProps} + renderValue={(selected) => { + const selectedArray = Array.isArray(selected) ? selected : [selected]; + return selectedArray.join(", "); + }} MenuProps={MenuProps} > {overall && ( diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index 684f7066..4421affe 100644 --- a/src/components/HeaderComponent.tsx +++ b/src/components/HeaderComponent.tsx @@ -25,6 +25,9 @@ import Tab from "@mui/material/Tab"; import Tabs from "@mui/material/Tabs"; import { useQueryClient } from "@tanstack/react-query"; import { formatedBlocks, formatedDistricts } from "@/services/formatedCohorts"; +import { useRouter } from "next/router"; +import useSubmittedButtonStore from "@/utils/useSharedState"; +import { userAgent } from "next/server"; interface State { value: string; @@ -80,11 +83,13 @@ const HeaderComponent = ({ setSelectedBlock, setSelectedCenter, selectedCenterCode, - setSelectedCenterCode + setSelectedCenterCode, + setSelectedStateCode, }: any) => { const { t } = useTranslation(); const queryClient = useQueryClient(); + const router = useRouter(); const theme = useTheme(); const isMobile = useMediaQuery("(max-width:600px)"); @@ -95,9 +100,27 @@ const HeaderComponent = ({ const [allCenters, setAllCenters] = useState([]); const [initialDistrict, setInitialDistrict] = useState(""); const [initialBlock, setInitialBlock] = useState(""); + const [initialized, setInitialized] = useState(false); const [blocks, setBlocks] = useState([]); - + const selectedBlockStore = useSubmittedButtonStore( + (state: any) => state.selectedBlockStore + ); + const setSelectedBlockStore = useSubmittedButtonStore( + (state: any) => state.setSelectedBlockStore + ); + const selectedDistrictStore = useSubmittedButtonStore( + (state: any) => state.selectedDistrictStore + ); + const setSelectedDistrictStore = useSubmittedButtonStore( + (state: any) => state.setSelectedDistrictStore + ); + const selectedCenterStore = useSubmittedButtonStore( + (state: any) => state.selectedCenterStore + ); + const setSelectedCenterStore = useSubmittedButtonStore( + (state: any) => state.setSelectedCenterStore + ); const handleStateChangeWrapper = async ( selectedNames: string[], selectedCodes: string[] @@ -221,6 +244,20 @@ const HeaderComponent = ({ useEffect(() => { const fetchData = async () => { + const { state, district, center } = router.query; +console.log(router.asPath) +const fullPath = router.asPath; + +// Extract query parameters +const queryString = fullPath.split('?')[1]; // Get the part after '?' +console.log(queryString) +const params = new URLSearchParams(queryString); + +// Check if 'block' is present +const hasBlock = params.has('block'); +const hasDistrict = params.has('district'); +const hasCenter = params.has('center'); +const hasState = params.has('state'); try { const object = { // "limit": 20, @@ -266,13 +303,53 @@ const HeaderComponent = ({ const districtResult= await formatedDistricts(); setDistricts(districtResult); - setSelectedDistrict([districtResult[0]?.label]) - setSelectedDistrictCode(districtResult[0]?.value) + if(!hasDistrict) + { + setSelectedDistrict([districtResult[0]?.label]) + setSelectedDistrictCode(districtResult[0]?.value) + localStorage.setItem('selectedDistrict', districtResult[0]?.label) + setSelectedDistrictStore(districtResult[0]?.label) + + } const blockResult=await formatedBlocks(districtResult[0]?.value) setBlocks(blockResult); + if(!hasBlock && !hasDistrict) + { - setSelectedBlock([blockResult[0]?.label]) - setSelectedBlockCode(blockResult[0]?.value) + if(userType===Role.TEAM_LEADERS) + { + setSelectedBlock([t("COMMON.ALL_BLOCKS")]) + //setSelectedBlockCode("") + router.replace({ + pathname: router.pathname, + query: { + ...router.query, + state: stateField.code, + district: districtResult[0]?.value, + } + }); + } + else{ + + setSelectedBlock([blockResult[0]?.label]) + setSelectedBlockCode(blockResult[0]?.value) + localStorage.setItem('selectedBlock',blockResult[0]?.label ) + setSelectedBlockStore(blockResult[0]?.label) + + router.replace({ + pathname: router.pathname, + query: { + ...router.query, + state: stateField.code, + district: districtResult[0]?.value, + block: blockResult[0]?.value + } + }); + + } + + } + const getCentersObject = { limit: 0, offset: 0, @@ -309,10 +386,29 @@ const HeaderComponent = ({ cohortId: item?.cohortId, name: item?.name, })); + setAllCenters(cohortInfo); + console.log(dataArray); - setAllCenters(cohortInfo); - setSelectedCenter([cohortInfo[0]?.name]) - setSelectedCenterCode(cohortInfo[0]?.cohortId) + console.log(userType) + if(!hasCenter && !hasBlock && !hasDistrict && userType!==Role.TEAM_LEADERS) + { + console.log(hasCenter) + setSelectedCenter([t("COMMON.ALL_CENTERS")]) + // setSelectedCenterCode([cohortInfo[0]?.cohortId]) + // localStorage.setItem('selectedCenter',cohortInfo[0]?.name ) + // setSelectedCenterStore(cohortInfo[0]?.name) + router.replace({ + pathname: router.pathname, + query: { + ...router.query, + state: stateField.code, + district: districtResult[0]?.value, + block: blockResult[0]?.value , + // center: cohortInfo[0]?.cohortId + } + }); + } + console.log(cohortInfo) } @@ -335,7 +431,7 @@ const HeaderComponent = ({ if (shouldFetchDistricts) { fetchData(); } - }, [shouldFetchDistricts]); + }, [shouldFetchDistricts,userType]); const handleChange = (event: React.SyntheticEvent, newValue: any) => { console.log(newValue); setStatusValue(newValue); @@ -357,7 +453,51 @@ const HeaderComponent = ({ // } // }, [blocks, selectedBlock, handleBlockChangeWrapper]); - + useEffect(() => { + + const { state, district, block, center } = router.query; + { + + if (state) { + setSelectedStateCode(state.toString()); + } + + if (district) { + setSelectedDistrictCode(district.toString()); + // setSelectedDistrict([selectedDistrictStore]) + setSelectedDistrict([localStorage.getItem('selectedDistrict')]) + if(!localStorage.getItem('selectedDistrict')) + { + setSelectedDistrict([selectedDistrictStore]) + } + + } + + if (block) { + + setSelectedBlockCode(block.toString()); + console.log(selectedBlockCode) + // setSelectedBlock([selectedBlockStore]) + setSelectedBlock([localStorage.getItem('selectedBlock')]) + if(!localStorage.getItem('selectedBlock')) + setSelectedBlock([selectedBlockStore]) + } + + if (center) { + console.log(center) + + setSelectedCenterCode([center.toString()]); + // setSelectedCenter([selectedCenterStore]) + setSelectedCenter([localStorage.getItem('selectedCenter')]) + if(!localStorage.getItem('selectedCenter')) + setSelectedCenter([selectedCenterStore]) + + } + // setInitialized(true) + } + + }, [router]); + return ( = ({ const [centerMembershipIdList, setCenterMembershipIdList] = React.useState([]); const router = useRouter(); + const selectedBlockStore = useSubmittedButtonStore( + (state: any) => state.selectedBlockStore + ); + const setSelectedBlockStore = useSubmittedButtonStore( + (state: any) => state.setSelectedBlockStore + ); + const selectedDistrictStore = useSubmittedButtonStore( + (state: any) => state.selectedDistrictStore + ); + const setSelectedDistrictStore = useSubmittedButtonStore( + (state: any) => state.setSelectedDistrictStore + ); + const selectedCenterStore = useSubmittedButtonStore( + (state: any) => state.selectedCenterStore + ); + const setSelectedCenterStore = useSubmittedButtonStore( + (state: any) => state.setSelectedCenterStore + ); + + + const [selectedStateCode, setSelectedStateCode] = useState(""); const [selectedDistrict, setSelectedDistrict] = React.useState([]); const [selectedDistrictCode, setSelectedDistrictCode] = useState(""); @@ -125,6 +146,7 @@ const UserTable: React.FC = ({ const [userCohort, setUserCohorts] = useState (""); const [assignedCenters, setAssignedCenters] = useState(); + const [initialized, setInitialized] = useState(false); const [selectedUserId, setSelectedUserId] = useState(""); const [cohortId, setCohortId] = useState([]); @@ -256,6 +278,24 @@ const UserTable: React.FC = ({ /> ); const handleStateChange = async (selected: string[], code: string[]) => { + const newQuery = { ...router.query }; + + if (newQuery.center) { + delete newQuery.center; + } + if (newQuery.district) { + delete newQuery.district; + } + if (newQuery.block) { + delete newQuery.block; + } + router.replace({ + pathname: router.pathname, + query: { + ...newQuery, + state: code?.join(","), + } + }); setSelectedCenterCode([]) setEnableCenterFilter(false) @@ -314,6 +354,22 @@ const UserTable: React.FC = ({ }; const handleDistrictChange = (selected: string[], code: string[]) => { + const newQuery = { ...router.query }; + + if (newQuery.center) { + delete newQuery.center; + } + if (newQuery.block) { + delete newQuery.block; + } + router.replace({ + pathname: router.pathname, + query: { + ...newQuery, + state: selectedStateCode, + district: code?.join(",") + } + }); setSelectedCenterCode([]) setEnableCenterFilter(false) @@ -322,11 +378,9 @@ const UserTable: React.FC = ({ setSelectedBlock([]); setSelectedDistrict(selected); setSelectedBlockCode(""); +localStorage.setItem('selectedDistrict', selected[0]) -router.replace({ - pathname: router.pathname, - query: { ...router.query, stateCode: selectedStateCode ,districtCode: selected[0] } -}); +setSelectedDistrictStore(selected[0]) if (selected[0] === "" || selected[0] === t("COMMON.ALL_DISTRICTS")) { if (filters.status) { setFilters({ @@ -367,8 +421,40 @@ router.replace({ setEnableCenterFilter(false) setSelectedCenter([]); + const newQuery = { ...router.query }; + if (newQuery.center) { + delete newQuery.center; + } + if (newQuery.block) { + delete newQuery.block; + } + console.log(code?.join(",")) + router.replace({ + pathname: router.pathname, + query: { + ...newQuery, + state: selectedStateCode, + district: selectedDistrictCode, + block: code?.join(",") + } + }); + + setSelectedBlock(selected); + localStorage.setItem('selectedBlock', selected[0]) + setSelectedBlockStore(selected[0]) if (selected[0] === "" || selected[0] === t("COMMON.ALL_BLOCKS")) { + if (newQuery.block) { + delete newQuery.block; + } + router.replace({ + pathname: router.pathname, + query: { + ...newQuery, + state: selectedStateCode, + district: selectedDistrictCode, + } + }); if (filters.status) { setFilters({ states: selectedStateCode, @@ -408,14 +494,49 @@ router.replace({ console.log("Selected categories:", selected); }; const handleCenterChange = async(selected: string[], code: string[]) => { + if(code[0]) + { +console.log(code[0]) + router.replace({ + pathname: router.pathname, + query: { + ...router.query, + state: selectedStateCode, + district: selectedDistrictCode, + block: selectedBlockCode, + center: code[0] + } + }); + } + else + { + const newQuery = { ...router.query }; + if (newQuery.center) { + delete newQuery.center; + router.replace({ + ...newQuery, + + }); + } + + } + + + + + + setSelectedCenterCode([code[0]]) setSelectedCenter(selected) + localStorage.setItem('selectedCenter',selected[0] ) + setSelectedCenterStore(selected[0]) console.log(selected[0]) if (selected[0] === "" || selected[0] === t("COMMON.ALL_CENTERS")) { setEnableCenterFilter(false) - + setSelectedCenterCode([]) if (filters.status) { + setFilters({ states: selectedStateCode, districts: selectedDistrictCode, @@ -425,6 +546,7 @@ router.replace({ }); } else { + setFilters({ states: selectedStateCode, districts: selectedDistrictCode, @@ -860,7 +982,7 @@ router.replace({ } }; console.log(data ) - if (selectedBlockCode !== "" || (selectedDistrictCode !== "" && selectedBlockCode === "")) { + if ((selectedBlockCode !== "") || (selectedDistrictCode !== "" && selectedBlockCode === "") || (userType===Role.TEAM_LEADERS && selectedDistrictCode!=="") ){ fetchUserList(); } // fetchUserList(); @@ -875,9 +997,10 @@ router.replace({ deleteUserState, sortByForCohortMemberList, reassignButtonStatus, - enableCenterFilter + enableCenterFilter, + userType ]); - +console.log(selectedBlockStore) useEffect(() => { const fetchData = async () => { try { @@ -964,7 +1087,17 @@ router.replace({ // } // ) - if(selectedBlockCode && selectedDistrictCode) + if(selectedDistrictCode) + { + setFilters({ + states: stateField.code, + districts:selectedDistrictCode, + // blocks:selectedBlockCode, + role: role, + status:[statusValue], + }) + } + if(selectedBlockCode) { setFilters({ states: stateField.code, @@ -993,7 +1126,7 @@ router.replace({ }, [selectedBlockCode, selectedDistrictCode]); useEffect(() => { const fetchData = () => { - console.log(selectedCenter.length) + // console.log(selectedCenter.length) if(userType===Role.TEAM_LEADERS) { setEnableCenterFilter(false); @@ -1003,21 +1136,25 @@ router.replace({ if(selectedCenter.length!==0) { if (selectedCenter[0] === "" || selectedCenter[0] === t("COMMON.ALL_CENTERS")) { + setEnableCenterFilter(false); } else { + console.log(selectedCenterCode) + setEnableCenterFilter(true); } //setEnableCenterFilter(true); if(selectedCenterCode.length!==0) - { setFilters({ + { + setFilters({ // states: selectedStateCode, // districts: selectedDistrictCode, // blocks: blocks, - cohortId:selectedCenterCode, + cohortId:selectedCenterCode[0], role: role, status:[statusValue] });} @@ -1026,6 +1163,7 @@ router.replace({ } else{ setEnableCenterFilter(false) + if(selectedCenterCode.length!==0) setSelectedCenterCode([]) } } @@ -1036,95 +1174,113 @@ router.replace({ fetchData(); }, [selectedCenter, selectedCenterCode]); - - - -useEffect(() => { - - // Handle replacement when only state and district codes are available - if (selectedStateCode!=="" && selectedDistrictCode==="" && selectedBlockCode==="") { - const newQuery = { ...router.query }; - console.log(newQuery) - - if (newQuery.center) { - delete newQuery.center; - } - if (newQuery.district) { - delete newQuery.district; - } - if (newQuery.block) { - delete newQuery.block; - } - router.replace({ - pathname: router.pathname, - query: { - ...newQuery, - state: selectedStateCode, - } - }); - } - if (selectedStateCode!=="" && selectedDistrictCode!=="" && selectedBlockCode==="") { - const newQuery = { ...router.query }; - console.log(newQuery) - - if (newQuery.center) { - delete newQuery.center; - } - if (newQuery.block) { - delete newQuery.block; - } - router.replace({ - pathname: router.pathname, - query: { - ...newQuery, - state: selectedStateCode, - district: selectedDistrictCode - } - }); - } - - // Handle replacement when state, district, and block codes are available - if (selectedStateCode!=="" && selectedDistrictCode!=="" && selectedBlockCode!=="" && selectedCenter.length === 0) { - console.log("heyyy") - const newQuery = { ...router.query }; - - if (newQuery.center) { - delete newQuery.center; - } - if (newQuery.block) { - delete newQuery.block; - } - router.replace({ - pathname: router.pathname, - query: { - ...newQuery, - state: selectedStateCode, - district: selectedDistrictCode, - block: selectedBlockCode - } - }); - } - - // Handle replacement when state, district, block, and center are all selected - if (selectedStateCode !==""&& selectedDistrictCode!=="" && selectedBlockCode!=="" && selectedCenter.length !== 0) { - console.log("heyyy") - - console.log(selectedCenter); - if (userType !== Role.TEAM_LEADERS) { - router.replace({ - pathname: router.pathname, - query: { - ...router.query, - state: selectedStateCode, - district: selectedDistrictCode, - block: selectedBlockCode, - center: selectedCenter - } - }); - } - } -}, [selectedStateCode, selectedDistrictCode, selectedBlockCode, selectedCenter]); - + console.log(enableCenterFilter) + // useEffect(() => { + // const { state, district, block, center } = router.query; + + // { + // if (state) { + // setSelectedStateCode(state.toString()); + // } + // if (district) { + // setSelectedDistrictCode(district.toString()); + // } + // if (block) { + // setSelectedBlockCode(block.toString()); + // } + // if ( center) { + // setSelectedCenter([center.toString()]); + // } + // setInitialized(true); + // } + // }, []); + + // useEffect(() => { + + // // Handle replacement when only state and district codes are available + // if (selectedStateCode!=="" && selectedDistrictCode==="" && selectedBlockCode==="") { + // console.log("true") + // const newQuery = { ...router.query }; + // console.log(newQuery) + + // if (newQuery.center) { + // delete newQuery.center; + // } + // if (newQuery.district) { + // delete newQuery.district; + // } + // if (newQuery.block) { + // delete newQuery.block; + // } + // router.replace({ + // pathname: router.pathname, + // query: { + // ...newQuery, + // state: selectedStateCode, + // } + // }); + // } + // if (selectedStateCode!=="" && selectedDistrictCode!=="" && selectedBlockCode==="") { + // const newQuery = { ...router.query }; + // console.log(newQuery) + + // if (newQuery.center) { + // delete newQuery.center; + // } + // if (newQuery.block) { + // delete newQuery.block; + // } + // router.replace({ + // pathname: router.pathname, + // query: { + // ...newQuery, + // state: selectedStateCode, + // district: selectedDistrictCode + // } + // }); + // } + + // // Handle replacement when state, district, and block codes are available + // if (selectedStateCode!=="" && selectedDistrictCode!=="" && selectedBlockCode!=="" && selectedCenter.length === 0) { + // const newQuery = { ...router.query }; + + // if (newQuery.center) { + // delete newQuery.center; + // } + // if (newQuery.block) { + // delete newQuery.block; + // } + // router.replace({ + // pathname: router.pathname, + // query: { + // ...newQuery, + // state: selectedStateCode, + // district: selectedDistrictCode, + // block: selectedBlockCode + // } + // }); + // } + + // // Handle replacement when state, district, block, and center are all selected + // if (selectedStateCode !==""&& selectedDistrictCode!=="" && selectedBlockCode!=="" && selectedCenter.length !== 0) { + // console.log("heyyy") + + // console.log(selectedCenter); + // if (userType !== Role.TEAM_LEADERS) { + // router.replace({ + // pathname: router.pathname, + // query: { + // ...router.query, + // state: selectedStateCode, + // district: selectedDistrictCode, + // block: selectedBlockCode, + // center: selectedCenter + // } + // }); + // } + // } + // }, [selectedStateCode]); + const handleCloseDeleteModal = () => { @@ -1252,7 +1408,8 @@ useEffect(() => { selectedCenter: selectedCenter, setSelectedCenter:setSelectedCenter, selectedCenterCode:selectedCenterCode, - setSelectedCenterCode: setSelectedCenterCode + setSelectedCenterCode: setSelectedCenterCode, + setSelectedStateCode:setSelectedStateCode }; diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts index d7e6c6cf..efd05165 100644 --- a/src/utils/Helper.ts +++ b/src/utils/Helper.ts @@ -129,7 +129,7 @@ export const capitalizeFirstLetterOfEachWordInArray = ( } console.log(arr); return arr?.map((str) => - str.replace(/\b[a-z]/g, (char) => char.toUpperCase()) + str?.replace(/\b[a-z]/g, (char) => char.toUpperCase()) ); }; export const fieldTextValidation = (text: string) => { diff --git a/src/utils/useSharedState.ts b/src/utils/useSharedState.ts index 6ca09a24..dba16d34 100644 --- a/src/utils/useSharedState.ts +++ b/src/utils/useSharedState.ts @@ -16,6 +16,17 @@ const useSubmittedButtonStore = create((set) => ({ setUserEnteredEmail: (status: string) => set({ userEnteredEmail: status }), shouldFetch:true, setShouldFetch:(data: boolean) => set({ shouldFetch: data }), + selectedBlockStore:"", + setSelectedBlockStore: (status: string) => set({ selectedBlockStore: status }), + + selectedDistrictStore:"", + setSelectedDistrictStore: (status: string) => set({ selectedDistrictStore: status }), + + selectedCenterStore:"", + setSelectedCenterStore: (status: string) => set({ selectedCenterStore: status }), + + + }));