[Signalements] Correction du tri du tableau (#2600)

## Linked issues - Resolve #2588 - Resolve #2589 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Oct 16, 2023 · 6d6a13a · 6d6a13a
2 parents f936343 + 9004ef6
commit 6d6a13a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 37 deletions.
diff --git a/backend/src/main/resources/db/testdata/V666.19__Insert_dummy_reportings.sql b/backend/src/main/resources/db/testdata/V666.19__Insert_dummy_reportings.sql
@@ -51,7 +51,7 @@ VALUES ('ALERT', 'MARIAGE ÎLE HASARD', 'ABC000180832', 'VP374069', 'CG1312', 'I
                                                                                                               '"seaFront": "NAMO"' ||
                                                                                                               '}')::jsonb, null, null, 10),
        ('INFRACTION_SUSPICION', 'RENCONTRER VEILLER APPARTEMENT"', 'ABC000597493', 'JL026591', 'CMQ7994',
-        'INTERNAL_REFERENCE_NUMBER', 'FR', NOW() - ('1 DAY 1 HOUR')::interval, NOW() - ('1 DAY 1 HOUR')::interval, false,
+        'INTERNAL_REFERENCE_NUMBER', 'FR', NOW() - ('1 DAY 1 HOUR')::interval, null, false,
         false, ('{' ||
                 '"reportingActor": "UNIT",' ||
                 '"controlUnitId": 10012,' ||

diff --git a/frontend/cypress/e2e/sidebars/regulatory_layers.spec.ts b/frontend/cypress/e2e/sidebars/regulatory_layers.spec.ts
@@ -52,6 +52,7 @@ context('Sidebars > Regulatory Layers', () => {
     // ).as('getRegulation')
     cy.get('*[data-cy="regulatory-layers-my-zones-zone-show"]').eq(0).click({ timeout: 10000 })
     cy.wait('@getRegulation').then(({ response }) => expect(response && response.statusCode).equal(200))
+    cy.wait(200)
 
     cy.get('.regulatory', { timeout: 10000 }).click(490, 580, { force: true, timeout: 10000 })
     cy.wait('@getRegulation').then(({ response }) => expect(response && response.statusCode).equal(200))

diff --git a/frontend/src/features/SideWindow/Alert/AlertListAndReportingList/ReportingList/constants.ts b/frontend/src/features/SideWindow/Alert/AlertListAndReportingList/ReportingList/constants.ts
@@ -9,7 +9,8 @@ export const REPORTING_LIST_TABLE_OPTIONS: TableOptions<InfractionSuspicionRepor
       fixedWidth: 112,
       isSortable: true,
       key: 'validationDate',
-      label: 'Ouvert il y a...'
+      label: 'Ouvert il y a...',
+      sortingTransform: item => item.validationDate || item.creationDate
     },
     {
       fixedWidth: 112,
@@ -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'
+  ]
 }
diff --git a/frontend/src/features/SideWindow/Alert/AlertListAndReportingList/ReportingList/index.tsx b/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)}

diff --git a/frontend/src/features/SideWindow/index.tsx b/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;

diff --git a/frontend/src/hooks/useTable/index.tsx b/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>(
@@ -152,28 +153,10 @@ 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
-        }
-      ],
-      filteredAndSearchedTableData
+    return orderBy(
+      filteredAndSearchedTableData,
+      item => get(item, `$sortable.${sortingKey}`),
+      isSortingDesc ? ['desc'] : ['asc']
     )
   }, [filteredAndSearchedTableData, isSortingDesc, sortingKey])