Skip to content

Commit bd16a64

Browse files
maximeperraultdevmaximeperraultdev
committed
feat: rework vigilancearea periods frontend
1 parent cdc4374 commit bd16a64

File tree

17 files changed

+471
-365
lines changed

17 files changed

+471
-365
lines changed

‎frontend/cypress/e2e/main_window/vigilance_area/create_vigilance_area.spec.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,12 +101,14 @@ describe('Create Vigilance Area', () => {
101101
const endDateDay = endDate[2] < 10 ? `0${endDate[2]}` : endDate[2]
102102
// Check the response
103103
expect(createdVigilanceArea.name).equal('Nouvelle zone de vigilance')
104-
expect(createdVigilanceArea.startDatePeriod).equal(
104+
expect(createdVigilanceArea.periods[0].startDatePeriod).equal(
105105
`${startDate[0]}-${startDateMonth}-${startDateDay}T00:00:00.000Z`
106106
)
107-
expect(createdVigilanceArea.endDatePeriod).equal(`${endDate[0]}-${endDateMonth}-${endDateDay}T23:59:59.000Z`)
108-
expect(createdVigilanceArea.frequency).equal(VigilanceArea.Frequency.ALL_WEEKS)
109-
expect(createdVigilanceArea.endingCondition).equal(VigilanceArea.EndingCondition.NEVER)
107+
expect(createdVigilanceArea.periods[0].endDatePeriod).equal(
108+
`${endDate[0]}-${endDateMonth}-${endDateDay}T23:59:59.000Z`
109+
)
110+
expect(createdVigilanceArea.periods[0].frequency).equal(VigilanceArea.Frequency.ALL_WEEKS)
111+
expect(createdVigilanceArea.periods[0].endingCondition).equal(VigilanceArea.EndingCondition.NEVER)
110112
expect(createdVigilanceArea.geom.type).equal('MultiPolygon')
111113
expect(createdVigilanceArea.themes[0].id).equal(9)
112114
expect(createdVigilanceArea.themes[0].name).equal('Pêche à pied')

‎frontend/src/features/Dashboard/components/Pdf/VigilanceAreas/index.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Orientation, type ImageFront } from '@components/Form/types'
1+
import { type ImageFront, Orientation } from '@components/Form/types'
22
import { Dashboard } from '@features/Dashboard/types'
33
import { getVigilanceAreaColorWithAlpha } from '@features/VigilanceArea/components/VigilanceAreaLayer/style'
44
import { EMPTY_VALUE } from '@features/VigilanceArea/constants'
@@ -93,12 +93,10 @@ export function VigilanceAreas({
9393
</View>
9494
<View style={layoutStyle.cardWrapper}>
9595
{vigilanceAreas.map(vigilanceArea => {
96-
const formattedStartPeriod = vigilanceArea.startDatePeriod
97-
? customDayjs(vigilanceArea.startDatePeriod).utc().format('DD/MM/YYYY')
98-
: undefined
99-
const formattedEndPeriod = vigilanceArea.endDatePeriod
100-
? customDayjs(vigilanceArea.endDatePeriod).utc().format('DD/MM/YYYY')
101-
: undefined
96+
const formattedStartPeriod = (startDatePeriod?: string) =>
97+
startDatePeriod ? customDayjs(startDatePeriod).utc().format('DD/MM/YYYY') : undefined
98+
const formattedEndPeriod = (endDatePeriod?: string) =>
99+
endDatePeriod ? customDayjs(endDatePeriod).utc().format('DD/MM/YYYY') : undefined
102100

103101
const amps = linkedAMPs.filter(amp => vigilanceArea.linkedAMPs?.includes(amp.id))
104102
const regulatoryAreas = linkedRegulatoryAreas.filter(regulatoryArea =>
@@ -127,17 +125,21 @@ export function VigilanceAreas({
127125
<View style={[areaStyle.content, { rowGap: 3 }]}>
128126
<View>
129127
<View style={areaStyle.description}>
130-
<Text>Période</Text>
131-
</View>
132-
<View style={areaStyle.details}>
133-
<Text>
134-
{formattedStartPeriod ? `Du ${formattedStartPeriod} au ${formattedEndPeriod}` : EMPTY_VALUE}
135-
</Text>
136-
<Text>{frequencyText(vigilanceArea?.frequency)}</Text>
137-
<Text>
138-
{endingOccurenceText(vigilanceArea?.endingCondition, vigilanceArea?.computedEndDate)}
139-
</Text>
128+
<Text>Périodes</Text>
140129
</View>
130+
{vigilanceArea.periods?.map(period => (
131+
<View style={areaStyle.details}>
132+
<Text>
133+
{formattedStartPeriod(period.startDatePeriod)
134+
? `Du ${formattedStartPeriod(period.startDatePeriod)} au ${formattedEndPeriod(
135+
period.endDatePeriod
136+
)}`
137+
: EMPTY_VALUE}
138+
</Text>
139+
<Text>{frequencyText(period?.frequency)}</Text>
140+
<Text>{endingOccurenceText(period?.endingCondition, period?.computedEndDate)}</Text>
141+
</View>
142+
))}
141143
</View>
142144
<View>
143145
<View style={areaStyle.description}>

‎frontend/src/features/Dashboard/types.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export namespace Dashboard {
3030
themes: ThemeFromAPI[]
3131
vigilanceAreas: VigilanceArea.VigilanceAreaFromApi[] | VigilanceArea.VigilanceAreaLayer[]
3232
}
33+
3334
export interface ExtractedAreaFromApi {
3435
ampIds: number[]
3536
inseeCode: string
@@ -39,6 +40,7 @@ export namespace Dashboard {
3940
themes: ThemeFromAPI[]
4041
vigilanceAreaIds: number[]
4142
}
43+
4244
export type Dashboard = {
4345
ampIds: number[]
4446
comments?: string
@@ -199,9 +201,6 @@ export namespace Dashboard {
199201
type VigilanceAreaForEditableBrief = {
200202
color: string
201203
comments?: string
202-
endDatePeriod?: string
203-
endingOccurenceDate: string
204-
frequency: string
205204
id: number
206205
image?: string
207206
imagesAttachments?: ImageApi[]
@@ -210,10 +209,17 @@ export namespace Dashboard {
210209
links?: Link[]
211210
minimap?: string
212211
name: string
213-
startDatePeriod?: string
212+
periods?: VigilanceAreaPeriodForEditableBrief[]
214213
themes?: string
215214
visibility?: string
216215
}
216+
217+
type VigilanceAreaPeriodForEditableBrief = {
218+
endDatePeriod?: string
219+
endingOccurenceDate: string
220+
frequency: string
221+
}
222+
217223
type RecentActivityForEditableBrief = {
218224
image?: string
219225
period: string

‎frontend/src/features/Dashboard/useCases/exportBrief.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,19 +126,19 @@ export const exportBrief =
126126
return {
127127
color: getVigilanceAreaColorWithAlpha(vigilanceArea.name, vigilanceArea.comments),
128128
comments: vigilanceArea.comments,
129-
endDatePeriod: vigilanceArea.endDatePeriod,
130-
endingOccurenceDate: endingOccurenceText(vigilanceArea.endingCondition, vigilanceArea.computedEndDate),
131-
frequency: frequencyText(vigilanceArea.frequency),
132129
id: vigilanceArea.id as number,
133130
image,
134131
imagesAttachments,
135-
isAtAllTimes: vigilanceArea.isAtAllTimes,
136132
linkedAMPs: filteredAmps,
137133
linkedRegulatoryAreas: filteredRegulatoryAreas,
138134
links: vigilanceArea.links,
139135
minimap,
140136
name: vigilanceArea.name as string,
141-
startDatePeriod: vigilanceArea.startDatePeriod,
137+
periods: vigilanceArea.periods?.map(period => ({
138+
...period,
139+
endingOccurenceDate: endingOccurenceText(period.endingCondition, period.computedEndDate),
140+
frequency: frequencyText(period.frequency)
141+
})),
142142
themes: displayThemes(vigilanceArea.themes),
143143
visibility: VigilanceArea.VisibilityLabel[vigilanceArea?.visibility ?? VigilanceArea.VisibilityLabel.PUBLIC]
144144
}

‎frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Form.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export function Form() {
140140
}
141141

142142
const setPeriod = (period: DateAsStringRange | undefined) => {
143-
setFieldValue('startDatePeriod', period ? period[0] : undefined)
144-
setFieldValue('endDatePeriod', period ? period[1] : undefined)
143+
setFieldValue('periods[0].startDatePeriod', period ? period[0] : undefined)
144+
setFieldValue('periods[0].endDatePeriod', period ? period[1] : undefined)
145145
}
146146

147147
return (
@@ -183,12 +183,12 @@ export function Form() {
183183
<DateWrapper>
184184
<DateRangePicker
185185
defaultValue={
186-
values?.startDatePeriod && values?.endDatePeriod
187-
? [new Date(values?.startDatePeriod), new Date(values?.endDatePeriod)]
186+
values?.periods && values?.periods[0]?.startDatePeriod && values?.periods[0]?.endDatePeriod
187+
? [new Date(values?.periods[0]?.startDatePeriod), new Date(values?.periods[0]?.endDatePeriod)]
188188
: undefined
189189
}
190-
disabled={values.isAtAllTimes}
191-
error={formErrors.startDatePeriod ?? formErrors.endDatePeriod}
190+
disabled={values?.periods && values?.periods[0]?.isAtAllTimes}
191+
error={formErrors?.periods}
192192
hasSingleCalendar
193193
isCompact
194194
isErrorMessageHidden
@@ -199,7 +199,7 @@ export function Form() {
199199
name="period"
200200
onChange={setPeriod}
201201
/>
202-
<FormikCheckbox label="En tout temps" name="isAtAllTimes" />
202+
<FormikCheckbox label="En tout temps" name="periods[0].isAtAllTimes" />
203203
</DateWrapper>
204204
<Frequency />
205205
<ThemesAndTags>

‎frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Frequency.tsx‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -10,82 +10,85 @@ export function Frequency() {
1010
const endingConditionOptions = getOptionsFromLabelledEnum(VigilanceArea.EndingConditionLabel)
1111

1212
const updateFrequency = (nextFrequency: string | undefined) => {
13-
setFieldValue('frequency', nextFrequency)
13+
setFieldValue('periods[0].frequency', nextFrequency)
1414
if (nextFrequency === VigilanceArea.Frequency.NONE) {
15-
setFieldValue('endingCondition', undefined)
16-
setFieldValue('endingOccurrenceDate', undefined)
17-
setFieldValue('endingOccurrencesNumber', undefined)
15+
setFieldValue('periods[0].endingCondition', undefined)
16+
setFieldValue('periods[0].endingOccurrenceDate', undefined)
17+
setFieldValue('periods[0].endingOccurrencesNumber', undefined)
1818
}
1919
}
2020

2121
const updateEndingCondition = (nextEndingCondition: string | undefined) => {
22-
setFieldValue('endingCondition', nextEndingCondition)
22+
setFieldValue('periods[0].endingCondition', nextEndingCondition)
2323
if (nextEndingCondition === VigilanceArea.EndingCondition.NEVER) {
24-
setFieldValue('endingOccurrenceDate', undefined)
25-
setFieldValue('endingOccurrencesNumber', undefined)
24+
setFieldValue('periods[0].endingOccurrenceDate', undefined)
25+
setFieldValue('periods[0].endingOccurrencesNumber', undefined)
2626
}
2727
}
2828

2929
return (
3030
<>
3131
<Select
32-
disabled={values.isAtAllTimes}
33-
error={errors.frequency}
32+
disabled={values?.periods && values?.periods[0]?.isAtAllTimes}
33+
error={errors.periods}
3434
isErrorMessageHidden
3535
isRequired
3636
isUndefinedWhenDisabled
3737
label="Récurrence"
38-
name="frequency"
38+
name="periods[0].frequency"
3939
onChange={updateFrequency}
4040
options={frequencyOptions}
4141
style={{ width: '180px' }}
42-
value={values.frequency}
42+
value={values?.periods && values.periods[0]?.frequency}
4343
/>
4444

45-
{values.frequency && values.frequency !== VigilanceArea.Frequency.NONE && (
46-
<FrequencyContainer>
47-
<Select
48-
data-cy="vigilance-area-ending-condition"
49-
disabled={values.isAtAllTimes}
50-
isErrorMessageHidden
51-
isRequired
52-
isUndefinedWhenDisabled
53-
label="Fin récurrence"
54-
name="endingCondition"
55-
onChange={updateEndingCondition}
56-
options={endingConditionOptions}
57-
style={{ width: '180px' }}
58-
value={values.endingCondition}
59-
/>
60-
{values.endingCondition === VigilanceArea.EndingCondition.OCCURENCES_NUMBER && (
61-
<FormikNumberInput
62-
data-cy="vigilance-area-ending-occurence-number"
63-
disabled={values.isAtAllTimes}
45+
{values?.periods &&
46+
values.periods[0]?.frequency &&
47+
values.periods[0]?.frequency !== VigilanceArea.Frequency.NONE && (
48+
<FrequencyContainer>
49+
<Select
50+
data-cy="vigilance-area-ending-condition"
51+
disabled={values?.periods && values.periods[0]?.isAtAllTimes}
6452
isErrorMessageHidden
65-
isLabelHidden
6653
isRequired
6754
isUndefinedWhenDisabled
68-
label="Nombre de fois"
69-
name="endingOccurrencesNumber"
70-
style={{ width: '115px' }}
55+
label="Fin récurrence"
56+
name="periods[0].endingCondition"
57+
onChange={updateEndingCondition}
58+
options={endingConditionOptions}
59+
style={{ width: '180px' }}
60+
value={values?.periods && values.periods[0]?.endingCondition}
7161
/>
72-
)}
73-
{values.endingCondition === VigilanceArea.EndingCondition.END_DATE && (
74-
<StyledFormikDatePicker
75-
data-cy="vigilance-area-ending-occurence-date"
76-
disabled={values.isAtAllTimes}
77-
isErrorMessageHidden
78-
isLabelHidden
79-
isRequired
80-
isRightAligned
81-
isStringDate
82-
isUndefinedWhenDisabled
83-
label="Date de fin de récurrence"
84-
name="endingOccurrenceDate"
85-
/>
86-
)}
87-
</FrequencyContainer>
88-
)}
62+
{values?.periods &&
63+
values.periods[0]?.endingCondition === VigilanceArea.EndingCondition.OCCURENCES_NUMBER && (
64+
<FormikNumberInput
65+
data-cy="vigilance-area-ending-occurence-number"
66+
disabled={values?.periods && values.periods[0]?.isAtAllTimes}
67+
isErrorMessageHidden
68+
isLabelHidden
69+
isRequired
70+
isUndefinedWhenDisabled
71+
label="Nombre de fois"
72+
name="periods[0].endingOccurrencesNumber"
73+
style={{ width: '115px' }}
74+
/>
75+
)}
76+
{values?.periods && values.periods[0]?.endingCondition === VigilanceArea.EndingCondition.END_DATE && (
77+
<StyledFormikDatePicker
78+
data-cy="vigilance-area-ending-occurence-date"
79+
disabled={values?.periods && values.periods[0]?.isAtAllTimes}
80+
isErrorMessageHidden
81+
isLabelHidden
82+
isRequired
83+
isRightAligned
84+
isStringDate
85+
isUndefinedWhenDisabled
86+
label="Date de fin de récurrence"
87+
name="periods[0].endingOccurrenceDate"
88+
/>
89+
)}
90+
</FrequencyContainer>
91+
)}
8992
</>
9093
)
9194
}

‎frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Panel/PanelPeriodAndThemes.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@ import {
1515
} from '../style'
1616

1717
export function PanelPeriodAndThemes({ vigilanceArea }: { vigilanceArea: VigilanceArea.VigilanceArea | undefined }) {
18-
const formattedStartPeriod = vigilanceArea?.startDatePeriod
19-
? customDayjs(vigilanceArea?.startDatePeriod).utc().format('DD/MM/YYYY')
20-
: undefined
21-
const formattedEndPeriod = vigilanceArea?.endDatePeriod
22-
? customDayjs(vigilanceArea?.endDatePeriod).utc().format('DD/MM/YYYY')
23-
: undefined
18+
const formattedStartPeriod =
19+
vigilanceArea?.periods && vigilanceArea?.periods[0]?.startDatePeriod
20+
? customDayjs(vigilanceArea?.periods[0]?.startDatePeriod).utc().format('DD/MM/YYYY')
21+
: undefined
22+
const formattedEndPeriod =
23+
vigilanceArea?.periods && vigilanceArea?.periods[0]?.endDatePeriod
24+
? customDayjs(vigilanceArea?.periods[0]?.endDatePeriod).utc().format('DD/MM/YYYY')
25+
: undefined
2426

2527
const subThemes = displaySubThemes(vigilanceArea?.themes)
2628
const subTags = displaySubTags(vigilanceArea?.tags)
@@ -31,16 +33,21 @@ export function PanelPeriodAndThemes({ vigilanceArea }: { vigilanceArea: Vigilan
3133
<PanelInlineItem>
3234
<PanelInlineItemLabel $isInline>Période</PanelInlineItemLabel>
3335
<PanelDateItem>
34-
{vigilanceArea?.isAtAllTimes ? (
36+
{vigilanceArea?.periods && vigilanceArea?.periods[0]?.isAtAllTimes ? (
3537
<PanelInlineItemValue>En tout temps</PanelInlineItemValue>
3638
) : (
3739
<>
3840
<PanelInlineItemValue>
3941
{formattedStartPeriod ? `Du ${formattedStartPeriod} au ${formattedEndPeriod}` : EMPTY_VALUE}
4042
</PanelInlineItemValue>
41-
<PanelInlineItemValue>{frequencyText(vigilanceArea?.frequency)}</PanelInlineItemValue>
43+
<PanelInlineItemValue>
44+
{frequencyText(vigilanceArea?.periods && vigilanceArea?.periods[0]?.frequency)}
45+
</PanelInlineItemValue>
4246
<StyledPanelInlineItemValue>
43-
{endingOccurenceText(vigilanceArea?.endingCondition, vigilanceArea?.computedEndDate)}
47+
{endingOccurenceText(
48+
vigilanceArea?.periods && vigilanceArea?.periods[0]?.endingCondition,
49+
vigilanceArea?.periods && vigilanceArea?.periods[0]?.computedEndDate
50+
)}
4451
</StyledPanelInlineItemValue>
4552
</>
4653
)}

‎frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Planning/PlanningBody.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,18 @@ type PlanningBodyProps = {
1818
export function PlanningBody({ vigilanceArea }: PlanningBodyProps) {
1919
const [isSummaryOpen, setIsSummaryOpen] = useState(false)
2020
const occurences = useMemo(
21-
() => (vigilanceArea ? computeOccurenceWithinCurrentYear(vigilanceArea) : []),
21+
() =>
22+
vigilanceArea.periods && vigilanceArea.periods[0]
23+
? computeOccurenceWithinCurrentYear(vigilanceArea.periods[0])
24+
: [],
2225
[vigilanceArea]
2326
)
2427

2528
return (
2629
<>
2730
<Planning occurences={occurences} />
2831
<Periods>
29-
{!vigilanceArea.isAtAllTimes && !vigilanceArea.startDatePeriod ? (
32+
{vigilanceArea.periods && vigilanceArea.periods.length === 0 ? (
3033
<PeriodDescription>Aucune période de vigilance définie</PeriodDescription>
3134
) : (
3235
<Details

0 commit comments

Comments
 (0)