diff --git a/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts b/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts
new file mode 100644
index 0000000000..b36e954918
--- /dev/null
+++ b/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts
@@ -0,0 +1,41 @@
+import { openSideWindowReportingList } from './utils'
+import { SeaFrontGroup } from '../../../../src/domain/entities/seaFront/constants'
+
+context('Side Window > Reporting List > Table', () => {
+ beforeEach(() => {
+ openSideWindowReportingList()
+
+ cy.getDataCy(`side-window-sub-menu-${SeaFrontGroup.NAMO}`).click()
+ })
+
+ it('Should sort reportings by title', () => {
+ // TODO Make a cypress helper to handle semantically-correct tables (via both `
` and roles).
+ const getTitleColumnHeader = () => cy.get('[role="columnheader"]').contains('Titre')
+
+ getTitleColumnHeader().click()
+
+ getTitleColumnHeader().parent().find('svg').should('be.visible')
+ cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]').first().contains('3 milles - Chaluts')
+
+ getTitleColumnHeader().click()
+
+ getTitleColumnHeader().parent().find('svg').should('be.visible')
+ cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]')
+ .first()
+ .contains('Suspicion de chalutage dans les 3 milles')
+ })
+
+ it('Should sort reportings by NATINF', () => {
+ const getNatinfColumnHeader = () => cy.get('[role="columnheader"]').contains('NATINF')
+
+ getNatinfColumnHeader().click()
+
+ getNatinfColumnHeader().parent().find('svg').should('be.visible')
+ cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]').first().contains('7059')
+
+ getNatinfColumnHeader().click()
+
+ getNatinfColumnHeader().parent().find('svg').should('be.visible')
+ cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]').first().contains('27689')
+ })
+})
diff --git a/frontend/cypress/e2e/side_window/reporting_list/utils.ts b/frontend/cypress/e2e/side_window/reporting_list/utils.ts
new file mode 100644
index 0000000000..e7617e661c
--- /dev/null
+++ b/frontend/cypress/e2e/side_window/reporting_list/utils.ts
@@ -0,0 +1,12 @@
+export const openSideWindowReportingList = () => {
+ cy.visit('/side_window')
+
+ cy.wait(500)
+
+ if (document.querySelector('[data-cy="first-loader"]')) {
+ cy.getDataCy('first-loader').should('not.be.visible')
+ }
+ cy.getDataCy('side-window-reporting-tab').click()
+
+ cy.wait(500)
+}
diff --git a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
index 9eb9d3ed76..c437e3f5b4 100644
--- a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
+++ b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
@@ -14,14 +14,14 @@ export const REPORTING_LIST_TABLE_OPTIONS: TableOptions
-
+
toggleTableCheckForId(reporting.id)}
/>
- |
-
+
+
{timeago.format(reporting.validationDate || reporting.creationDate, 'fr')}
- |
-
+
+
{getReportingOrigin(reporting)}
- |
-
+
+
{getReportingTitle(reporting)}
- |
-
- {reporting.value.natinfCode}
-
-
+
+ {reporting.value.natinfCode} |
+
{reporting.vesselName}
- |
- {reporting.value.dml}
-
+
+ {reporting.value.dml} |
+
{reporting.underCharter && Navire sous charte}
- |
+
-
+
- |
-
+
+
edit(editingIsDisabled, reporting)}
title="Editer le signalement"
/>
- |
+
)
@@ -251,6 +243,10 @@ MMSI: ${reporting.mmsi || ''}`
)
}
+const Cell = styled(FlexboxGrid.Item).attrs(() => ({
+ role: 'row'
+}))``
+
const UnderCharter = styled.div`
background: ${p => p.theme.color.mediumSeaGreen} 0% 0% no-repeat padding-box;
padding: 2px 8px;
diff --git a/frontend/src/features/SideWindow/AlertListAndReportingList/index.tsx b/frontend/src/features/SideWindow/AlertListAndReportingList/index.tsx
index 219c459e5e..74115d36d7 100644
--- a/frontend/src/features/SideWindow/AlertListAndReportingList/index.tsx
+++ b/frontend/src/features/SideWindow/AlertListAndReportingList/index.tsx
@@ -99,6 +99,7 @@ const Wrapper = styled.div`
overflow: auto;
`
+// TODO This should be a `` or a ``.
const Title = styled.h2<{
isSelected: boolean
}>`
diff --git a/frontend/src/features/SideWindow/SideWindowSubMenuLink.tsx b/frontend/src/features/SideWindow/SideWindowSubMenuLink.tsx
index 828bc03c04..4aa0ecfda8 100644
--- a/frontend/src/features/SideWindow/SideWindowSubMenuLink.tsx
+++ b/frontend/src/features/SideWindow/SideWindowSubMenuLink.tsx
@@ -82,6 +82,7 @@ export function SideWindowSubMenuLink({
const Text = styled.div``
+// TODO This should be a `` or a ``.
const MenuButton = styled.div``
const CircleWithKeyMetric = styled.span``
diff --git a/frontend/src/hooks/useTable/TableHead.tsx b/frontend/src/hooks/useTable/TableHead.tsx
index 7883783895..555a8ec22f 100644
--- a/frontend/src/hooks/useTable/TableHead.tsx
+++ b/frontend/src/hooks/useTable/TableHead.tsx
@@ -25,25 +25,33 @@ export function TableHead({
onSort,
sortingKey
}: TableHeadProps) {
+ const sortByKey = (column: TableColumn) => {
+ if (!column.isSortable) {
+ return
+ }
+
+ onSort(column.key, column.key === sortingKey && !isSortingDesc)
+ }
+
return (
-
+
{isCheckable && (
)}
- {columns.map(({ fixedWidth, isSortable, key, label = '' }) => (
-
+ {columns.map(column => (
+
onSort(key, key === sortingKey && !isSortingDesc)}
+ isSortable={column.isSortable}
+ isSortedColumn={column.key === sortingKey}
+ onClick={() => sortByKey(column)}
>
- {label}
+ {column.label || ''}
))}
diff --git a/frontend/src/hooks/useTable/TableHeadNext.tsx b/frontend/src/hooks/useTable/TableHeadNext.tsx
index c309f8fe5b..332b9b3ab9 100644
--- a/frontend/src/hooks/useTable/TableHeadNext.tsx
+++ b/frontend/src/hooks/useTable/TableHeadNext.tsx
@@ -55,7 +55,7 @@ export function TableHeadNext({
dataCy={`table-order-by-${key}`}
isAscending={!isSortingDesc}
isSortable={isSortable}
- isSortColumn={key === sortingKey}
+ isSortedColumn={key === sortingKey}
onClick={() => onSort(key, key === sortingKey && !isSortingDesc)}
style={{
lineHeight: 1.125
diff --git a/frontend/src/hooks/useTable/index.tsx b/frontend/src/hooks/useTable/index.tsx
index 0cec507ab5..a27485e708 100644
--- a/frontend/src/hooks/useTable/index.tsx
+++ b/frontend/src/hooks/useTable/index.tsx
@@ -152,7 +152,8 @@ export function useTable(
return filteredAndSearchedTableData
}
- const sortingKeyPath = path(['$sortable', sortingKey]) as any
+ const sortingKeyAsArrayPath = getArrayPathFromStringPath(sortingKey)
+ const sortingKeyPath = path(['$sortable', ...sortingKeyAsArrayPath]) as any
const bySortingKey = isSortingDesc ? descend(sortingKeyPath) : ascend(sortingKeyPath)
return sortWith(
diff --git a/frontend/src/ui/card-table/CardTable.tsx b/frontend/src/ui/card-table/CardTable.tsx
index c028905eb0..43105864b8 100644
--- a/frontend/src/ui/card-table/CardTable.tsx
+++ b/frontend/src/ui/card-table/CardTable.tsx
@@ -3,7 +3,9 @@ import styled from 'styled-components'
// The width of the scrolling bar is 16 px. When we have more than
// 9 items, the scrolling bar is showed
-export const CardTable = styled(List)<{
+export const CardTable = styled(List).attrs(() => ({
+ role: 'table'
+}))<{
$hasScroll: boolean
$width: number
}>`
diff --git a/frontend/src/ui/card-table/CardTableBody.tsx b/frontend/src/ui/card-table/CardTableBody.tsx
index e2951755c8..87b11dd407 100644
--- a/frontend/src/ui/card-table/CardTableBody.tsx
+++ b/frontend/src/ui/card-table/CardTableBody.tsx
@@ -1,6 +1,8 @@
import styled from 'styled-components'
-export const CardTableBody = styled.div`
+export const CardTableBody = styled.div.attrs(() => ({
+ role: 'rowgroup'
+}))`
overflow-y: auto;
max-height: calc(100vh - 170px);
`
diff --git a/frontend/src/ui/card-table/CardTableColumnTitle.tsx b/frontend/src/ui/card-table/CardTableColumnTitle.tsx
index 9cdee19f0d..1cec7d4118 100644
--- a/frontend/src/ui/card-table/CardTableColumnTitle.tsx
+++ b/frontend/src/ui/card-table/CardTableColumnTitle.tsx
@@ -8,21 +8,21 @@ type CardTableColumnTitleProps = HTMLAttributes & {
children: string
dataCy?: string | undefined
isAscending?: boolean | undefined
- isSortColumn?: boolean | undefined
isSortable?: boolean | undefined
+ isSortedColumn?: boolean | undefined
}
export function CardTableColumnTitle({
children,
dataCy = '',
isAscending = false,
isSortable = false,
- isSortColumn = false,
+ isSortedColumn = false,
onClick
}: CardTableColumnTitleProps) {
return (
{children}
- {isSortable && isSortColumn && (
+ {isSortable && isSortedColumn && (
)}
diff --git a/frontend/src/ui/card-table/CardTableHeader.tsx b/frontend/src/ui/card-table/CardTableHeader.tsx
index 443085c3e3..d9fa6e3ee2 100644
--- a/frontend/src/ui/card-table/CardTableHeader.tsx
+++ b/frontend/src/ui/card-table/CardTableHeader.tsx
@@ -11,7 +11,7 @@ type CardTableHeaderProps = {
}
export function CardTableHeader({ children, noPadding = false }: CardTableHeaderProps) {
return (
-
+
{children}
)
diff --git a/frontend/src/ui/card-table/CardTableRow.tsx b/frontend/src/ui/card-table/CardTableRow.tsx
index 85cdd4234b..99748db819 100644
--- a/frontend/src/ui/card-table/CardTableRow.tsx
+++ b/frontend/src/ui/card-table/CardTableRow.tsx
@@ -3,7 +3,9 @@ import styled from 'styled-components'
import { COLORS } from '../../constants/constants'
-export const CardTableRow = styled(List.Item)<{
+export const CardTableRow = styled(List.Item).attrs(() => ({
+ role: 'row'
+}))<{
index: number
isFocused?: boolean
toClose?: boolean