Merge pull request #110 from MTES-MCT/rapportage-v1.3

feat(rapportage):fix display editing mission zones

frontend/src/domain/shared_slices/Global.js

@@ -25,6 +25,7 @@ const globalSlice = createSlice({
     // state entry for every layer whose visibility should be controlled
     displayMissionsLayer: true,
     displaySelectedMissionLayer: true,
+    displayEditingMissionLayer: true,
   },
   reducers: {
     expandRightMenu (state) {

frontend/src/domain/shared_slices/MissionsState.js

@@ -10,6 +10,7 @@ const missionStateSlice = createSlice({
   initialState: {
     // selectedMissionId on Map
     selectedMissionId: null,
+    // state of the mission being edited (synced with form)
     missionState: null
   },
   reducers: {
@@ -20,7 +21,6 @@ const missionStateSlice = createSlice({
       state.selectedMissionId = null
     },
     setMissionState (state, action) {
-      console.log('state updated', action.payload)
       state.missionState = action.payload
     }
   }

frontend/src/features/map/Map.js

@@ -11,6 +11,7 @@ import InterestPointLayer from './layers/InterestPointLayer'
 import { DrawLayer } from './layers/DrawLayer';
 import { MissionsLayer } from './layers/MissionsLayer'
 import { SelectedMissionLayer } from './layers/SelectedMissionLayer'
+import { EditingMissionLayer } from './layers/EditingMissionLayer'
 import { HoveredMissionLayer } from './layers/HoveredMissionLayer'
 
 import { MissionOverlays } from './overlays/missions/MissionOverlays'
@@ -67,6 +68,7 @@ const Map = () => {
       {FEATURE_FLAGS.LOCALIZE_MISSIONS && <DrawLayer/>}
       {FEATURE_FLAGS.LOCALIZE_MISSIONS && <MissionsLayer/>}
       {FEATURE_FLAGS.LOCALIZE_MISSIONS && <SelectedMissionLayer/>}
+      {FEATURE_FLAGS.LOCALIZE_MISSIONS && <EditingMissionLayer/>}
       {FEATURE_FLAGS.LOCALIZE_MISSIONS && <HoveredMissionLayer/>}
       {FEATURE_FLAGS.LOCALIZE_MISSIONS && <MissionOverlays/>}
       {FEATURE_FLAGS.LOCALIZE_MISSIONS && <ControlOverlay/>}

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

@@ -0,0 +1,96 @@
+import {  useEffect, useRef } from 'react'
+import { useSelector } from 'react-redux'
+import VectorSource from 'ol/source/Vector'
+import VectorLayer from 'ol/layer/Vector'
+
+
+import Layers from '../../../domain/entities/layers'
+import { selectedMissionStyle, selectedMissionActionsStyle } from './styles/missions.style'
+import { getMissionZoneFeature, getActionsFeatures } from './missionGeometryHelpers'
+
+
+export const EditingMissionLayer = ({ map }) => {
+  const { missionState } = useSelector(state => state.missionState)
+  const { displayEditingMissionLayer } = useSelector(state => state.global)
+
+  const editingMissionVectorSourceRef = useRef(null)
+  const GetEditingMissionVectorSource = () => {
+    if (editingMissionVectorSourceRef.current === null) {
+      editingMissionVectorSourceRef.current = new VectorSource()
+
+    }
+    return editingMissionVectorSourceRef.current
+  }
+
+  const editingMissionActionsVectorSourceRef = useRef(null)
+  const GetEditingMissionActionsVectorSource = () => {
+    if (editingMissionActionsVectorSourceRef.current === null) {
+      editingMissionActionsVectorSourceRef.current = new VectorSource()
+
+    }
+    return editingMissionActionsVectorSourceRef.current
+  }
+
+  const editingMissionVectorLayerRef = useRef(null)
+  const editingMissionActionsVectorLayerRef = useRef(null)
+
+
+  const GetSelectedMissionVectorLayer = () => {
+    if (editingMissionVectorLayerRef.current === null) {
+      editingMissionVectorLayerRef.current = new VectorLayer({
+        source: GetEditingMissionVectorSource(),
+        style: selectedMissionStyle,
+        renderBuffer: 7,
+        updateWhileAnimating: true,
+        updateWhileInteracting: true,
+        zIndex: Layers.MISSION_SELECTED.zIndex,
+      })
+      editingMissionVectorLayerRef.current.name = Layers.MISSION_SELECTED.code
+    }
+    return editingMissionVectorLayerRef.current
+  }
+  const GetSelectedMissionActionsVectorLayer = () => {
+    if (editingMissionActionsVectorLayerRef.current === null) {
+      editingMissionActionsVectorLayerRef.current = new VectorLayer({
+        source: GetEditingMissionActionsVectorSource(),
+        style: selectedMissionActionsStyle,
+        renderBuffer: 7,
+        updateWhileAnimating: true,
+        updateWhileInteracting: true,
+        zIndex: Layers.ACTIONS.zIndex,
+      })
+      editingMissionActionsVectorLayerRef.current.name = Layers.ACTIONS.code
+    }
+    return editingMissionActionsVectorLayerRef.current
+  }
+
+  useEffect(() => {
+    if (map) {
+      const layersCollection = map.getLayers()
+      layersCollection.push(GetSelectedMissionVectorLayer())
+      layersCollection.push(GetSelectedMissionActionsVectorLayer())
+    }
+
+    return () => {
+      if (map) {
+        map.removeLayer(GetSelectedMissionVectorLayer())}
+        map.removeLayer(GetSelectedMissionActionsVectorLayer())
+      }
+  }, [map])
+
+  useEffect(() => {
+    GetSelectedMissionVectorLayer()?.setVisible(displayEditingMissionLayer)
+    GetSelectedMissionActionsVectorLayer()?.setVisible(displayEditingMissionLayer)
+  }, [displayEditingMissionLayer])
+
+  useEffect(() => {
+    GetEditingMissionVectorSource()?.clear(true)
+    GetEditingMissionActionsVectorSource()?.clear(true)
+    if (missionState) {
+      GetEditingMissionVectorSource()?.addFeature(getMissionZoneFeature(missionState, Layers.MISSION_SELECTED.code))
+      GetEditingMissionActionsVectorSource()?.addFeatures(getActionsFeatures(missionState))
+    }
+  }, [missionState])
+
+  return null
+}

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

@@ -11,17 +11,16 @@ import { getMissionZoneFeature, getActionsFeatures } from './missionGeometryHelp
 
 
 export const SelectedMissionLayer = ({ map }) => {
-  const { selectedMissionId } = useSelector(state => state.missionState)
+  const { selectedMissionId, missionState: selectedMissionEditedState } = useSelector(state => state.missionState)
   const { displaySelectedMissionLayer } = useSelector(state => state.global)
   const { selectedMission } = useGetMissionsQuery(undefined, {
     selectFromResult: ({ data }) =>  ({
       selectedMission: data?.find(op => op.id === selectedMissionId),
     }),
   })
 
-  const selectedMissionEditedState = useSelector(state => state.missionState.missionState)
+  const displaySelectedMission = displaySelectedMissionLayer && selectedMissionId !== selectedMissionEditedState?.id
 
-  const displayedMission = selectedMissionEditedState || selectedMission
 
   const selectedMissionVectorSourceRef = useRef(null)
   const GetSelectedMissionVectorSource = () => {
@@ -89,18 +88,18 @@ export const SelectedMissionLayer = ({ map }) => {
   }, [map])
 
   useEffect(() => {
-    GetSelectedMissionVectorLayer()?.setVisible(displaySelectedMissionLayer)
-    GetSelectedMissionActionsVectorLayer()?.setVisible(displaySelectedMissionLayer)
-  }, [displaySelectedMissionLayer])
+    GetSelectedMissionVectorLayer()?.setVisible(displaySelectedMission)
+    GetSelectedMissionActionsVectorLayer()?.setVisible(displaySelectedMission)
+  }, [displaySelectedMission])
 
   useEffect(() => {
     GetSelectedMissionVectorSource()?.clear(true)
     GetSelectedMissionActionsVectorSource()?.clear(true)
-    if (displayedMission) {
-      GetSelectedMissionVectorSource()?.addFeature(getMissionZoneFeature(displayedMission, Layers.MISSION_SELECTED.code))
-      GetSelectedMissionActionsVectorSource()?.addFeatures(getActionsFeatures(displayedMission))
+    if (selectedMission) {
+      GetSelectedMissionVectorSource()?.addFeature(getMissionZoneFeature(selectedMission, Layers.MISSION_SELECTED.code))
+      GetSelectedMissionActionsVectorSource()?.addFeatures(getActionsFeatures(selectedMission))
     }
-  }, [displayedMission])
+  }, [selectedMission])
 
   return null
 }

frontend/src/features/map/overlays/OverlayPositionOnExtent.js

@@ -73,10 +73,7 @@ export const OverlayPositionOnExtent = ({
           margins,
           {width: OVERLAY_WIDTH, height: OVERLAY_HEIGHT, resolution}
           )
-          console.log('position', nextOverlayPosition, featureExtent, 
-          extent,
-          margins,
-          {width: OVERLAY_WIDTH, height: OVERLAY_HEIGHT, resolution})
+
         const containerMargins = getTopLeftMarginForFeature(
            nextOverlayPosition,
            margins,

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

@@ -44,7 +44,7 @@ export const MissionCard = ({feature, selected}) => {
     <Col2>
       <MissionType>Mission {missionTypeEnum[missionType]?.libelle}</MissionType>
       <MissionReources>{resourceUnits?.map(resource => {
-        return `${resource.administration} (${resource.unit})`
+        return `${resource.administration} ${resource.unit ? `(${resource.unit})`:''}`
       })}</MissionReources>
       <Actions>{numberOfActions} actions réalisées</Actions>
       <MissionStatusLabel missionStatus={missionStatus}/>

frontend/src/features/missions/CreateOrEditMission.js

@@ -31,11 +31,6 @@ export const CreateOrEditMission = ({routeParams})  => {
   const [errorOnDelete, setErrorOnDelete ] = useState(false)
   const [ confirmationModalIsOpen, setConfirmationModalIsOpen] = useState(false)  
 
-  const handleSetCurrentActionIndex = (index) =>{
-    setCurrentActionIndex(index)
-  }
-
-
   const id = routeParams?.params?.id && parseInt(routeParams?.params?.id)
 
   const { missionToEdit } = useGetMissionsQuery(undefined, {
@@ -64,6 +59,10 @@ export const CreateOrEditMission = ({routeParams})  => {
   const upsertMission = (id === undefined) ?  createMission : updateMission
 
 
+  const handleSetCurrentActionIndex = (index) =>{
+    setCurrentActionIndex(index)
+  }
+
   const handleSubmitForm = values => {
     upsertMission(values).then((response)=> {
       const {data, error} = response
@@ -127,12 +126,11 @@ export const CreateOrEditMission = ({routeParams})  => {
       >
         {(formikProps)=>{
 
-
-
           const handleCloseMission = () => {
             formikProps.setFieldValue('missionStatus', missionStatusEnum.CLOSED.code)
             formikProps.handleSubmit()
           }
+
           return (
             <Form onSubmit={formikProps.handleSubmit} onReset={formikProps.handleReset}>
               <SyncFormValuesWithRedux callback={setMissionState}/>

frontend/src/hooks/useSyncFormValuesWithRedux.js

@@ -15,7 +15,7 @@ export const useSyncFormValuesWithRedux = (setFormValues) =>{
 
   useEffect(() => {
     dispatchFormUpdate(formik.values)
-    return dispatchFormUpdate(null)
+    return () => dispatchFormUpdate(null)
   }, [formik.values, dispatchFormUpdate])
 }