[Mission] save ended mission even if data are missing

frontend/src/domain/entities/missions.ts

@@ -7,7 +7,7 @@ import type { SeaFrontEnum } from './seaFrontType'
 import type { FishMissionAction } from '@features/missions/fishActions.types'
 import type { GeoJSON } from 'domain/types/GeoJSON'
 
-export const CIRCULAR_ZONE_RADIUS = 1500
+export const CIRCULAR_ZONE_RADIUS = 2000
 
 export enum ActionTypeEnum {
   CONTROL = 'CONTROL',

frontend/src/features/missions/MissionForm/ActionForm/ControlForm/index.tsx

@@ -375,7 +375,6 @@ export function ControlForm({
               data-cy="control-completed-by"
               isErrorMessageHidden
               isLight
-              isRequired
               label="Complété par"
               name={`envActions[${envActionIndex}].completedBy`}
             />

frontend/src/features/missions/MissionForm/ActionForm/SurveillanceForm/index.tsx

@@ -312,7 +312,6 @@ export function SurveillanceForm({ currentActionIndex, remove, setCurrentActionI
               data-cy="surveillance-completed-by"
               isErrorMessageHidden
               isLight
-              isRequired
               label="Complété par"
               name={`envActions[${envActionIndex}].completedBy`}
             />

frontend/src/features/missions/MissionForm/MissionForm.tsx

@@ -29,6 +29,7 @@ import { useSyncFormValuesWithRedux } from './hooks/useSyncFormValuesWithRedux'
 import { useUpdateOtherControlTypes } from './hooks/useUpdateOtherControlTypes'
 import { useUpdateSurveillance } from './hooks/useUpdateSurveillance'
 import { MissionFormBottomBar } from './MissionFormBottomBar'
+import { NewMissionSchema } from './Schemas'
 import { missionFormsActions } from './slice'
 import { isMissionAutoSaveEnabled, shouldSaveMission } from './utils'
 import { missionsAPI } from '../../../api/missionsAPI'
@@ -62,16 +63,9 @@ type MissionFormProps = {
   id: number | string
   isNewMission: boolean
   selectedMission: AtLeast<Partial<Mission>, 'id'> | Partial<NewMission> | undefined
-  setShouldValidateOnChange: (boolean) => void
 }
 
-export function MissionForm({
-  engagedControlUnit,
-  id,
-  isNewMission,
-  selectedMission,
-  setShouldValidateOnChange
-}: MissionFormProps) {
+export function MissionForm({ engagedControlUnit, id, isNewMission, selectedMission }: MissionFormProps) {
   const dispatch = useAppDispatch()
 
   const sideWindow = useAppSelector(state => state.sideWindow)
@@ -169,16 +163,13 @@ export function MissionForm({
   }
 
   const submitMission = () => {
-    setShouldValidateOnChange(false)
-
     validateForm().then(errors => {
       if (isEmpty(errors)) {
         dispatch(saveMission(values, false, true))
 
         return
       }
       dispatch(sideWindowActions.setShowConfirmCancelModal(true))
-      setShouldValidateOnChange(true)
     })
   }
 
@@ -189,6 +180,7 @@ export function MissionForm({
 
       return
     }
+
     if (isFormDirty) {
       dispatch(sideWindowActions.setShowConfirmCancelModal(true))
     } else {
@@ -197,22 +189,23 @@ export function MissionForm({
   }
 
   const validateBeforeOnChange = useDebouncedCallback(async (nextValues, forceSave) => {
-    const errors = await validateForm()
-    const isValid = isEmpty(errors)
-
-    if (!isAutoSaveEnabled || !isValid) {
-      return
-    }
-
-    if (!shouldSaveMission(selectedMission, missionEvent, nextValues) && !forceSave) {
+    if (!isAutoSaveEnabled) {
       return
     }
 
     if (engagedControlUnit) {
       return
     }
 
-    dispatch(saveMission(nextValues, false, false))
+    try {
+      NewMissionSchema.validateSync(values, { abortEarly: false })
+      if (!shouldSaveMission(selectedMission, missionEvent, nextValues) && !forceSave) {
+        return
+      }
+
+      dispatch(saveMission(nextValues, false, false))
+      // eslint-disable-next-line no-empty
+    } catch (e: any) {}
   }, 300)
 
   useEffect(() => {

frontend/src/features/missions/MissionForm/Schemas/index.ts

@@ -76,7 +76,7 @@ export const CompletionEnvActionSchema = Yup.lazy((value, context) => {
   return Yup.object().required()
 })
 
-const NewMissionSchema: Yup.SchemaOf<NewMission> = Yup.object()
+export const NewMissionSchema: Yup.SchemaOf<NewMission> = Yup.object()
   .shape({
     completedBy: Yup.string()
       .min(3, 'Minimum 3 lettres pour le trigramme')

frontend/src/features/missions/MissionForm/hooks/useSyncFormValuesWithRedux.ts

@@ -1,17 +1,17 @@
-import { type FormikErrors, useFormikContext } from 'formik'
-import { isEmpty } from 'lodash'
+import { useFormikContext } from 'formik'
 import { useEffect } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 
 import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
+import { NewMissionSchema } from '../Schemas'
 import { missionFormsActions } from '../slice'
 
 import type { Mission } from '../../../../domain/entities/missions'
 
 export function useSyncFormValuesWithRedux(isAutoSaveEnabled: boolean) {
   const dispatch = useAppDispatch()
-  const { dirty, validateForm, values } = useFormikContext<Mission>()
+  const { dirty, values } = useFormikContext<Mission>()
   const activeMissionId = useAppSelector(state => state.missionForms.activeMissionId)
   const activeMission = useAppSelector(state =>
     activeMissionId ? state.missionForms.missions[activeMissionId] : undefined
@@ -25,8 +25,7 @@ export function useSyncFormValuesWithRedux(isAutoSaveEnabled: boolean) {
       return
     }
 
-    const errors = await validateForm()
-    const isFormDirty = isMissionFormDirty(errors)
+    const isFormDirty = isMissionFormDirty()
 
     dispatch(missionFormsActions.setMission({ engagedControlUnit, isFormDirty, missionForm: newValues }))
   }, 350)
@@ -36,7 +35,7 @@ export function useSyncFormValuesWithRedux(isAutoSaveEnabled: boolean) {
    * - In auto-save mode, an error is found (hence the form is not saved)
    * - In manual save mode, values have been modified (using the `dirty` props of Formik)
    */
-  function isMissionFormDirty(errors: FormikErrors<Mission>) {
+  function isMissionFormDirty() {
     if (!isAutoSaveEnabled) {
       if (dirty) {
         return dirty
@@ -50,7 +49,13 @@ export function useSyncFormValuesWithRedux(isAutoSaveEnabled: boolean) {
       return activeMission?.isFormDirty ?? false
     }
 
-    return !isEmpty(errors)
+    try {
+      NewMissionSchema.validateSync(values, { abortEarly: false })
+
+      return false
+    } catch (e: any) {
+      return true
+    }
   }
 
   useEffect(() => {

frontend/src/features/missions/MissionForm/index.tsx

@@ -1,7 +1,7 @@
 import { Banner, Icon, Level, THEME } from '@mtes-mct/monitor-ui'
 import { Form, Formik } from 'formik'
 import { noop } from 'lodash'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 import { MissionForm } from './MissionForm'
@@ -21,8 +21,6 @@ export function MissionFormWrapper() {
     activeMissionId ? state.missionForms.missions[activeMissionId]?.engagedControlUnit : undefined
   )
 
-  const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false)
-
   const missionIsNewMission = useMemo(() => isNewMission(activeMissionId), [activeMissionId])
 
   const missionValues: Partial<MissionType> = useMemo(() => {
@@ -67,8 +65,7 @@ export function MissionFormWrapper() {
         initialValues={missionValues}
         onSubmit={noop}
         validateOnBlur={false}
-        validateOnChange={shouldValidateOnChange}
-        validateOnMount={false}
+        validateOnMount
         validationSchema={MissionSchema}
       >
         <Form className="rs-form rs-form-vertical rs-form-fixed-width">
@@ -77,7 +74,6 @@ export function MissionFormWrapper() {
             id={activeMissionId}
             isNewMission={missionIsNewMission}
             selectedMission={selectedMission?.missionForm}
-            setShouldValidateOnChange={setShouldValidateOnChange}
           />
         </Form>
       </Formik>

frontend/src/features/missions/Missions.helpers.ts

@@ -107,7 +107,7 @@ export const missionFactory = (
   let formattedMission = {
     attachedReportingIds: attachedReporting ? [attachedReporting.id as number] : [],
     attachedReportings: attachedReporting ? [attachedReporting] : [],
-    completedBy: '',
+    completedBy: undefined,
     controlUnits: [controlUnitFactory()],
     detachedReportingIds: [],
     endDateTimeUtc: '',
@@ -119,7 +119,7 @@ export const missionFactory = (
     missionTypes: [],
     observationsCacem: '',
     observationsCnsp: '',
-    openBy: '',
+    openBy: undefined,
     startDateTimeUtc: startDate.toISOString(),
     ...mission
   }