feat(j-s): Enable sort by state in tables (#17845)

* Refactor TagCaseState * Revert sorting functionality * Use courtDate instead of court * Fix type mismatch * Rename interface * Add sort by state to active cases and indictment cases tables * Fix lint * Add sort-by-state for defenders and court users * Use Tag instead of CaseStateTag * Fix tests * Fix tests * Fix lint --------- Co-authored-by: Guðjón Guðjónsson <[email protected]>
island-is · Feb 15, 2025 · a29bf8b · a29bf8b
1 parent b274eca
commit a29bf8b
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 27 deletions.
diff --git a/...cial-system/web/src/components/AccordionItems/RulingAccordionItem/RulingAccordionItem.tsx b/...cial-system/web/src/components/AccordionItems/RulingAccordionItem/RulingAccordionItem.tsx
@@ -3,7 +3,6 @@ import { useIntl } from 'react-intl'
 
 import { AccordionItem, Box, Text } from '@island.is/island-ui/core'
 import { rulingAccordion as m } from '@island.is/judicial-system-web/messages'
-import { CaseDecision } from '@island.is/judicial-system-web/src/graphql/schema'
 import { TempCase as Case } from '@island.is/judicial-system-web/src/types'
 
 import { AccordionListItem, SectionHeading } from '../..'

diff --git a/apps/judicial-system/web/src/components/CaseTitleInfoAndTags/CaseTitleInfoAndTags.tsx b/apps/judicial-system/web/src/components/CaseTitleInfoAndTags/CaseTitleInfoAndTags.tsx
@@ -7,7 +7,6 @@ import { formatDate } from '@island.is/judicial-system/formatters'
 import {
   CaseAppealDecision,
   CaseAppealState,
-  CaseDecision,
   InstitutionType,
   UserRole,
 } from '../../graphql/schema'

diff --git a/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx b/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx
@@ -3,10 +3,7 @@ import { useIntl } from 'react-intl'
 
 import { Text } from '@island.is/island-ui/core'
 import { capitalize } from '@island.is/judicial-system/formatters'
-import {
-  isDistrictCourtUser,
-  isIndictmentCase,
-} from '@island.is/judicial-system/types'
+import { isIndictmentCase } from '@island.is/judicial-system/types'
 import { core, tables } from '@island.is/judicial-system-web/messages'
 import {
   CaseTag,

diff --git a/apps/judicial-system/web/src/components/Table/Table.spec.tsx b/apps/judicial-system/web/src/components/Table/Table.spec.tsx
@@ -3,13 +3,18 @@ import { act, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup'
 
-import { CaseListEntry } from '@island.is/judicial-system-web/src/graphql/schema'
+import {
+  CaseListEntry,
+  CaseState,
+} from '@island.is/judicial-system-web/src/graphql/schema'
 import {
   ApolloProviderWrapper,
   IntlProviderWrapper,
 } from '@island.is/judicial-system-web/src/utils/testHelpers'
 
 import { sortableTableColumn } from '../../types'
+import TagCaseState from '../Tags/TagCaseState/TagCaseState'
+import DefendantInfo from './DefendantInfo/DefendantInfo'
 import Table from './Table'
 
 import '@testing-library/react'
@@ -35,7 +40,8 @@ describe('Table', () => {
 
   const clickButtonByTestId = async (testId: string) => {
     await act(async () => {
-      await user.click(await screen.findByTestId(testId))
+      const testIdElement = await screen.findByTestId(testId)
+      await user.click(testIdElement)
     })
   }
 
@@ -115,18 +121,18 @@ describe('Table', () => {
       },
     ]
 
-    const columns: { cell: (row: CaseListEntry) => JSX.Element }[] =
-      data.flatMap(
-        (dataItem) =>
-          dataItem.defendants?.map((defendant) => ({
-            cell: () => <p>{defendant.name}</p>,
-          })) || [],
-      )
-
     render(
       <IntlProviderWrapper>
         <ApolloProviderWrapper>
-          <Table thead={thead} data={data} columns={columns} />
+          <Table
+            thead={thead}
+            data={data}
+            columns={[
+              {
+                cell: (row) => <DefendantInfo defendants={row.defendants} />,
+              },
+            ]}
+          />
         </ApolloProviderWrapper>
       </IntlProviderWrapper>,
     )
@@ -143,4 +149,50 @@ describe('Table', () => {
     expect(tableRows2[0]).toHaveTextContent('Jon Harring Sr.')
     expect(tableRows2[1]).toHaveTextContent('Bono Stingsson')
   })
+
+  it('should sort by state', async () => {
+    const thead = [
+      {
+        title: 'State',
+        sortBy: 'state' as sortableTableColumn,
+      },
+    ]
+
+    const data: CaseListEntry[] = [
+      {
+        created: '2021-01-01T00:00:00Z',
+        id: faker.datatype.uuid(),
+        state: CaseState.DRAFT,
+      },
+      {
+        created: '2021-01-02T00:00:00Z',
+        id: faker.datatype.uuid(),
+        state: CaseState.SUBMITTED,
+      },
+    ]
+
+    render(
+      <IntlProviderWrapper>
+        <ApolloProviderWrapper>
+          <Table
+            thead={thead}
+            data={data}
+            columns={[{ cell: (row) => <TagCaseState theCase={row} /> }]}
+          />
+        </ApolloProviderWrapper>
+      </IntlProviderWrapper>,
+    )
+
+    await clickButtonByTestId('stateSortButton')
+
+    const tableRows = await screen.findAllByTestId('tableRow')
+    expect(tableRows[0]).toHaveTextContent('Drög')
+    expect(tableRows[1]).toHaveTextContent('Sent')
+
+    await clickButtonByTestId('stateSortButton')
+
+    const tableRows2 = await screen.findAllByTestId('tableRow')
+    expect(tableRows2[0]).toHaveTextContent('Sent')
+    expect(tableRows2[1]).toHaveTextContent('Drög')
+  })
 })
diff --git a/apps/judicial-system/web/src/components/Table/Table.tsx b/apps/judicial-system/web/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode, useContext, useMemo } from 'react'
+import { FC, PropsWithChildren, ReactNode, useMemo } from 'react'
 import { useIntl } from 'react-intl'
 import { useLocalStorage } from 'react-use'
 import parseISO from 'date-fns/parseISO'
@@ -24,6 +24,7 @@ import { useCase, useCaseList, useViewport } from '../../utils/hooks'
 import { compareLocaleIS } from '../../utils/sortHelper'
 import ContextMenu, { ContextMenuItem } from '../ContextMenu/ContextMenu'
 import IconButton from '../IconButton/IconButton'
+import { mapCaseStateToTagVariant } from '../Tags/TagCaseState/TagCaseState'
 import DurationDate, { getDurationDate } from './DurationDate/DurationDate'
 import SortButton from './SortButton/SortButton'
 import TableSkeleton from './TableSkeleton/TableSkeleton'
@@ -178,6 +179,8 @@ const Table: FC<TableProps> = (props) => {
         return courtAbbreviation
           ? `${courtAbbreviation}: ${entry.courtCaseNumber}`
           : entry.courtCaseNumber ?? ''
+      case 'state':
+        return mapCaseStateToTagVariant(formatMessage, entry).text
       default:
         return entry[column]?.toString() ?? ''
     }

diff --git a/...cial-system/web/src/routes/Court/components/CasesInProgressTable/CasesInProgressTable.tsx b/...cial-system/web/src/routes/Court/components/CasesInProgressTable/CasesInProgressTable.tsx
@@ -119,7 +119,7 @@ const CasesInProgressTable: FC<CasesInProgressTableProps> = (props) => {
                   title: capitalize(formatMessage(tables.sentToCourtDate)),
                   sortBy: 'caseSentToCourtDate',
                 },
-                { title: formatMessage(tables.state) },
+                { title: formatMessage(tables.state), sortBy: 'state' },
                 {
                   title: formatMessage(tables.hearingArrangementDate),
                   sortBy: 'courtDate',

diff --git a/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.tsx b/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.tsx
@@ -60,7 +60,7 @@ export const DefenderCasesTable: FC<Props> = ({
             title: formatMessage(tables.sentToCourtDate),
             sortBy: 'caseSentToCourtDate',
           },
-          { title: formatMessage(tables.state) },
+          { title: formatMessage(tables.state), sortBy: 'state' },
           {
             title: formatMessage(
               showingCompletedCases

diff --git a/...s/Prosecutor/components/CasesAwaitingConfirmationTable/CasesAwaitingConfirmationTable.tsx b/...s/Prosecutor/components/CasesAwaitingConfirmationTable/CasesAwaitingConfirmationTable.tsx
@@ -24,10 +24,7 @@ import Table, {
   TableWrapper,
 } from '@island.is/judicial-system-web/src/components/Table/Table'
 import TableInfoContainer from '@island.is/judicial-system-web/src/components/Table/TableInfoContainer/TableInfoContainer'
-import {
-  CaseListEntry,
-  CaseState,
-} from '@island.is/judicial-system-web/src/graphql/schema'
+import { CaseListEntry } from '@island.is/judicial-system-web/src/graphql/schema'
 
 import { strings } from './CasesAwaitingConfirmationTable.strings'
 

diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.tsx b/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.tsx
@@ -47,7 +47,7 @@ const ActiveCases: FC<Props> = (props) => {
           title: capitalize(formatMessage(tables.sentToCourtDate)),
           sortBy: 'caseSentToCourtDate',
         },
-        { title: formatMessage(tables.state) },
+        { title: formatMessage(tables.state), sortBy: 'state' },
         {
           title: formatMessage(tables.hearingArrangementDate),
           sortBy: 'courtDate',

diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.tsx b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.tsx
@@ -30,13 +30,11 @@ import {
 import { PastCasesTable } from '@island.is/judicial-system-web/src/components/Table'
 import { TableWrapper } from '@island.is/judicial-system-web/src/components/Table/Table'
 import {
-  CaseDecision,
   CaseIndictmentRulingDecision,
   CaseListEntry,
   CaseState,
   CaseTransition,
   EventType,
-  IndictmentDecision,
   User,
   UserRole,
 } from '@island.is/judicial-system-web/src/graphql/schema'