[Signalements] Correction du tri du tableau

frontend/src/features/SideWindow/Alert/AlertListAndReportingList/ReportingList/constants.ts

@@ -6,21 +6,22 @@ import type { TableOptions } from '../../../../../hooks/useTable/types'
 export const REPORTING_LIST_TABLE_OPTIONS: TableOptions<InfractionSuspicionReporting | PendingAlertReporting> = {
   columns: [
     {
+      fallbackKey: 'creationDate',
       fixedWidth: 112,
       isSortable: true,
       key: 'validationDate',
       label: 'Ouvert il y a...'
     },
     {
       fixedWidth: 112,
-      isSortable: true,
+      isSortable: false,
       key: 'source',
       label: 'Origine',
       transform: getReportingOrigin
     },
     {
       fixedWidth: 288,
-      isSortable: true,
+      isSortable: false,
       key: 'title',
       label: 'Titre',
       transform: getReportingTitle
@@ -59,5 +60,14 @@ export const REPORTING_LIST_TABLE_OPTIONS: TableOptions<InfractionSuspicionRepor
     }
   ],
   isCheckable: true,
-  searchableKeys: ['dml', 'externalReferenceNumber', 'internalReferenceNumber', 'ircs', 'reportingTitle', 'vesselName']
+  searchableKeys: [
+    'value.dml',
+    'externalReferenceNumber',
+    'internalReferenceNumber',
+    'ircs',
+    'title',
+    'source',
+    'value.natinfCode',
+    'vesselName'
+  ]
 }

frontend/src/features/SideWindow/Alert/AlertListAndReportingList/ReportingList/index.tsx

@@ -177,6 +177,7 @@ MMSI: ${reporting.mmsi || ''}`
         <CardTableBody>
           {tableData.map((reporting, index) => {
             const editingIsDisabled = reporting.type === ReportingType.ALERT
+            const reportingDate = reporting.validationDate || reporting.creationDate
 
             return (
               <CardTableRow key={reporting.id} data-cy="side-window-current-reportings" index={index + 1} style={{}}>
@@ -187,8 +188,8 @@ MMSI: ${reporting.mmsi || ''}`
                       onChange={() => toggleTableCheckForId(reporting.id)}
                     />
                   </Cell>
-                  <Cell style={columnStyles[1]} title={reporting.validationDate || reporting.creationDate}>
-                    {timeago.format(reporting.validationDate || reporting.creationDate, 'fr')}
+                  <Cell style={columnStyles[1]} title={reportingDate}>
+                    {timeago.format(reportingDate, 'fr')}
                   </Cell>
                   <Cell style={columnStyles[2]} title={getReportingOrigin(reporting, true)}>
                     {getReportingOrigin(reporting)}

frontend/src/features/SideWindow/index.tsx

@@ -52,7 +52,7 @@ function SideWindowWithRef({ isFromURL }: SideWindowProps, ref: ForwardedRef<HTM
   const [isOverlayed, setIsOverlayed] = useState(false)
   const [isPreloading, setIsPreloading] = useState(true)
 
-  const beaconMalfunctionBoardGrayOverlayStyle: CSSProperties = useMemo(
+  const grayOverlayStyle: CSSProperties = useMemo(
     () => ({
       background: THEME.color.charcoal,
       height: '100%',
@@ -121,12 +121,9 @@ function SideWindowWithRef({ isFromURL }: SideWindowProps, ref: ForwardedRef<HTM
           <GlobalStyle />
 
           <Menu selectedMenu={selectedPath.menu} />
-          {/* TODO Move that within BeaconMalfunctionBoard. */}
-          {selectedPath.menu === SideWindowMenuKey.BEACON_MALFUNCTION_BOARD && (
-            <BeaconMalfunctionsBoardGrayOverlay
-              onClick={closeRightSidebar}
-              style={beaconMalfunctionBoardGrayOverlayStyle}
-            />
+          {(selectedPath.menu === SideWindowMenuKey.BEACON_MALFUNCTION_BOARD ||
+            selectedPath.menu === SideWindowMenuKey.ALERT_LIST_AND_REPORTING_LIST) && (
+            <GrayOverlay onClick={closeRightSidebar} style={grayOverlayStyle} />
           )}
           <FrontendErrorBoundary>
             {isPreloading && (
@@ -228,7 +225,7 @@ const Content = styled.div`
   min-width: 0;
 `
 
-const BeaconMalfunctionsBoardGrayOverlay = styled.div``
+const GrayOverlay = styled.div``
 
 const Loading = styled.div`
   margin-left: 550px;

frontend/src/hooks/useTable/TableHead.tsx

@@ -13,7 +13,7 @@ export type TableHeadProps = {
   isCheckable?: boolean | undefined
   isSortingDesc: boolean
   onAllCheckChange: () => Promisable<void>
-  onSort: (key: string, isDesc: boolean) => Promisable<void>
+  onSort: (key: string, isDesc: boolean, fallbackKey?: string | undefined) => Promisable<void>
   sortingKey?: string | undefined
 }
 export function TableHead({
@@ -30,7 +30,7 @@ export function TableHead({
       return
     }
 
-    onSort(column.key, column.key === sortingKey && !isSortingDesc)
+    onSort(column.key, column.key === sortingKey && !isSortingDesc, column.fallbackKey)
   }
 
   return (

frontend/src/hooks/useTable/index.tsx

@@ -1,12 +1,13 @@
 import diacritics from 'diacritics'
 import Fuse from 'fuse.js'
-import { ascend, assocPath, descend, equals, path, pipe, propEq, sortWith } from 'ramda'
+import { get, orderBy } from 'lodash'
+import { assocPath, equals, path, pipe, propEq } from 'ramda'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { TableHead } from './TableHead'
 import { getArrayPathFromStringPath, normalizeSearchQuery } from './utils'
 
-import type { TableItem, FilterFunction, TableOptions } from './types'
+import type { FilterFunction, TableItem, TableOptions } from './types'
 import type { CollectionItem } from '../../types'
 
 export function useTable<T extends CollectionItem = CollectionItem>(
@@ -25,6 +26,7 @@ export function useTable<T extends CollectionItem = CollectionItem>(
   const [checkedIds, setCheckedIds] = useState<(number | string)[]>([])
   const [isSortingDesc, setIsSortingDesc] = useState(Boolean(isDefaultSortingDesc))
   const [sortingKey, setSortingKey] = useState<string | undefined>(defaultSortedKey)
+  const [sortingFallbackKey, setSortingFallbackKey] = useState<string | undefined>(undefined)
 
   const rawData = useMemo(() => maybeRawData || [], [maybeRawData])
 
@@ -152,30 +154,23 @@ export function useTable<T extends CollectionItem = CollectionItem>(
       return filteredAndSearchedTableData
     }
 
-    const sortingKeyAsArrayPath = getArrayPathFromStringPath(sortingKey)
-    const sortingKeyPath = path(['$sortable', ...sortingKeyAsArrayPath]) as any
-    const bySortingKey = isSortingDesc ? descend(sortingKeyPath) : ascend(sortingKeyPath)
-
-    return sortWith(
-      [
-        bySortingKey,
-        // Sort undefined values (to the bottom when ascending and to the top when descending)
-        (firstDataItem, secondDataItem) => {
-          const firstDataItemProp = sortingKeyPath(firstDataItem)
-          const secondDataItemProp = sortingKeyPath(secondDataItem)
-
-          if (isSortingDesc) {
-            // eslint-disable-next-line no-nested-ternary
-            return firstDataItemProp === undefined ? (secondDataItemProp === undefined ? 0 : -1) : 1
-          }
-
-          // eslint-disable-next-line no-nested-ternary
-          return firstDataItemProp === undefined ? (secondDataItemProp === undefined ? 0 : 1) : -1
+    return orderBy(
+      filteredAndSearchedTableData,
+      item => {
+        const value = get(item, sortingKey)
+        if (value !== undefined) {
+          return value
         }
-      ],
-      filteredAndSearchedTableData
+
+        if (!sortingFallbackKey) {
+          return undefined
+        }
+
+        return get(item, sortingFallbackKey)
+      },
+      isSortingDesc ? ['desc'] : ['asc']
     )
-  }, [filteredAndSearchedTableData, isSortingDesc, sortingKey])
+  }, [filteredAndSearchedTableData, isSortingDesc, sortingKey, sortingFallbackKey])
 
   const getCheckedData = useCallback(
     () => filteredAndSearchedAndSortedTableData.filter(({ id }) => checkedIds.includes(id)),
@@ -186,8 +181,9 @@ export function useTable<T extends CollectionItem = CollectionItem>(
     setCheckedIds(isAllChecked ? [] : filteredAndSearchedAndSortedTableData.map(({ id }) => id).sort())
   }, [filteredAndSearchedAndSortedTableData, isAllChecked])
 
-  const sortColumn = useCallback((key: string, isDesc: boolean) => {
+  const sortColumn = useCallback((key: string, isDesc: boolean, fallbackKey: string | undefined) => {
     setSortingKey(key)
+    setSortingFallbackKey(fallbackKey)
     setIsSortingDesc(isDesc)
   }, [])
 

frontend/src/hooks/useTable/types.ts

@@ -2,6 +2,7 @@ import type { CollectionItem, Native } from '../../types'
 import type Fuse from 'fuse.js'
 
 export type TableColumn<T extends Record<string, any> = Record<string, any>> = {
+  fallbackKey?: string | undefined
   /** Fixed width expressed in root ephemeral unit (rem) */
   fixedWidth?: number
   isSortable?: boolean