[DrawModal] improve draw modal interactions

MTES-MCT · May 13, 2024 · d51425e · d51425e
1 parent b17ff19
commit d51425e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/frontend/src/domain/use_cases/map/updateMapInteractionListeners.ts b/frontend/src/domain/use_cases/map/updateMapInteractionListeners.ts
@@ -13,20 +13,20 @@ export enum MapInteractionListenerEnum {
 export const updateMapInteractionListeners = (listener: MapInteractionListenerEnum) => dispatch => {
   switch (listener) {
     case MapInteractionListenerEnum.DRAW_ZONE_OR_POINT:
-      openDrawLayerModal(dispatch)
+      openDrawLayerModal(dispatch, true)
       dispatch(attachMissionToReportingSliceActions.setIsMissionAttachmentInProgress(false))
       dispatch(attachReportingToMissionSliceActions.setIsReportingAttachmentInProgress(false))
       break
 
     case MapInteractionListenerEnum.ATTACH_MISSION:
-      openDrawLayerModal(dispatch)
+      openDrawLayerModal(dispatch, false)
       dispatch(attachMissionToReportingSliceActions.setIsMissionAttachmentInProgress(true))
       dispatch(attachReportingToMissionSliceActions.setIsReportingAttachmentInProgress(false))
       dispatch(resetInteraction())
       break
 
     case MapInteractionListenerEnum.ATTACH_REPORTING:
-      openDrawLayerModal(dispatch)
+      openDrawLayerModal(dispatch, false)
       dispatch(attachReportingToMissionSliceActions.setIsReportingAttachmentInProgress(true))
       dispatch(attachMissionToReportingSliceActions.setIsMissionAttachmentInProgress(false))
       dispatch(resetInteraction())
@@ -42,12 +42,12 @@ export const updateMapInteractionListeners = (listener: MapInteractionListenerEn
   }
 }
 
-const openDrawLayerModal = dispatch => {
+const openDrawLayerModal = (dispatch, displayLayersSidebar = true) => {
   dispatch(
     setDisplayedItems({
       displayDrawModal: true,
       displayInterestPoint: false,
-      displayLayersSidebar: false,
+      displayLayersSidebar,
       displayLocateOnMap: true,
       displayMeasurement: false,
       displayMissionMenuButton: false,

diff --git a/frontend/src/features/Reportings/ReportingForm/FormComponents/Position/index.tsx b/frontend/src/features/Reportings/ReportingForm/FormComponents/Position/index.tsx
@@ -28,7 +28,7 @@ export function Position() {
       <StyledPositionContainer>
         <Button
           accent={meta.error ? Accent.ERROR : Accent.SECONDARY}
-          disabled={field.value?.coordinates}
+          disabled={field.value?.coordinates.length > 0}
           Icon={Icon.Plus}
           isFullWidth
           onClick={handleAddZone}
@@ -37,7 +37,7 @@ export function Position() {
         </Button>
         <Button
           accent={meta.error ? Accent.ERROR : Accent.SECONDARY}
-          disabled={field.value?.coordinates}
+          disabled={field.value?.coordinates.length > 0}
           Icon={Icon.Plus}
           isFullWidth
           onClick={handleAddPoint}

diff --git a/frontend/src/features/commonComponents/Modals/MapInteraction.tsx b/frontend/src/features/commonComponents/Modals/MapInteraction.tsx
@@ -1,10 +1,11 @@
-import { Accent, Button } from '@mtes-mct/monitor-ui'
+import { Accent, Button, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 type MapIntercationProps = {
   children?: React.ReactNode
   customTools?: React.ReactNode
   isValidatedButtonDisabled?: boolean
+  onCancel?: () => void
   onReset: () => void
   onValidate: () => void
   resetButtonText?: string
@@ -15,6 +16,7 @@ export function MapInteraction({
   children = undefined,
   customTools = undefined,
   isValidatedButtonDisabled = false,
+  onCancel,
   onReset,
   onValidate,
   resetButtonText = undefined,
@@ -26,6 +28,7 @@ export function MapInteraction({
       <Panel>
         <Header>
           <Title>{title}</Title>
+          <IconButton Icon={Icon.Close} onClick={onCancel} />
         </Header>
 
         <Body>
@@ -59,11 +62,12 @@ const Panel = styled.div`
   box-shadow: 0px 3px 6px #00000029;
 `
 const Header = styled.div`
-  display: flex;
+  align-items: center;
   background: ${p => p.theme.color.charcoal};
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 24px;
   width: 580px;
-  justify-content: space-around;
-  padding: 12px;
 `
 
 const Title = styled.h1`

diff --git a/frontend/src/features/map/draw/DrawModal.tsx b/frontend/src/features/map/draw/DrawModal.tsx
@@ -125,6 +125,12 @@ export function DrawModal() {
   const handleSelectInteraction = nextInteraction => () => {
     dispatch(setInteractionType(nextInteraction))
   }
+  const handleCancel = () => {
+    handleReset()
+
+    dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE))
+  }
+
   const handleReset = () => {
     if (!initialGeometry) {
       return dispatch(eraseDrawedGeometries(initialFeatureNumberRef.current))
@@ -190,6 +196,7 @@ export function DrawModal() {
         )
       }
       isValidatedButtonDisabled={!isGeometryValid}
+      onCancel={handleCancel}
       onReset={handleReset}
       onValidate={handleValidate}
       title={`Vous êtes en train d'ajouter ${listener && titlePlaceholder[listener]}`}