From 97b07053c7976e927d485617c95fe79ae70f6187 Mon Sep 17 00:00:00 2001 From: Rnmarshall93 <110805785+Rnmarshall93@users.noreply.github.com> Date: Thu, 14 Sep 2023 05:58:42 -0700 Subject: [PATCH] Fix for Document type filter restricting itself (#19458) * Added redux store for testing the frozen items in redux * Bug fixed. Refactor badly needed. * Refactored and removed frozenDocs. * added analytics and removed console.log * Changed default state of docTypes to '' * Removed unused component. --------- Co-authored-by: HunJerBAH <99915461+HunJerBAH@users.noreply.github.com> --- .../components/ReaderTableDropdownFilter.jsx | 95 ------------------- .../DocumentList/DocumentListActions.js | 19 +++- .../DocumentList/DocumentListReducer.js | 11 +++ client/app/reader/DocumentList/actionTypes.js | 2 +- client/app/reader/DocumentsTable.jsx | 61 ++++++------ 5 files changed, 58 insertions(+), 130 deletions(-) delete mode 100644 client/app/components/ReaderTableDropdownFilter.jsx diff --git a/client/app/components/ReaderTableDropdownFilter.jsx b/client/app/components/ReaderTableDropdownFilter.jsx deleted file mode 100644 index a9e0fc8d0fb..00000000000 --- a/client/app/components/ReaderTableDropdownFilter.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { COLORS } from '@department-of-veterans-affairs/caseflow-frontend-toolkit/util/StyleConstants'; -import { css } from 'glamor'; - -const dropdownFilterViewListStyle = css({ - margin: 0 -}); -const dropdownFilterViewListItemStyle = css( - { - padding: '14px', - ':hover': - { - backgroundColor: '#5b616b', - color: COLORS.WHITE - } - } -); - -class ReaderTableDropdownFilter extends React.PureComponent { - constructor() { - super(); - this.state = { - rootElemWidth: null - }; - } - - render() { - const { children, name } = this.props; - - const style = { - top: '25px', - right: 0 - }; - - const rel = { - position: 'relative' - }; - - return
- -
{ - this.rootElem = rootElem; - }}> - {this.props.addClearFiltersRow && -
- {React.cloneElement(React.Children.only(children), { - dropdownFilterViewListStyle, - dropdownFilterViewListItemStyle - })} -
- -
-
- } - -
-
; - } - - componentDidMount() { - document.addEventListener('click', this.onGlobalClick, true); - } - - componentWillUnmount() { - document.removeEventListener('click', this.onGlobalClick); - } - - onGlobalClick = (event) => { - if (!this.rootElem) { - return; - } - - const clickIsInsideThisComponent = this.rootElem.contains(event.target); - - if (!clickIsInsideThisComponent) { - this.props.handleClose(); - } - } -} - -ReaderTableDropdownFilter.propTypes = { - children: PropTypes.node, - isClearEnabled: PropTypes.bool, - clearFilters: PropTypes.func, - handleClose: PropTypes.func, - addClearFiltersRow: PropTypes.bool -}; - -export default ReaderTableDropdownFilter; diff --git a/client/app/reader/DocumentList/DocumentListActions.js b/client/app/reader/DocumentList/DocumentListActions.js index 248e1daf1f6..11f3de27e29 100644 --- a/client/app/reader/DocumentList/DocumentListActions.js +++ b/client/app/reader/DocumentList/DocumentListActions.js @@ -130,6 +130,21 @@ export const clearDocFilters = () => (dispatch) => { dispatch(updateFilteredIdsAndDocs()); }; +export const setDocTypes = (docToAdd) => (dispatch) => { + dispatch({ + type: Constants.SET_DOC_TYPES, + payload: { + docToAdd + }, + meta: { + analytics: { + category: CATEGORIES.CLAIMS_FOLDER_PAGE, + action: 'set-doc-types' + } + } + }); +}; + export const clearTagFilters = () => (dispatch) => { dispatch({ type: Constants.CLEAR_TAG_FILTER, @@ -153,13 +168,13 @@ export const setRecieptDateFilter = (recieptFilterType, recieptDatesHash) => (di meta: { analytics: { category: CATEGORIES.CLAIMS_FOLDER_PAGE, - action: 'set RecieptFilterType-' + recieptFilterType, + action: `set RecieptFilterType-${ recieptFilterType}`, label: 'setRecieptFilter' } } }); dispatch(updateFilteredIdsAndDocs()); -} +}; // Scrolling export const setDocListScrollPosition = (scrollTop) => ({ diff --git a/client/app/reader/DocumentList/DocumentListReducer.js b/client/app/reader/DocumentList/DocumentListReducer.js index 7a6089642f7..22ccdac6bab 100644 --- a/client/app/reader/DocumentList/DocumentListReducer.js +++ b/client/app/reader/DocumentList/DocumentListReducer.js @@ -45,6 +45,7 @@ const initialState = { category: {}, tag: {}, document: {}, + docTypeList: '', searchQuery: '', recieptFilterType: '', recieptFilterDates: { @@ -191,6 +192,16 @@ const documentListReducer = (state = initialState, action = {}) => { } }); + // holds the unique different document types for reader. + case Constants.SET_DOC_TYPES: + return update(state, { + docFilterCriteria: { + docTypeList: { + $set: action.payload.docToAdd + } + } + }); + // Document header case Constants.SET_SEARCH: return update(state, { diff --git a/client/app/reader/DocumentList/actionTypes.js b/client/app/reader/DocumentList/actionTypes.js index 068448f319a..747b8f68b3f 100644 --- a/client/app/reader/DocumentList/actionTypes.js +++ b/client/app/reader/DocumentList/actionTypes.js @@ -22,7 +22,7 @@ export const SET_RECIEPT_DATE_FILTER = 'SET_RECIEPT_DATE_FILTER'; // Document filter export const SET_DOC_FILTER = 'SET_DOC_FILTER'; export const CLEAR_DOC_FILTER = 'CLEAR_DOC_FILTER'; - +export const SET_DOC_TYPES = 'SET_DOC_TYPES'; // Constants export const DOCUMENTS_OR_COMMENTS_ENUM = { DOCUMENTS: 'documents', diff --git a/client/app/reader/DocumentsTable.jsx b/client/app/reader/DocumentsTable.jsx index cd60a6553fc..29429413ac2 100644 --- a/client/app/reader/DocumentsTable.jsx +++ b/client/app/reader/DocumentsTable.jsx @@ -26,6 +26,7 @@ import { toggleDropdownFilterVisibility, setDocFilter, clearDocFilters, + setDocTypes, setRecieptDateFilter } from '../reader/DocumentList/DocumentListActions'; import { getAnnotationsPerDocument } from './selectors'; @@ -38,7 +39,6 @@ import FilterIcon from '../components/icons/FilterIcon'; import LastReadIndicator from './LastReadIndicator'; import DocTypeColumn from './DocTypeColumn'; import DocTagPicker from './DocTagPicker'; -import ReaderTableDropdownFilter from '../components/ReaderTableDropdownFilter'; const NUMBER_OF_COLUMNS = 6; @@ -156,7 +156,6 @@ class DocumentsTable extends React.Component { constructor() { super(); this.state = { - frozenDocs: '', recieptFilter: '', fromDate: '', toDate: '', @@ -164,17 +163,18 @@ class DocumentsTable extends React.Component { fromDateErrors: [], toDateErrors: [], onDateErrors: [], - recipetFilterEnabled: true + recipetFilterEnabled: true, + fallbackState: '' }; } executeRecieptFilter = () => { - this.props.setRecieptDateFilter(this.state.recieptFilter, - { fromDate: this.state.fromDate, - toDate: this.state.toDate, - onDate: this.state.onDate}); + this.props.setRecieptDateFilter(this.state.recieptFilter, + { fromDate: this.state.fromDate, + toDate: this.state.toDate, + onDate: this.state.onDate }); - this.toggleRecieptDataDropdownFilterVisibility(); + this.toggleRecieptDataDropdownFilterVisibility(); } isRecieptFilterButtonEnabled = () => { @@ -202,14 +202,26 @@ class DocumentsTable extends React.Component { return false; } componentDidMount() { - if (this.state.frozenDocs === '') { - const frozenDocs = this.props.documents; - Object.freeze(frozenDocs); - this.setState({ - frozenDocs - }); + // this if statement is what freezes the values, once it's set, it's set unless manipulated + // back to a empty state via redux + if (this.props.docFilterCriteria.docTypeList === '') { + + let docsArray = []; + + this.props.documents.map((x) => docsArray.includes(x.type) ? true : docsArray.push(x.type)); + // convert each item to a hash for use in the document filter + let filterItems = []; + + docsArray.forEach((x) => filterItems.push({ + value: docsArray.indexOf(x), + text: x + })); + + // store the tags in redux + this.props.setDocTypes(filterItems); } + if (this.props.pdfList.scrollTop) { this.tbodyElem.scrollTop = this.props.pdfList.scrollTop; @@ -333,23 +345,6 @@ class DocumentsTable extends React.Component { ]; } - const populateDocumentFilter = () => { - let docsArray = []; - - // looks through all document types, and only adds them into docsArray if they are unique - this.state.frozenDocs.map((x) => docsArray.includes(x.type) ? true : docsArray.push(x.type)); - - // convert each item to a hash for use in the document filter - let filterItems = []; - - docsArray.forEach((x) => filterItems.push({ - value: docsArray.indexOf(x), - text: x - })); - - return filterItems; - }; - const isCategoryDropdownFilterOpen = _.get(this.props.pdfList, [ 'dropdowns', 'category', @@ -549,7 +544,7 @@ class DocumentsTable extends React.Component { addClearFiltersRow > @@ -662,6 +657,7 @@ DocumentsTable.propTypes = { toggleDropdownFilterVisibility: PropTypes.func.isRequired, tagOptions: PropTypes.arrayOf(PropTypes.object).isRequired, setDocFilter: PropTypes.func, + setDocTypes: PropTypes.func, clearDocFilters: PropTypes.func, secretDebug: PropTypes.func }; @@ -678,6 +674,7 @@ const mapDispatchToProps = (dispatch) => setCategoryFilter, setDocFilter, clearDocFilters, + setDocTypes, setRecieptDateFilter }, dispatch