Add warning message when control unit is engaged

MTES-MCT · Oct 12, 2023 · 27ae05e · 27ae05e
1 parent 844343a
commit 27ae05e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 8 deletions.
diff --git a/frontend/cypress/e2e/side_window/mission/create_mission.spec.ts b/frontend/cypress/e2e/side_window/mission/create_mission.spec.ts
@@ -149,4 +149,13 @@ context('Mission', () => {
     // Then
     cy.get('*[data-cy="delete-mission"]').should('be.disabled')
   })
+
+  it('A warning should be displayed When a control unit is already engaged in a mission ', () => {
+    // Given
+    cy.wait(200)
+    cy.get('*[data-cy="edit-mission-43"]').click({ force: true })
+    cy.intercept('PUT', `/bff/v1/missions/43`).as('updateMission')
+
+    cy.get('body').contains('Cette unité est actuellement sélectionnée dans une autre mission en cours.')
+  })
 })
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/modifiers": "^4.0.0",
-    "@mtes-mct/monitor-ui": "10.1.1",
+    "@mtes-mct/monitor-ui": "10.4.0",
     "@reduxjs/toolkit": "1.9.5",
     "@rsuite/responsive-nav": "5.0.1",
     "@sentry/browser": "7.73.0",

diff --git a/frontend/src/api/missionsAPI.ts b/frontend/src/api/missionsAPI.ts
@@ -1,5 +1,8 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
+import { monitorenvPublicApi } from './api'
+import { ControlUnit } from '../domain/entities/controlUnit'
+
 import type { Mission } from '../domain/entities/missions'
 
 type MissionsResponse = Mission[]
@@ -83,10 +86,20 @@ export const missionsAPI = createApi({
   tagTypes: ['Missions']
 })
 
+export const publicMissionsAPI = monitorenvPublicApi.injectEndpoints({
+  endpoints: builder => ({
+    getEngagedControlUnits: builder.query<ControlUnit.ControlUnit[], void>({
+      query: () => `/v1/missions/engaged_control_units`
+    })
+  })
+})
+
 export const {
   useCreateMissionMutation,
   useDeleteMissionMutation,
   useGetMissionQuery,
   useGetMissionsQuery,
   useUpdateMissionMutation
 } = missionsAPI
+
+export const { useGetEngagedControlUnitsQuery } = publicMissionsAPI
diff --git a/frontend/src/features/missions/MissionForm/ControlUnitSelector.tsx b/frontend/src/features/missions/MissionForm/ControlUnitSelector.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { FieldError, FormikTextInput } from '@mtes-mct/monitor-ui'
+import { FormikTextInput, FieldError, Message, Level } from '@mtes-mct/monitor-ui'
 import { useField } from 'formik'
 import _ from 'lodash'
 import { type MutableRefObject, useMemo, useRef } from 'react'
@@ -13,7 +13,7 @@ import { ReactComponent as DeleteSVG } from '../../../uiMonitor/icons/Delete.svg
 
 import type { ControlUnit } from '../../../domain/entities/controlUnit'
 
-export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeControlUnit, ...props }) {
+export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, isEngaged, removeControlUnit, ...props }) {
   const [administrationField, administrationMeta, administrationHelpers] = useField<string>(
     `controlUnits.${controlUnitIndex}.administration`
   )
@@ -138,6 +138,11 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeC
           />
         </FormikErrorWrapper>
         {unitNameMeta.error && <FieldError>{unitNameMeta.error}</FieldError>}
+        {isEngaged && (
+          <StyledMessage level={Level.WARNING}>
+            Cette unité est actuellement sélectionnée dans une autre mission en cours.
+          </StyledMessage>
+        )}
       </FormGroupFixed>
       <FormGroupFixed>
         <RefWrapper ref={resourcesRef} data-cy="unit-tag-picker">
@@ -169,6 +174,10 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeC
   )
 }
 
+const StyledMessage = styled(Message)`
+  margin-top: 8px;
+`
+
 const RessourceUnitWrapper = styled.div`
   margin-bottom: 14px;
   display: flex;

diff --git a/frontend/src/features/missions/MissionForm/ControlUnitsForm.tsx b/frontend/src/features/missions/MissionForm/ControlUnitsForm.tsx
@@ -1,9 +1,21 @@
 import { Accent, Button, Icon, Size } from '@mtes-mct/monitor-ui'
+import { useMemo } from 'react'
 
 import { ControlUnitSelector } from './ControlUnitSelector'
+import { useGetEngagedControlUnitsQuery } from '../../../api/missionsAPI'
 import { controlUnitFactory } from '../Missions.helpers'
 
 export function ControlUnitsForm({ form, push, remove }) {
+  const { data: engagedControlUnitsData } = useGetEngagedControlUnitsQuery(undefined)
+
+  const engagedControlUnits = useMemo(() => {
+    if (!engagedControlUnitsData) {
+      return []
+    }
+
+    return engagedControlUnitsData
+  }, [engagedControlUnitsData])
+
   const handleAddControlUnit = () => {
     push(controlUnitFactory())
   }
@@ -16,12 +28,13 @@ export function ControlUnitsForm({ form, push, remove }) {
     <div>
       {form?.values.controlUnits?.length > 0 && (
         <>
-          {form.values.controlUnits.map((_, index) => (
+          {form.values.controlUnits.map(({ id }, index) => (
             <ControlUnitSelector
               // eslint-disable-next-line react/no-array-index-key
               key={index}
               controlUnitIndex={index}
               controlUnitPath={`controlUnits[${index}]`}
+              isEngaged={!!engagedControlUnits.find(engaged => engaged.id === id)}
               removeControlUnit={handleRemoveControlUnit(index)}
             />
           ))}