hotfix/APPEALS-45177: TaskTable Default Sorting Fix (#21772)

* Updated the TaskTable component to use the defaultSort property instead of the defaultSortIdx property for queue table since that property is not used anywhere. Added a default sorting hash to the UnassignedCasesPage component and now pass that down to TaskTable. Removed references to defaultSortIdx. * Added the type column default sort to the AssignedCasesPage widget as well. * Added a parenthesis for clarity around a boolean. Moved the defaultSortingHash out into a constants file. --------- Co-authored-by: Robert Travis Pierce <robert@roberttravispierce.com>
department-of-veterans-affairs · Aug 8, 2024 · 8bce9db · 8bce9db
1 parent 6b585cd
commit 8bce9db
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 33 deletions.
diff --git a/client/app/nonComp/components/NonCompTabs.jsx b/client/app/nonComp/components/NonCompTabs.jsx
@@ -52,8 +52,7 @@ const NonCompTabsUnconnected = (props) => {
         filterableTaskIssueTypes={props.taskFilterDetails.incomplete_issue_types}
         description={COPY.VHA_INCOMPLETE_TAB_DESCRIPTION}
         tabName="incomplete"
-        predefinedColumns={{ includeDaysWaiting: true,
-          defaultSortIdx: 3 }} />
+        predefinedColumns={{ includeDaysWaiting: true }} />
     },
     in_progress: {
       label: 'In progress tasks',
@@ -64,8 +63,7 @@ const NonCompTabsUnconnected = (props) => {
         {...(isVhaBusinessLine ? { onHistoryUpdate } : {})}
         filterableTaskTypes={props.taskFilterDetails.in_progress}
         filterableTaskIssueTypes={props.taskFilterDetails.in_progress_issue_types}
-        predefinedColumns={{ includeDaysWaiting: true,
-          defaultSortIdx: 3 }} />
+        predefinedColumns={{ includeDaysWaiting: true }} />
     },
     completed: {
       label: 'Completed tasks',
@@ -77,8 +75,7 @@ const NonCompTabsUnconnected = (props) => {
         filterableTaskTypes={props.taskFilterDetails.completed}
         filterableTaskIssueTypes={props.taskFilterDetails.completed_issue_types}
         description={COPY.QUEUE_PAGE_COMPLETE_LAST_SEVEN_DAYS_TASKS_DESCRIPTION}
-        predefinedColumns={{ includeCompletedDate: true,
-          defaultSortIdx: 3 }} />
+        predefinedColumns={{ includeCompletedDate: true }} />
     }
   };
 

diff --git a/client/app/queue/AssignedCasesPage.jsx b/client/app/queue/AssignedCasesPage.jsx
@@ -18,6 +18,7 @@ import {
 import Alert from '../components/Alert';
 
 import COPY from '../../COPY';
+import { DEFAULT_QUEUE_TABLE_SORT } from './constants';
 
 /**
  * Component showing the cases assigned to a specific attorney referenced by `attorneyId`.
@@ -121,7 +122,8 @@ class AssignedCasesPage extends React.Component {
         includeReaderLink
         includeNewDocsIcon
         tasks={this.props.tasksOfAttorney}
-        userId={attorneyId} />
+        userId={attorneyId}
+        defaultSort={DEFAULT_QUEUE_TABLE_SORT} />
     </React.Fragment>;
   }
 }

diff --git a/client/app/queue/UnassignedCasesPage.jsx b/client/app/queue/UnassignedCasesPage.jsx
@@ -29,6 +29,7 @@ import Alert from '../components/Alert';
 import LoadingContainer from '../components/LoadingContainer';
 import { LOGO_COLORS } from '../constants/AppConstants';
 import { css } from 'glamor';
+import { DEFAULT_QUEUE_TABLE_SORT } from './constants';
 
 const assignSectionStyling = css({ marginTop: '30px' });
 const loadingContainerStyling = css({ marginTop: '-2em' });
@@ -108,6 +109,7 @@ class UnassignedCasesPage extends React.PureComponent {
               includeNewDocsIcon
               tasks={this.props.tasks}
               userId={userId}
+              defaultSort={DEFAULT_QUEUE_TABLE_SORT}
               {...(userIsCamoEmployee ? { preserveQueueFilter: true } : {})}
             />
           }

diff --git a/client/app/queue/components/TaskTable.jsx b/client/app/queue/components/TaskTable.jsx
@@ -113,34 +113,26 @@ export class TaskTableUnconnected extends React.PureComponent {
         this.caseReaderLinkColumn()
       ])), ['order'], ['desc']);
 
-  getDefaultSortableColumn = () => {
-    if (this.props.defaultSortIdx) {
-      return this.props.defaultSortIdx;
+  getDefaultSortHash = () => {
+    if (this.props.defaultSort) {
+      return this.props.defaultSort;
     }
-    const index = _.findIndex(this.getQueueColumns(),
-      (column) => column.header === COPY.CASE_LIST_TABLE_APPEAL_TYPE_COLUMN_TITLE);
-
-    if (index >= 0) {
-      return index;
-    }
-
-    return _.findIndex(this.getQueueColumns(), (column) => column.getSortValue);
   }
 
-  render = () => <QueueTable
-    columns={this.getQueueColumns()}
-    rowObjects={this.props.tasks}
-    getKeyForRow={this.props.getKeyForRow || this.getKeyForRow}
-    defaultSort={{ sortColIdx: this.getDefaultSortableColumn() }}
-    enablePagination
-    onHistoryUpdate={this.props.onHistoryUpdate}
-    preserveFilter={this.props.preserveQueueFilter}
-    rowClassNames={(task) =>
-      this.taskHasDASRecord(task) || !this.props.requireDasRecord ? null : 'usa-input-error'}
-    taskPagesApiEndpoint={this.props.taskPagesApiEndpoint}
-    useTaskPagesApi={this.props.useTaskPagesApi}
-    tabPaginationOptions={this.props.tabPaginationOptions}
-  />;
+    render = () => <QueueTable
+      columns={this.getQueueColumns()}
+      rowObjects={this.props.tasks}
+      getKeyForRow={this.props.getKeyForRow || this.getKeyForRow}
+      defaultSort={this.getDefaultSortHash()}
+      enablePagination
+      onHistoryUpdate={this.props.onHistoryUpdate}
+      preserveFilter={this.props.preserveQueueFilter}
+      rowClassNames={(task) =>
+        (this.taskHasDASRecord(task) || !this.props.requireDasRecord) ? null : 'usa-input-error'}
+      taskPagesApiEndpoint={this.props.taskPagesApiEndpoint}
+      useTaskPagesApi={this.props.useTaskPagesApi}
+      tabPaginationOptions={this.props.tabPaginationOptions}
+    />;
 }
 
 TaskTableUnconnected.propTypes = {
@@ -163,7 +155,10 @@ TaskTableUnconnected.propTypes = {
   includeReaderLink: PropTypes.bool,
   includeNewDocsIcon: PropTypes.bool,
   customColumns: PropTypes.array,
-  defaultSortIdx: PropTypes.number,
+  defaultSort: PropTypes.shape({
+    sortColName: PropTypes.string,
+    sortAscending: PropTypes.bool
+  }),
   getKeyForRow: PropTypes.func,
   taskPagesApiEndpoint: PropTypes.string,
   useTaskPagesApi: PropTypes.bool,

diff --git a/client/app/queue/constants.js b/client/app/queue/constants.js
@@ -11,6 +11,7 @@ import { COLORS as COMMON_COLORS } from '@department-of-veterans-affairs/caseflo
 import COPY from '../../COPY';
 import VACOLS_COLUMN_MAX_LENGTHS from '../../constants/VACOLS_COLUMN_MAX_LENGTHS';
 import LEGACY_APPEAL_TYPES_BY_ID from '../../constants/LEGACY_APPEAL_TYPES_BY_ID';
+import { DEFAULT_SORTING_COLUMN_KEY, DEFAULT_SORTING_DIRECTION_KEY, COLUMNS } from '../../constants/QUEUE_CONFIG';
 
 export const COLORS = {
   QUEUE_LOGO_PRIMARY: '#11598D',
@@ -290,3 +291,9 @@ export const DECISION_SPECIAL_ISSUES = [
     requiresJustification: false
   }
 ];
+
+export const DEFAULT_QUEUE_TABLE_SORT = {
+  [DEFAULT_SORTING_COLUMN_KEY]: COLUMNS.APPEAL_TYPE.name,
+  [DEFAULT_SORTING_DIRECTION_KEY]: true
+};
+