From bc4be3d51bbe376fa7daab64e7e3daf16d0141b3 Mon Sep 17 00:00:00 2001 From: = <109369527+TylerBroyles@users.noreply.github.com> Date: Fri, 22 Nov 2024 13:33:33 -0500 Subject: [PATCH 1/5] Initial commit. Added a new state variable in NonComp tabs that is used by the on history callback function to preserve the completed date filter when swapping between tabs in the vha decision review queue. --- client/app/nonComp/components/NonCompTabs.jsx | 64 ++++++++++++++----- 1 file changed, 47 insertions(+), 17 deletions(-) diff --git a/client/app/nonComp/components/NonCompTabs.jsx b/client/app/nonComp/components/NonCompTabs.jsx index 06b02b5104..6f688281bf 100644 --- a/client/app/nonComp/components/NonCompTabs.jsx +++ b/client/app/nonComp/components/NonCompTabs.jsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; @@ -14,16 +14,7 @@ import moment from 'moment'; const NonCompTabsUnconnected = (props) => { const [localFilter, setFilter] = useLocalFilterStorage('nonCompFilter', []); - - // A callback function to send down to QueueTable to add filters to local storage when the get parameters are updated - const onHistoryUpdate = (urlString) => { - const url = new URL(urlString); - const params = new URLSearchParams(url.search); - const filterParams = params.getAll(`${QUEUE_CONFIG.FILTER_COLUMN_REQUEST_PARAM}[]`); - - setFilter(filterParams); - }; - + const [tempDateFilter, setTempDateFilter] = useState(''); const isVhaBusinessLine = props.businessLineUrl === 'vha'; const queryParams = new URLSearchParams(window.location.search); const currentTabName = queryParams.get(QUEUE_CONFIG.TAB_NAME_REQUEST_PARAM) || 'in_progress'; @@ -46,6 +37,33 @@ const NonCompTabsUnconnected = (props) => { const findTab = tabArray.findIndex((tabName) => tabName === currentTabName); const getTabByIndex = findTab === -1 ? 0 : findTab; + // A callback function to send down to QueueTable to add filters to local storage when the get parameters are updated + const onHistoryUpdate = (urlString) => { + const url = new URL(urlString); + const params = new URLSearchParams(url.search); + const filterParams = params.getAll(`${QUEUE_CONFIG.FILTER_COLUMN_REQUEST_PARAM}[]`); + + // Completed date filter preservation is different since the column is not shared between tabs + const completedDateFilter = filterParams.find((value) => value.includes('col=completedDateColumn')); + const tabFromParams = params.get(QUEUE_CONFIG.TAB_NAME_REQUEST_PARAM); + + if (completedDateFilter) { + // TODO: See if this can be condensed + if (currentTabName !== 'completed' && tabFromParams === 'completed' && tempDateFilter) { + // From another tab -> completed when you have an existing tempDateFilter then use it somehow + } else if (currentTabName !== 'completed' && tabFromParams === 'completed' && !tempDateFilter) { + // Navigating from another tab back to completed without an existing tempDateFilter so it was cleared + } else { + setTempDateFilter(completedDateFilter); + } + } else if (!completedDateFilter && tabFromParams === 'completed') { + // Since it is still in the completed tab without a filter, assume it was cleared + setTempDateFilter('cleared'); + } + + setFilter(filterParams); + }; + // Derive the different tab task counts from the task filters. const taskCounts = useMemo(() => ( mapValues(props.taskFilterDetails, (obj) => sumBy(Object.values(obj))) @@ -92,16 +110,28 @@ const NonCompTabsUnconnected = (props) => { // A completed date filter in the get parameters should override this. const completedTabPaginationOptions = cloneDeep(tabPaginationOptions); + // TODO: See if this can be condensed by always setting tempDateFilter with a default 7 days + // And setting it to empty string when it's cleared and always replacing the date filter that is there if (isVhaBusinessLine) { - const containsCompletedDateFilter = completedTabPaginationOptions['filter[]']. - some((item) => item.includes('col=completedDateColumn')); + if (tempDateFilter) { + if (tempDateFilter === 'cleared') { + // Filter was cleared so don't set a filter now + } else { + // It's an existing filter so add it to the filters like normally + completedTabPaginationOptions['filter[]'].push(tempDateFilter); + } + } else { + const containsCompletedDateFilter = completedTabPaginationOptions['filter[]']. + some((item) => item.includes('col=completedDateColumn')); - if (!containsCompletedDateFilter) { - const sevenDaysAgoString = moment().subtract(7, 'days'). - format('YYYY-MM-DD'); + if (!containsCompletedDateFilter) { + const sevenDaysAgoString = moment().subtract(7, 'days'). + format('YYYY-MM-DD'); - completedTabPaginationOptions['filter[]'].push(`col=completedDateColumn&val=last7,${sevenDaysAgoString},`); + completedTabPaginationOptions['filter[]'].push(`col=completedDateColumn&val=last7,${sevenDaysAgoString},`); + } } + } const ALL_TABS = { From edca32064685b2e24774e64891326cdb9e792475 Mon Sep 17 00:00:00 2001 From: = <109369527+TylerBroyles@users.noreply.github.com> Date: Fri, 22 Nov 2024 14:18:51 -0500 Subject: [PATCH 2/5] Added the completed date filter preservation to a feature test. --- spec/feature/non_comp/reviews_spec.rb | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/spec/feature/non_comp/reviews_spec.rb b/spec/feature/non_comp/reviews_spec.rb index 702b24eb85..ba0256fbaf 100644 --- a/spec/feature/non_comp/reviews_spec.rb +++ b/spec/feature/non_comp/reviews_spec.rb @@ -1083,6 +1083,16 @@ def current_table_rows expect(page).to have_content("Cases completed (Last 30 Days)") expect(page).to have_content("Date Completed (1)") expect(page).to have_content("Viewing 1-3 of 3 total") + + # Verify that the filter is preserved between tabs + click_on "Incomplete Tasks" + expect(page).to have_content(COPY::VHA_INCOMPLETE_TAB_DESCRIPTION) + + click_on "Completed Tasks" + expect(page).to have_content("Cases completed (Last 30 Days)") + expect(page).to have_content("Date Completed (1)") + expect(page).to have_content("Viewing 1-3 of 3 total") + end end From c2f4e462d41c46472af6e447a609c7f94c70518f Mon Sep 17 00:00:00 2001 From: = <109369527+TylerBroyles@users.noreply.github.com> Date: Fri, 22 Nov 2024 14:19:24 -0500 Subject: [PATCH 3/5] Fixed a small lint error. --- spec/feature/non_comp/reviews_spec.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/spec/feature/non_comp/reviews_spec.rb b/spec/feature/non_comp/reviews_spec.rb index ba0256fbaf..d8e8be3f1d 100644 --- a/spec/feature/non_comp/reviews_spec.rb +++ b/spec/feature/non_comp/reviews_spec.rb @@ -1092,7 +1092,6 @@ def current_table_rows expect(page).to have_content("Cases completed (Last 30 Days)") expect(page).to have_content("Date Completed (1)") expect(page).to have_content("Viewing 1-3 of 3 total") - end end From 133560e59d38648b8de4b08dc11c2889cbd2b739 Mon Sep 17 00:00:00 2001 From: = <109369527+TylerBroyles@users.noreply.github.com> Date: Fri, 22 Nov 2024 15:03:42 -0500 Subject: [PATCH 4/5] Cleaned up the first if block to remove some unnessary logic conditions and removed a todo statement. --- client/app/nonComp/components/NonCompTabs.jsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/client/app/nonComp/components/NonCompTabs.jsx b/client/app/nonComp/components/NonCompTabs.jsx index 6f688281bf..a7d19e72b7 100644 --- a/client/app/nonComp/components/NonCompTabs.jsx +++ b/client/app/nonComp/components/NonCompTabs.jsx @@ -48,14 +48,7 @@ const NonCompTabsUnconnected = (props) => { const tabFromParams = params.get(QUEUE_CONFIG.TAB_NAME_REQUEST_PARAM); if (completedDateFilter) { - // TODO: See if this can be condensed - if (currentTabName !== 'completed' && tabFromParams === 'completed' && tempDateFilter) { - // From another tab -> completed when you have an existing tempDateFilter then use it somehow - } else if (currentTabName !== 'completed' && tabFromParams === 'completed' && !tempDateFilter) { - // Navigating from another tab back to completed without an existing tempDateFilter so it was cleared - } else { - setTempDateFilter(completedDateFilter); - } + setTempDateFilter(completedDateFilter); } else if (!completedDateFilter && tabFromParams === 'completed') { // Since it is still in the completed tab without a filter, assume it was cleared setTempDateFilter('cleared'); From ab615dee7389ed6377aca78a29a53303056cda03 Mon Sep 17 00:00:00 2001 From: = <109369527+TylerBroyles@users.noreply.github.com> Date: Fri, 22 Nov 2024 15:17:57 -0500 Subject: [PATCH 5/5] Renamed the temp variable to be more descriptive and fixed a code climate issue. --- client/app/nonComp/components/NonCompTabs.jsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/client/app/nonComp/components/NonCompTabs.jsx b/client/app/nonComp/components/NonCompTabs.jsx index a7d19e72b7..84067aa603 100644 --- a/client/app/nonComp/components/NonCompTabs.jsx +++ b/client/app/nonComp/components/NonCompTabs.jsx @@ -14,7 +14,7 @@ import moment from 'moment'; const NonCompTabsUnconnected = (props) => { const [localFilter, setFilter] = useLocalFilterStorage('nonCompFilter', []); - const [tempDateFilter, setTempDateFilter] = useState(''); + const [savedCompletedDateFilter, setSavedCompletedDateFilter] = useState(''); const isVhaBusinessLine = props.businessLineUrl === 'vha'; const queryParams = new URLSearchParams(window.location.search); const currentTabName = queryParams.get(QUEUE_CONFIG.TAB_NAME_REQUEST_PARAM) || 'in_progress'; @@ -48,10 +48,10 @@ const NonCompTabsUnconnected = (props) => { const tabFromParams = params.get(QUEUE_CONFIG.TAB_NAME_REQUEST_PARAM); if (completedDateFilter) { - setTempDateFilter(completedDateFilter); + setSavedCompletedDateFilter(completedDateFilter); } else if (!completedDateFilter && tabFromParams === 'completed') { // Since it is still in the completed tab without a filter, assume it was cleared - setTempDateFilter('cleared'); + setSavedCompletedDateFilter('cleared'); } setFilter(filterParams); @@ -103,17 +103,16 @@ const NonCompTabsUnconnected = (props) => { // A completed date filter in the get parameters should override this. const completedTabPaginationOptions = cloneDeep(tabPaginationOptions); - // TODO: See if this can be condensed by always setting tempDateFilter with a default 7 days - // And setting it to empty string when it's cleared and always replacing the date filter that is there if (isVhaBusinessLine) { - if (tempDateFilter) { - if (tempDateFilter === 'cleared') { + if (savedCompletedDateFilter) { + if (savedCompletedDateFilter === 'cleared') { // Filter was cleared so don't set a filter now } else { // It's an existing filter so add it to the filters like normally - completedTabPaginationOptions['filter[]'].push(tempDateFilter); + completedTabPaginationOptions['filter[]'].push(savedCompletedDateFilter); } } else { + // Sets the last 7 days filter on first swap to the completed tasks tab if the temp date filter is not set const containsCompletedDateFilter = completedTabPaginationOptions['filter[]']. some((item) => item.includes('col=completedDateColumn'));