[UI] Résolution du souci de taille des tableaux (#1434)

Mise à jour des tableaux pour fixer le souci de scroll sur les vieilles version de Firefox + ticket ci-dessous ## Related Pull Requests & Issues - Resolve #1004 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Jun 7, 2024 · 10fffc1 · 10fffc1
2 parents 1548e34 + 01f1dbe
commit 10fffc1
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 44 deletions.
diff --git a/frontend/src/features/Reportings/ReportingsList/Columns/index.tsx b/frontend/src/features/Reportings/ReportingsList/Columns/index.tsx
@@ -35,31 +35,31 @@ export const Columns = themes => [
     ),
 
     id: 'select',
-    size: 25
+    size: 52
   },
   {
     accessorFn: row => row.reportingId,
     cell: info => <Cell id={info.getValue()}>{getFormattedReportingId(info.getValue())}</Cell>,
     enableSorting: false,
     header: () => '',
     id: 'reportingId',
-    size: 95
+    size: 100
   },
   {
     accessorFn: row => row.createdAt,
     cell: info => getDateCell(info.getValue()),
     enableSorting: true,
     header: () => 'Date (UTC)',
     id: 'createdAt',
-    size: 135
+    size: 136
   },
   {
     accessorFn: row => row.validityTime,
     cell: ({ row }) => <CellValidityTime row={row} />,
     enableSorting: false, // TODO see how we can sort on timeLeft and not validityTime
     header: () => 'Fin dans',
     id: 'validityTime',
-    size: 70
+    size: 87
   },
   {
     accessorFn: row => row.displayedSource,
@@ -71,7 +71,7 @@ export const Columns = themes => [
     enableSorting: true,
     header: () => 'Source',
     id: 'displayedSource',
-    size: 235
+    size: 208
   },
   {
     accessorFn: row => row.reportType,
@@ -93,7 +93,7 @@ export const Columns = themes => [
     ),
     header: () => 'Cible',
     id: 'targetDetails',
-    size: 165,
+    size: 190,
     sortingFn: (rowA: Row<any>, rowB: Row<any>) => sortTargetDetails(rowA.original, rowB.original)
   },
   {
@@ -102,7 +102,7 @@ export const Columns = themes => [
     enableSorting: true,
     header: () => 'Thématique',
     id: 'themeId',
-    size: 255,
+    size: 265,
     sortingFn: (rowA: Row<any>, rowB: Row<any>, columnId: string) => {
       const themeA: string = themes[rowA.original[columnId]]?.theme ?? ''
       const themeB: string = themes[rowB.original[columnId]]?.theme ?? ''
@@ -116,15 +116,15 @@ export const Columns = themes => [
     enableSorting: true,
     header: () => 'Façade',
     id: 'seaFront',
-    size: 115
+    size: 104
   },
   {
     accessorFn: row => row.status,
     cell: ({ row }) => <CellStatus row={row} />,
     enableSorting: true,
     header: () => 'Statut',
     id: 'isArchived',
-    size: 105,
+    size: 104,
     sortingFn: (rowA: Row<any>, rowB: Row<any>, columnId: string) => {
       if (rowA.original[columnId] > rowB.original[columnId]) {
         return -1
@@ -147,7 +147,7 @@ export const Columns = themes => [
     enableSorting: false,
     header: () => '',
     id: 'missionId',
-    size: 115
+    size: 104
   },
   {
     accessorFn: row => row.geom,
@@ -162,23 +162,23 @@ export const Columns = themes => [
     enableSorting: false,
     header: () => '',
     id: 'actionStatus',
-    size: 110
+    size: 98
   },
   {
     accessorFn: row => row.geom,
     cell: info => <CellLocalizeReporting geom={info.getValue()} />,
     enableSorting: false,
     header: () => '',
     id: 'geom',
-    size: 55
+    size: 58
   },
   {
     accessorFn: row => row.id,
     cell: info => <ButtonsGroupRow id={info.getValue()} />,
     enableSorting: false,
     header: () => '',
     id: 'id',
-    size: 115
+    size: 110
   }
 ]
 

diff --git a/frontend/src/features/Reportings/ReportingsList/ReportingsTable.tsx b/frontend/src/features/Reportings/ReportingsList/ReportingsTable.tsx
@@ -13,8 +13,6 @@ import { StyledSkeletonRow } from '../../commonComponents/Skeleton'
 
 import type { ReportingDetailed } from '../../../domain/entities/reporting'
 
-const TABLE_WIDTH = 1776 // (1920 (CACEM screen size) - 64 (left menu) - 40 (padding left) - 40 (padding right))
-
 export function ReportingsTable({
   isLoading,
   reportings
@@ -152,7 +150,6 @@ export function ReportingsTable({
 
 const StyledReportingsContainer = styled.div`
   overflow: auto;
-  width: ${TABLE_WIDTH}px;
 `
 
 /*
@@ -180,6 +177,7 @@ const StyledTable = styled(TableWithSelectableRows.Table)<{ $isSideWindowOpenInT
                 > label {
                   .rs-checkbox-wrapper {
                     top: -8px;
+                    left: -21px;
                   }
                 }
               }
@@ -206,14 +204,11 @@ const StyledTable = styled(TableWithSelectableRows.Table)<{ $isSideWindowOpenInT
 `
 
 const StyledTd = styled(TableWithSelectableRows.Td)`
-  &:first-child {
-    padding: 4px 16px 4px 4px;
-  }
   &:nth-child(11) {
     padding: 4px 0px 4px 16px;
   }
   &:nth-child(12) {
-    padding: 4px 0px;
+    padding: 4px;
   }
   &:nth-child(13) {
     padding: 4px 0px;

diff --git a/frontend/src/features/layersSelector/myRegulatoryLayers/MyRegulatoryLayerGroup.tsx b/frontend/src/features/layersSelector/myRegulatoryLayers/MyRegulatoryLayerGroup.tsx
@@ -72,7 +72,7 @@ export function RegulatoryLayerGroup({ groupName, layers }: { groupName: string;
           {getTitle(groupName)}
         </LayerSelector.GroupName>
         <LayerSelector.IconGroup>
-          <LayerSelector.NumberOfZones>{`${layers?.length} / ${totalNumberOfZones}`}</LayerSelector.NumberOfZones>
+          <LayerSelector.NumberOfZones>{`${layers?.length}/${totalNumberOfZones}`}</LayerSelector.NumberOfZones>
           <IconButton
             accent={Accent.TERTIARY}
             aria-label={regulatoryZonesAreShowed ? 'Cacher la/les zone(s)' : 'Afficher la/les zone(s)'}

diff --git a/frontend/src/features/layersSelector/search/ResultsList/ResultListLayerGroup.tsx b/frontend/src/features/layersSelector/search/ResultsList/ResultListLayerGroup.tsx
@@ -71,7 +71,7 @@ export function ResultListLayerGroup({
           />
         </LayerSelector.GroupName>
         <LayerSelector.IconGroup>
-          <LayerSelector.ZonesNumber>{`${layerIds.length} / ${totalNumberOfZones}`}</LayerSelector.ZonesNumber>
+          <LayerSelector.ZonesNumber>{`${layerIds.length}/${totalNumberOfZones}`}</LayerSelector.ZonesNumber>
           <IconButton
             accent={Accent.TERTIARY}
             aria-label="Sélectionner la/les zone(s)"

diff --git a/frontend/src/features/layersSelector/search/SearchInput.tsx b/frontend/src/features/layersSelector/search/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { Accent, IconButton, Icon, Size, TextInput, Tag, THEME } from '@mtes-mct/monitor-ui'
+import { Accent, IconButton, Icon, Size, TextInput } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 export function SearchInput({
@@ -26,11 +26,7 @@ export function SearchInput({
         value={globalSearchText}
       />
       <div>
-        {!displayRegFilters && numberOfFilters > 0 && (
-          <NumberOfFilters backgroundColor={THEME.color.maximumRed} color={THEME.color.white}>
-            {numberOfFilters}
-          </NumberOfFilters>
-        )}
+        {!displayRegFilters && numberOfFilters > 0 && <NumberOfFilters>{numberOfFilters}</NumberOfFilters>}
         <IconButton
           accent={Accent.PRIMARY}
           className={displayRegFilters ? '_active' : ''}
@@ -55,10 +51,17 @@ const StyledTextInput = styled(TextInput)`
   }
 `
 
-const NumberOfFilters = styled(Tag)`
+const NumberOfFilters = styled.div`
   position: absolute;
-  top: -5px;
+  top: -9px;
   right: -5px;
   z-index: 100;
   font-size: 12px;
+  background-color: ${p => p.theme.color.maximumRed};
+  border-radius: 50%;
+  color: ${p => p.theme.color.white};
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  text-align: center;
 `
diff --git a/frontend/src/features/missions/MissionsList/Columns/index.tsx b/frontend/src/features/missions/MissionsList/Columns/index.tsx
@@ -18,39 +18,39 @@ export const Columns = [
     enableSorting: true,
     header: () => 'Début',
     id: 'startDate',
-    size: 135
+    size: 153
   },
   {
     accessorFn: row => row.endDateTimeUtc,
     cell: info => getDateCell(info.getValue()),
     enableSorting: true,
     header: () => 'Fin',
     id: 'endDate',
-    size: 135
+    size: 153
   },
   {
     accessorFn: row => row.facade,
     cell: info => info.getValue(),
     enableSorting: true,
     header: () => 'Façade',
     id: 'seaFront',
-    size: 96
+    size: 110
   },
   {
     accessorFn: row => row.missionTypes,
     cell: info => getMissionTypeCell(info.getValue()),
     enableSorting: false,
     header: () => 'Type',
     id: 'type',
-    size: 120
+    size: 136
   },
   {
     accessorFn: row => row.controlUnits,
     cell: info => getResourcesCell(info.getValue()),
     enableSorting: false,
     header: () => 'Unité (Administration)',
     id: 'unitAndAdministration',
-    size: 256
+    size: 300
   },
 
   {
@@ -59,30 +59,30 @@ export const Columns = [
     enableSorting: false,
     header: () => 'Thématiques',
     id: 'themes',
-    size: 392
+    size: 444
   },
   {
     accessorFn: row => row.envActions,
     cell: info => getNumberOfControlsCell(info.getValue()),
     header: () => 'Ctr.',
     id: 'envActions',
-    size: 66,
+    size: 75,
     sortingFn: (rowA: Row<any>, rowB: Row<any>, columnId: string) => sortNumberOfControls(rowA, rowB, columnId)
   },
   {
     accessorFn: row => row,
     cell: ({ row }) => <CellStatus row={row} />,
     header: () => 'Statut',
     id: 'status',
-    size: 107,
+    size: 121,
     sortingFn: (rowA: Row<any>, rowB: Row<any>) => sortStatus(rowA, rowB)
   },
   {
     accessorFn: row => row,
     cell: ({ row }) => <CellCompletionStatus row={row} />,
     header: () => 'État données',
     id: 'completion',
-    size: 127,
+    size: 144,
     sortingFn: (rowA: Row<any>, rowB: Row<any>) => sortCompletion(rowA, rowB)
   },
   {
@@ -91,14 +91,14 @@ export const Columns = [
     enableSorting: false,
     header: () => '',
     id: 'geom',
-    size: 52
+    size: 56
   },
   {
     accessorFn: row => row.id,
     cell: info => <CellEditMission id={info.getValue()} />,
     enableSorting: false,
     header: () => '',
     id: 'edit',
-    size: 52
+    size: 62
   }
 ]
diff --git a/frontend/src/features/missions/MissionsList/MissionsTable.tsx b/frontend/src/features/missions/MissionsList/MissionsTable.tsx
@@ -10,8 +10,6 @@ import { ChevronIcon } from '../../commonStyles/icons/ChevronIcon.style'
 
 import type { Mission } from '../../../domain/entities/missions'
 
-const TABLE_WIDTH = 1550
-
 export function MissionsTable({ isLoading, missions }: { isLoading: boolean; missions: Mission[] }) {
   const [sorting, setSorting] = useState<SortingState>([{ desc: true, id: 'startDate' }])
 
@@ -122,7 +120,6 @@ export function MissionsTable({ isLoading, missions }: { isLoading: boolean; mis
 
 const StyledMissionsContainer = styled.div`
   overflow: auto;
-  width: ${TABLE_WIDTH}px;
 `
 const StyledChevronIcon = styled(ChevronIcon)`
   margin-top: 0px;