diff --git a/frontend/cypress/e2e/main_window/station_overlay.spec.ts b/frontend/cypress/e2e/main_window/station_overlay.spec.ts index e8058e31d7..e534eda169 100644 --- a/frontend/cypress/e2e/main_window/station_overlay.spec.ts +++ b/frontend/cypress/e2e/main_window/station_overlay.spec.ts @@ -7,14 +7,12 @@ context('Main Window > Station Overlay', () => { cy.clickButton('Afficher les bases').wait(1000) }) - it('Should show the expected station card and select the expected station filter when clicked', () => { + it('Should show the expected station card when selected', () => { // Click on Marseille base cy.get('.ol-viewport').click(750, 720, { force: true }) cy.getDataCy('StationOverlay-card').contains('Marseille').should('be.visible') cy.getDataCy('StationOverlay-card').contains('Cultures marines – DDTM 40').should('be.visible') cy.getDataCy('StationOverlay-card').find('.Element-Tag').should('have.text', '2 Barges') - // Expected base filter in control unit list dialog - cy.get('.rs-picker-toggle-value').should('have.text', 'Marseille') }) }) diff --git a/frontend/public/icons/station-layer-icon.svg b/frontend/public/icons/station-layer-icon.svg index 834175f79a..7450701384 100644 --- a/frontend/public/icons/station-layer-icon.svg +++ b/frontend/public/icons/station-layer-icon.svg @@ -1 +1 @@ - + diff --git a/frontend/src/components/OverlayCard.tsx b/frontend/src/components/OverlayCard.tsx index b9bab74bac..3ee0ab238d 100644 --- a/frontend/src/components/OverlayCard.tsx +++ b/frontend/src/components/OverlayCard.tsx @@ -13,7 +13,7 @@ export function OverlayCard({ children, isCloseButtonHidden = false, onClose, ti return ( - {title} + {title} Unités de contrôle diff --git a/frontend/src/features/Station/components/StationLayer/index.ts b/frontend/src/features/Station/components/StationLayer/index.ts index 83c0ecc58a..5b67effc6a 100644 --- a/frontend/src/features/Station/components/StationLayer/index.ts +++ b/frontend/src/features/Station/components/StationLayer/index.ts @@ -9,7 +9,6 @@ import { removeOverlayCoordinatesByName } from '../../../../domain/shared_slices import { useAppDispatch } from '../../../../hooks/useAppDispatch' import { useAppSelector } from '../../../../hooks/useAppSelector' import { FrontendError } from '../../../../libs/FrontendError' -import { controlUnitListDialogActions } from '../../../ControlUnit/components/ControlUnitListDialog/slice' import { stationActions } from '../../slice' import type { VectorLayerWithName } from '../../../../domain/types/layer' @@ -32,12 +31,16 @@ export function StationLayer({ map, mapClickEvent }: BaseMapChildrenProps) { const dispatch = useAppDispatch() const displayStationLayer = useAppSelector(state => state.global.displayStationLayer) const overlayCoordinates = useAppSelector(state => state.global.overlayCoordinates) - const station = useAppSelector(state => state.station) + const highlightedFeatureIds = useAppSelector(state => state.station.highlightedFeatureIds) + const selectedFeatureId = useAppSelector(state => state.station.selectedFeatureId) const listener = useAppSelector(state => state.draw.listener) const { data: stations } = useGetStationsQuery() - const stationsAsFeatures = useMemo(() => (stations || []).map(getStationPointFeature), [stations]) + const stationsAsFeatures = useMemo( + () => (stations || []).filter(station => station.controlUnitResourceIds.length > 0).map(getStationPointFeature), + [stations] + ) // --------------------------------------------------------------------------- // Features Events @@ -53,16 +56,8 @@ export function StationLayer({ map, mapClickEvent }: BaseMapChildrenProps) { return } - const featureProps = feature.getProperties() - dispatch(stationActions.selectFeatureId(featureId)) dispatch(stationActions.hightlightFeatureIds([featureId])) - dispatch( - controlUnitListDialogActions.setFilter({ - key: 'stationId', - value: featureProps.station.id - }) - ) dispatch(removeOverlayCoordinatesByName(Layers.STATIONS.code)) }, [dispatch, mapClickEvent]) @@ -81,12 +76,12 @@ export function StationLayer({ map, mapClickEvent }: BaseMapChildrenProps) { } feature.setProperties({ - isHighlighted: station.highlightedFeatureIds.includes(featureId), - isSelected: featureId === station.selectedFeatureId, - overlayCoordinates: featureId === station.selectedFeatureId ? overlayCoordinates.stations : undefined + isHighlighted: highlightedFeatureIds.includes(featureId), + isSelected: featureId === selectedFeatureId, + overlayCoordinates: featureId === selectedFeatureId ? overlayCoordinates.stations : undefined }) }) - }, [station.highlightedFeatureIds, station.selectedFeatureId, overlayCoordinates]) + }, [highlightedFeatureIds, overlayCoordinates, selectedFeatureId]) // --------------------------------------------------------------------------- // Features Visibility diff --git a/frontend/src/features/Station/components/StationLayer/utils.ts b/frontend/src/features/Station/components/StationLayer/utils.ts index 9f73f30751..54bfb2df25 100644 --- a/frontend/src/features/Station/components/StationLayer/utils.ts +++ b/frontend/src/features/Station/components/StationLayer/utils.ts @@ -38,7 +38,7 @@ export const getFeatureStyle = ((feature: Feature) => { fill: new Fill({ color: THEME.color.white }), - font: '13px Marianne', + font: '12px Marianne', offsetX: featureProps.controlUnitsCount === 1 ? 16.5 : 16, offsetY: -35, text: featureProps.controlUnitsCount.toString() diff --git a/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx b/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx index 82f4d3aa58..54af38e458 100644 --- a/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx +++ b/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx @@ -25,8 +25,8 @@ export function Item({ controlUnit }: ItemProps) { return ( - {controlUnit.name} - {controlUnit.administration.name} + {controlUnit.name} + {controlUnit.administration.name} {displayControlUnitResourcesFromControlUnit(controlUnit)} ) @@ -35,7 +35,7 @@ export function Item({ controlUnit }: ItemProps) { const Wrapper = styled.div` background-color: ${p => p.theme.color.gainsboro}; cursor: pointer; - padding: 8px 12px; + padding: 8px 4px 0 12px; &:hover { background-color: ${p => p.theme.color.lightGray}; @@ -46,18 +46,27 @@ const NameText = styled.div` color: ${p => p.theme.color.gunMetal}; font-weight: bold; line-height: 18px; + margin-right: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; ` const AdministrationText = styled.div` color: ${p => p.theme.color.gunMetal}; line-height: 18px; - margin: 2px 0 8px; + margin: 2px 4px 8px 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; ` const ResourcesBar = styled.div` - line-height: 18px; + display: flex; + flex-wrap: wrap; - > .Element-Tag:not(:first-child) { - margin-left: 8px; + > .Element-Tag { + margin: 0 8px 8px 0; + white-space: nowrap; } ` diff --git a/frontend/src/features/Station/components/StationOverlay/StationCard/index.tsx b/frontend/src/features/Station/components/StationOverlay/StationCard/index.tsx index e796a65ec8..9a5c830bb5 100644 --- a/frontend/src/features/Station/components/StationOverlay/StationCard/index.tsx +++ b/frontend/src/features/Station/components/StationOverlay/StationCard/index.tsx @@ -80,7 +80,7 @@ export function StationCard({ feature, selected = false }: { feature: Feature; s } const StyledMapMenuDialogBody = styled(MapMenuDialog.Body)` - height: 480px; + height: 294px; > div:not(:first-child) { margin-top: 8px; diff --git a/frontend/src/features/Station/components/StationOverlay/constants.ts b/frontend/src/features/Station/components/StationOverlay/constants.ts index 6614630b46..795e0abbf1 100644 --- a/frontend/src/features/Station/components/StationOverlay/constants.ts +++ b/frontend/src/features/Station/components/StationOverlay/constants.ts @@ -3,6 +3,6 @@ export const OVERLAY_MARGINS = { xMiddle: -75, xRight: -260, yBottom: 0, - yMiddle: -280, - yTop: -580 + yMiddle: -215, + yTop: -404 } diff --git a/frontend/src/features/map/overlays/reportings/ReportingCard.tsx b/frontend/src/features/map/overlays/reportings/ReportingCard.tsx index c75891df8e..f26c4c7598 100644 --- a/frontend/src/features/map/overlays/reportings/ReportingCard.tsx +++ b/frontend/src/features/map/overlays/reportings/ReportingCard.tsx @@ -73,7 +73,7 @@ export function ReportingCard({ const closeReportingCard = useCallback(() => { dispatch(reportingActions.setSelectedReportingIdOnMap(undefined)) - dispatch(removeOverlayCoordinatesByName(Layers.REPORTING_SELECTED.code)) + dispatch(removeOverlayCoordinatesByName(Layers.REPORTINGS.code)) }, [dispatch]) useEffect(() => {