fix(rapportage): save & display geoms of Controls

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/domain/entities/missions/EnvActionControlEntity.kt

@@ -1,11 +1,13 @@
 package fr.gouv.cacem.monitorenv.domain.entities.missions
 
+import org.locationtech.jts.geom.MultiPoint
 import java.time.ZonedDateTime
 import java.util.*
 
 data class EnvActionControlEntity(
   override val id: UUID,
   override val actionStartDatetimeUtc: ZonedDateTime? = null,
+  override val geom: MultiPoint? = null,
   val actionTheme: String? = null,
   val actionSubTheme: String? = null,
   val protectedSpecies: List<String>? = listOf(),

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/domain/entities/missions/EnvActionControlProperties.kt

@@ -1,10 +1,12 @@
 package fr.gouv.cacem.monitorenv.domain.entities.missions
 
+import org.locationtech.jts.geom.MultiPoint
 import java.time.ZonedDateTime
 import java.util.*
 
 data class EnvActionControlProperties(
   val actionStartDatetimeUtc: ZonedDateTime? = null,
+  val geom: MultiPoint? = null,
   val actionTheme: String? = null,
   val actionSubTheme: String? = null,
   val protectedSpecies: List<String>? = listOf(),
@@ -18,6 +20,7 @@ data class EnvActionControlProperties(
   fun toEnvActionControlEntity(id: UUID) = EnvActionControlEntity(
     id = id,
     actionStartDatetimeUtc = actionStartDatetimeUtc,
+    geom = geom,
     actionTheme = actionTheme,
     actionSubTheme = actionSubTheme,
     protectedSpecies = protectedSpecies,

frontend/src/domain/use_cases/missions/missionAndControlLocalisation.js

@@ -2,7 +2,7 @@ import GeoJSON from 'ol/format/GeoJSON'
 import Feature from 'ol/Feature'
 import { MultiPolygon, Polygon, Point, MultiPoint } from 'ol/geom'
 
-import { setFeatureType, resetFeatures, resetInteraction, addFeatures, setInteractionType } from "../../../features/drawLayer/DrawLayer.slice"
+import { setFeatureType, resetInteraction, setFeatures, setInteractionType, resetFeatures } from "../../../features/drawLayer/DrawLayer.slice"
 import { setDisplayedItems } from "../../shared_slices/Global"
 
 import { monitorenvFeatureTypes, interactionTypes, olGeometryTypes } from "../../entities/drawLayer"
@@ -45,7 +45,7 @@ export const addMissionZone = ({callback, geom} ) => (dispatch) => {
       geometry: new Polygon(coord).transform(WSG84_PROJECTION, OPENLAYERS_PROJECTION)
     })
   })
-  features && dispatch(addFeatures(features))
+  features && dispatch(setFeatures(features))
   dispatch(openDrawLayerModal)
   dispatch(setFeatureType({featureType: monitorenvFeatureTypes.MISSION_ZONE, callback}))
   dispatch(setInteractionType(interactionTypes.POLYGON))
@@ -58,7 +58,7 @@ export const addControlPositions = ({callback, geom} ) => (dispatch) => {
       geometry: new Point(coord).transform(WSG84_PROJECTION, OPENLAYERS_PROJECTION)
     })
   })
-  features && dispatch(addFeatures(features))
+  features && dispatch(setFeatures(features))
   dispatch(openDrawLayerModal)
   dispatch(setFeatureType({featureType: monitorenvFeatureTypes.ACTION_LOCALISATION, callback}))
   dispatch(setInteractionType(interactionTypes.POINT))
@@ -67,8 +67,7 @@ export const addControlPositions = ({callback, geom} ) => (dispatch) => {
 
 export const quitAddLocalisation = (dispatch) => {
   dispatch(closeDrawLayerModal)
-  dispatch(setFeatureType(null))
-  dispatch(resetFeatures())
+  dispatch(resetInteraction())
 }
 
 export const validateLocalisation = (dispatch, getState) => {
@@ -96,3 +95,7 @@ export const validateLocalisation = (dispatch, getState) => {
   dispatch(resetInteraction())
 }
 
+export const quitEditMission = (dispatch) => {
+  dispatch(resetFeatures())
+  dispatch(resetInteraction())
+}

frontend/src/features/commonComponents/CustomFormikFields/FormikInput.js

@@ -10,7 +10,7 @@ export const FormikInput = ({ name, ...props }) => {
 
 
   return (
-    <Input value={value} onChange={setValue} {...props} />
+    <Input value={value || ''} onChange={setValue} {...props} />
   );
 }
 

frontend/src/features/commonComponents/CustomFormikFields/FormikInputNumber.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import {  useField } from 'formik';
+import {  InputNumber } from 'rsuite'
+
+
+export const FormikInputNumber = ({ name, ...props }) => {
+  const [field, , helpers] = useField(name);
+  const { value } = field;
+  const { setValue } = helpers;
+
+
+  return (
+    <InputNumber value={value || ''} onChange={setValue} {...props} />
+  );
+}
+

frontend/src/features/drawLayer/DrawLayer.slice.js

@@ -21,7 +21,7 @@ const drawLayerReducerSlice = createSlice({
      * Start an interaction with the OpenLayers map, hence use the mouse to draw geometries
      * @param {Object=} state
      * @param {{payload: {
-     *   interactionType: (InteractionTypes.SQUARE|InteractionTypes.POLYGON),
+     *   interactionType: (InteractionTypes.SQUARE|InteractionTypes.POLYGON|null),
      * }}} action - The interaction type (see InteractionTypes enum)
      */
     setFeatureType (state, action) {
@@ -36,15 +36,15 @@ const drawLayerReducerSlice = createSlice({
      * @param {Object=} state
      */
     resetInteraction (state) {
-      state.features = []
+      state.featureType = null
       state.callback = null
       state.interactionType = null
     },
     addFeature(state, action) {
       state.features.push(action.payload)
     },
-    addFeatures(state, action) {
-      state.features = [...state.features, ...action.payload]
+    setFeatures(state, action) {
+      state.features = [...action.payload]
     },
     resetFeatures(state) {
       state.features = []
@@ -57,7 +57,7 @@ export const {
   setInteractionType,
   resetInteraction,
   addFeature,
-  addFeatures,
+  setFeatures,
   resetFeatures
 } = drawLayerReducerSlice.actions
 

frontend/src/features/map/layers/DrawLayer.js

@@ -73,24 +73,36 @@ export const DrawLayer = ({ map }) => {
     }
   }, [map])
 
+  useEffect(()=>{
+    if(vectorLayerRef.current !== null) {
+      if (interactionType) {
+        vectorLayerRef.current.setStyle(
+          [pointLayerStyle, dottedLayerStyle, editStyle]
+        )
+      } else {
+        vectorLayerRef.current.setStyle(
+          [pointLayerStyle, dottedLayerStyle]
+        )
+      }
+    }
+  }, [interactionType])
+
   useEffect(() => {
+    const modify = new Modify({source: GetVectorSource()})
     GetVectorSource()?.clear(true)
     GetDrawVectorSource()?.clear(true)
-    const modify = new Modify({source: GetVectorSource()})
-
     if (!_.isEmpty(features)) {
-      map.addInteraction(modify)
       GetVectorSource()?.addFeatures(features)
+      interactionType && map.addInteraction(modify)
     }
     return () => {
       if (map) {
         map.removeInteraction(modify)
       }
     }
-  }, [features, map])
+  }, [features, map, interactionType])
 
   useEffect(() => {
-    function drawOnMap () {
       if (map && interactionType) {
 
         let type = null
@@ -123,10 +135,9 @@ export const DrawLayer = ({ map }) => {
           GetDrawVectorSource()?.clear(true)
           map.removeInteraction(draw)
         })
-      }
-    }
+        return () => map.removeInteraction(draw)
+      } 
 
-    drawOnMap()
   }, [map, interactionType])
 
 

frontend/src/features/map/layers/missionGeometryHelpers.js

@@ -49,7 +49,8 @@ export const getMissionZoneFeature = (mission, layername) => {
     missionType: mission.missionType,
     resourceUnits: mission.resourceUnits,
     numberOfActions: mission.actions?.length || 0,
-    missionStatus: mission.missionStatus
+    missionStatus: mission.missionStatus,
+    envActions: mission.envActions
   })
   return  feature
 }
@@ -61,6 +62,7 @@ const getActionFeature = (action) => {
     geom, 
     actionType, 
     actionNumberOfControls, 
+    actionTargetType,
     actionTheme, 
     actionStartDatetimeUtc, 
     infractions
@@ -81,15 +83,16 @@ const getActionFeature = (action) => {
     actionTheme,
     actionStartDatetimeUtc,
     actionNumberOfControls,
+    actionTargetType,
     infractions
   })
   return  feature
 }
 
 export const getActionsFeatures = (mission) => {
-  const { actions } = mission
-  if (actions?.length > 0) {
-    return actions.map(getActionFeature).filter(f=>f)
+  const { envActions } = mission
+  if (envActions?.length > 0) {
+    return envActions.map(getActionFeature).filter(f=>f)
   }
   return []
 }

frontend/src/features/map/overlays/missions/ActionCard.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import styled from 'styled-components'
+import { format, isValid } from 'date-fns'
+import { fr } from 'date-fns/locale'
+
+import { actionTargetTypeEnum } from '../../../../domain/entities/missions'
+
+import { COLORS } from '../../../../constants/constants'
+
+export const ActionCard = ({feature, }) => {
+  const { 
+    // actionType, 
+    actionNumberOfControls, 
+    actionTargetType,
+    // actionTheme, 
+    actionStartDatetimeUtc, 
+    infractions
+  } = feature.getProperties()
+  const parsedactionStartDatetimeUtc = new Date(actionStartDatetimeUtc)
+
+
+
+  return (
+  <ActionCardHeader>
+    <Col1>
+      <ActionDate>
+        {isValid(parsedactionStartDatetimeUtc) && format(parsedactionStartDatetimeUtc, "dd MMM yyyy", {locale: fr})}
+      </ActionDate>
+    </Col1>
+    <Col2>
+      <ControlSummary>
+        <Accented>{actionNumberOfControls || 0}</Accented>
+        {` contrôles réalisés sur des cibles de type ` }
+        <Accented>{actionTargetTypeEnum[actionTargetType]?.libelle || 'non spécifié'}</Accented>
+      </ControlSummary>
+      <Tags>
+        <Tag>RAS</Tag>
+        <Tag>INFRA</Tag>
+        <Tag>INFRA SANS PV</Tag>
+        <Tag>MED</Tag>
+      </Tags>
+      <Accented>{infractions || 0}</Accented>infraction(s)
+    </Col2>
+  </ActionCardHeader>
+  )
+}
+
+const ActionCardHeader = styled.div`
+  background: ${COLORS.white};
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  display: flex;
+  width: 265px;
+  z-index: ${props=> props.selected ? 4900 : 5000}
+`
+
+const ActionDate = styled.div`
+  width: 75px;
+  font-size: 12px;
+  margin-right: 16px;
+`
+
+const Accented = styled.span`
+  font-weight: bold;
+`
+
+const ControlSummary = styled.div`
+  font: normal normal normal 13px/18px Marianne;
+  color: ${COLORS.slateGray};
+`
+
+const Col1 = styled.div`
+  padding: 8px 0px 5px 10px;
+`
+const Col2 = styled.div`
+  padding: 8px 8px 4px 8px;
+`
+
+const Tags = styled.div`
+  display: flex;
+  margin-top: 16px;
+  margin-bottom: 16px;
+`
+
+const Tag = styled.div`
+  background: ${COLORS.missingGrey};
+  border-radius: 11px;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 18px;
+  padding: 2px 8px 2px 8px;
+  :not(:first-child) {
+    margin-left: 8px;
+  }
+`

frontend/src/features/map/overlays/missions/MissionCardOverlay.js → frontend/src/features/map/overlays/missions/MissionOverlayWrapper.js

@@ -8,6 +8,8 @@ import { getOverlayPosition, getTopLeftMargin } from '../position'
 import { MissionCard } from './MissionCard'
 
 import { COLORS } from '../../../../constants/constants'
+import { actionTypeEnum } from '../../../../domain/entities/missions'
+import { ActionCard } from './ActionCard'
 
 const overlayHeight = 74
 export const marginsWithoutAlert = {
@@ -19,7 +21,8 @@ export const marginsWithoutAlert = {
   yBottom: -153
 }
 
-export const MissionCardOverlay = ({ map, feature, selected }) => {
+export const MissionOverlayWrapper = ({ map, feature, selected }) => {
+  console.log("over", feature, 'selected', selected)
   const overlayRef = useRef(null)
   const overlayObjectRef = useRef(null)
   const [overlayTopLeftMargin, setOverlayTopLeftMargin] = useState([marginsWithoutAlert.yBottom, marginsWithoutAlert.xMiddle])
@@ -65,17 +68,21 @@ export const MissionCardOverlay = ({ map, feature, selected }) => {
     }
   }, [feature, overlayRef, overlayObjectRef, map])
 
-
-
+  let renderedComponent = null
+  if (feature && feature.get('missionId')) {
+    renderedComponent = (<MissionCard
+      feature={feature}
+      selected={selected}
+    />)
+  } else if (feature && feature.get('actionType') === actionTypeEnum.CONTROL.code ) {
+    renderedComponent = (<ActionCard  feature={feature}
+      selected={selected}
+      />)
+  }
   return (
     <MissionCardOverlayComponent selected={selected} ref={overlayCallback} overlayTopLeftMargin={overlayTopLeftMargin}>
       {
-        feature
-          ? <MissionCard
-            feature={feature}
-            selected={selected}
-          />
-          : null
+        renderedComponent
       }
     </MissionCardOverlayComponent>
   )