diff --git a/src/components/pages/statistics/ActiveMembersComposition.tsx b/src/components/pages/statistics/ActiveMembersComposition.tsx index db9e692f..a5b1ac44 100644 --- a/src/components/pages/statistics/ActiveMembersComposition.tsx +++ b/src/components/pages/statistics/ActiveMembersComposition.tsx @@ -200,13 +200,43 @@ export default function ActiveMembersComposition({ const handleSelectedOption = (label: string) => { const currentPath = router.pathname; + const currentQuery = router.query; + + let existingFilters: any[] = []; + + // Check if we already have some filters + if (currentQuery.filter && typeof currentQuery.filter === 'string') { + try { + existingFilters = JSON.parse(currentQuery.filter); + } catch (e) { + console.error('Error parsing filters:', e); + } + } + + // Check if the filterType already exists in the array + const existingFilterIndex = existingFilters.findIndex( + (filter) => filter.filterType === 'activeMemberComposition' + ); + + const newFilter = { + filterType: 'activeMemberComposition', + label: label, + }; + + if (existingFilterIndex !== -1) { + // If it exists, replace the existing filter's label with the new label + existingFilters[existingFilterIndex].label = label; + } else { + // If it doesn't exist, add the new filter to the array + existingFilters.push(newFilter); + } router.replace( { pathname: currentPath, query: { - overview: 'activeMemberComposition', - filterType: label, + ...currentQuery, + filter: JSON.stringify(existingFilters), }, }, undefined, diff --git a/src/components/pages/statistics/DisengagedMembersComposition.tsx b/src/components/pages/statistics/DisengagedMembersComposition.tsx index 3fc36a41..f30cc901 100644 --- a/src/components/pages/statistics/DisengagedMembersComposition.tsx +++ b/src/components/pages/statistics/DisengagedMembersComposition.tsx @@ -185,20 +185,49 @@ export default function DisengagedMembersComposition({ const handleSelectedOption = (label: string) => { const currentPath = router.pathname; + const currentQuery = router.query; + + let existingFilters: any[] = []; + + // Check if we already have some filters + if (currentQuery.filter && typeof currentQuery.filter === 'string') { + try { + existingFilters = JSON.parse(currentQuery.filter); + } catch (e) { + console.error('Error parsing filters:', e); + } + } + + // Check if the filterType already exists in the array + const existingFilterIndex = existingFilters.findIndex( + (filter) => filter.filterType === 'disengagedMemberComposition' + ); + + const newFilter = { + filterType: 'disengagedMemberComposition', + label: label, + }; + + if (existingFilterIndex !== -1) { + // If it exists, replace the existing filter's label with the new label + existingFilters[existingFilterIndex].label = label; + } else { + // If it doesn't exist, add the new filter to the array + existingFilters.push(newFilter); + } router.replace( { pathname: currentPath, query: { - overview: 'disengagedMemberComposition', - filterType: label, + ...currentQuery, + filter: JSON.stringify(existingFilters), }, }, undefined, { shallow: true } ); }; - return ( <>
diff --git a/src/components/pages/statistics/Onboarding.tsx b/src/components/pages/statistics/Onboarding.tsx index c22b6ba9..f7fc25d0 100644 --- a/src/components/pages/statistics/Onboarding.tsx +++ b/src/components/pages/statistics/Onboarding.tsx @@ -162,13 +162,43 @@ export default function Onboarding({ const handleSelectedOption = (label: string) => { const currentPath = router.pathname; + const currentQuery = router.query; + + let existingFilters: any[] = []; + + // Check if we already have some filters + if (currentQuery.filter && typeof currentQuery.filter === 'string') { + try { + existingFilters = JSON.parse(currentQuery.filter); + } catch (e) { + console.error('Error parsing filters:', e); + } + } + + // Check if the filterType already exists in the array + const existingFilterIndex = existingFilters.findIndex( + (filter) => filter.filterType === 'onboardingMemberComposition' + ); + + const newFilter = { + filterType: 'onboardingMemberComposition', + label: label, + }; + + if (existingFilterIndex !== -1) { + // If it exists, replace the existing filter's label with the new label + existingFilters[existingFilterIndex].label = label; + } else { + // If it doesn't exist, add the new filter to the array + existingFilters.push(newFilter); + } router.replace( { pathname: currentPath, query: { - overview: 'onboardingMemberComposition', - filterType: label, + ...currentQuery, + filter: JSON.stringify(existingFilters), }, }, undefined, diff --git a/src/components/pages/statistics/StatisticalData.tsx b/src/components/pages/statistics/StatisticalData.tsx index ef8838be..80c7fafe 100644 --- a/src/components/pages/statistics/StatisticalData.tsx +++ b/src/components/pages/statistics/StatisticalData.tsx @@ -25,14 +25,34 @@ const StatisticalData: React.FC = ({ const [activeState, setActiveState] = useState(); useEffect(() => { - console.log(router.query); - if (overviewType === router.query.overview) { - setActiveState(router.query.filterType); - } else if (Object.keys(router.query).length === 0) { - setActiveState(''); + const queries = router.query; + + if (queries.filter && typeof queries.filter === 'string') { + const filter = JSON.parse(queries?.filter); + + if (filter) { + // Search for the first element that matches the 'filterType' + const matchedFilter = filter.find( + (el: any) => el.filterType === overviewType + ); + + // Check if matchedFilter exists + if (matchedFilter) { + // Check if matchedFilter has keys + if (Object.keys(matchedFilter).length > 0) { + setActiveState(matchedFilter.label); + } else { + setActiveState(''); + } + } else { + setActiveState(''); + } + } else { + setActiveState(''); + } } - console.log({ activeState }); }, [router.query]); + return ( <>
= ({ setSelectedActivityOptions([]); } setSelectAllActivityOptions(event.target.checked); - router.replace(router.pathname, undefined, { shallow: true }); + handleUpdateRouterQueries(); }; const handleSelectActivityOption = ( @@ -161,7 +161,31 @@ const CustomTable: React.FC = ({ setSelectAllActivityOptions( updatedSelectedOptions.length === activityCompositionOptions.length ); - router.replace(router.pathname, undefined, { shallow: true }); + handleUpdateRouterQueries(); + }; + + const handleUpdateRouterQueries = () => { + const queries = router.query; + + if (queries.filter && typeof queries.filter === 'string') { + const filters = JSON.parse(queries?.filter); + const updatedFilters = filters.filter( + (el: any) => el.filterType !== breakdownName + ); + router.replace( + { + pathname: router.pathname, + query: { + ...router.query, + filter: JSON.stringify(updatedFilters), + }, + }, + undefined, + { + shallow: true, + } + ); + } }; const formatDate = (date: string) => { @@ -211,17 +235,32 @@ const CustomTable: React.FC = ({ }; useEffect(() => { - const filterType = router.query.filterType as string; - const overview = router.query.overview as string; - if (overview && breakdownName === overview) { - const matchedOptions = activityCompositionOptions.filter( - (option) => option.name.toLowerCase() === filterType.toLowerCase() - ); - if (matchedOptions.length) { - const v = matchedOptions[0].value; - setSelectedActivityOptions([v]); + const queries = router.query; + if (queries.filter && typeof queries.filter === 'string') { + const filter = JSON.parse(queries?.filter); + if (filter) { + // Search for the first element that matches the 'filterType' + const matchedFilter = filter.find( + (el: any) => el.filterType === breakdownName + ); + + if (matchedFilter) { + const matchedLabel = matchedFilter.label.toLowerCase(); + + // Search for the first 'option' that matches the 'label' in 'matchedFilter' + const matchedOption = activityCompositionOptions.find( + (activityCompositionOption) => + activityCompositionOption.name.toLowerCase() === matchedLabel + ); + + if (matchedOption) { + const matchedValue = matchedOption.value; + + setSelectedActivityOptions([matchedValue]); + } + setSelectAllActivityOptions(false); + } } - setSelectAllActivityOptions(false); } }, [router.query]); diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx index f0d468e9..d4299497 100644 --- a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx @@ -95,15 +95,28 @@ export default function ActiveMemberBreakdown() { }, [activityComposition, roles, username, sortBy]); useEffect(() => { - const filterType = router.query.filterType as string; - - if (filterType) { - const matchedOptions = options.filter( - (option) => option.name.toLowerCase() === filterType.toLowerCase() - ); - if (matchedOptions.length) { - const v = matchedOptions[0].value; - handleActivityOptionSelectionChange([v]); + const queries = router.query; + if (queries.filter && typeof queries.filter === 'string') { + const filter = JSON.parse(queries?.filter); + if (filter) { + // Search for the first element that matches the 'filterType' + const matchedFilter = filter.find( + (el: any) => el.filterType === 'activeMemberComposition' + ); + + if (matchedFilter) { + const matchedLabel = matchedFilter.label.toLowerCase(); + + // Search for the first 'option' that matches the 'label' in 'matchedFilter' + const matchedOption = options.find( + (option) => option.name.toLowerCase() === matchedLabel + ); + + if (matchedOption) { + const matchedValue = matchedOption.value; + handleActivityOptionSelectionChange([matchedValue]); + } + } } } }, [router.query]); diff --git a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx index c11af620..f98f1084 100644 --- a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx @@ -109,15 +109,28 @@ export default function DisengagedMembersCompositionBreakdown() { }, [disengagedComposition, roles, username, sortBy]); useEffect(() => { - const filterType = router.query.filterType as string; + const queries = router.query; + if (queries.filter && typeof queries.filter === 'string') { + const filter = JSON.parse(queries?.filter); + if (filter) { + // Search for the first element that matches the 'filterType' + const matchedFilter = filter.find( + (el: any) => el.filterType === 'disengagedMemberComposition' + ); - if (filterType) { - const matchedOptions = options.filter( - (option) => option.name.toLowerCase() === filterType.toLowerCase() - ); - if (matchedOptions.length) { - const v = matchedOptions[0].value; - handleActivityOptionSelectionChange([v]); + if (matchedFilter) { + const matchedLabel = matchedFilter.label.toLowerCase(); + + // Search for the first 'option' that matches the 'label' in 'matchedFilter' + const matchedOption = options.find( + (option) => option.name.toLowerCase() === matchedLabel + ); + + if (matchedOption) { + const matchedValue = matchedOption.value; + handleActivityOptionSelectionChange([matchedValue]); + } + } } } }, [router.query]); diff --git a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx index 805d0732..cde6c617 100644 --- a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx @@ -97,19 +97,31 @@ export default function OnboardingMembersBreakdown() { }, [onboardingComposition, roles, username, sortBy]); useEffect(() => { - const filterType = router.query.filterType as string; - - if (filterType) { - const matchedOptions = options.filter( - (option) => option.name.toLowerCase() === filterType.toLowerCase() - ); - if (matchedOptions.length) { - const v = matchedOptions[0].value; - handleActivityOptionSelectionChange([v]); + const queries = router.query; + if (queries.filter && typeof queries.filter === 'string') { + const filter = JSON.parse(queries?.filter); + if (filter) { + // Search for the first element that matches the 'filterType' + const matchedFilter = filter.find( + (el: any) => el.filterType === 'onboardingMemberComposition' + ); + + if (matchedFilter) { + const matchedLabel = matchedFilter.label.toLowerCase(); + + // Search for the first 'option' that matches the 'label' in 'matchedFilter' + const matchedOption = options.find( + (option) => option.name.toLowerCase() === matchedLabel + ); + + if (matchedOption) { + const matchedValue = matchedOption.value; + handleActivityOptionSelectionChange([matchedValue]); + } + } } } }, [router.query]); - const handleRoleSelectionChange = (selectedRoles: string[]) => { setRoles(selectedRoles); };