From 8128055e54217b8fc2d4cb2e80ffb5621ffcac3c Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Tue, 10 Oct 2023 18:13:55 +0200 Subject: [PATCH] [Tech] clean and refacto --- .../use_cases/missions/deleteMission.ts | 2 + .../missions/editMissionInLocalStore.ts | 6 +- .../domain/use_cases/missions/saveMission.ts | 2 + .../use_cases/reporting/closeReporting.ts | 2 + .../use_cases/reporting/deleteReporting.ts | 2 + .../use_cases/reporting/saveReporting.ts | 2 +- .../HoveredMissionToAttachLayer.tsx | 8 +- .../SelectedMissionToAttachLayer.tsx | 10 +- .../Layers/{ => MissionToAttach}/index.tsx | 14 +- .../Layers/{ => MissionToAttach}/style.ts | 2 +- .../Overlays/missionToAttach/MissionCard.tsx | 115 -------------- .../Overlays/missionToAttach/index.tsx | 43 ++---- .../ReportingsList/Columns/index.tsx | 2 +- frontend/src/features/map/index.tsx | 10 +- .../map/overlays/missions/MissionCard.tsx | 34 +++-- .../map/overlays/reportings/ReportingCard.tsx | 27 ++-- .../Layers/ReportingToAttach/index.tsx | 1 + .../reportingToAttach/ReportingCard.tsx | 142 ------------------ .../Overlays/reportingToAttach/index.tsx | 4 +- 19 files changed, 86 insertions(+), 342 deletions(-) rename frontend/src/features/Reportings/Layers/{ => MissionToAttach}/HoveredMissionToAttachLayer.tsx (84%) rename frontend/src/features/Reportings/Layers/{ => MissionToAttach}/SelectedMissionToAttachLayer.tsx (88%) rename frontend/src/features/Reportings/Layers/{ => MissionToAttach}/index.tsx (82%) rename frontend/src/features/Reportings/Layers/{ => MissionToAttach}/style.ts (88%) delete mode 100644 frontend/src/features/Reportings/Overlays/missionToAttach/MissionCard.tsx delete mode 100644 frontend/src/features/missions/Overlays/reportingToAttach/ReportingCard.tsx diff --git a/frontend/src/domain/use_cases/missions/deleteMission.ts b/frontend/src/domain/use_cases/missions/deleteMission.ts index b351eb326..6ee2128cc 100644 --- a/frontend/src/domain/use_cases/missions/deleteMission.ts +++ b/frontend/src/domain/use_cases/missions/deleteMission.ts @@ -3,6 +3,7 @@ import { sideWindowActions } from '../../../features/SideWindow/slice' import { sideWindowPaths } from '../../entities/sideWindow' import { setToast } from '../../shared_slices/Global' import { multiMissionsActions } from '../../shared_slices/MultiMissions' +import { MapInteractionListenerEnum, updateMapInteractionListeners } from '../map/updateMapInteractionListeners' export const deleteMissionAndGoToMissionsList = id => async dispatch => { try { @@ -11,6 +12,7 @@ export const deleteMissionAndGoToMissionsList = id => async dispatch => { throw Error('Erreur à la suppression de la mission') } else { dispatch(multiMissionsActions.deleteSelectedMission(id)) + dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE)) dispatch(sideWindowActions.focusAndGoTo(sideWindowPaths.MISSIONS)) } } catch (error) { diff --git a/frontend/src/domain/use_cases/missions/editMissionInLocalStore.ts b/frontend/src/domain/use_cases/missions/editMissionInLocalStore.ts index a6e69f647..fe34781c1 100644 --- a/frontend/src/domain/use_cases/missions/editMissionInLocalStore.ts +++ b/frontend/src/domain/use_cases/missions/editMissionInLocalStore.ts @@ -49,8 +49,10 @@ export const editMissionInLocalStore = missionId => async (dispatch, getState) = } await dispatch(multiMissionsActions.setSelectedMissions(missions)) - await dispatch(attachReportingToMissionSliceActions.setAttachedReportings(missionToSave.attachedReportings)) - await dispatch(attachReportingToMissionSliceActions.setAttachedReportingIds(missionToSave.attachedReportingIds)) + await dispatch(attachReportingToMissionSliceActions.setAttachedReportings(missionToSave.attachedReportings || [])) + await dispatch( + attachReportingToMissionSliceActions.setAttachedReportingIds(missionToSave.attachedReportingIds || []) + ) await dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.MISSION, { id: missionId }))) } else { throw Error('Erreur à la création ou à la modification de la mission') diff --git a/frontend/src/domain/use_cases/missions/saveMission.ts b/frontend/src/domain/use_cases/missions/saveMission.ts index e899b253d..b3b82e638 100644 --- a/frontend/src/domain/use_cases/missions/saveMission.ts +++ b/frontend/src/domain/use_cases/missions/saveMission.ts @@ -5,6 +5,7 @@ import { getMissionPageRoute } from '../../../utils/routes' import { sideWindowPaths } from '../../entities/sideWindow' import { setToast } from '../../shared_slices/Global' import { multiMissionsActions } from '../../shared_slices/MultiMissions' +import { MapInteractionListenerEnum, updateMapInteractionListeners } from '../map/updateMapInteractionListeners' export const saveMission = (values, reopen = false) => @@ -26,6 +27,7 @@ export const saveMission = return } dispatch(multiMissionsActions.deleteSelectedMission(values.id)) + dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE)) dispatch(sideWindowActions.focusAndGoTo(sideWindowPaths.MISSIONS)) } else { throw Error('Erreur à la création ou à la modification de la mission') diff --git a/frontend/src/domain/use_cases/reporting/closeReporting.ts b/frontend/src/domain/use_cases/reporting/closeReporting.ts index 76ad3d6c5..5a17511ed 100644 --- a/frontend/src/domain/use_cases/reporting/closeReporting.ts +++ b/frontend/src/domain/use_cases/reporting/closeReporting.ts @@ -1,5 +1,6 @@ import { setReportingFormVisibility, ReportingContext, VisibilityState } from '../../shared_slices/Global' import { reportingActions } from '../../shared_slices/reporting' +import { MapInteractionListenerEnum, updateMapInteractionListeners } from '../map/updateMapInteractionListeners' export const closeReporting = (reportingIdToClose: number | string, reportingContextToClose: ReportingContext) => async (dispatch, getState) => { @@ -24,6 +25,7 @@ export const closeReporting = } await dispatch(reportingActions.deleteSelectedReporting(reportingIdToClose)) + dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE)) await dispatch( setReportingFormVisibility({ context: reportingContextToClose, diff --git a/frontend/src/domain/use_cases/reporting/deleteReporting.ts b/frontend/src/domain/use_cases/reporting/deleteReporting.ts index ad741b84f..4229993e5 100644 --- a/frontend/src/domain/use_cases/reporting/deleteReporting.ts +++ b/frontend/src/domain/use_cases/reporting/deleteReporting.ts @@ -1,6 +1,7 @@ import { reportingsAPI } from '../../../api/reportingsAPI' import { setReportingFormVisibility, setToast, VisibilityState } from '../../shared_slices/Global' import { reportingActions } from '../../shared_slices/reporting' +import { MapInteractionListenerEnum, updateMapInteractionListeners } from '../map/updateMapInteractionListeners' export const deleteReporting = (id: number | string | undefined) => async (dispatch, getState) => { const { reportings, selectedReportingIdOnMap } = getState().reporting @@ -17,6 +18,7 @@ export const deleteReporting = (id: number | string | undefined) => async (dispa } await dispatch(reportingActions.deleteSelectedReporting(id)) + dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE)) dispatch( setReportingFormVisibility({ context: reportings[id].context, diff --git a/frontend/src/domain/use_cases/reporting/saveReporting.ts b/frontend/src/domain/use_cases/reporting/saveReporting.ts index 6cdacea9e..481abd222 100644 --- a/frontend/src/domain/use_cases/reporting/saveReporting.ts +++ b/frontend/src/domain/use_cases/reporting/saveReporting.ts @@ -22,7 +22,7 @@ export const saveReporting = visibility: VisibilityState.NONE }) ) - await dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE)) + dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE)) dispatch(reportingActions.deleteSelectedReporting(values.id)) } else { throw Error('Erreur à la création ou à la modification du signalement') diff --git a/frontend/src/features/Reportings/Layers/HoveredMissionToAttachLayer.tsx b/frontend/src/features/Reportings/Layers/MissionToAttach/HoveredMissionToAttachLayer.tsx similarity index 84% rename from frontend/src/features/Reportings/Layers/HoveredMissionToAttachLayer.tsx rename to frontend/src/features/Reportings/Layers/MissionToAttach/HoveredMissionToAttachLayer.tsx index cf9dcfce5..324e1c134 100644 --- a/frontend/src/features/Reportings/Layers/HoveredMissionToAttachLayer.tsx +++ b/frontend/src/features/Reportings/Layers/MissionToAttach/HoveredMissionToAttachLayer.tsx @@ -2,11 +2,11 @@ import VectorLayer from 'ol/layer/Vector' import VectorSource from 'ol/source/Vector' import { type MutableRefObject, useEffect, useRef } from 'react' -import { Layers } from '../../../domain/entities/layers/constants' -import { missionZoneStyle } from '../../map/layers/Missions/missions.style' +import { Layers } from '../../../../domain/entities/layers/constants' +import { missionZoneStyle } from '../../../map/layers/Missions/missions.style' -import type { VectorLayerWithName } from '../../../domain/types/layer' -import type { BaseMapChildrenProps } from '../../map/BaseMap' +import type { VectorLayerWithName } from '../../../../domain/types/layer' +import type { BaseMapChildrenProps } from '../../../map/BaseMap' export function HoveredMissionToAttachLayer({ currentFeatureOver, map }: BaseMapChildrenProps) { const vectorSourceRef = useRef() as MutableRefObject diff --git a/frontend/src/features/Reportings/Layers/SelectedMissionToAttachLayer.tsx b/frontend/src/features/Reportings/Layers/MissionToAttach/SelectedMissionToAttachLayer.tsx similarity index 88% rename from frontend/src/features/Reportings/Layers/SelectedMissionToAttachLayer.tsx rename to frontend/src/features/Reportings/Layers/MissionToAttach/SelectedMissionToAttachLayer.tsx index 7b626fd00..78c52c35c 100644 --- a/frontend/src/features/Reportings/Layers/SelectedMissionToAttachLayer.tsx +++ b/frontend/src/features/Reportings/Layers/MissionToAttach/SelectedMissionToAttachLayer.tsx @@ -3,12 +3,12 @@ import VectorSource from 'ol/source/Vector' import { type MutableRefObject, useCallback, useEffect, useRef } from 'react' import { attachedMissionStyle } from './style' -import { useGetMissionsQuery } from '../../../api/missionsAPI' -import { Layers } from '../../../domain/entities/layers/constants' -import { useAppSelector } from '../../../hooks/useAppSelector' -import { getMissionZoneFeature } from '../../map/layers/Missions/missionGeometryHelpers' +import { useGetMissionsQuery } from '../../../../api/missionsAPI' +import { Layers } from '../../../../domain/entities/layers/constants' +import { useAppSelector } from '../../../../hooks/useAppSelector' +import { getMissionZoneFeature } from '../../../map/layers/Missions/missionGeometryHelpers' -import type { BaseMapChildrenProps } from '../../map/BaseMap' +import type { BaseMapChildrenProps } from '../../../map/BaseMap' export function SelectedMissionToAttachLayer({ map }: BaseMapChildrenProps) { const attachMissionListener = useAppSelector(state => state.attachMissionToReporting.attachMissionListener) diff --git a/frontend/src/features/Reportings/Layers/index.tsx b/frontend/src/features/Reportings/Layers/MissionToAttach/index.tsx similarity index 82% rename from frontend/src/features/Reportings/Layers/index.tsx rename to frontend/src/features/Reportings/Layers/MissionToAttach/index.tsx index ef73613ef..69f452d28 100644 --- a/frontend/src/features/Reportings/Layers/index.tsx +++ b/frontend/src/features/Reportings/Layers/MissionToAttach/index.tsx @@ -3,14 +3,14 @@ import VectorSource from 'ol/source/Vector' import { useCallback, useEffect, useMemo, useRef } from 'react' import { useDispatch } from 'react-redux' -import { useGetMissionsQuery } from '../../../api/missionsAPI' -import { Layers } from '../../../domain/entities/layers/constants' -import { useAppSelector } from '../../../hooks/useAppSelector' -import { getMissionZoneFeature } from '../../map/layers/Missions/missionGeometryHelpers' -import { missionWithCentroidStyleFn } from '../../map/layers/Missions/missions.style' -import { attachMissionToReportingSliceActions } from '../ReportingForm/AttachMission/slice' +import { useGetMissionsQuery } from '../../../../api/missionsAPI' +import { Layers } from '../../../../domain/entities/layers/constants' +import { useAppSelector } from '../../../../hooks/useAppSelector' +import { getMissionZoneFeature } from '../../../map/layers/Missions/missionGeometryHelpers' +import { missionWithCentroidStyleFn } from '../../../map/layers/Missions/missions.style' +import { attachMissionToReportingSliceActions } from '../../ReportingForm/AttachMission/slice' -import type { BaseMapChildrenProps } from '../../map/BaseMap' +import type { BaseMapChildrenProps } from '../../../map/BaseMap' import type { Geometry } from 'ol/geom' export function MissionToAttachLayer({ map, mapClickEvent }: BaseMapChildrenProps) { diff --git a/frontend/src/features/Reportings/Layers/style.ts b/frontend/src/features/Reportings/Layers/MissionToAttach/style.ts similarity index 88% rename from frontend/src/features/Reportings/Layers/style.ts rename to frontend/src/features/Reportings/Layers/MissionToAttach/style.ts index 40e7821da..c65253fab 100644 --- a/frontend/src/features/Reportings/Layers/style.ts +++ b/frontend/src/features/Reportings/Layers/MissionToAttach/style.ts @@ -3,7 +3,7 @@ import { getCenter } from 'ol/extent' import Point from 'ol/geom/Point' import { Stroke, Style, Circle } from 'ol/style' -import { selectedMissionStyle } from '../../map/layers/Missions/missions.style' +import { selectedMissionStyle } from '../../../map/layers/Missions/missions.style' export const selectedMissionToAttachStyle = new Style({ geometry: feature => { diff --git a/frontend/src/features/Reportings/Overlays/missionToAttach/MissionCard.tsx b/frontend/src/features/Reportings/Overlays/missionToAttach/MissionCard.tsx deleted file mode 100644 index bde761a89..000000000 --- a/frontend/src/features/Reportings/Overlays/missionToAttach/MissionCard.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { customDayjs as dayjs, pluralize } from '@mtes-mct/monitor-ui' -import styled from 'styled-components' - -import { useAppSelector } from '../../../../hooks/useAppSelector' -import { MissionSourceTag } from '../../../../ui/MissionSourceTag' -import { MissionStatusLabel } from '../../../../ui/MissionStatusLabel' -import { missionTypesToString } from '../../../../utils/missionTypes' - -export function MissionCard({ feature }: { feature: any }) { - const { attachMissionListener } = useAppSelector(state => state.attachMissionToReporting) - const { - controlUnits, - endDateTimeUtc, - missionSource, - missionStatus, - missionTypes, - numberOfControls, - numberOfSurveillance, - startDateTimeUtc - } = feature.getProperties() - - const startDate = dayjs(startDateTimeUtc) - const endDate = dayjs(endDateTimeUtc) - - const isMissionDuringOneDay = !endDateTimeUtc || (endDateTimeUtc && endDate.diff(startDate, 'day') === 0) - - const formattedStartDate = startDate.isValid() && startDate.format('D MMM YYYY') - const formattedEndDate = endDateTimeUtc && endDate.isValid() && endDate.format('D MMM YYYY') - const missionDurationText = isMissionDuringOneDay - ? formattedStartDate - : `du ${formattedStartDate} au ${formattedEndDate}` - - if (!attachMissionListener) { - return null - } - - return ( - -
- - {controlUnits.length === 1 && ( - <> - <div>{controlUnits[0].name.toUpperCase()}</div> - {controlUnits[0].contact ? ( - <div>{controlUnits[0].contact}</div> - ) : ( - <NoContact>Aucun contact renseigné</NoContact> - )} - </> - )} - {controlUnits.length > 1 && controlUnits[0] && ( - <> - <div>{controlUnits[0].name.toUpperCase()}</div> - <MultipleControlUnits> - et {controlUnits.length - 1} {pluralize('autre', controlUnits.length - 1)}{' '} - {pluralize('unité', controlUnits.length - 1)} - </MultipleControlUnits> - </> - )} - -
- - -
-
- {' '} - Mission {missionTypesToString(missionTypes)} – {missionDurationText} -
-
- {numberOfControls} {pluralize('contrôle', numberOfControls)} et {numberOfSurveillance}{' '} - {pluralize('surveillance', numberOfSurveillance)} -
-
- - - ) -} - -const Wrapper = styled.div` - padding: 10px; - box-shadow: 0px 3px 6px #70778540; - background-color: ${p => p.theme.color.white}; - display: flex; - flex-direction: column; - gap: 12px; - flex: 0 0 260px; -` - -const Header = styled.div` - display: flex; - flex-direction: row; - align-items: start; - justify-content: space-between; -` -const MultipleControlUnits = styled.div` - color: ${p => p.theme.color.slateGray}; -` -const NoContact = styled.div` - color: ${p => p.theme.color.slateGray}; - font-weight: 400; - font-style: italic; -` - -const Details = styled.div` - > div { - color: ${p => p.theme.color.slateGray}; - white-space: nowrap; - } -` - -const Title = styled.div` - white-space: nowrap; - font: normal normal bold 13px/18px Marianne; - color: ${p => p.theme.color.gunMetal}; -` diff --git a/frontend/src/features/Reportings/Overlays/missionToAttach/index.tsx b/frontend/src/features/Reportings/Overlays/missionToAttach/index.tsx index 33a03bc7d..c3227d1db 100644 --- a/frontend/src/features/Reportings/Overlays/missionToAttach/index.tsx +++ b/frontend/src/features/Reportings/Overlays/missionToAttach/index.tsx @@ -1,47 +1,24 @@ -import { MissionCard } from './MissionCard' import { Layers } from '../../../../domain/entities/layers/constants' import { useAppSelector } from '../../../../hooks/useAppSelector' +import { MissionCard } from '../../../map/overlays/missions/MissionCard' import { OverlayPositionOnExtent } from '../../../map/overlays/OverlayPositionOnExtent' -import type { VectorLayerWithName } from '../../../../domain/types/layer' import type { BaseMapChildrenProps } from '../../../map/BaseMap' export function MissionToAttachOverlays({ currentFeatureOver, map }: BaseMapChildrenProps) { - const attachedMissionId = useAppSelector(state => state.attachMissionToReporting.attachedMissionId) - const { displayMissionToAttachLayer } = useAppSelector(state => state.global) - const feature = map - ?.getLayers() - ?.getArray() - ?.find( - (l): l is VectorLayerWithName => - Object.prototype.hasOwnProperty.call(l, 'name') && - (l as VectorLayerWithName).name === Layers.MISSION_TO_ATTACH_ON_REPORTING.code - ) - ?.getSource() - ?.getFeatureById(`${Layers.MISSION_TO_ATTACH_ON_REPORTING.code}:${attachedMissionId}`) + const currentfeatureId = currentFeatureOver?.getId() const displayHoveredFeature = - typeof currentfeatureId === 'string' && - currentfeatureId.startsWith(Layers.MISSION_TO_ATTACH_ON_REPORTING.code) && - currentfeatureId !== `${Layers.MISSION_TO_ATTACH_ON_REPORTING.code}:${attachedMissionId}` + typeof currentfeatureId === 'string' && currentfeatureId.startsWith(Layers.MISSION_TO_ATTACH_ON_REPORTING.code) return ( - <> - - - - - - - + + + ) } diff --git a/frontend/src/features/Reportings/ReportingsList/Columns/index.tsx b/frontend/src/features/Reportings/ReportingsList/Columns/index.tsx index 1384633d2..2d5e1f0ff 100644 --- a/frontend/src/features/Reportings/ReportingsList/Columns/index.tsx +++ b/frontend/src/features/Reportings/ReportingsList/Columns/index.tsx @@ -102,7 +102,7 @@ export const Columns = [ enableSorting: true, header: () => 'Statut', id: 'isArchived', - size: 80, + size: 90, sortingFn: (rowA: Row, rowB: Row, columnId: string) => { if (rowA.original[columnId] > rowB.original[columnId]) { return -1 diff --git a/frontend/src/features/map/index.tsx b/frontend/src/features/map/index.tsx index b51931532..d26075ab7 100644 --- a/frontend/src/features/map/index.tsx +++ b/frontend/src/features/map/index.tsx @@ -29,11 +29,11 @@ import { ShowRegulatoryMetadata } from './ShowRegulatoryMetadata' import { ReportingToAttachLayer } from '../missions/Layers/ReportingToAttach' import { HoveredReportingToAttachLayer } from '../missions/Layers/ReportingToAttach/HoveredReportingToAttachLayer' import { SelectedReportingToAttachLayer } from '../missions/Layers/ReportingToAttach/SelectedReportingToAttachLayer' -import { ReportingToAttachOverlays } from '../missions/Overlays/reportingToAttach' -import { MissionToAttachLayer } from '../Reportings/Layers' -import { HoveredMissionToAttachLayer } from '../Reportings/Layers/HoveredMissionToAttachLayer' -import { SelectedMissionToAttachLayer } from '../Reportings/Layers/SelectedMissionToAttachLayer' -import { MissionToAttachOverlays } from '../Reportings/Overlays/missionToAttach' +import { ReportingToAttachOverlays } from '../missions/Overlays/ReportingToAttach' +import { MissionToAttachLayer } from '../Reportings/Layers/MissionToAttach' +import { HoveredMissionToAttachLayer } from '../Reportings/Layers/MissionToAttach/HoveredMissionToAttachLayer' +import { SelectedMissionToAttachLayer } from '../Reportings/Layers/MissionToAttach/SelectedMissionToAttachLayer' +import { MissionToAttachOverlays } from '../Reportings/Overlays/MissionToAttach' export function Map() { return ( diff --git a/frontend/src/features/map/overlays/missions/MissionCard.tsx b/frontend/src/features/map/overlays/missions/MissionCard.tsx index 0130e48be..2657b6947 100644 --- a/frontend/src/features/map/overlays/missions/MissionCard.tsx +++ b/frontend/src/features/map/overlays/missions/MissionCard.tsx @@ -6,17 +6,23 @@ import { editMissionInLocalStore } from '../../../../domain/use_cases/missions/e import { clearSelectedMissionOnMap } from '../../../../domain/use_cases/missions/selectMissionOnMap' import { useAppDispatch } from '../../../../hooks/useAppDispatch' import { useAppSelector } from '../../../../hooks/useAppSelector' -import { useHasMapListener } from '../../../../hooks/useHasMapListener' import { MissionSourceTag } from '../../../../ui/MissionSourceTag' import { MissionStatusLabel } from '../../../../ui/MissionStatusLabel' import { missionTypesToString } from '../../../../utils/missionTypes' -export function MissionCard({ feature, selected = false }: { feature: any; selected?: boolean }) { +type MissionCardProps = { + feature: any + isOnlyHoverable?: boolean + selected?: boolean +} +export function MissionCard({ feature, isOnlyHoverable = false, selected = false }: MissionCardProps) { const dispatch = useAppDispatch() - const hasMapListener = useHasMapListener() const { global: { displayMissionsLayer } } = useAppSelector(state => state) + const listener = useAppSelector(state => state.draw.listener) + const attachReportingListener = useAppSelector(state => state.attachReportingToMission.attachReportingListener) + const { controlUnits, endDateTimeUtc, @@ -48,7 +54,7 @@ export function MissionCard({ feature, selected = false }: { feature: any; selec dispatch(clearSelectedMissionOnMap()) }, [dispatch]) - if (!displayMissionsLayer || hasMapListener) { + if (!displayMissionsLayer || listener || attachReportingListener) { return null } @@ -100,15 +106,17 @@ export function MissionCard({ feature, selected = false }: { feature: any; selec - - Editer la mission - + {!isOnlyHoverable && ( + + Editer la mission + + )} ) } diff --git a/frontend/src/features/map/overlays/reportings/ReportingCard.tsx b/frontend/src/features/map/overlays/reportings/ReportingCard.tsx index 450a59ad3..cbae6e525 100644 --- a/frontend/src/features/map/overlays/reportings/ReportingCard.tsx +++ b/frontend/src/features/map/overlays/reportings/ReportingCard.tsx @@ -18,10 +18,15 @@ import { reportingActions } from '../../../../domain/shared_slices/reporting' import { editReportingInLocalStore } from '../../../../domain/use_cases/reporting/editReportingInLocalStore' import { useAppDispatch } from '../../../../hooks/useAppDispatch' import { useAppSelector } from '../../../../hooks/useAppSelector' -import { useHasMapListener } from '../../../../hooks/useHasMapListener' import { LinkToMissionTag } from '../../../Reportings/components/LinkToMissionTag' import { StatusActionTag } from '../../../Reportings/components/StatusActionTag' +type ReportingCardProps = { + feature: any + isOnlyHoverable?: boolean + selected?: boolean + updateMargins: (margin: number) => void +} function StatusTag({ attachedEnvActionId, isArchived, @@ -51,18 +56,16 @@ function StatusTag({ export function ReportingCard({ feature, + isOnlyHoverable = false, selected = false, updateMargins -}: { - feature: any - selected?: boolean - updateMargins: (margin: number) => void -}) { +}: ReportingCardProps) { const dispatch = useAppDispatch() - const hasMapListener = useHasMapListener() const { global: { displayReportingsLayer } } = useAppSelector(state => state) + const listener = useAppSelector(state => state.draw.listener) + const attachMissionListener = useAppSelector(state => state.attachMissionToReporting.attachMissionListener) const ref = useRef(null) @@ -114,7 +117,7 @@ export function ReportingCard({ } }, [feature, updateMargins]) - if (!displayReportingsLayer || hasMapListener) { + if (!displayReportingsLayer || listener || attachMissionListener) { return null } @@ -165,9 +168,11 @@ export function ReportingCard({ isArchived={timeLeft < 0 || isArchived} isAttachToMission={!!attachedMissionId} /> - - Editer le signalement - + {!isOnlyHoverable && ( + + Editer le signalement + + )} ) } diff --git a/frontend/src/features/missions/Layers/ReportingToAttach/index.tsx b/frontend/src/features/missions/Layers/ReportingToAttach/index.tsx index a958d4d6c..63f1c766f 100644 --- a/frontend/src/features/missions/Layers/ReportingToAttach/index.tsx +++ b/frontend/src/features/missions/Layers/ReportingToAttach/index.tsx @@ -20,6 +20,7 @@ export function ReportingToAttachLayer({ map, mapClickEvent }: BaseMapChildrenPr const dispatch = useDispatch() const attachReportingListener = useAppSelector(state => state.attachReportingToMission.attachReportingListener) const attachedReportings = useAppSelector(state => state.attachReportingToMission.attachedReportings) + const { data: reportings } = useGetReportingsQuery({ status: [StatusFilterEnum.IN_PROGRESS] }) diff --git a/frontend/src/features/missions/Overlays/reportingToAttach/ReportingCard.tsx b/frontend/src/features/missions/Overlays/reportingToAttach/ReportingCard.tsx deleted file mode 100644 index a3e202333..000000000 --- a/frontend/src/features/missions/Overlays/reportingToAttach/ReportingCard.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { Icon, customDayjs, getLocalizedDayjs } from '@mtes-mct/monitor-ui' -import { useEffect, useMemo, useRef } from 'react' -import styled from 'styled-components' - -import { getFormattedReportingId } from '../../../../domain/entities/reporting' -import { useAppSelector } from '../../../../hooks/useAppSelector' - -export function ReportingCard({ feature, updateMargins }: { feature: any; updateMargins: (margin: number) => void }) { - const attachReportingListener = useAppSelector(state => state.attachReportingToMission.attachReportingListener) - - const ref = useRef(null) - - const { createdAt, description, displayedSource, isArchived, reportingId, subThemes, theme, validityTime } = - feature.getProperties() - - const creationDate = getLocalizedDayjs(createdAt).format('DD MMM YYYY à HH:mm') - const endOfValidity = getLocalizedDayjs(createdAt).add(validityTime || 0, 'hour') - const timeLeft = customDayjs(endOfValidity).diff(getLocalizedDayjs(customDayjs().toISOString()), 'hour', true) - - const subThemesFormatted = subThemes?.map(subTheme => subTheme).join(', ') - - const timeLeftText = useMemo(() => { - if (timeLeft < 0 || isArchived) { - return 'Archivé' - } - - if (timeLeft > 0 && timeLeft < 1) { - return 'Fin dans < 1h' - } - - return `Fin dans ${Math.round(timeLeft)} h` - }, [timeLeft, isArchived]) - - useEffect(() => { - if (feature && ref.current) { - const cardHeight = ref.current.offsetHeight - updateMargins(cardHeight === 0 ? 200 : cardHeight) - } - }, [feature, updateMargins]) - - if (!attachReportingListener) { - return null - } - - return ( - - - - {`SIGNALEMENT ${getFormattedReportingId(reportingId)}`} - {displayedSource} - {creationDate} (UTC) - - - - {timeLeft > 0 && !isArchived && ( - <> - - {timeLeftText} - - )} - - - -
- - {theme && {theme}} - {subThemes?.length > 0 &&  / {subThemesFormatted}} - - {description && {description}} -
- - ) -} - -const Wrapper = styled.div` - padding: 10px; - box-shadow: 0px 3px 6px #70778540; - border-radius: 1px; - background-color: ${p => p.theme.color.white}; - display: flex; - flex-direction: column; - gap: 16px; - flex: 0 0 345px; -` -const StyledHeader = styled.div` - display: flex; - flex-direction: row; - align-items: start; - justify-content: space-between; -` - -const StyledHeaderFirstLine = styled.div` - display: flex; - flex-direction: column; - align-items: start; - > span { - max-width: 190px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -` - -const StyledHeaderSecondLine = styled.div` - display: flex; - flex-direction: row; - > span { - margin-left: 4px; - color: ${p => p.theme.color.charcoal}; - } -` - -const StyledBoldText = styled.span` - font-weight: 700; - color: ${p => p.theme.color.gunMetal}; -` -const StyledMediumText = styled.span` - font-weight: 500; - color: ${p => p.theme.color.gunMetal}; -` -const StyledGrayText = styled.span` - color: ${p => p.theme.color.slateGray}; - display: flex; - align-items: baseline; -` - -const StyledDescription = styled.p` - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - color: ${p => p.theme.color.gunMetal}; - padding-right: 32px; -` - -const StyledThemeContainer = styled.div` - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - padding-right: 32px; -` diff --git a/frontend/src/features/missions/Overlays/reportingToAttach/index.tsx b/frontend/src/features/missions/Overlays/reportingToAttach/index.tsx index 1d33e52ea..90d6f2e6a 100644 --- a/frontend/src/features/missions/Overlays/reportingToAttach/index.tsx +++ b/frontend/src/features/missions/Overlays/reportingToAttach/index.tsx @@ -1,9 +1,9 @@ import { useState } from 'react' -import { ReportingCard } from './ReportingCard' import { Layers } from '../../../../domain/entities/layers/constants' import { useAppSelector } from '../../../../hooks/useAppSelector' import { OverlayPositionOnCentroid } from '../../../map/overlays/OverlayPositionOnCentroid' +import { ReportingCard } from '../../../map/overlays/reportings/ReportingCard' import type { BaseMapChildrenProps } from '../../../map/BaseMap' @@ -38,7 +38,7 @@ export function ReportingToAttachOverlays({ currentFeatureOver, map }: BaseMapCh map={map} options={{ margins: hoveredMargins }} > - + ) }