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