diff --git a/frontend/package-lock.json b/frontend/package-lock.json index bbaa61adf9..5ab8a25c52 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@dnd-kit/core": "6.0.8", "@dnd-kit/modifiers": "6.0.0", - "@mtes-mct/monitor-ui": "8.0.0", + "@mtes-mct/monitor-ui": "9.1.0", "@reduxjs/toolkit": "1.9.3", "@sentry/browser": "7.55.2", "@sentry/react": "7.52.1", @@ -1911,9 +1911,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz", + "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "dependencies": { "regenerator-runtime": "^0.13.11" }, @@ -3629,11 +3629,11 @@ "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" }, "node_modules/@mtes-mct/monitor-ui": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-8.0.0.tgz", - "integrity": "sha512-VWuXuzYywno9CNj5k2pBvaGWAG+aqF/V9FG5Fcs+X43k8ygq5sByiZEV/TPbSY/LxQbSO8E0cS6EecLAWbur0w==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-9.1.0.tgz", + "integrity": "sha512-I16uLtPssdiyqFZcF+f5BduLuVKcavSIJPkEBuS41a14nedlCEElJngBkAvfMxoGYSIAG0GlT2Cj4ZipPrtLIA==", "dependencies": { - "@babel/runtime": "7.21.0", + "@babel/runtime": "7.22.6", "@tanstack/react-table": "^8.9.3", "@tanstack/react-virtual": "beta", "prop-types": "15.8.1", diff --git a/frontend/package.json b/frontend/package.json index 615815ff87..417bce71cb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,7 @@ "dependencies": { "@dnd-kit/core": "6.0.8", "@dnd-kit/modifiers": "6.0.0", - "@mtes-mct/monitor-ui": "8.0.0", + "@mtes-mct/monitor-ui": "9.1.0", "@reduxjs/toolkit": "1.9.3", "@sentry/browser": "7.55.2", "@sentry/react": "7.52.1", diff --git a/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx b/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx index 3502deec76..3ab1d90fff 100644 --- a/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx +++ b/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx @@ -126,6 +126,7 @@ export function Item({ initialValues, isSelected, onDuplicate, onRemove, onSelec $type={initialValues.actionType} data-cy="action-list-item" onClick={onSelect} + title={isOpen ? 'Contrôle en cours' : undefined} > diff --git a/frontend/src/features/SideWindow/MissionList/index.tsx b/frontend/src/features/SideWindow/MissionList/index.tsx index 8bead34271..eb2ca068aa 100644 --- a/frontend/src/features/SideWindow/MissionList/index.tsx +++ b/frontend/src/features/SideWindow/MissionList/index.tsx @@ -106,7 +106,7 @@ export function MissionList() { {isLoading &&

Chargement en cours...

} - {isError && 
{JSON.stringify(isError)}
} + {isError && 
La liste des missions n’a pas pu être récupérée.
} {!isLoading && !isError && ( <>
@@ -120,68 +120,75 @@ export function MissionList() { {renderTableHead()} - {tableData.map(augmentedMission => ( - - - {augmentedMission.$labelled.startDateTimeUtc} - - - {augmentedMission.$labelled.endDateTimeUtc} - - - {augmentedMission.$labelled.missionTypes} - - - {augmentedMission.$labelled.missionSource} - - - {augmentedMission.$labelled.controlUnits} - - - {augmentedMission.$labelled.inspectedVessels} - - - {augmentedMission.$labelled.inspectionsCount} - - - {renderStatus(augmentedMission.$labelled.status as Mission.MissionStatus)} - - - handleZoomToMission(augmentedMission.geom)} - title="Voir sur la carte" - /> - - - goToMissionForm(augmentedMission.id)} - title="Éditer la mission" - /> - - - ))} + {tableData.map(augmentedMission => { + const hasSomeOngoingControls = hasSomeOngoingActions(augmentedMission) + + return ( + + + {augmentedMission.$labelled.startDateTimeUtc} + + + {augmentedMission.$labelled.endDateTimeUtc} + + + {augmentedMission.$labelled.missionTypes} + + + {augmentedMission.$labelled.missionSource} + + + {augmentedMission.$labelled.controlUnits} + + + {augmentedMission.$labelled.inspectedVessels} + + + + {augmentedMission.$labelled.inspectionsCount} + + + + {renderStatus(augmentedMission.$labelled.status as Mission.MissionStatus)} + + + handleZoomToMission(augmentedMission.geom)} + title="Voir sur la carte" + /> + + + goToMissionForm(augmentedMission.id)} + title="Éditer la mission" + /> + + + ) + })} {!tableData.length && Aucune mission} @@ -202,6 +209,18 @@ const Wrapper = styled(NoRsuiteOverrideWrapper)` overflow-y: auto; ` +const OngoingControlsVerticalBar = styled.span<{ + $hasSomeOngoingControls: boolean | undefined +}>` + display: inline-block; + height: 32px; + width: 100%; + padding-left: 8px; + padding-top: 6px; + border-left: ${p => + p.$hasSomeOngoingControls ? `solid 4px ${p.theme.color.blueGray[100]}` : 'solid 4px transparent'}; +` + const Header = styled.div` align-items: center; background-color: ${p => p.theme.color.white}; @@ -282,17 +301,18 @@ const TableBodyCell = styled.div.attrs(() => ({ className: 'TableBodyCell' }))<{ $fixedWidth?: number | undefined - $hasSomeOngoingActions?: boolean | undefined + $isControlNumberCell?: boolean | undefined }>` align-items: center; border-bottom: solid 1px ${p => p.theme.color.lightGray}; - border-left: ${p => (p.$hasSomeOngoingActions ? `solid 4px ${p.theme.color.blueGray[100]}` : 'none')}; + border-spacing: 6px 0px; + border-left: none; border-right: solid 1px ${p => p.theme.color.lightGray}; display: flex; flex-grow: ${p => (p.$fixedWidth ? 0 : 1)}; max-width: ${p => (p.$fixedWidth ? `${p.$fixedWidth}px` : 'auto')}; min-width: ${p => (p.$fixedWidth ? `${p.$fixedWidth}px` : 'auto')}; - padding: ${p => (p.$hasSomeOngoingActions ? '9px 10px 9px 6px' : '9px 10px')}; + padding: ${p => (p.$isControlNumberCell ? '4px 10px 4px 4px' : '9px 10px')}; > span { overflow: hidden; diff --git a/frontend/src/features/SideWindow/MissionList/utils.tsx b/frontend/src/features/SideWindow/MissionList/utils.tsx index f24ba4539e..8ef7d6827d 100644 --- a/frontend/src/features/SideWindow/MissionList/utils.tsx +++ b/frontend/src/features/SideWindow/MissionList/utils.tsx @@ -80,6 +80,7 @@ const StyledTag = styled(Tag)` line-height: 1; > span { + flex-shrink: 0; height: 10px; margin-right: 6px; width: 10px; diff --git a/frontend/src/features/map/overlays/ControlOverlay/ControlDetails.tsx b/frontend/src/features/map/overlays/ControlOverlay/ControlDetails.tsx index 3e46b58b45..f602022c5a 100644 --- a/frontend/src/features/map/overlays/ControlOverlay/ControlDetails.tsx +++ b/frontend/src/features/map/overlays/ControlOverlay/ControlDetails.tsx @@ -104,7 +104,7 @@ export function ControlDetails({ control, isSelected, overlayPosition }: Control )} {!!control.infractionsNatinfs.length && ( - + {`${control.infractionsNatinfs.length} NATINF: ${control.infractionsNatinfs.join(', ')}`} )}