From 75f791819a7f8296d75d561d765516fdddc7c0c6 Mon Sep 17 00:00:00 2001
From: aleckvincent <aleck.vincent@gmail.com>
Date: Wed, 4 Dec 2024 17:12:50 +0100
Subject: [PATCH] add isOpenDialog state

---
 .../use-mission-general-informations-form.tsx |  2 +-
 .../element/mission-create-dialog.tsx         | 57 ++++++++++++-------
 ...ssion-general-information-initial-form.tsx | 54 ++++++++++++++----
 ...sion-general-information-ulam-form-new.tsx | 10 +++-
 4 files changed, 88 insertions(+), 35 deletions(-)

diff --git a/frontend/src/v2/features/common/hooks/use-mission-general-informations-form.tsx b/frontend/src/v2/features/common/hooks/use-mission-general-informations-form.tsx
index 5062d74b..4bcd65c6 100644
--- a/frontend/src/v2/features/common/hooks/use-mission-general-informations-form.tsx
+++ b/frontend/src/v2/features/common/hooks/use-mission-general-informations-form.tsx
@@ -23,7 +23,7 @@ export function useMissionGeneralInformationsForm(
 
 
   const fromInputToFieldValue = (value: MissionULAMGeneralInfoInitialInput): MissionULAMGeneralInfoInitial => {
-    const { dates, missionReportType, missionType, reinforcementType } = value
+    const { dates, missionReportType, missionType, reinforcementType, nbHourAtSea } = value
     return {
       startDateTimeUtc: postprocessDateFromPicker(dates[0]),
       endDateTimeUtc: postprocessDateFromPicker(dates[1]),
diff --git a/frontend/src/v2/features/ulam/components/element/mission-create-dialog.tsx b/frontend/src/v2/features/ulam/components/element/mission-create-dialog.tsx
index 9a607650..021f5ce9 100644
--- a/frontend/src/v2/features/ulam/components/element/mission-create-dialog.tsx
+++ b/frontend/src/v2/features/ulam/components/element/mission-create-dialog.tsx
@@ -1,28 +1,45 @@
-import React, { FC } from 'react'
-import { Dialog, Button, THEME, Accent } from '@mtes-mct/monitor-ui'
+import React, { FC, useEffect, useState } from 'react'
+import { Dialog, THEME } from '@mtes-mct/monitor-ui'
 import { Stack } from 'rsuite'
 import { MissionTypeEnum } from '@common/types/env-mission-types.ts'
 import MissionGeneralInformationUlamFormNew from './mission-general-information-ulam-form-new.tsx'
 
-const MissionCreateDialog: FC = () => {
+interface MissionCreateDialogProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const MissionCreateDialog: FC<MissionCreateDialogProps> = ({isOpen, onClose}) => {
+
+  const [isDialogOpen, setIsDialogOpen] = useState(isOpen)
+
+  useEffect(() => {
+    setIsDialogOpen(isOpen)
+  }, [isOpen])
+
+
+  const handleClose = () => {
+    setIsDialogOpen(false)
+    onClose()
+  }
+
+
   return (
-    <Dialog>
-      <Dialog.Title>Création d'un rapport de mission</Dialog.Title>
-      <Dialog.Body style={{ backgroundColor: THEME.color.gainsboro }}>
-        <Stack direction="column" spacing="1.5rem">
-          <MissionGeneralInformationUlamFormNew
-            startDateTimeUtc="2024-01-01T00:00:00Z"
-            endDateTimeUtc="2024-01-01T00:00:00Z"
-            missionType={[MissionTypeEnum.AIR]}
-          />
-        </Stack>
-      </Dialog.Body>
-      <Dialog.Action style={{backgroundColor: THEME.color.gainsboro}}>
-        <Button accent={Accent.SECONDARY}>Annuler</Button>
-      </Dialog.Action>
-
-
-    </Dialog>
+    isDialogOpen && (
+      <Dialog>
+        <Dialog.Title>Création d'un rapport de mission</Dialog.Title>
+        <Dialog.Body style={{ backgroundColor: THEME.color.gainsboro  }}>
+          <Stack direction="column" spacing="1.5rem" >
+            <MissionGeneralInformationUlamFormNew
+              startDateTimeUtc="2024-01-01T00:00:00Z"
+              endDateTimeUtc="2024-01-01T00:00:00Z"
+              missionType={[MissionTypeEnum.AIR]}
+              onClose={handleClose}
+            />
+          </Stack>
+        </Dialog.Body>
+      </Dialog>
+    )
   )
 }
 
diff --git a/frontend/src/v2/features/ulam/components/element/mission-general-information-initial-form.tsx b/frontend/src/v2/features/ulam/components/element/mission-general-information-initial-form.tsx
index b06cb16e..d4f8ed18 100644
--- a/frontend/src/v2/features/ulam/components/element/mission-general-information-initial-form.tsx
+++ b/frontend/src/v2/features/ulam/components/element/mission-general-information-initial-form.tsx
@@ -1,14 +1,19 @@
 import React, { FC } from 'react'
-import { Stack } from 'rsuite'
+import { FlexboxGrid, Stack } from 'rsuite'
 import {
+  Accent,
+  Button,
   FormikDateRangePicker,
   FormikMultiCheckbox,
-  FormikSelect,
+  FormikNumberInput,
+  FormikSelect
 } from '@mtes-mct/monitor-ui'
 import {
   MISSION_TYPE_OPTIONS,
   MissionReportTypeEnum,
-  MissionULAMGeneralInfoInitial, REINFORCEMENT_TYPE, REPORT_TYPE_OPTIONS
+  MissionULAMGeneralInfoInitial,
+  REINFORCEMENT_TYPE,
+  REPORT_TYPE_OPTIONS
 } from '@common/types/mission-types.ts'
 import { useMissionGeneralInformationsForm } from '../../../common/hooks/use-mission-general-informations-form.tsx'
 import { FieldProps, Formik } from 'formik'
@@ -16,20 +21,24 @@ import { FieldProps, Formik } from 'formik'
 export interface MissionGeneralInformationInitialFormProps {
   name: string
   fieldFormik: FieldProps<MissionULAMGeneralInfoInitial>
+  isCreation?: boolean
+  onClose?: () => void
 }
 
 
 
-const MissionGeneralInformationInitialForm: FC<MissionGeneralInformationInitialFormProps> = ({ name, fieldFormik }) => {
+const MissionGeneralInformationInitialForm: FC<MissionGeneralInformationInitialFormProps> = ({ name, fieldFormik, isCreation = false, onClose }) => {
 
   const { initValue, handleSubmit } = useMissionGeneralInformationsForm(name, fieldFormik)
 
+
+
   return (
     <>
       {initValue && (
         <Formik initialValues={initValue} onSubmit={handleSubmit}>
           {formik => (
-            <Stack direction="column" spacing="1.5rem">
+            <Stack direction="column" spacing="1.5rem" style={{paddingBottom: '2rem'}}>
               <Stack.Item style={{width: '100%'}}>
                 <FormikSelect
                   options={REPORT_TYPE_OPTIONS}
@@ -49,7 +58,7 @@ const MissionGeneralInformationInitialForm: FC<MissionGeneralInformationInitialF
                 />
               </Stack.Item>
 
-              {formik.values['reportType'] === MissionReportTypeEnum.EXTERNAL_REINFORCEMENT_TIME_REPORT && (
+              {formik.values['missionReportType'] === MissionReportTypeEnum.EXTERNAL_REINFORCEMENT_TIME_REPORT && (
                 <Stack.Item style={{width: '100%'}}>
                   <FormikSelect
                     label="Nature du renfort"
@@ -61,13 +70,36 @@ const MissionGeneralInformationInitialForm: FC<MissionGeneralInformationInitialF
               )}
 
               <Stack.Item style={{width: '100%', textAlign: 'left'}}>
-                <FormikDateRangePicker
-                  label={"Date et heure de début et de fin"}
-                  isLight
-                  name="dates"
-                />
+                <FlexboxGrid>
+                  <FlexboxGrid.Item>
+                    <FormikDateRangePicker
+                      label={"Date et heure de début et de fin"}
+                      isLight
+                      name="dates"
+                    />
+                  </FlexboxGrid.Item>
+
+                  {!isCreation && (
+                    <FlexboxGrid.Item>
+                      <FormikNumberInput label={"Nb d'heures en mer"} isLight name={"nbHourAtSea"}/>
+                    </FlexboxGrid.Item>
+                  )}
+                </FlexboxGrid>
+
+
               </Stack.Item>
 
+              {isCreation && (
+                <Stack.Item >
+                  <Button accent={Accent.PRIMARY} type="submit" onClick={async () => {
+                    handleSubmit(formik.values).then(() => onClose())
+                  }}>
+                    Créer le rapport
+                  </Button>
+
+                  <Button accent={Accent.SECONDARY} style={{marginLeft: '10px'}} onClick={onClose}>Annuler</Button>
+                </Stack.Item>
+              )}
             </Stack>
           )}
         </Formik>
diff --git a/frontend/src/v2/features/ulam/components/element/mission-general-information-ulam-form-new.tsx b/frontend/src/v2/features/ulam/components/element/mission-general-information-ulam-form-new.tsx
index e916c71b..815e8baf 100644
--- a/frontend/src/v2/features/ulam/components/element/mission-general-information-ulam-form-new.tsx
+++ b/frontend/src/v2/features/ulam/components/element/mission-general-information-ulam-form-new.tsx
@@ -2,11 +2,12 @@ import React from 'react'
 import { MissionTypeEnum } from '@common/types/env-mission-types.ts'
 import {
   MissionReinforcementTypeEnum,
-  MissionReportTypeEnum,  MissionULAMGeneralInfoInitial
+  MissionReportTypeEnum,
+  MissionULAMGeneralInfoInitial
 } from '@common/types/mission-types.ts'
 import { Field, FieldProps, Formik } from 'formik'
 import MissionGeneralInformationInitialForm from './mission-general-information-initial-form.tsx'
-import {  FormikEffect } from '@mtes-mct/monitor-ui'
+import { Accent, Button, Dialog, FormikEffect, THEME } from '@mtes-mct/monitor-ui'
 
 type NewMissionUlamGeneralInfoInitial =  { missionGeneralInfo: MissionULAMGeneralInfoInitial }
 
@@ -17,9 +18,10 @@ export interface MissionGeneralInformationUlamProps {
   missionReportType?: MissionReportTypeEnum
   reinforcementType?: MissionReinforcementTypeEnum
   nbHourAtSea?: number
+  onClose?: () => void
 }
 
-const MissionGeneralInformationUlamFormNew: React.FC<MissionGeneralInformationUlamProps> = ({ startDateTimeUtc, endDateTimeUtc, missionType, missionReportType, reinforcementType, nbHourAtSea }) => {
+const MissionGeneralInformationUlamFormNew: React.FC<MissionGeneralInformationUlamProps> = ({ startDateTimeUtc, endDateTimeUtc, missionType, missionReportType, reinforcementType, nbHourAtSea, onClose }) => {
 
   const initialValues: MissionULAMGeneralInfoInitial = {
     missionGeneralInfo : {
@@ -50,6 +52,8 @@ const MissionGeneralInformationUlamFormNew: React.FC<MissionGeneralInformationUl
               <MissionGeneralInformationInitialForm
                 name="missionGeneralInfo"
                 fieldFormik={field}
+                isCreation={true}
+                onClose={onClose}
               />
             )}
           </Field>