Skip to content

Commit

Permalink
add isOpenDialog state
Browse files Browse the repository at this point in the history
  • Loading branch information
aleckvincent committed Dec 4, 2024
1 parent 56f0cb7 commit 75f7918
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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]),
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,35 +1,44 @@
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'

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}
Expand All @@ -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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }

Expand All @@ -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 : {
Expand Down Expand Up @@ -50,6 +52,8 @@ const MissionGeneralInformationUlamFormNew: React.FC<MissionGeneralInformationUl
<MissionGeneralInformationInitialForm
name="missionGeneralInfo"
fieldFormik={field}
isCreation={true}
onClose={onClose}
/>
)}
</Field>
Expand Down

0 comments on commit 75f7918

Please sign in to comment.