From 5c2d50cc379f7fc018a7ec968bf524ee67dfcee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dvar=20Oddsson?= <ivaroddsson@gmail.com>
Date: Mon, 6 Jan 2025 23:00:36 +0000
Subject: [PATCH] Move defender table to new table component

---
 .../web/src/routes/Defender/Cases/Cases.tsx   |   8 +-
 .../components/DefenderCasesTable.css.ts      |  91 -----
 .../Cases/components/DefenderCasesTable.tsx   | 318 ++++++------------
 3 files changed, 107 insertions(+), 310 deletions(-)
 delete mode 100644 apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.css.ts

diff --git a/apps/judicial-system/web/src/routes/Defender/Cases/Cases.tsx b/apps/judicial-system/web/src/routes/Defender/Cases/Cases.tsx
index ec6cdd737dd3..345f67185d56 100644
--- a/apps/judicial-system/web/src/routes/Defender/Cases/Cases.tsx
+++ b/apps/judicial-system/web/src/routes/Defender/Cases/Cases.tsx
@@ -18,7 +18,7 @@ import { useDefenderCasesQuery } from './defenderCases.generated'
 import { defenderCases as m } from './Cases.strings'
 import * as styles from './Cases.css'
 
-export const Cases: FC<unknown> = () => {
+export const Cases: FC = () => {
   const { formatMessage } = useIntl()
 
   const availableTabs = ['active', 'completed']
@@ -114,10 +114,7 @@ export const Cases: FC<unknown> = () => {
                       filters={filters}
                       toggleFilter={toggleFilters}
                     />
-                    <DefenderCasesTable
-                      cases={activeFilteredCases}
-                      loading={loading}
-                    />
+                    <DefenderCasesTable cases={activeFilteredCases} />
                   </Box>
                 ) : (
                   <Box className={styles.infoContainer} marginTop={3}>
@@ -144,7 +141,6 @@ export const Cases: FC<unknown> = () => {
                     <DefenderCasesTable
                       cases={completedFilteredCases}
                       showingCompletedCases={true}
-                      loading={loading}
                     />
                   </Box>
                 ) : (
diff --git a/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.css.ts b/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.css.ts
deleted file mode 100644
index e9b9cd71071f..000000000000
--- a/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.css.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-import { theme } from '@island.is/island-ui/theme'
-
-export const blockColumn = style({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-})
-
-export const table = style({
-  borderSpacing: 0,
-  borderCollapse: 'collapse',
-  overflow: 'hidden',
-
-  // Needed for Safari.
-  width: '100%',
-})
-
-export const thead = style({
-  background: theme.color.blue100,
-  textAlign: 'left',
-})
-
-export const thButton = style({
-  outline: 'none',
-
-  ':active': {
-    color: theme.color.dark400,
-  },
-})
-
-export const th = style({
-  padding: `${theme.spacing[2]}px ${theme.spacing[3]}px`,
-})
-
-export const td = style({
-  padding: `${theme.spacing[2]}px ${theme.spacing[3]}px`,
-  selectors: {
-    '&.secondLast': {
-      marginLeft: 'auto',
-      height: '100%',
-      padding: 0,
-    },
-  },
-})
-
-export const tableRowContainer = style({
-  borderBottom: `1px solid ${theme.color.blue200}`,
-  cursor: 'pointer',
-})
-
-export const largeColumn = style({
-  '@media': {
-    [`screen and (min-width: ${theme.breakpoints.xl}px)`]: {
-      // The width needed to make sure a 33 character name doesn't wrap
-      maxWidth: 334,
-      whiteSpace: 'nowrap',
-    },
-  },
-})
-export const sortIcon = style({
-  opacity: 0.4,
-  transition: 'opacity .2s ease-in-out',
-
-  selectors: {
-    [`${thButton}:hover &`]: {
-      opacity: 1,
-    },
-  },
-})
-
-export const sortCreatedAsc = style({
-  opacity: 1,
-  transform: 'rotate(180deg)',
-})
-
-export const sortCreatedDes = style({
-  opacity: 1,
-  transform: 'rotate(0deg)',
-})
-
-export const sortAccusedNameAsc = style({
-  opacity: 1,
-  transform: 'rotate(0deg)',
-})
-
-export const sortAccusedNameDes = style({
-  opacity: 1,
-  transform: 'rotate(180deg)',
-})
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
index be8edb2ecdd4..a95606e3c1a0 100644
--- a/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.tsx
+++ b/apps/judicial-system/web/src/routes/Defender/Cases/components/DefenderCasesTable.tsx
@@ -1,20 +1,15 @@
 import { FC } from 'react'
 import { useIntl } from 'react-intl'
-import cn from 'classnames'
-import { AnimatePresence } from 'framer-motion'
 
 import { Box, Text } from '@island.is/island-ui/core'
 import { capitalize } from '@island.is/judicial-system/formatters'
 import { core, tables } from '@island.is/judicial-system-web/messages'
 import {
-  ContextMenu,
   TagAppealState,
   TagCaseState,
   useWithdrawAppealMenuOption,
   WithdrawAppealContextMenuModal,
 } from '@island.is/judicial-system-web/src/components'
-import { contextMenu } from '@island.is/judicial-system-web/src/components/ContextMenu/ContextMenu.strings'
-import IconButton from '@island.is/judicial-system-web/src/components/IconButton/IconButton'
 import {
   ColumnCaseType,
   CourtCaseNumber,
@@ -22,57 +17,23 @@ import {
   CreatedDate,
   DefendantInfo,
   getDurationDate,
-  SortButton,
-  TableSkeleton,
 } from '@island.is/judicial-system-web/src/components/Table'
-import {
-  CaseListEntry,
-  Defendant,
-} from '@island.is/judicial-system-web/src/graphql/schema'
-import {
-  useCaseList,
-  useSort,
-} from '@island.is/judicial-system-web/src/utils/hooks'
+import { CaseListEntry } from '@island.is/judicial-system-web/src/graphql/schema'
 
-import * as styles from './DefenderCasesTable.css'
+import Table from '@island.is/judicial-system-web/src/components/Table/Table'
+import { useContextMenu } from '@island.is/judicial-system-web/src/components/ContextMenu/ContextMenu'
 
 interface Props {
   cases: CaseListEntry[]
   showingCompletedCases?: boolean
-  loading?: boolean
 }
 
 export const DefenderCasesTable: FC<Props> = ({
   cases,
   showingCompletedCases,
-  loading,
 }) => {
   const { formatMessage } = useIntl()
-
-  const getColumnValue = (
-    entry: CaseListEntry,
-    column: keyof CaseListEntry,
-  ) => {
-    if (
-      column === 'defendants' &&
-      entry.defendants &&
-      entry.defendants.length > 0
-    ) {
-      return entry.defendants[0].name ?? ''
-    }
-    if (column === 'courtDate') {
-      return entry.courtDate
-    }
-    return entry.created
-  }
-  const { sortedData, requestSort, getClassNamesFor, isActiveColumn } = useSort(
-    'created',
-    'descending',
-    cases,
-    getColumnValue,
-  )
-  const { isOpeningCaseId, LoadingIndicator, showLoading, handleOpenCase } =
-    useCaseList()
+  const { openCaseInNewTabMenuItem } = useContextMenu()
 
   const {
     withdrawAppealMenuOption,
@@ -82,180 +43,111 @@ export const DefenderCasesTable: FC<Props> = ({
   } = useWithdrawAppealMenuOption()
 
   return (
-    <Box marginBottom={7}>
-      {loading ? (
-        <TableSkeleton />
-      ) : (
-        <table className={styles.table}>
-          <thead className={styles.thead}>
-            <tr>
-              <th className={styles.th}>
-                <Text as="span" fontWeight="regular">
-                  {formatMessage(tables.caseNumber)}
-                </Text>
-              </th>
-              <th className={cn(styles.th, styles.largeColumn)}>
-                <SortButton
-                  title={capitalize(
-                    formatMessage(core.defendant, { suffix: 'i' }),
-                  )}
-                  onClick={() => requestSort('defendants')}
-                  sortAsc={getClassNamesFor('defendants') === 'ascending'}
-                  sortDes={getClassNamesFor('defendants') === 'descending'}
-                  isActive={isActiveColumn('defendants')}
-                  dataTestid="accusedNameSortButton"
-                />
-              </th>
-              <th className={styles.th}>
-                <Text as="span" fontWeight="regular">
-                  {formatMessage(tables.type)}
-                </Text>
-              </th>
-              <th className={styles.th}>
-                <SortButton
-                  title={capitalize(
-                    formatMessage(tables.created, { suffix: 'i' }),
-                  )}
-                  onClick={() => requestSort('created')}
-                  sortAsc={getClassNamesFor('created') === 'ascending'}
-                  sortDes={getClassNamesFor('created') === 'descending'}
-                  isActive={isActiveColumn('created')}
-                />
-              </th>
-              <th className={cn(styles.th, styles.largeColumn)}>
-                <Text as="span" fontWeight="regular">
-                  {formatMessage(tables.state)}
-                </Text>
-              </th>
-              {showingCompletedCases ? (
-                <th>
-                  <Text fontWeight="regular">
-                    {formatMessage(tables.duration)}
-                  </Text>
-                </th>
-              ) : (
-                <th>
-                  <SortButton
-                    title={formatMessage(tables.hearingArrangementDate)}
-                    onClick={() => requestSort('courtDate')}
-                    sortAsc={getClassNamesFor('courtDate') === 'ascending'}
-                    sortDes={getClassNamesFor('courtDate') === 'descending'}
-                    isActive={isActiveColumn('courtDate')}
-                  />
-                </th>
-              )}
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {sortedData?.map((column: CaseListEntry) => (
-              <tr
-                className={cn(styles.tableRowContainer)}
-                key={column.id}
-                onClick={() => handleOpenCase(column.id)}
-              >
-                <td className={styles.td}>
-                  <CourtCaseNumber
-                    courtCaseNumber={column.courtCaseNumber}
-                    policeCaseNumbers={column.policeCaseNumbers}
-                    appealCaseNumber={column.appealCaseNumber}
-                  />
-                </td>
-                <td className={cn(styles.td)}>
-                  <DefendantInfo defendants={column.defendants} />
-                </td>
-                <td className={styles.td}>
-                  <ColumnCaseType
-                    type={column.type}
-                    decision={column.decision}
-                    parentCaseId={column.parentCaseId}
+    <Box>
+      <Table
+        thead={[
+          {
+            title: formatMessage(tables.caseNumber),
+          },
+          {
+            title: capitalize(formatMessage(core.defendant, { suffix: 'i' })),
+            sortable: { isSortable: true, key: 'defendants' },
+          },
+          {
+            title: formatMessage(tables.type),
+          },
+          {
+            title: formatMessage(tables.created),
+            sortable: { isSortable: true, key: 'created' },
+          },
+          { title: formatMessage(tables.state) },
+          {
+            title: formatMessage(
+              showingCompletedCases
+                ? tables.duration
+                : tables.hearingArrangementDate,
+            ),
+            sortable: showingCompletedCases
+              ? undefined
+              : { isSortable: true, key: 'courtDate' },
+          },
+        ]}
+        data={cases}
+        generateContextMenuItems={(row) => [
+          openCaseInNewTabMenuItem(row.id),
+          ...(shouldDisplayWithdrawAppealOption(row)
+            ? [withdrawAppealMenuOption(row.id)]
+            : []),
+        ]}
+        columns={[
+          {
+            cell: (row) => (
+              <CourtCaseNumber
+                courtCaseNumber={row.courtCaseNumber ?? ''}
+                policeCaseNumbers={row.policeCaseNumbers ?? []}
+                appealCaseNumber={row.appealCaseNumber ?? ''}
+              />
+            ),
+          },
+          {
+            cell: (row) => <DefendantInfo defendants={row.defendants} />,
+          },
+          {
+            cell: (row) => (
+              <ColumnCaseType
+                type={row.type}
+                decision={row.decision}
+                parentCaseId={row.parentCaseId}
+              />
+            ),
+          },
+          { cell: (row) => <CreatedDate created={row.created} /> },
+          {
+            cell: (row) => (
+              <>
+                <Box display="flex" columnGap={1} rowGap={1} flexWrap="wrap">
+                  <TagCaseState
+                    caseState={row.state}
+                    caseType={row.type}
+                    isValidToDateInThePast={row.isValidToDateInThePast}
+                    courtDate={row.courtDate}
+                    indictmentDecision={row.indictmentDecision}
+                    indictmentRulingDecision={row.indictmentRulingDecision}
+                    defendants={row.defendants}
                   />
-                </td>
-                <td className={cn(styles.td)}>
-                  <CreatedDate created={column.created} />
-                </td>
-                <td className={styles.td} data-testid="tdTag">
-                  <Box
-                    marginRight={column.appealState ? 1 : 0}
-                    marginBottom={column.appealState ? 1 : 0}
-                  >
-                    <TagCaseState
-                      caseState={column.state}
-                      caseType={column.type}
-                      isValidToDateInThePast={column.isValidToDateInThePast}
-                      courtDate={column.courtDate}
-                      indictmentDecision={column.indictmentDecision}
-                      indictmentRulingDecision={column.indictmentRulingDecision}
-                      defendants={column.defendants}
-                    />
-                  </Box>
-                  {column.appealState && (
+                  {row.appealState && (
                     <TagAppealState
-                      appealState={column.appealState}
-                      appealRulingDecision={column.appealRulingDecision}
+                      appealState={row.appealState}
+                      appealRulingDecision={row.appealRulingDecision}
                     />
                   )}
-                </td>
-                {showingCompletedCases ? (
-                  <td className={styles.td}>
-                    <Text>
-                      {getDurationDate(
-                        column.state,
-                        column.validToDate,
-                        column.initialRulingDate,
-                        column.rulingDate,
-                      )}
-                    </Text>
-                  </td>
-                ) : (
-                  <td className={styles.td}>
-                    <CourtDate
-                      courtDate={column.courtDate}
-                      postponedIndefinitelyExplanation={
-                        column.postponedIndefinitelyExplanation
-                      }
-                      courtSessionType={column.courtSessionType}
-                    />
-                  </td>
-                )}
-                <td>
-                  <AnimatePresence>
-                    {isOpeningCaseId === column.id && showLoading ? (
-                      <LoadingIndicator />
-                    ) : (
-                      <Box>
-                        <ContextMenu
-                          items={[
-                            {
-                              title: formatMessage(contextMenu.openInNewTab),
-                              onClick: () => handleOpenCase(column.id, true),
-                              icon: 'open',
-                            },
-                            ...(shouldDisplayWithdrawAppealOption(column)
-                              ? [withdrawAppealMenuOption(column.id)]
-                              : []),
-                          ]}
-                          menuLabel="Opna valmöguleika á máli"
-                          disclosure={
-                            <IconButton
-                              icon="ellipsisVertical"
-                              colorScheme="transparent"
-                              onClick={(evt) => {
-                                evt.stopPropagation()
-                              }}
-                              disabled={false}
-                            />
-                          }
-                        />
-                      </Box>
-                    )}
-                  </AnimatePresence>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
+                </Box>
+              </>
+            ),
+          },
+          {
+            cell: (row) =>
+              showingCompletedCases ? (
+                <Text>
+                  {getDurationDate(
+                    row.state,
+                    row.validToDate,
+                    row.initialRulingDate,
+                    row.rulingDate,
+                  )}
+                </Text>
+              ) : (
+                <CourtDate
+                  courtDate={row.courtDate}
+                  postponedIndefinitelyExplanation={
+                    row.postponedIndefinitelyExplanation
+                  }
+                  courtSessionType={row.courtSessionType}
+                />
+              ),
+          },
+        ]}
+      />
       {caseToWithdraw && (
         <WithdrawAppealContextMenuModal
           caseId={caseToWithdraw}