From 8fd8c020e42503ff3492d69c979001ef326c1dfa Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Mon, 5 Feb 2024 16:24:16 +0100 Subject: [PATCH 01/10] [Tech] replace some rsuite components by monitor-ui components - part 1 --- .../src/domain/entities/layers/constants.ts | 7 ++ frontend/src/domain/entities/map/constants.ts | 8 ++ frontend/src/domain/entities/missions.ts | 42 +++-------- .../Dialog/CancelEditDialog.tsx | 9 +-- .../src/features/commonStyles/Input.style.ts | 43 ----------- .../layersSelector/base/BaseLayerItem.tsx | 20 ----- .../features/layersSelector/base/index.tsx | 73 +++++++++---------- .../layersSelector/search/LayerFilters.tsx | 11 +-- .../map/controls/MapCoordinatesBox.tsx | 58 +++++++-------- .../ActionForm/ControlForm/InfractionCard.tsx | 3 +- .../InfractionFormHeaderVehicle.tsx | 16 +--- .../InfractionForm/VesselSizeSelector.tsx | 42 +++-------- .../InfractionForm/VesselTypeSelector.tsx | 42 ++++------- .../ControlForm/InfractionsForm.tsx | 10 +-- .../missions/MissionForm/CancelEditModal.tsx | 9 +-- .../missions/MissionForm/ReopenModal.tsx | 9 +-- .../missions/MissionsList/Filters/index.tsx | 5 -- frontend/src/uiMonitor/rsuite-override.css | 2 +- 18 files changed, 135 insertions(+), 274 deletions(-) delete mode 100644 frontend/src/features/commonStyles/Input.style.ts delete mode 100644 frontend/src/features/layersSelector/base/BaseLayerItem.tsx diff --git a/frontend/src/domain/entities/layers/constants.ts b/frontend/src/domain/entities/layers/constants.ts index 618955eb70..a7f4137b9f 100644 --- a/frontend/src/domain/entities/layers/constants.ts +++ b/frontend/src/domain/entities/layers/constants.ts @@ -221,6 +221,13 @@ export const Layers: Record = { } } +export const BaseLayersLabel = { + LIGHT: 'Fond de carte clair', + OSM: 'Open Street Map', + SATELLITE: 'Satellite', + SHOM: 'Carte marine (SHOM)' +} + export const BaseLayers = { DARK: { code: 'DARK', diff --git a/frontend/src/domain/entities/map/constants.ts b/frontend/src/domain/entities/map/constants.ts index 03d6c52376..86dc7d9754 100644 --- a/frontend/src/domain/entities/map/constants.ts +++ b/frontend/src/domain/entities/map/constants.ts @@ -30,6 +30,14 @@ export enum CoordinatesFormat { DEGREES_MINUTES_SECONDS = 'DMS' } +export enum CoordinatesFormatLabel { + DMS = 'DMS', + // eslint-disable-next-line typescript-sort-keys/string-enum + DMD = 'DMD', + // eslint-disable-next-line typescript-sort-keys/string-enum + DD = 'DD' +} + export enum DistanceUnit { METRIC = 'metric', NAUTICAL = 'nautical' diff --git a/frontend/src/domain/entities/missions.ts b/frontend/src/domain/entities/missions.ts index 18eb8fa5e8..66bd93cbdd 100644 --- a/frontend/src/domain/entities/missions.ts +++ b/frontend/src/domain/entities/missions.ts @@ -116,22 +116,10 @@ export enum VesselTypeEnum { SAILING = 'SAILING' } export const vesselTypeLabels = { - COMMERCIAL: { - code: 'COMMERCIAL', - libelle: 'Commerce' - }, - FISHING: { - code: 'FISHING', - libelle: 'Pêche' - }, - MOTOR: { - code: 'MOTOR', - libelle: 'Moteur' - }, - SAILING: { - code: 'SAILING', - libelle: 'Voilier' - } + COMMERCIAL: 'Commerce', + FISHING: 'Pêche', + MOTOR: 'Moteur', + SAILING: 'Voilier' } export enum VesselSizeEnum { @@ -140,23 +128,11 @@ export enum VesselSizeEnum { LESS_THAN_12m = 'LESS_THAN_12m', MORE_THAN_46m = 'MORE_THAN_46m' } -export const vesselSizeEnum = { - FROM_12_TO_24m: { - code: 'FROM_12_TO_24m', - libelle: '12 à 24 m' - }, - FROM_24_TO_46m: { - code: 'FROM_24_TO_46m', - libelle: 'plus de 24 m' - }, - LESS_THAN_12m: { - code: 'LESS_THAN_12m', - libelle: 'moins de 12 m' - }, - MORE_THAN_46m: { - code: 'MORE_THAN_46m', - libelle: 'plus de 46 m' - } +export const vesselSizeLabel = { + FROM_12_TO_24m: '12 à 24 m', + FROM_24_TO_46m: 'plus de 24 m', + LESS_THAN_12m: 'moins de 12 m', + MORE_THAN_46m: 'plus de 46 m' } export enum MissionStatusEnum { diff --git a/frontend/src/features/Reportings/ReportingForm/FormComponents/Dialog/CancelEditDialog.tsx b/frontend/src/features/Reportings/ReportingForm/FormComponents/Dialog/CancelEditDialog.tsx index 61679551bc..f7433f1d3d 100644 --- a/frontend/src/features/Reportings/ReportingForm/FormComponents/Dialog/CancelEditDialog.tsx +++ b/frontend/src/features/Reportings/ReportingForm/FormComponents/Dialog/CancelEditDialog.tsx @@ -1,5 +1,4 @@ -import { Dialog } from '@mtes-mct/monitor-ui' -import { Button } from 'rsuite' +import { Accent, Button, Dialog } from '@mtes-mct/monitor-ui' export function CancelEditDialog({ onCancel, onConfirm, open }) { return ( @@ -12,12 +11,10 @@ export function CancelEditDialog({ onCancel, onConfirm, open }) { - - + ) diff --git a/frontend/src/features/commonStyles/Input.style.ts b/frontend/src/features/commonStyles/Input.style.ts deleted file mode 100644 index 4782388a4c..0000000000 --- a/frontend/src/features/commonStyles/Input.style.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Input } from 'rsuite' -import styled from 'styled-components' - -export const Label = styled.span<{ - isLast: boolean -}>` - text-align: left; - color: ${p => p.theme.color.slateGray}; - min-width: 154px; - font-size: 13px; - ${props => (props.isLast ? '' : 'margin-right: 20px')}; -` - -export const CustomInput = styled(Input)` - font-size: 13px; - height: 35px; - ${props => (props.width ? '' : 'min-width: 100px;')} - ${props => (props.width ? `width: ${props.width};` : '')} - border: 1px solid ${props => (props.$isRed ? `${props.theme.color.maximumRed}` : `${props.theme.color.lightGray}`)}; - border-radius: 2px; - color: ${p => p.theme.color.gunMetal}!important; - font-weight: 500; - background-color: ${props => (props.$isGray ? props.theme.color.gainsboro : props.theme.color.white)}; - margin: 0px 10px 0px 0px; - padding: 8px; - - &:focus { - color: ${p => p.theme.color.gunMetal}!important; - border-color: ${p => p.theme.color.lightGray}!important; - cursor: text; - } - - &:hover { - color: ${p => p.theme.color.gunMetal}!important; - border-color: ${p => p.theme.color.lightGray}!important; - cursor: text; - } - - ::placeholder { - font-size: 11px; - color: ${p => p.theme.color.slateGray}; - } -` diff --git a/frontend/src/features/layersSelector/base/BaseLayerItem.tsx b/frontend/src/features/layersSelector/base/BaseLayerItem.tsx deleted file mode 100644 index be4dd05d27..0000000000 --- a/frontend/src/features/layersSelector/base/BaseLayerItem.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Radio } from 'rsuite' -import styled from 'styled-components' - -import { BaseLayers } from '../../../domain/entities/layers/constants' - -export function BaseLayerItem({ layer }) { - return ( - - {BaseLayers[layer].text} - - ) -} - -const Row = styled.span` - width: 100%; - display: block; - line-height: 18px; - padding-left: 20px; - user-select: none; -` diff --git a/frontend/src/features/layersSelector/base/index.tsx b/frontend/src/features/layersSelector/base/index.tsx index 63c311cc17..dff8b971de 100644 --- a/frontend/src/features/layersSelector/base/index.tsx +++ b/frontend/src/features/layersSelector/base/index.tsx @@ -1,8 +1,7 @@ -import { RadioGroup } from 'rsuite' +import { MultiRadio, getOptionsFromLabelledEnum } from '@mtes-mct/monitor-ui' import styled from 'styled-components' -import { BaseLayerItem } from './BaseLayerItem' -import { BaseLayers } from '../../../domain/entities/layers/constants' +import { BaseLayersLabel } from '../../../domain/entities/layers/constants' import { toggleBaseLayer } from '../../../domain/shared_slices/LayerSidebar' import { selectBaseLayer } from '../../../domain/shared_slices/Map' import { useAppDispatch } from '../../../hooks/useAppDispatch' @@ -10,7 +9,7 @@ import { useAppSelector } from '../../../hooks/useAppSelector' import { ChevronIcon } from '../../commonStyles/icons/ChevronIcon.style' import { LayerSelectorMenu } from '../utils/LayerSelectorMenu.style' -const baseLayersKeys = Object.keys(BaseLayers).filter(key => key !== BaseLayers.DARK.code) +const baseLayersKeys = getOptionsFromLabelledEnum(BaseLayersLabel) export function BaseLayerList() { const dispatch = useAppDispatch() @@ -29,67 +28,61 @@ export function BaseLayerList() { Fonds de carte - - - {baseLayersKeys.map(layer => ( - - - - ))} - - + + + ) } -const BaseLayersList = styled.ul<{ $baseLayersLength: number | undefined; $showBaseLayers: boolean }>` - margin: 0; +const BaseLayersContainer = styled.div<{ $baseLayersLength: number | undefined; $showBaseLayers: boolean }>` + background-color: ${p => p.theme.color.white}; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; border-radius: 0; - padding: 0; + margin: 0; + + animation: ${p => (p.$showBaseLayers ? 'zones-opening' : 'zones-closing')} 0.5s ease forwards; height: 0; overflow-y: hidden; overflow-x: hidden; - background: ${p => p.theme.color.white}; - - animation: ${p => (p.$showBaseLayers ? 'zones-opening' : 'zones-closing')} 0.5s ease forwards; - @keyframes zones-opening { 0% { height: 0; } 100% { - height: ${p => (p.$baseLayersLength ? `${38 * p.$baseLayersLength}px` : '175px')}; + height: ${p => (p.$baseLayersLength ? `${39 * p.$baseLayersLength}px` : '175px')}; } } @keyframes zones-closing { 0% { - height: ${p => (p.$baseLayersLength ? `${38 * p.$baseLayersLength}px` : '175px')}; + height: ${p => (p.$baseLayersLength ? `${39 * p.$baseLayersLength}px` : '175px')}; } 100% { height: 0; } } - - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; ` -const ListItem = styled.li` - margin: 0; - text-align: left; - list-style-type: none; - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden !important; - cursor: pointer; - background: ${p => p.theme.color.white}; - color: ${p => p.theme.color.gunMetal}; - border-bottom: 1px solid ${p => p.theme.color.lightGray}; - line-height: 1.9em; +const StyledMultiRadio = styled(MultiRadio)` + > div > div > .rs-radio { + border-bottom: 1px solid ${p => p.theme.color.lightGray}; + margin-top: 0px !important; + padding: 8px 16px; - :hover { - background: ${p => p.theme.color.blueYonder25}; + :hover { + background-color: ${p => p.theme.color.blueYonder25}; + } + > div > label { + line-height: 22px; + } } ` diff --git a/frontend/src/features/layersSelector/search/LayerFilters.tsx b/frontend/src/features/layersSelector/search/LayerFilters.tsx index 94115607e7..2cdd7e3d8e 100644 --- a/frontend/src/features/layersSelector/search/LayerFilters.tsx +++ b/frontend/src/features/layersSelector/search/LayerFilters.tsx @@ -1,5 +1,4 @@ import { Accent, CheckPicker, SingleTag } from '@mtes-mct/monitor-ui' -import { Button } from 'rsuite' import styled from 'styled-components' export function LayerFilters({ @@ -80,9 +79,7 @@ export function LayerFilters({ {(filteredRegulatoryThemes?.length > 0 || filteredAmpTypes?.length > 0) && ( - - Réinitialiser les filtres - + Réinitialiser les filtres )} ) @@ -101,8 +98,12 @@ const TagWrapper = styled.div` flex-wrap: wrap; gap: 4px; ` -const ResetFilters = styled(Button)` +const ResetFilters = styled.div` + color: ${p => p.theme.color.slateGray}; + cursor: pointer; + display: flex; padding: 0px; + text-decoration: underline; ` const OptionValue = styled.span` diff --git a/frontend/src/features/map/controls/MapCoordinatesBox.tsx b/frontend/src/features/map/controls/MapCoordinatesBox.tsx index 30881376a4..756aecc705 100644 --- a/frontend/src/features/map/controls/MapCoordinatesBox.tsx +++ b/frontend/src/features/map/controls/MapCoordinatesBox.tsx @@ -1,8 +1,12 @@ +import { MultiRadio, getOptionsFromLabelledEnum } from '@mtes-mct/monitor-ui' import { useEffect, useRef, useState } from 'react' -import { Radio, RadioGroup } from 'rsuite' import styled from 'styled-components' -import { CoordinatesFormat, OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants' +import { + CoordinatesFormat, + CoordinatesFormatLabel, + OPENLAYERS_PROJECTION +} from '../../../domain/entities/map/constants' import { setCoordinatesFormat } from '../../../domain/shared_slices/Map' import { useAppDispatch } from '../../../hooks/useAppDispatch' import { useAppSelector } from '../../../hooks/useAppSelector' @@ -15,6 +19,8 @@ import type { Coordinate } from 'ol/coordinate' let lastEventForPointerMove let timeoutForPointerMove +const COORDINATES_OPTIONS = getOptionsFromLabelledEnum(CoordinatesFormatLabel) + export function MapCoordinatesBox({ map }: BaseMapChildrenProps) { const [coordinates, setCursorCoordinates] = useState() @@ -50,10 +56,17 @@ export function MapCoordinatesBox({ map }: BaseMapChildrenProps) { const wrapperRef = useRef(null) const dispatch = useAppDispatch() - const coordinatesFormat = useAppSelector(state => state.map.coordinatesFormat) + const coordinatesFormat = useAppSelector(state => state.map.coordinatesFormat) as CoordinatesFormat const [coordinatesSelectionIsOpen, setCoordinatesSelectionIsOpen] = useState(false) const clickedOutsideComponent = useClickOutsideWhenOpened(wrapperRef, coordinatesSelectionIsOpen) + const selectCordinatesFormat = value => { + if (!value) { + return + } + dispatch(setCoordinatesFormat(value)) + } + useEffect(() => { if (clickedOutsideComponent) { setCoordinatesSelectionIsOpen(false) @@ -66,32 +79,17 @@ export function MapCoordinatesBox({ map }: BaseMapChildrenProps) {
setCoordinatesSelectionIsOpen(false)}> Unités des coordonnées
- dispatch(setCoordinatesFormat(value))} - value={coordinatesFormat} - > - - DMS - - - DMD - - - DD - - + + + setCoordinatesSelectionIsOpen(!coordinatesSelectionIsOpen)}> {getShowedCoordinates(coordinates, coordinatesFormat)} ({coordinatesFormat}) @@ -113,7 +111,7 @@ const getShowedCoordinates = (coordinates, coordinatesFormat) => { const StyledCoordinatesContainer = styled.div` z-index: 2; ` -const RadioWrapper = styled(RadioGroup)` +const RadioContainer = styled.div` padding: 6px 12px 12px 12px !important; ` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionCard.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionCard.tsx index ccb428f038..b238653a3d 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionCard.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionCard.tsx @@ -63,8 +63,7 @@ export function InfractionCard({ {/* TODO Fix the type here: `label` is a `string` but can be undefined? */} {vehicleTypeLabels[vehicleTypeField?.value]?.label ?? 'Non Renseigné'} {vehicleTypeField?.value === VehicleTypeEnum.VESSEL - ? // TODO Fix the type here: `libelle` is a `string` but can be undefined? - ` – ${vesselTypeLabels[vesselType?.value]?.libelle ?? 'Type non défini'}` + ? ` – ${vesselTypeLabels[vesselType?.value] ?? 'Type non défini'}` : ''}  –  diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx index 86c544a0da..1bcb4e7573 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx @@ -6,20 +6,10 @@ import { VesselSizeSelector } from './VesselSizeSelector' import { VesselTypeSelector } from './VesselTypeSelector' import { VehicleTypeEnum } from '../../../../../../domain/entities/vehicleType' -import type { EnvActionControl, Infraction } from '../../../../../../domain/entities/missions' +import type { EnvActionControl } from '../../../../../../domain/entities/missions' export function InfractionFormHeaderVehicle({ envActionIndex, infractionPath }) { const [vehicleTypeField] = useField(`envActions.${envActionIndex}.vehicleType`) - const [vesselTypeField, , vesselTypeHelpers] = useField(`${infractionPath}.vesselType`) - const [vesselSizeField, , vesselSizeHelpers] = useField(`${infractionPath}.vesselSize`) - - const handleChangeVesselType = v => { - vesselTypeHelpers.setValue(v) - } - - const handleChangeVesselSize = v => { - vesselSizeHelpers.setValue(v) - } return ( @@ -33,11 +23,11 @@ export function InfractionFormHeaderVehicle({ envActionIndex, infractionPath }) {vehicleTypeField?.value === VehicleTypeEnum.VESSEL && ( <> - + - + )} diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselSizeSelector.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselSizeSelector.tsx index 919fcd7cd8..b153aa0837 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselSizeSelector.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselSizeSelector.tsx @@ -1,38 +1,20 @@ -/* eslint-disable react/jsx-props-no-spreading */ +import { FormikSelect, getOptionsFromLabelledEnum } from '@mtes-mct/monitor-ui' import { type MutableRefObject, useRef } from 'react' -import { Form, SelectPicker } from 'rsuite' -import styled from 'styled-components' -import { vesselSizeEnum } from '../../../../../../domain/entities/missions' +import { vesselSizeLabel } from '../../../../../../domain/entities/missions' -export function VesselSizeSelector({ onChange, value, ...props }) { +export function VesselSizeSelector({ infractionPath }) { const vesselSizeSelectorRef = useRef() as MutableRefObject - const vesselSizeFieldList = Object.values(vesselSizeEnum) + const vesselSizeFieldList = getOptionsFromLabelledEnum(vesselSizeLabel) return ( - - Taille du navire - vesselSizeSelectorRef.current} - data={vesselSizeFieldList} - labelKey="libelle" - onChange={onChange} - searchable={false} - size="sm" - value={value} - valueKey="code" - {...props} - /> - + ) } - -const SelectorWrapper = styled.div` - width: 150px; - .rs-picker-menu { - position: relative; - margin-top: -50px; - } -` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselTypeSelector.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselTypeSelector.tsx index f0f0559335..90c7a6ea62 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselTypeSelector.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/VesselTypeSelector.tsx @@ -1,38 +1,22 @@ -/* eslint-disable react/jsx-props-no-spreading */ +import { FormikSelect, getOptionsFromLabelledEnum } from '@mtes-mct/monitor-ui' import { type MutableRefObject, useRef } from 'react' -import { Form, SelectPicker } from 'rsuite' -import styled from 'styled-components' import { vesselTypeLabels } from '../../../../../../domain/entities/missions' -export function VesselTypeSelector({ onChange, value, ...props }) { +export function VesselTypeSelector({ infractionPath }) { const vesselTypeSelectorRef = useRef() as MutableRefObject - const vesselTypeFieldList = Object.values(vesselTypeLabels) + const vesselTypeFieldList = getOptionsFromLabelledEnum(vesselTypeLabels) return ( - - Type de navire - vesselTypeSelectorRef.current} - data={vesselTypeFieldList} - labelKey="libelle" - onChange={onChange} - searchable={false} - size="sm" - value={value} - valueKey="code" - {...props} - /> - + ) } - -const SelectorWrapper = styled.div` - width: 150px; - .rs-picker-menu { - position: relative; - margin-top: -50px; - } -` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx index ec101e0726..96b7ae17ab 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx @@ -1,5 +1,5 @@ +import { Accent, Button } from '@mtes-mct/monitor-ui' import { useState } from 'react' -import { Button } from 'rsuite' import styled from 'styled-components' import { InfractionCard } from './InfractionCard' @@ -42,7 +42,7 @@ export function InfractionsForm({ canAddInfraction, envActionIndex, form, push, <>
Détails de la cible en infraction -
@@ -81,12 +81,12 @@ export function InfractionsForm({ canAddInfraction, envActionIndex, form, push, } const Header = styled.div` + align-items: end; display: flex; - justify-content: space-between; - align-items: center; margin-bottom: 8px; + justify-content: space-between; ` -const Title = styled.h3` +const Title = styled.span` font-size: 13px; line-height: 22px; display: inline-block; diff --git a/frontend/src/features/missions/MissionForm/CancelEditModal.tsx b/frontend/src/features/missions/MissionForm/CancelEditModal.tsx index dacebf3f87..2a6c49ef3a 100644 --- a/frontend/src/features/missions/MissionForm/CancelEditModal.tsx +++ b/frontend/src/features/missions/MissionForm/CancelEditModal.tsx @@ -1,5 +1,4 @@ -import { Dialog } from '@mtes-mct/monitor-ui' -import { Button } from 'rsuite' +import { Accent, Button, Dialog } from '@mtes-mct/monitor-ui' type CancelEditModalProps = { isAutoSaveEnabled: boolean @@ -22,12 +21,10 @@ export function CancelEditModal({ isAutoSaveEnabled, onCancel, onConfirm, open } - - + ) diff --git a/frontend/src/features/missions/MissionForm/ReopenModal.tsx b/frontend/src/features/missions/MissionForm/ReopenModal.tsx index c572b444b9..e68cc8da4a 100644 --- a/frontend/src/features/missions/MissionForm/ReopenModal.tsx +++ b/frontend/src/features/missions/MissionForm/ReopenModal.tsx @@ -1,5 +1,4 @@ -import { Dialog } from '@mtes-mct/monitor-ui' -import { Button } from 'rsuite' +import { Accent, Button, Dialog } from '@mtes-mct/monitor-ui' export function ReopenModal({ onCancel, onConfirm, open }) { return ( @@ -14,12 +13,10 @@ export function ReopenModal({ onCancel, onConfirm, open }) { - - + ) diff --git a/frontend/src/features/missions/MissionsList/Filters/index.tsx b/frontend/src/features/missions/MissionsList/Filters/index.tsx index 4fedbc526f..4df5bf7c54 100644 --- a/frontend/src/features/missions/MissionsList/Filters/index.tsx +++ b/frontend/src/features/missions/MissionsList/Filters/index.tsx @@ -228,7 +228,6 @@ export function MissionsTableFilters() { renderValue={() => selectedControlUnitIds && {`Unité (${selectedControlUnitIds.length})`} } - size="sm" style={tagPickerStyle} value={selectedControlUnitIds} /> @@ -243,7 +242,6 @@ export function MissionsTableFilters() { renderValue={() => selectedMissionTypes && {`Type (${selectedMissionTypes.length})`} } - size="sm" style={tagPickerStyle} value={selectedMissionTypes} /> @@ -257,7 +255,6 @@ export function MissionsTableFilters() { options={seaFrontsAsOptions} placeholder="Facade" renderValue={() => selectedSeaFronts && {`Facade (${selectedSeaFronts.length})`}} - size="sm" style={tagPickerStyle} value={selectedSeaFronts} /> @@ -270,7 +267,6 @@ export function MissionsTableFilters() { options={missionStatusesAsOptions} placeholder="Statut" renderValue={() => selectedStatuses && {`Statut (${selectedStatuses.length})`}} - size="sm" style={tagPickerStyle} value={selectedStatuses} /> @@ -285,7 +281,6 @@ export function MissionsTableFilters() { options={themesAsOptions} placeholder="Thématique" renderValue={() => selectedThemes && {`Theme (${selectedThemes.length})`}} - size="sm" style={tagPickerStyle} value={selectedThemes} /> diff --git a/frontend/src/uiMonitor/rsuite-override.css b/frontend/src/uiMonitor/rsuite-override.css index 9c59ec944a..0835a1b939 100644 --- a/frontend/src/uiMonitor/rsuite-override.css +++ b/frontend/src/uiMonitor/rsuite-override.css @@ -387,7 +387,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before { .rs-radio-checker > label { color: var(--charcoal); font-weight: 500; - line-height: 17px; + line-height: 22px; } /* form */ From dc1e25f436e2541162952253aeeb2ac23b238dee Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Tue, 6 Feb 2024 11:05:16 +0100 Subject: [PATCH 02/10] [Tech] replace some rsuite components by monitor-ui components - part 2 --- .../ActionForm/ControlForm/ControlForm.tsx | 129 ++++++++---------- .../InfractionForm/InfractionForm.tsx | 117 +++++++--------- .../InfractionFormHeaderCompany.tsx | 11 +- .../InfractionFormHeaderVehicle.tsx | 31 ++--- .../ControlForm/InfractionsForm.tsx | 4 +- .../MissionForm/ActionForm/NoteForm.tsx | 5 +- .../ActionForm/SurveillanceForm.tsx | 108 +++++++-------- .../ActionForm/Themes/ActionTheme.tsx | 3 + .../Themes/MultipleThemeElement.tsx | 8 +- 9 files changed, 180 insertions(+), 236 deletions(-) diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/ControlForm.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/ControlForm.tsx index 04b90acb49..ab66451d1d 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/ControlForm.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/ControlForm.tsx @@ -16,7 +16,7 @@ import { import { FieldArray, useFormikContext, getIn } from 'formik' import _ from 'lodash' import { useMemo, useState } from 'react' -import { Form, Toggle } from 'rsuite' +import { Toggle } from 'rsuite' import styled from 'styled-components' import { InfractionsForm } from './InfractionsForm' @@ -213,7 +213,7 @@ export function ControlForm({ - +
)} - - - - - - - {actionStartDateTimeUtcErrorMessage && {actionStartDateTimeUtcErrorMessage}} - +
+ + + + + {actionStartDateTimeUtcErrorMessage && {actionStartDateTimeUtcErrorMessage}} - - - - - - - - - - + + + + + - p.theme.color.slateGray}; +const Separator = styled.div` + height: 1px; + border-top: 1px solid ${p => p.theme.color.slateGray}; ` -const ActionSummary = styled(Form.Group)` - height: 58px; - flex-shrink: 0; +const ActionSummary = styled.div` display: flex; -` - -const ActionFieldWrapper = styled.div` - :not(:first-child) { - margin-left: 8px; - } + flex-direction: row; + gap: 8px; ` const SubTitle = styled.div` font-size: 16px; display: inline-block; ` - -const StyledFormikTextareaWithMargin = styled(FormikTextarea)` - margin-top: 24px; -` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionForm.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionForm.tsx index e74456c69d..a8fc3e22e4 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionForm.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionForm.tsx @@ -1,6 +1,13 @@ -import { FieldError, FormikCheckbox, FormikMultiRadio, FormikTextarea, FormikTextInput } from '@mtes-mct/monitor-ui' +import { + Accent, + Button, + FieldError, + FormikCheckbox, + FormikMultiRadio, + FormikTextarea, + FormikTextInput +} from '@mtes-mct/monitor-ui' import { useField } from 'formik' -import { Form, Button, ButtonToolbar } from 'rsuite' import styled from 'styled-components' import { InfractionFormHeaderCompany } from './InfractionFormHeaderCompany' @@ -42,57 +49,41 @@ export function InfractionForm({ )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + {!!meta.error && Veuillez compléter les champs en rouge pour valider l'infraction} ) @@ -100,24 +91,22 @@ export function InfractionForm({ const FormWrapper = styled.div` background: ${p => p.theme.color.white}; + display: flex; + flex-direction: column; + gap: 24px; padding: 32px; ` -const FormGroupFixedHeight = styled(Form.Group)` - haight: 58px; -` -const FormColumn = styled.div` - display: inline-block; -` const FormColumnWithCheckbox = styled.div` - display: inline-block; - vertical-align: top; - padding-top: 16px; + align-items: end; + display: flex; + gap: 16px; + > .Field-Checkbox { + padding-bottom: 8px; + } ` -const ButtonToolbarRight = styled(ButtonToolbar)` +const ButtonContainer = styled.div` display: flex; + gap: 16px; justify-content: flex-end; ` -const SubGroup = styled.div` - margin-bottom: 16px; -` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderCompany.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderCompany.tsx index 7b4599b4cc..3b0bd48a03 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderCompany.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderCompany.tsx @@ -1,14 +1,5 @@ import { FormikTextInput } from '@mtes-mct/monitor-ui' -import styled from 'styled-components' export function InfractionFormHeaderCompany({ infractionPath }) { - return ( - - - - ) + return } - -const SubGroup = styled.div` - margin-bottom: 16px; -` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx index 1bcb4e7573..bff4b79b08 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionFormHeaderVehicle.tsx @@ -13,36 +13,25 @@ export function InfractionFormHeaderVehicle({ envActionIndex, infractionPath }) return ( - - - + + {vehicleTypeField?.value === VehicleTypeEnum.VESSEL && ( <> - - - + - - - + )} ) } -const FormColumn = styled.div` - display: inline-block; - :not(:last-child) { - margin-right: 6px; - } -` const FormGroup = styled.div` - margin-bottom: 16px; - height: 58px; display: flex; + flex: 1; + gap: 8px; ` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx index 96b7ae17ab..52be439bae 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/ControlForm/InfractionsForm.tsx @@ -39,7 +39,7 @@ export function InfractionsForm({ canAddInfraction, envActionIndex, form, push, } return ( - <> +
Détails de la cible en infraction
) } diff --git a/frontend/src/features/missions/MissionForm/ActionForm/NoteForm.tsx b/frontend/src/features/missions/MissionForm/ActionForm/NoteForm.tsx index 2ebd254e02..ab0d080ca1 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/NoteForm.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/NoteForm.tsx @@ -1,6 +1,5 @@ import { Accent, FormikTextarea, Icon, Size, THEME } from '@mtes-mct/monitor-ui' import { useField } from 'formik' -import { Form } from 'rsuite' import { Header, StyledDeleteButton, Title, TitleWithIcon } from './style' import { type EnvAction } from '../../../../domain/entities/missions' @@ -33,9 +32,7 @@ export function NoteForm({ currentActionIndex, remove, setCurrentActionIndex }) - - - + ) } diff --git a/frontend/src/features/missions/MissionForm/ActionForm/SurveillanceForm.tsx b/frontend/src/features/missions/MissionForm/ActionForm/SurveillanceForm.tsx index b2950f25d3..23703ac980 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/SurveillanceForm.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/SurveillanceForm.tsx @@ -11,11 +11,12 @@ import { Accent, Icon, Size, - THEME + THEME, + Label } from '@mtes-mct/monitor-ui' import { useField, useFormikContext } from 'formik' import { useMemo, useState } from 'react' -import { Form, Toggle } from 'rsuite' +import { Toggle } from 'rsuite' import styled from 'styled-components' import { Header, StyledDeleteButton, Title, TitleWithIcon } from './style' @@ -161,31 +162,31 @@ export function SurveillanceForm({ currentActionIndex, remove, setCurrentActionI Supprimer - - - - La surveillance est rattachée à un signalement - - {isReportingListVisible && ( - - )} - - - - - Début et fin de surveillance (UTC) + +
+ + + La surveillance est rattachée à un signalement + + {isReportingListVisible && ( + + )} +
+ + + - - - - - - - - + + + + + + - + ) } -const ReportingsContainer = styled.div` - padding-bottom: 32px; - gap: 16px; +const FormBody = styled.div` + display: flex; + flex-direction: column; + gap: 24px; + padding-bottom: 48px; ` const StyledToggle = styled.div` display: flex; @@ -286,15 +287,12 @@ const FlexSelectorWrapper = styled.div` display: flex; flex-direction: column; align-items: baseline; - gap: 8px; - margin-bottom: 24px; ` const StyledDatePickerContainer = styled.div` display: flex; flex-direction: row; gap: 8px; align-items: baseline; - margin-bottom: 8px; ` const StyledDatePicker = styled(DatePicker)` p { diff --git a/frontend/src/features/missions/MissionForm/ActionForm/Themes/ActionTheme.tsx b/frontend/src/features/missions/MissionForm/ActionForm/Themes/ActionTheme.tsx index e135d5b4cc..28f82dd96b 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/Themes/ActionTheme.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/Themes/ActionTheme.tsx @@ -79,5 +79,8 @@ export function ActionTheme({ } const ActionThemeWrapper = styled.div` + display: flex; + flex-direction: column; flex: 1; + gap: 24px; ` diff --git a/frontend/src/features/missions/MissionForm/ActionForm/Themes/MultipleThemeElement.tsx b/frontend/src/features/missions/MissionForm/ActionForm/Themes/MultipleThemeElement.tsx index beec8d3cfa..81441685d3 100644 --- a/frontend/src/features/missions/MissionForm/ActionForm/Themes/MultipleThemeElement.tsx +++ b/frontend/src/features/missions/MissionForm/ActionForm/Themes/MultipleThemeElement.tsx @@ -20,7 +20,7 @@ export function MultipleThemeElement({ envActionIndex, form, push, remove, theme [] return ( - +
{isEmpty(compact(currentThemes)) && ( - +
) } -const ThemesWrapper = styled.div` - margin-bottom: 24px; -` - const ThemeBloc = styled.div` display: flex; &:not(:nth-of-type(1)) { From ad50752f63e835e0de2cfab9810616526eff2907 Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Tue, 6 Feb 2024 11:48:39 +0100 Subject: [PATCH 03/10] [Design] WIP InterestPoint --- .../tools/interestPoint/EditInterestPoint.tsx | 71 +++++++++++-------- 1 file changed, 41 insertions(+), 30 deletions(-) diff --git a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx index 72ed312745..2992685b65 100644 --- a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx +++ b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx @@ -1,11 +1,10 @@ -import { Icon } from '@mtes-mct/monitor-ui' +// import { Icon, MultiRadio } from '@mtes-mct/monitor-ui' import { boundingExtent } from 'ol/extent' import { transform, transformExtent } from 'ol/proj' import { useCallback, useMemo, useState } from 'react' -import { Radio, RadioGroup } from 'rsuite' import styled from 'styled-components' -import { interestPointType } from '../../../../domain/entities/interestPoints' +// import { interestPointType } from '../../../../domain/entities/interestPoints' import { CoordinatesFormat, OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../../../domain/entities/map/constants' import { addInterestPoint, updateInterestPointKeyBeingDrawed } from '../../../../domain/shared_slices/InterestPoint' import { setFitToExtent } from '../../../../domain/shared_slices/Map' @@ -18,6 +17,36 @@ import { MapToolBox } from '../MapToolBox' import type { Coordinate } from 'ol/coordinate' +/* const INTEREST_POINT_OPTIONS = [ + { + label: ( + <> + + Moyen de contrôle + + ), + value: interestPointType.CONTROL_ENTITY + }, + { + label: ( + <> + + Navire de pêche + + ), + value: interestPointType.FISHING_VESSEL + }, + { + label: ( + <> + + Autre point + + ), + value: interestPointType.OTHER + } +] */ + // TODO Refactor this component // - Move the state logic to the reducer // - Use formik (or at least uncontrolled form components) @@ -78,7 +107,7 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi [dispatch, interestPointBeingDrawed?.observations] ) - const updateType = useCallback( + /* const updateType = useCallback( type => { if (type && interestPointBeingDrawed?.type !== type) { dispatch( @@ -90,7 +119,7 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi } }, [dispatch, interestPointBeingDrawed?.type] - ) + ) */ /** * Compare with previous coordinates and update interest point coordinates @@ -139,27 +168,13 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi

Coordonnées

{isOpen && } -

Type de point

- - - - - Moyen de contrôle - - - - Navire de pêche - - - - Autre point - - - + {/* */}

Libellé du point

p.theme.color.lightGray}; color: ${p => p.theme.color.gunMetal}; From fb9f76a02c718d52f32fc801a752e4d91c8236bb Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Thu, 8 Feb 2024 15:00:58 +0100 Subject: [PATCH 04/10] [InterestPoint] use MultiRadio component from monitor-ui --- frontend/package-lock.json | 8 +- frontend/package.json | 2 +- frontend/src/features/InterestPoint/types.ts | 8 +- .../map/layers/InterestPointLayer.tsx | 2 +- .../tools/interestPoint/EditInterestPoint.tsx | 165 +++++++++++------- 5 files changed, 113 insertions(+), 72 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fc0275bb85..67aa9f7210 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "license": "AGPL-3.0", "dependencies": { - "@mtes-mct/monitor-ui": "11.6.0", + "@mtes-mct/monitor-ui": "11.7.0", "@reduxjs/toolkit": "1.9.7", "@rsuite/responsive-nav": "5.0.1", "@sentry/browser": "7.73.0", @@ -3714,9 +3714,9 @@ "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" }, "node_modules/@mtes-mct/monitor-ui": { - "version": "11.6.0", - "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-11.6.0.tgz", - "integrity": "sha512-pPdFcmYRRuVFHxirbR20q9L96q9JnQX+bcOLigkmOFe14tm08hMfUjM/NVnz3jvXet93XJql33Ns23zlJAQKTQ==", + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-11.7.0.tgz", + "integrity": "sha512-1Lbf6BL7PGog6n2y4DQ86+dV2emuN76uN5HBQN1hXack0RTwfLa+Rm0SKVdHnCOkB01chXxJ/7GNkCJtEVCDvw==", "dependencies": { "@babel/runtime": "7.22.15", "@tanstack/react-table": "8.9.7", diff --git a/frontend/package.json b/frontend/package.json index dfd9380a82..bb630b53f3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,7 +26,7 @@ "test:unit:watch": "npm run test:unit -- --watch" }, "dependencies": { - "@mtes-mct/monitor-ui": "11.6.0", + "@mtes-mct/monitor-ui": "11.7.0", "@reduxjs/toolkit": "1.9.7", "@rsuite/responsive-nav": "5.0.1", "@sentry/browser": "7.73.0", diff --git a/frontend/src/features/InterestPoint/types.ts b/frontend/src/features/InterestPoint/types.ts index 38ab8d4907..d4cc4be0a0 100644 --- a/frontend/src/features/InterestPoint/types.ts +++ b/frontend/src/features/InterestPoint/types.ts @@ -1,6 +1,7 @@ -import type { Coordinates } from '@mtes-mct/monitor-ui' +import type { Coordinates, IconProps } from '@mtes-mct/monitor-ui' import type Feature from 'ol/Feature' import type { LineString } from 'ol/geom' +import type { FunctionComponent } from 'react' export type InterestPoint = { coordinates: Coordinates @@ -19,3 +20,8 @@ export type NewInterestPoint = { type: string | null uuid: string } + +export type InterestPointOptionValueType = { + icon: FunctionComponent + value: string +} diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx index 98b964fd6f..8b75585009 100644 --- a/frontend/src/features/map/layers/InterestPointLayer.tsx +++ b/frontend/src/features/map/layers/InterestPointLayer.tsx @@ -218,7 +218,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) { ) } - startDrawing(event, interestPointBeingDrawed?.type ?? interestPointType.FISHING_VESSEL) + startDrawing(event, interestPointBeingDrawed?.type ?? interestPointType.OTHER) }) drawObject.once(DRAW_ABORT_EVENT, () => { diff --git a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx index 2992685b65..fd23936879 100644 --- a/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx +++ b/frontend/src/features/map/tools/interestPoint/EditInterestPoint.tsx @@ -1,10 +1,10 @@ -// import { Icon, MultiRadio } from '@mtes-mct/monitor-ui' +import { Icon, MultiRadio, type Option } from '@mtes-mct/monitor-ui' import { boundingExtent } from 'ol/extent' import { transform, transformExtent } from 'ol/proj' import { useCallback, useMemo, useState } from 'react' import styled from 'styled-components' -// import { interestPointType } from '../../../../domain/entities/interestPoints' +import { interestPointType } from '../../../../domain/entities/interestPoints' import { CoordinatesFormat, OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../../../domain/entities/map/constants' import { addInterestPoint, updateInterestPointKeyBeingDrawed } from '../../../../domain/shared_slices/InterestPoint' import { setFitToExtent } from '../../../../domain/shared_slices/Map' @@ -15,37 +15,32 @@ import { coordinatesAreDistinct, getCoordinates } from '../../../../utils/coordi import { SetCoordinates } from '../../../coordinates/SetCoordinates' import { MapToolBox } from '../MapToolBox' +import type { InterestPointOptionValueType } from '../../../InterestPoint/types' import type { Coordinate } from 'ol/coordinate' -/* const INTEREST_POINT_OPTIONS = [ +const INTEREST_POINT_OPTIONS: Array> = [ { - label: ( - <> - - Moyen de contrôle - - ), - value: interestPointType.CONTROL_ENTITY + label: 'Moyen de contrôle', + value: { + icon: Icon.ControlUnit, + value: interestPointType.CONTROL_ENTITY + } }, { - label: ( - <> - - Navire de pêche - - ), - value: interestPointType.FISHING_VESSEL + label: 'Navire de pêche', + value: { + icon: Icon.FleetSegment, + value: interestPointType.FISHING_VESSEL + } }, { - label: ( - <> - - Autre point - - ), - value: interestPointType.OTHER + label: 'Autre point', + value: { + icon: Icon.Info, + value: interestPointType.OTHER + } } -] */ +] // TODO Refactor this component // - Move the state logic to the reducer @@ -57,9 +52,19 @@ type EditInterestPointProps = { } export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: EditInterestPointProps) { const dispatch = useAppDispatch() - const [localCoordinates, setLocalCoordinates] = useState([0, 0]) const { interestPointBeingDrawed, isEditing } = useAppSelector(state => state.interestPoint) + + const [localCoordinates, setLocalCoordinates] = useState([0, 0]) + + const defaultType = interestPointBeingDrawed?.type + ? INTEREST_POINT_OPTIONS.find( + interestPointOption => interestPointOption.value.value === interestPointBeingDrawed.type + )?.value + : INTEREST_POINT_OPTIONS[2]?.value + + const [selectedOption, setSelectedOption] = useState() + /** Coordinates formatted in DD [latitude, longitude] */ const coordinates: number[] = useMemo(() => { if (!interestPointBeingDrawed?.coordinates?.length) { @@ -107,19 +112,21 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi [dispatch, interestPointBeingDrawed?.observations] ) - /* const updateType = useCallback( - type => { - if (type && interestPointBeingDrawed?.type !== type) { + const updateType = useCallback( + option => { + setSelectedOption(option) + const type = option.value + if (option.value && interestPointBeingDrawed?.type !== type) { dispatch( updateInterestPointKeyBeingDrawed({ key: 'type', - value: type + value: option.value }) ) } }, [dispatch, interestPointBeingDrawed?.type] - ) */ + ) /** * Compare with previous coordinates and update interest point coordinates @@ -156,45 +163,68 @@ export function EditInterestPoint({ close, healthcheckTextWarning, isOpen }: Edi dispatch(addInterestPoint()) close() - const formattedCoordinates = [localCoordinates[1], localCoordinates[0]] as Coordinate - const extent = transformExtent(boundingExtent([formattedCoordinates]), WSG84_PROJECTION, OPENLAYERS_PROJECTION) - dispatch(setFitToExtent(extent)) + if (!isEditing) { + const formattedCoordinates = [localCoordinates[1], localCoordinates[0]] as Coordinate + const extent = transformExtent(boundingExtent([formattedCoordinates]), WSG84_PROJECTION, OPENLAYERS_PROJECTION) + dispatch(setFitToExtent(extent)) + } + + // reset state + setSelectedOption(undefined) } } + const cancel = () => { + close() + // reset state + setSelectedOption(undefined) + } + return ( -
Créer un point d'intérêt
- -

Coordonnées

- {isOpen && } - {/* */} -

Libellé du point

- updateName(e.target.value)} - type="text" - value={interestPointBeingDrawed?.name ?? ''} - /> -

Observations

-