From acb4da98bb03fe95836ec16a037f70c9237d2ba6 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Thu, 3 Oct 2024 11:36:15 +0200 Subject: [PATCH 1/5] Prevent reportings filter to be displayed in non super-user --- .../PriorNotificationList/FilterBar.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx index 3804eb36ef..c15f6e395c 100644 --- a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx +++ b/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx @@ -32,6 +32,7 @@ import { ExpectedArrivalPeriod, FILTER_STATUSES_AS_OPTIONS } from './constants' +import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser' import { priorNotificationActions } from '../../slice' import type { FilterStatus } from './types' @@ -42,9 +43,10 @@ export type FilterBarProps = { searchQuery: string | undefined } export function FilterBar() { + const dispatch = useMainAppDispatch() + const isSuperUser = useIsSuperUser() const { newWindowContainerRef } = useNewWindow() const listFilterValues = useMainAppSelector(store => store.priorNotification.listFilterValues) - const dispatch = useMainAppDispatch() const { fleetSegmentsAsOptions } = useGetFleetSegmentsAsOptions() const { gearsAsTreeOptions } = useGetGearsAsTreeOptions() @@ -219,16 +221,18 @@ export function FilterBar() { style={{ minWidth: 224 }} value={listFilterValues.lastControlPeriod} /> - + {isSuperUser && ( + + )} From 096a9589c37f4edfd464ec76c4925bb27dff5396 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Thu, 3 Oct 2024 11:44:10 +0200 Subject: [PATCH 2/5] Move species select below species list --- .../FormikFishingCatchesMultiSelect/index.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx b/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx index 78a26e9d92..ff8b5509fb 100644 --- a/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx +++ b/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx @@ -96,21 +96,6 @@ export function FormikFishingCatchesMultiSelect({ isReadOnly }: FormikFishingCat return ( <> - ) } From 0d9374e888c98860bcf8100d388573506e2afb44 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Thu, 3 Oct 2024 13:49:12 +0200 Subject: [PATCH 3/5] Remove automatic first malfunction notification --- .../components/PriorNotificationList/FilterBar.tsx | 5 ----- .../BeaconMalfunctionBoard/SendNotification.tsx | 13 +++++-------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx index c15f6e395c..5331149767 100644 --- a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx +++ b/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx @@ -36,12 +36,7 @@ import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser' import { priorNotificationActions } from '../../slice' import type { FilterStatus } from './types' -import type { Promisable } from 'type-fest' -export type FilterBarProps = { - onQueryChange: (nextQuery: string | undefined) => Promisable - searchQuery: string | undefined -} export function FilterBar() { const dispatch = useMainAppDispatch() const isSuperUser = useIsSuperUser() diff --git a/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx b/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx index 0e68b4de33..512ca0c716 100644 --- a/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx +++ b/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx @@ -1,13 +1,12 @@ -import { type Option, Select } from '@mtes-mct/monitor-ui' +import { useGetForeignFmcsQuery } from '@api/foreignFmc' +import { useMainAppDispatch } from '@hooks/useMainAppDispatch' +import { type Option, Select, THEME } from '@mtes-mct/monitor-ui' import { useEffect, useMemo, useRef, useState } from 'react' import { SelectPicker } from 'rsuite' import styled from 'styled-components' -import { useGetForeignFmcsQuery } from '../../../api/foreignFmc' -import { COLORS } from '../../../constants/constants' import { NOTIFICATION_TYPE } from '../../../domain/entities/beaconMalfunction/constants' import { sendNotification } from '../../../domain/use_cases/beaconMalfunction/sendNotification' -import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch' import type { CSSProperties } from 'react' @@ -19,9 +18,7 @@ export function SendNotification({ beaconMalfunction }) { const [isShowingForeignFmcList, setIsShowingForeignFmcList] = useState(false) /* eslint-enable sort-keys-fix/sort-keys-fix */ const notificationTypes: Array = [ - 'MALFUNCTION_AT_PORT_INITIAL_NOTIFICATION', 'MALFUNCTION_AT_PORT_REMINDER', - 'MALFUNCTION_AT_SEA_INITIAL_NOTIFICATION', 'MALFUNCTION_AT_SEA_REMINDER', 'MALFUNCTION_NOTIFICATION_TO_FOREIGN_FMC' ] @@ -47,7 +44,7 @@ export function SendNotification({ beaconMalfunction }) { if (selectMenuRef.current?.previousSibling) { ;(selectMenuRef.current.previousSibling as HTMLElement).style.setProperty( 'background', - COLORS.charcoal, + THEME.color.charcoal, 'important' ) ;(selectMenuRef.current.previousSibling as HTMLElement).style.setProperty( @@ -61,7 +58,7 @@ export function SendNotification({ beaconMalfunction }) { '.rs-picker-toggle-placeholder' ) if (toggleElement?.style) { - toggleElement.style.setProperty('color', COLORS.gainsboro, 'important') + toggleElement.style.setProperty('color', THEME.color.gainsboro, 'important') toggleElement.style.setProperty('font-size', '13', 'important') } } From e8dc37b1e4a4077fd21268e7c9f98f2baadc6aa3 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Thu, 3 Oct 2024 14:28:49 +0200 Subject: [PATCH 4/5] Remove fleet segment removal in control and fix infraction text ellipsis --- .../Infraction.tsx | 12 ++++- .../shared/FormikSpeciesQuantitySeized.tsx | 21 ++++++--- .../shared/VesselFleetSegmentsField.tsx | 44 +++++-------------- 3 files changed, 39 insertions(+), 38 deletions(-) diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx index 9e3f05a4ee..675a2573fb 100644 --- a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx +++ b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx @@ -25,7 +25,9 @@ export function Infraction({ data, index, onDelete, onEdit }: InfractionProps) { {MissionAction.INFRACTION_TYPE_LABEL[data.infractionType]} {data.infractionType !== MissionAction.InfractionType.PENDING && ( - NATINF : {data.label ?? data.natinf} + + NATINF : {data.label ?? data.natinf} + )} @@ -57,6 +59,14 @@ export function Infraction({ data, index, onDelete, onEdit }: InfractionProps) { ) } +const StyledTag = styled(Tag)` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 400px; + display: inline-block; +` + const InnerWrapper = styled.div` > div { display: flex; diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikSpeciesQuantitySeized.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikSpeciesQuantitySeized.tsx index c42866f0c8..1c5ed8c0c5 100644 --- a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikSpeciesQuantitySeized.tsx +++ b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikSpeciesQuantitySeized.tsx @@ -1,16 +1,27 @@ -import { FormikNumberInput } from '@mtes-mct/monitor-ui' +import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants' +import { FieldError, FormikNumberInput } from '@mtes-mct/monitor-ui' import { useFormikContext } from 'formik' import styled from 'styled-components' import type { MissionActionFormValues } from '@features/Mission/components/MissionForm/types' export function FormikSpeciesQuantitySeized() { - const { values } = useFormikContext() + const { errors, values } = useFormikContext() return ( - !!values.hasSomeSpeciesSeized && ( - - ) + <> + {!!values.hasSomeSpeciesSeized && ( + + )} + {typeof errors.speciesQuantitySeized === 'string' && errors.speciesQuantitySeized !== HIDDEN_ERROR && ( + {errors.speciesQuantitySeized} + )} + ) } diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx index 5fb29d3ef4..5624676d17 100644 --- a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx +++ b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx @@ -1,10 +1,9 @@ import { useGetFleetSegmentsQuery } from '@features/FleetSegment/apis' -import { FrontendError } from '@libs/FrontendError' -import { Field, Label, SingleTag, TagGroup } from '@mtes-mct/monitor-ui' +import { Accent, Field, Label, SingleTag, Tag, TagGroup } from '@mtes-mct/monitor-ui' import { sortByAscendingValue } from '@utils/sortByAscendingValue' import { useFormikContext } from 'formik' -import { remove as ramdaRemove, uniq } from 'ramda' -import { useCallback, useMemo } from 'react' +import { uniq } from 'ramda' +import { useMemo } from 'react' import styled from 'styled-components' import { useGetMissionActionFormikUsecases } from '../../hooks/useGetMissionActionFormikUsecases' @@ -30,26 +29,6 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp updateSegments({ ...values, faoAreas: nextFaoAreas }) } - const removeFleetSegment = useCallback( - (fleetSegmentIndex: number | undefined) => { - if (!values.segments) { - throw new FrontendError('`segments` is undefined') - } - - if (fleetSegmentIndex === undefined) { - throw new FrontendError('`fleetSegmentIndex` is undefined') - } - - const nextFleetSegments = ramdaRemove(fleetSegmentIndex, 1, values.segments) - const normalizedNextSegments = nextFleetSegments.length > 0 ? nextFleetSegments : undefined - - setFieldValue('segments', normalizedNextSegments) - }, - - // eslint-disable-next-line react-hooks/exhaustive-deps - [values.segments] - ) - const faoAreaTags = () => { if (!values.faoAreas) { return [] @@ -67,14 +46,11 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp const fleetSegmentTags = useMemo( () => values.segments - ? values.segments.map(({ segment, segmentName }, index) => ( - removeFleetSegment(index)} - >{`${segment} - ${segmentName}`} + ? values.segments.map(({ segment, segmentName }) => ( + {`${segment} - ${segmentName}`} )) : [], - [values.segments, removeFleetSegment] + [values.segments] ) if (isLoading) { @@ -95,14 +71,14 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp {faoAreaTags.length > 0 && ( - {faoAreaTags()} + {faoAreaTags()} )} {fleetSegmentTags.length > 0 && ( - {fleetSegmentTags} + {fleetSegmentTags} )} @@ -111,6 +87,10 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp ) } +const StyledTagGroup = styled(TagGroup)` + padding-top: 8px; +` + const Helper = styled.p` color: ${p => p.theme.color.slateGray}; font-style: italic; From de9921f4a425995bbbf76bbe6c69f3d46e90106a Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Thu, 3 Oct 2024 15:10:18 +0200 Subject: [PATCH 5/5] Move variable as constant --- .../domain/entities/beaconMalfunction/constants.tsx | 8 ++++++++ .../BeaconMalfunctionBoard/SendNotification.tsx | 11 ++--------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/frontend/src/domain/entities/beaconMalfunction/constants.tsx b/frontend/src/domain/entities/beaconMalfunction/constants.tsx index 517ba487aa..44f259b714 100644 --- a/frontend/src/domain/entities/beaconMalfunction/constants.tsx +++ b/frontend/src/domain/entities/beaconMalfunction/constants.tsx @@ -251,6 +251,14 @@ const NOTIFICATION_TYPE = { } } +/* eslint-enable sort-keys-fix/sort-keys-fix */ +export const SELECTABLE_NOTIFICATION_TYPES: Array = [ + 'MALFUNCTION_AT_PORT_REMINDER', + 'MALFUNCTION_AT_SEA_REMINDER', + 'MALFUNCTION_NOTIFICATION_TO_FOREIGN_FMC' +] +/* eslint-disable sort-keys-fix/sort-keys-fix */ + const COMMUNICATION_MEAN = { EMAIL: { addresseePreposition: 'à', diff --git a/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx b/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx index 512ca0c716..b906c723ed 100644 --- a/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx +++ b/frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx @@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'react' import { SelectPicker } from 'rsuite' import styled from 'styled-components' -import { NOTIFICATION_TYPE } from '../../../domain/entities/beaconMalfunction/constants' +import { NOTIFICATION_TYPE, SELECTABLE_NOTIFICATION_TYPES } from '../../../domain/entities/beaconMalfunction/constants' import { sendNotification } from '../../../domain/use_cases/beaconMalfunction/sendNotification' import type { CSSProperties } from 'react' @@ -16,13 +16,6 @@ export function SendNotification({ beaconMalfunction }) { const selectMenuRef = useRef() const [isSendingNotification, setIsSendingNotification] = useState('') const [isShowingForeignFmcList, setIsShowingForeignFmcList] = useState(false) - /* eslint-enable sort-keys-fix/sort-keys-fix */ - const notificationTypes: Array = [ - 'MALFUNCTION_AT_PORT_REMINDER', - 'MALFUNCTION_AT_SEA_REMINDER', - 'MALFUNCTION_NOTIFICATION_TO_FOREIGN_FMC' - ] - /* eslint-disable sort-keys-fix/sort-keys-fix */ const foreignFmcsAsOptions: Option[] = useMemo(() => { if (!getForeignFmcsApiQuery.data) { @@ -105,7 +98,7 @@ export function SendNotification({ beaconMalfunction }) { selectMenuRef.current as any} - data={notificationTypes.map(type => ({ + data={SELECTABLE_NOTIFICATION_TYPES.map(type => ({ label: NOTIFICATION_TYPE[type].followUpMessage, value: type }))}