From 23f7da2b1d8e229780c7faaa4f42ced11142dad2 Mon Sep 17 00:00:00 2001 From: Nechama Krigsman Date: Wed, 6 Nov 2024 16:15:13 -0500 Subject: [PATCH 01/18] 10525: WIP use SortableHeader for DocketRecord table; --- .../src/views/DocketRecord/DocketRecord.tsx | 106 +++++++++++++++++- 1 file changed, 103 insertions(+), 3 deletions(-) diff --git a/web-client/src/views/DocketRecord/DocketRecord.tsx b/web-client/src/views/DocketRecord/DocketRecord.tsx index 478f3043fcb..e49073a594b 100644 --- a/web-client/src/views/DocketRecord/DocketRecord.tsx +++ b/web-client/src/views/DocketRecord/DocketRecord.tsx @@ -1,3 +1,4 @@ +import { ASCENDING } from '@shared/business/entities/EntityConstants'; import { Button } from '../../ustc-ui/Button/Button'; import { DocketRecordHeader } from './DocketRecordHeader'; import { DocketRecordOverlay } from './DocketRecordOverlay'; @@ -5,8 +6,13 @@ import { FilingsAndProceedings } from '../DocketRecord/FilingsAndProceedings'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { NonPhone, Phone } from '@web-client/ustc-ui/Responsive/Responsive'; import { SealDocketEntryModal } from './SealDocketEntryModal'; +import { SortableColumn } from '@web-client/ustc-ui/Table/SortableColumn'; import { UnsealDocketEntryModal } from './UnsealDocketEntryModal'; import { connect } from '@web-client/presenter/shared.cerebral'; +import { + getAscendingTextForSortType, + getDescendingTextForSortType, +} from '@web-client/views/Messages/MessageColumns'; // pull out to shared place import { sequences } from '@web-client/presenter/app.cerebral'; import { state } from '@web-client/presenter/app.cerebral'; import React, { useEffect, useRef } from 'react'; @@ -84,13 +90,22 @@ export const DocketRecord = connect( /> )} - + {columns.map(column => { + return ( + + ); + })} + {/* Number - Filed Date + Event Filings and Proceedings @@ -98,7 +113,7 @@ export const DocketRecord = connect( Filed By Action Served - Parties + Parties */} {docketRecordHelper.showEditOrSealDocketRecordEntry && (   )} @@ -287,3 +302,88 @@ export const DocketRecord = connect( ); DocketRecord.displayName = 'DocketRecord'; + +function SortableHeader({ sortField, sortType, title }) { + return ( + + console.log('clicked sort')} + /> + + ); +} + +const columns = [ + { + columnName: 'No.', + sortFieldInfo: { + sortField: 'index', + sortType: 'number', + }, + }, + { + columnName: 'FiledDate', + sortFieldInfo: { + sortField: 'createdAtFormatted', + sortType: 'string', + }, + }, + { + columnName: 'Event', + sortFieldInfo: { + sortField: 'eventCode', + sortType: 'string', + }, + }, + { + columnName: 'Filings and Proceedings', + sortFieldInfo: { + sortField: 'descriptionDisplay', + sortType: 'string', + }, + }, + { + columnName: 'Pages', + sortFieldInfo: { + sortField: 'numberOfPages', + sortType: 'string', + }, + }, + { + columnName: 'Filed By', + sortFieldInfo: { + sortField: 'filedBy', + sortType: 'string', + }, + }, + { + columnName: 'Action', + sortFieldInfo: { + sortField: 'action', + sortType: 'string', + }, + }, + { + columnName: 'Served', + sortFieldInfo: { + sortField: '', // either showNotServed or showServed + sortType: 'string', // either a date or string + }, + }, + { + columnName: 'Parties', + sortFieldInfo: { + sortField: 'servedPartiesCode', + sortType: 'string', + }, + }, +]; From eafd6244c3db63b77aec07551bca9c3252b087e4 Mon Sep 17 00:00:00 2001 From: John Cruz Date: Thu, 7 Nov 2024 10:48:02 -0700 Subject: [PATCH 02/18] 10525: Update state with correct sort table information; --- .../src/views/DocketRecord/DocketRecord.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/web-client/src/views/DocketRecord/DocketRecord.tsx b/web-client/src/views/DocketRecord/DocketRecord.tsx index e49073a594b..4ea885498b5 100644 --- a/web-client/src/views/DocketRecord/DocketRecord.tsx +++ b/web-client/src/views/DocketRecord/DocketRecord.tsx @@ -30,6 +30,8 @@ export const DocketRecord = connect( setSelectedDocumentsForDownloadSequence: sequences.setSelectedDocumentsForDownloadSequence, showModal: state.modal.showModal, + sortTableSequence: sequences.sortTableSequence, + tableSort: state.tableSort, }, function DocketRecord({ @@ -39,6 +41,8 @@ export const DocketRecord = connect( openUnsealDocketEntryModalSequence, setSelectedDocumentsForDownloadSequence, showModal, + sortTableSequence, + tableSort, }) { const selectAllCheckboxRef = useRef(null); @@ -93,9 +97,12 @@ export const DocketRecord = connect( {columns.map(column => { return ( ); })} @@ -303,20 +310,25 @@ export const DocketRecord = connect( DocketRecord.displayName = 'DocketRecord'; -function SortableHeader({ sortField, sortType, title }) { +function SortableHeader({ + onClickSequence, + sortField, + sortType, + tableSort, + title, +}) { return ( console.log('clicked sort')} + onClickSequence={onClickSequence} /> ); From cfecd8123ec6a07d5ffcd71a6581b3c18d4d4f99 Mon Sep 17 00:00:00 2001 From: Nechama Krigsman Date: Thu, 7 Nov 2024 16:01:42 -0500 Subject: [PATCH 03/18] 10525: WIP sort docket record table; --- .../src/business/entities/EntityConstants.ts | 13 +- .../actions/clearSortTableFiltersAction.ts | 6 + .../computeds/formattedDocketEntries.ts | 42 ++-- .../sequences/gotoCaseDetailSequence.ts | 2 + .../src/ustc-ui/Table/SortableColumn.tsx | 23 +- .../src/views/DocketRecord/DocketRecord.tsx | 203 +++++++++--------- .../views/DocketRecord/DocketRecordHeader.tsx | 62 +++--- .../src/views/Messages/MessageColumns.ts | 21 -- .../src/views/Messages/MessageTable.tsx | 12 +- 9 files changed, 206 insertions(+), 178 deletions(-) create mode 100644 web-client/src/presenter/actions/clearSortTableFiltersAction.ts diff --git a/shared/src/business/entities/EntityConstants.ts b/shared/src/business/entities/EntityConstants.ts index b78f7960772..d649cca84eb 100644 --- a/shared/src/business/entities/EntityConstants.ts +++ b/shared/src/business/entities/EntityConstants.ts @@ -1639,10 +1639,15 @@ export const DOCKET_ENTRY_SEALED_TO_TYPES = { export const ASCENDING: 'asc' = 'asc'; export const DESCENDING: 'desc' = 'desc'; -export const CHRONOLOGICALLY_ASCENDING = 'Oldest to newest'; -export const CHRONOLOGICALLY_DESCENDING = 'Newest to oldest'; -export const ALPHABETICALLY_ASCENDING = 'In A-Z ascending order'; -export const ALPHABETICALLY_DESCENDING = 'In Z-A descending order'; +export const SORT_ASCENDING_TEXT = { + date: 'Oldest to newest', + string: 'In A-Z ascending order', +}; + +export const SORT_DESCENDING_TEXT = { + date: 'Newest to oldest', + string: 'In Z-A descending order', +}; export const PRACTITIONER_DOCUMENT_TYPES_MAP = { APPLICATION_PACKAGE: 'Application Package', diff --git a/web-client/src/presenter/actions/clearSortTableFiltersAction.ts b/web-client/src/presenter/actions/clearSortTableFiltersAction.ts new file mode 100644 index 00000000000..4ccacdff069 --- /dev/null +++ b/web-client/src/presenter/actions/clearSortTableFiltersAction.ts @@ -0,0 +1,6 @@ +import { state } from '@web-client/presenter/app.cerebral'; + +export const clearSortTableFiltersAction = ({ store }: ActionProps) => { + store.unset(state.tableSort.sortField); + store.unset(state.tableSort.sortOrder); +}; diff --git a/web-client/src/presenter/computeds/formattedDocketEntries.ts b/web-client/src/presenter/computeds/formattedDocketEntries.ts index cd44210db60..0dd0b02034f 100644 --- a/web-client/src/presenter/computeds/formattedDocketEntries.ts +++ b/web-client/src/presenter/computeds/formattedDocketEntries.ts @@ -3,13 +3,9 @@ import { ClientApplicationContext } from '@web-client/applicationContext'; import { DocketEntry } from '@shared/business/entities/DocketEntry'; import { Get } from 'cerebral'; import { computeIsNotServedDocument } from '@shared/business/utilities/getFormattedCaseDetail'; +import { sortBy } from 'lodash'; import { state } from '@web-client/presenter/app.cerebral'; -type DocketEntriesSelectionType = (RawDocketEntry & { - createdAtFormatted: string; - isDocumentSelected?: boolean; -})[]; - export const isSelectableForDownload = (entry: RawDocketEntry) => { return ( !DocketEntry.isMinuteEntry(entry) && @@ -210,12 +206,16 @@ export const formattedDocketEntries = ( const caseDetail = get(state.caseDetail); const { docketNumber } = caseDetail; let docketRecordSort; - const { formatCase, sortDocketEntries } = applicationContext.getUtilities(); + const { formatCase } = applicationContext.getUtilities(); if (docketNumber) { docketRecordSort = get( state.sessionMetadata.docketRecordSort[docketNumber], ); } + + const docketRecordSortField = get(state.tableSort.sortField); + const docketRecordSortOrder = get(state.tableSort.sortOrder); + const DOCUMENT_VISIBILITY_POLICY_CHANGE_DATE = get( state.featureFlags[ ALLOWLIST_FEATURE_FLAGS.DOCUMENT_VISIBILITY_POLICY_CHANGE_DATE.key @@ -235,12 +235,7 @@ export const formattedDocketEntries = ( docketRecordFilter, }); - let docketEntriesFormatted: DocketEntriesSelectionType = sortDocketEntries( - result.formattedDocketEntries, - docketRecordSort, - ); - - docketEntriesFormatted = docketEntriesFormatted + let docketEntriesFormatted = result.formattedDocketEntries .map(entry => getFormattedDocketEntry({ applicationContext, @@ -262,6 +257,12 @@ export const formattedDocketEntries = ( }; }); + docketEntriesFormatted = sortDocketEntries( + docketEntriesFormatted, + docketRecordSortField, + docketRecordSortOrder, + ); + const selectableDocumentsCount = docketEntriesFormatted.filter(entry => isSelectableForDownload(entry), ).length; @@ -309,3 +310,20 @@ export const formattedDocketEntries = ( result.docketRecordSort = docketRecordSort; return result; }; + +function sortDocketEntries( + docketEntries: (RawDocketEntry & { + createdAtFormatted: string | undefined; + })[] = [], + docketRecordSortField, + docketRecordSortOrder, +) { + if (!docketRecordSortField || !docketRecordSortOrder) return docketEntries; + const sortedDocketEntries = sortBy(docketEntries, [docketRecordSortField]); + + if (docketRecordSortOrder === 'desc') { + return sortedDocketEntries.reverse(); + } + + return sortedDocketEntries; +} diff --git a/web-client/src/presenter/sequences/gotoCaseDetailSequence.ts b/web-client/src/presenter/sequences/gotoCaseDetailSequence.ts index 7e334d99046..e82929fb897 100644 --- a/web-client/src/presenter/sequences/gotoCaseDetailSequence.ts +++ b/web-client/src/presenter/sequences/gotoCaseDetailSequence.ts @@ -2,6 +2,7 @@ import { clearDocumentsSelectedForDownload } from '@web-client/presenter/actions import { clearFormAction } from '../actions/clearFormAction'; import { clearModalAction } from '../actions/clearModalAction'; import { clearScreenMetadataAction } from '../actions/clearScreenMetadataAction'; +import { clearSortTableFiltersAction } from '@web-client/presenter/actions/clearSortTableFiltersAction'; import { closeMobileMenuAction } from '../actions/closeMobileMenuAction'; import { fetchUserNotificationsSequence } from './fetchUserNotificationsSequence'; import { getCaseAction } from '../actions/getCaseAction'; @@ -79,6 +80,7 @@ export const gotoCaseDetailSequence = [ clearDocumentsSelectedForDownload, clearFormAction, clearModalAction, + clearSortTableFiltersAction, closeMobileMenuAction, setDefaultCaseDetailTabAction, setIsPrimaryTabAction, diff --git a/web-client/src/ustc-ui/Table/SortableColumn.tsx b/web-client/src/ustc-ui/Table/SortableColumn.tsx index fe79fa39ba5..12ac6789b75 100644 --- a/web-client/src/ustc-ui/Table/SortableColumn.tsx +++ b/web-client/src/ustc-ui/Table/SortableColumn.tsx @@ -7,19 +7,22 @@ import classNames from 'classnames'; const { ASCENDING, DESCENDING } = getConstants(); export const SortableColumn = ({ - ascText = 'in ascending order', + ascText = 'In ascending order', + className, currentlySortedField, currentlySortedOrder, defaultSortOrder = 'desc', - descText = 'in descending order', + descText = 'In descending order', hasRows, onClickSequence, + screenReaderTitle, sortField, title, ...props }: { ascText: string; defaultSortOrder?: 'asc' | 'desc'; + className?: string; currentlySortedField: string; descText: string; hasRows: boolean; @@ -27,6 +30,7 @@ export const SortableColumn = ({ sortField: string; sortOrder: 'asc' | 'desc'; }) => void; + screenReaderTitle?: string; sortField: string; title: string; currentlySortedOrder: 'asc' | 'desc'; @@ -40,6 +44,7 @@ export const SortableColumn = ({ } else { sortOrder = defaultSortOrder; } + Number; return (