diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx index b95192225..d9359125c 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx @@ -53,7 +53,7 @@ export const AsideWrapper = styled.div<{ @media (min-width: ${({ theme }) => theme.breakpoints.md}) { display: flex; flex-direction: row-reverse; - min-width: 200px; + min-width: calc(340px + 2rem); width: calc(400px + 2rem); max-width: calc(25% + 2rem); overflow: hidden; @@ -97,7 +97,7 @@ export const AsideTogglerButtonWrapper = styled.div` align-items: center; height: 2.5rem; max-height: 2.5rem; - pointer-events: auto; + pointer-events: none; &::after { content: ''; @@ -153,6 +153,7 @@ export const AsideWrapperTogglerButton = styled.button.attrs<{ $isOpen: boolean background-repeat: repeat-x; transform: rotateX(0deg) rotateY(0deg); transition: background 0.5s ease, transform 0.5s ease; + pointer-events: auto; &.md { display: none; @@ -195,3 +196,16 @@ export const AsideWrapperTogglerButton = styled.button.attrs<{ $isOpen: boolean } } ` + +export const AsideFooter = styled.footer` + position: sticky; + z-index: 1; + bottom: 0; + left: 0; + right: 0; + padding: 1rem; + border-radius: 0.5rem 0.5rem 0 0; + box-shadow: 0 0 .5rem -0.125rem rgba(0, 0, 0, 0.7); + background: var(--background-default-grey); + pointer-events: auto; +` diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx index 5367f5015..c855d4476 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx @@ -2,16 +2,18 @@ import { AsideWrapper, AsideTogglerButtonWrapper, AsideWrapperTogglerButton, + AsideFooter, } from './Aside.styles' interface AsideProps { children: React.ReactNode + footer?: React.ReactNode onClickToggler?: (args: { isOpen: boolean, togglerButtonType: 'horizontal' | 'vertical' }) => void isOpen?: boolean isInfo?: boolean } -function Aside({ children, onClickToggler, isOpen = true, isInfo }: AsideProps) { +function Aside({ children, footer, onClickToggler, isOpen = true, isInfo }: AsideProps) { const withTogglerButton = Boolean(onClickToggler) return ( @@ -25,7 +27,7 @@ function Aside({ children, onClickToggler, isOpen = true, isInfo }: AsideProps) { onClickToggler?.({ isOpen, @@ -50,6 +52,12 @@ function Aside({ children, onClickToggler, isOpen = true, isInfo }: AsideProps)
{children} + + {footer && ( + + {footer} + + )}
) diff --git a/src/app/carte-base-adresse-nationale/components/address/AddressCard.styles.tsx b/src/app/carte-base-adresse-nationale/components/address/AddressCard.styles.tsx index 1bf070909..9af1b39a6 100644 --- a/src/app/carte-base-adresse-nationale/components/address/AddressCard.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/address/AddressCard.styles.tsx @@ -74,7 +74,7 @@ export const AddressDetailsWrapper = styled.ul` margin: 2rem 0; ` -export const AddressDetailsItem = styled.li` +const AddressDetailsItemStyle = styled.li` display: flex; flex-direction: row; margin-bottom: 0.2em; @@ -93,6 +93,18 @@ export const AddressDetailsItem = styled.li` } ` +interface AddressDetailsItemProps extends React.HTMLAttributes { + children: React.ReactNode +} + +export const AddressDetailsItem = ({ children, ...props }: AddressDetailsItemProps) => ( + +
+ {children} +
+ +) + export const AddressDetailsItemValue = styled.pre` font-size: small; font-weight: 700; diff --git a/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx b/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx index 3250301ee..744c813fc 100644 --- a/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx +++ b/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx @@ -1,5 +1,3 @@ -import Link from 'next/link' - import { AddressDetailsItemValue, @@ -17,16 +15,18 @@ import { AddressDetailsWrapper, AddressDetailsItem, } from './AddressCard.styles' -import { isNumeroCertifiable } from '@/lib/ban' -import DownloadCertificate from './download-certificate' import type { TypeAddressExtended } from '../../types/LegacyBan.types' interface AddressCardProps { address: TypeAddressExtended - withCertificate: boolean } -function AddressCard({ address, withCertificate }: AddressCardProps) { +interface Position { + position: TypeAddressExtended['position'] + positionType: TypeAddressExtended['positionType'] +} + +function AddressCard({ address }: AddressCardProps) { const district = address.commune const microToponym = address.voie const dateMaj = new Date(address.dateMAJ).toLocaleDateString('fr-FR', { @@ -34,6 +34,29 @@ function AddressCard({ address, withCertificate }: AddressCardProps) { month: 'long', day: 'numeric', }) + + const isMultiPosition = Number(address.positions?.length) > 1 + const { + mainPosition, + secondariesPositions, + }: { + mainPosition: Position + secondariesPositions: Position[] + } = isMultiPosition + ? address.positions.reduce((acc, entry) => { + if (entry.position.coordinates.join('--') === address.position.coordinates.join('--')) { + acc.mainPosition = entry + } + else { + acc.secondariesPositions.push(entry) + } + return acc + }, { mainPosition: (null as unknown as Position), secondariesPositions: ([] as Position[]) }) + : { mainPosition: { + position: address.position, + positionType: address.positionType, + }, secondariesPositions: [] } + return ( <> @@ -92,41 +115,25 @@ function AddressCard({ address, withCertificate }: AddressCardProps) { Libellé d’acheminement :
{address.libelleAcheminement} - - Position :
- {address.positionType} - - - Coordonnées :
- {address.position.coordinates[0]}, {address.position.coordinates[1]} + + {isMultiPosition ? 'Position Principale' : 'Position'} :
+ Type / {mainPosition.positionType}
+ Coordonnées / {mainPosition.position.coordinates[0]}, {mainPosition.position.coordinates[1]} + {isMultiPosition && ( + + Position Secondaire :
+
    + {secondariesPositions.map((entry, index) => ( +
  1. + Type / {entry.positionType}
    + Coordonnées / {entry.position.coordinates[0]}, {entry.position.coordinates[1]} +
    2. + ))} +
+ + )} - - {/* Ajout du composant DownloadCertificate sous les coordonnées */} - - { withCertificate && ( - isNumeroCertifiable({ - banId: address.banId ?? '', - sources: Array.isArray(address.sourcePosition) ? address.sourcePosition : [address.sourcePosition], - certifie: address.certifie, - parcelles: address.parcelles, - }) - ? ( -
- -
- ) - : ( -
-
- Certificat d'adressage indisponible pour cette adresse, veuillez contacter votre mairie. -
- ) - )} - ) } diff --git a/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.styles.tsx b/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.styles.tsx new file mode 100644 index 000000000..9755929e6 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.styles.tsx @@ -0,0 +1,21 @@ +'use client' + +import styled from 'styled-components' + +export const AsideFooterWrapper = styled.div`` + +export const ActionWrapper = styled.ul` + display: flex; + flex-direction: column; + gap: 0.25rem; + margin: 0; + padding: 0; + list-style: none; +` + +export const ActionList = styled.ul` + display: block; + padding: 0; + margin: 0; + list-style: none; +` diff --git a/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.tsx b/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.tsx new file mode 100644 index 000000000..e6ee2209f --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.tsx @@ -0,0 +1,88 @@ +import { useMemo } from 'react' + +import { isNumeroCertifiable } from '@/lib/ban' +import { useFocusOnMap } from '../ban-map/BanMap.context' + +import Button from '@codegouvfr/react-dsfr/Button' + +import DownloadCertificate from './download-certificate' + +import { + AsideFooterWrapper, + ActionWrapper, + ActionList, +} from './AsideFooterAddress.styles' + +import type { TypeAddressExtended } from '../../types/LegacyBan.types' + +interface AsideFooterAddressProps { + banItem: TypeAddressExtended + withCertificate: boolean + children?: React.ReactNode +} + +function AsideFooterAddress({ banItem: address, withCertificate, children }: AsideFooterAddressProps) { + const focusOnMap = useFocusOnMap(address) + + const isCertifiable = useMemo(() => isNumeroCertifiable({ + banId: address.banId ?? '', + sources: Array.isArray(address.sourcePosition) ? address.sourcePosition : [address.sourcePosition], + certifie: address.certifie, + parcelles: address.parcelles, + }), [address]) + + const handleClick = (evt: React.MouseEvent) => { + evt.preventDefault() + focusOnMap() + } + + return ( + + {children} + {!withCertificate && ( +
+ Les certifications d’adresses sur la commune de {address.commune.nom} sont + réalisées directement par la mairie. + Contactez-la pour obtenir un certificat d’adressage ou toute autre information. +
+ )} + {withCertificate && !isCertifiable && ( +
+ Cette adresse ne remplit pas les critères minimums pour obtenir une certification. + Veuillez contacter votre mairie pour obtenir un certificat d’adressage ou toute autre information. +
+ )} + + + + + + + { withCertificate && ( + isCertifiable + ? ( + + + + ) + : ( + +
+ Certificat d'adressage indisponible pour cette adresse, veuillez contacter votre mairie. + + ) + )} + + + ) +} + +export default AsideFooterAddress diff --git a/src/app/carte-base-adresse-nationale/components/address/download-certificate.tsx b/src/app/carte-base-adresse-nationale/components/address/download-certificate.tsx index 642130912..c693a6676 100644 --- a/src/app/carte-base-adresse-nationale/components/address/download-certificate.tsx +++ b/src/app/carte-base-adresse-nationale/components/address/download-certificate.tsx @@ -1,17 +1,22 @@ -/* eslint-disable @stylistic/multiline-ternary */ -import { Download } from '@codegouvfr/react-dsfr/Download' -import React, { useState } from 'react' +import React, { useState, useCallback } from 'react' +import Button from '@codegouvfr/react-dsfr/Button' interface DownloadCertificateProps { id: string title?: string } +interface HandleButtonDownloadEvent extends React.MouseEvent {} + const DownloadCertificate: React.FC = ({ id, title }) => { const [hasDownloaded, setHasDownloaded] = useState(false) const [certificateId, setCertificateId] = useState(null) - const handleDownload = async () => { + interface CertificateResponse { + id: string + } + const handleDownload = useCallback(async (evt: HandleButtonDownloadEvent) => { + evt?.preventDefault() try { let downloadUrl = '' @@ -22,7 +27,7 @@ const DownloadCertificate: React.FC = ({ id, title }) const response = await fetch(`/api/certificat/${id}`) if (!response.ok) throw new Error('Erreur lors de la récupération du certificat') - const result = await response.json() + const result: CertificateResponse = await response.json() setCertificateId(result.id) setHasDownloaded(true) @@ -30,8 +35,8 @@ const DownloadCertificate: React.FC = ({ id, title }) } const link = document.createElement('a') - link.href = downloadUrl - link.download = `certificat_${id}.pdf` + link.setAttribute('href', downloadUrl) + link.setAttribute('download', `certificat_${id}.pdf`) document.body.appendChild(link) link.click() document.body.removeChild(link) @@ -39,37 +44,16 @@ const DownloadCertificate: React.FC = ({ id, title }) catch (error) { console.error('Erreur lors du téléchargement du certificat :', error) } - } + }, [certificateId, id]) return ( -
- {!hasDownloaded ? ( - - ) : ( -
- Vous avez déjà téléchargé ce certificat. - -
- )} -
+ ) } diff --git a/src/app/carte-base-adresse-nationale/components/address/index.ts b/src/app/carte-base-adresse-nationale/components/address/index.ts index 27c6408cd..8d9ce7891 100644 --- a/src/app/carte-base-adresse-nationale/components/address/index.ts +++ b/src/app/carte-base-adresse-nationale/components/address/index.ts @@ -1 +1,2 @@ -export { default as AddressCard } from './AddressCard' +export { default, default as AddressCard } from './AddressCard' +export { default as AsideFooterAddress } from './AsideFooterAddress' diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.context.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.context.tsx index eaa1dcc13..3aee85d4b 100644 --- a/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.context.tsx +++ b/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.context.tsx @@ -1,10 +1,16 @@ -import { createContext, useContext, useReducer } from 'react' -import type { ReactNode } from 'react' +import { createContext, useCallback, useContext, useEffect, useReducer, useState } from 'react' +import { useMap } from 'react-map-gl/maplibre' + +import type { LngLatBoundsLike } from 'react-map-gl/maplibre' import type { BanMapConfig, BanMapAction } from './types' interface BanMapProviderProps { - children: ReactNode + children: React.ReactNode +} + +interface MapItem { + displayBBox: number[] } const initBanMapConfig = { @@ -59,3 +65,27 @@ export function BanMapProvider({ children }: BanMapProviderProps) { export function useBanMapConfig() { return useContext(BanMapContext) as [{ mapStyle: string, displayLandRegister: boolean }, (action: any) => void] } + +export function useFocusOnMap(item: MapItem) { + const map = useMap() + + if (!map) { + throw new Error('useFocusOnMap must be used inside a MapProvider') + } + + const [bound, setBound] = useState() + + useEffect(() => { + setBound(item?.displayBBox?.length === 4 ? (item.displayBBox as LngLatBoundsLike) : undefined) + }, [map, item]) + + const focusOnMap = useCallback(() => { + if (bound) { + map.current?.fitBounds(bound, { + padding: 30, + }) + } + }, [bound, map]) + + return focusOnMap +} diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx index 502f80a1e..b877e905e 100644 --- a/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx +++ b/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx @@ -1,20 +1,18 @@ -import { useCallback, useEffect, useState, useRef } from 'react' +import { useEffect, useState, useRef } from 'react' import { useMap, Popup } from 'react-map-gl/maplibre' -import CenterControl from './CenterControl' import LayerBan from './LayerBan' import LayerCadastre from './LayerCadastre' import Popups from './Popups' import { ControlGroup } from './BanMap.styles' -import type { MapMouseEvent, MapGeoJSONFeature, LngLatBoundsLike } from 'react-map-gl/maplibre' +import type { MapMouseEvent, MapGeoJSONFeature } from 'react-map-gl/maplibre' import type { PopupFeature } from './Popups' -import type { Address, BBox, PopupInfo } from './types' +import type { Address, PopupInfo } from './types' interface BanMapProps { address: Address - bbox?: BBox onSelect: (properties: any) => void isCadastreLayersShown?: boolean } @@ -30,20 +28,11 @@ interface HighLightAdressesByProperties { const SOURCES = ['adresses', 'toponymes'] -function BanMap({ address, bbox, onSelect, isCadastreLayersShown }: BanMapProps) { +function BanMap({ address, onSelect, isCadastreLayersShown }: BanMapProps) { const hoveredFeature = useRef(null) const map = useMap() - const [bound, setBound] = useState() const [infoPopup, setInfoPopup] = useState(null) - const centerAddress = useCallback(() => { - if (bound) { - map.current?.fitBounds(bound, { - padding: 30, - }) - } - }, [bound, map]) - useEffect(() => { const currentMap = map.current const itemLayers = ['adresse', 'adresse-label', 'voie', 'toponyme'] @@ -150,23 +139,8 @@ function BanMap({ address, bbox, onSelect, isCadastreLayersShown }: BanMapProps) } }, [map, onSelect]) - useEffect(() => { - if (bbox) { - setBound(bbox.flat() as LngLatBoundsLike) - } - else { - setBound(address?.displayBBox?.length === 4 ? (address.displayBBox as LngLatBoundsLike) : undefined) - } - }, [map, bbox, address]) - return ( <> - - - - { infoPopup?.features && ( diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/CenterControl.styles.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/CenterControl.styles.tsx deleted file mode 100644 index 0a4beedbc..000000000 --- a/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/CenterControl.styles.tsx +++ /dev/null @@ -1,11 +0,0 @@ -'use client' - -import styled from 'styled-components' - -export const CrossIconWrapper = styled.div` - width: 29px; - height: 29px; - display: flex; - justify-content: center; - align-items: center; -` diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/CenterControl.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/CenterControl.tsx deleted file mode 100644 index 36bb6a4db..000000000 --- a/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/CenterControl.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { CrossIconWrapper } from './CenterControl.styles' - -interface CenterControlProps { - isDisabled?: boolean - handleClick: () => void -} - -function CenterControl({ isDisabled = false, handleClick }: CenterControlProps) { - return ( - - ) -} - -export default CenterControl diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/index.ts b/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/index.ts deleted file mode 100644 index 1c2358b33..000000000 --- a/src/app/carte-base-adresse-nationale/components/ban-map/CenterControl/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CenterControl' diff --git a/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.styles.tsx b/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.styles.tsx new file mode 100644 index 000000000..9755929e6 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.styles.tsx @@ -0,0 +1,21 @@ +'use client' + +import styled from 'styled-components' + +export const AsideFooterWrapper = styled.div`` + +export const ActionWrapper = styled.ul` + display: flex; + flex-direction: column; + gap: 0.25rem; + margin: 0; + padding: 0; + list-style: none; +` + +export const ActionList = styled.ul` + display: block; + padding: 0; + margin: 0; + list-style: none; +` diff --git a/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.tsx b/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.tsx new file mode 100644 index 000000000..851d4edfe --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.tsx @@ -0,0 +1,46 @@ +import { useFocusOnMap } from '../ban-map/BanMap.context' + +import Button from '@codegouvfr/react-dsfr/Button' + +import { + AsideFooterWrapper, + ActionWrapper, + ActionList, +} from './AsideFooterDistrict.styles' + +import type { TypeDistrictExtended } from '../../types/LegacyBan.types' + +interface AsideFooterAddressProps { + banItem: TypeDistrictExtended + withCertificate: boolean + children?: React.ReactNode +} + +function AsideFooterDistrict({ banItem: microToponym, children }: AsideFooterAddressProps) { + const focusOnMap = useFocusOnMap(microToponym) + + const handleClick = (evt: React.MouseEvent) => { + evt.preventDefault() + focusOnMap() + } + + return ( + + {children} + + + + + + + + ) +} + +export default AsideFooterDistrict diff --git a/src/app/carte-base-adresse-nationale/components/district/DistrictCard.styles.tsx b/src/app/carte-base-adresse-nationale/components/district/DistrictCard.styles.tsx index 7b8d12522..837f9711e 100644 --- a/src/app/carte-base-adresse-nationale/components/district/DistrictCard.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/district/DistrictCard.styles.tsx @@ -26,18 +26,18 @@ export const DistrictLabelPrefix = styled.span` line-height: 1; ` -export const DistrictLabel = styled.span.attrs({ className: 'fr-link' })` +export const DistrictLabel = styled.span` display: block; margin-bottom: 0.5rem; - font-size: 1.5rem; + font-size: 2rem; font-weight: 700; - line-height: 1.25; + line-height: 1; ` export const DistrictLabelCode = styled.span` display: block; margin-bottom: 0.5rem; - font-size: 0.8em; + font-size: 0.9rem; font-weight: 700; ` diff --git a/src/app/carte-base-adresse-nationale/components/district/DistrictCard.tsx b/src/app/carte-base-adresse-nationale/components/district/DistrictCard.tsx index e9dbefbb2..a6f10e3ab 100644 --- a/src/app/carte-base-adresse-nationale/components/district/DistrictCard.tsx +++ b/src/app/carte-base-adresse-nationale/components/district/DistrictCard.tsx @@ -33,7 +33,7 @@ function DistrictCard({ district, logo }: DistrictCardProps) { Commune de - {district.nomCommune} + {district.nomCommune} COG {district.codeCommune} diff --git a/src/app/carte-base-adresse-nationale/components/district/index.ts b/src/app/carte-base-adresse-nationale/components/district/index.ts index 746dad813..45fa4f9e3 100644 --- a/src/app/carte-base-adresse-nationale/components/district/index.ts +++ b/src/app/carte-base-adresse-nationale/components/district/index.ts @@ -1,2 +1,3 @@ export { default as DistrictCard } from './DistrictCard' export { default as DistrictMicroToponymList } from './DistrictMicroToponymList' +export { default as AsideFooterDistrict } from './AsideFooterDistrict' diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.styles.tsx b/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.styles.tsx new file mode 100644 index 000000000..9755929e6 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.styles.tsx @@ -0,0 +1,21 @@ +'use client' + +import styled from 'styled-components' + +export const AsideFooterWrapper = styled.div`` + +export const ActionWrapper = styled.ul` + display: flex; + flex-direction: column; + gap: 0.25rem; + margin: 0; + padding: 0; + list-style: none; +` + +export const ActionList = styled.ul` + display: block; + padding: 0; + margin: 0; + list-style: none; +` diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.tsx b/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.tsx new file mode 100644 index 000000000..ed0294281 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.tsx @@ -0,0 +1,46 @@ +import { useFocusOnMap } from '../ban-map/BanMap.context' + +import Button from '@codegouvfr/react-dsfr/Button' + +import { + AsideFooterWrapper, + ActionWrapper, + ActionList, +} from './AsideFooterMicroToponym.styles' + +import type { TypeMicroToponymExtended } from '../../types/LegacyBan.types' + +interface AsideFooterAddressProps { + banItem: TypeMicroToponymExtended + withCertificate: boolean + children?: React.ReactNode +} + +function AsideFooterMicroToponym({ banItem: microToponym, children }: AsideFooterAddressProps) { + const focusOnMap = useFocusOnMap(microToponym) + + const handleClick = (evt: React.MouseEvent) => { + evt.preventDefault() + focusOnMap() + } + + return ( + + {children} + + + + + + + + ) +} + +export default AsideFooterMicroToponym diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/index.ts b/src/app/carte-base-adresse-nationale/components/micro-toponym/index.ts new file mode 100644 index 000000000..12184e418 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/micro-toponym/index.ts @@ -0,0 +1,3 @@ +export { default as MicroToponymCard } from './MicroToponymCard' +export { default as MicroToponymAddressList } from './MicroToponymAddressList' +export { default as AsideFooterMicroToponym } from './AsideFooterMicroToponym' diff --git a/src/app/carte-base-adresse-nationale/layout.styles.tsx b/src/app/carte-base-adresse-nationale/layout.styles.tsx index 85425714e..954d07ee4 100644 --- a/src/app/carte-base-adresse-nationale/layout.styles.tsx +++ b/src/app/carte-base-adresse-nationale/layout.styles.tsx @@ -57,7 +57,7 @@ export const CartoMenu = styled.div` pointer-events: none; @media (min-width: ${({ theme }) => theme.breakpoints.md}) { - min-width: 200px; + min-width: 340px; width: 400px; max-width: 25%; } @@ -96,11 +96,15 @@ export const MapParamsWrapper = styled.div.attrs({ })` display: flex; flex-direction: row; - justify-content: space-between; + justify-content: center; gap: .5em; padding: 1rem 0; position: relative; z-index: 1; + + @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + justify-content: space-between; + } ` export const RingButtonStyled = styled.button.attrs({ diff --git a/src/app/carte-base-adresse-nationale/layout.tsx b/src/app/carte-base-adresse-nationale/layout.tsx index 3f33b7ff3..846b5d194 100644 --- a/src/app/carte-base-adresse-nationale/layout.tsx +++ b/src/app/carte-base-adresse-nationale/layout.tsx @@ -55,7 +55,7 @@ function Carto({ children }: { children: JSX.Element }) { - + handleMapStyleChange('ign-vector')} $isActive={banMapConfig.mapStyle === 'ign-vector'} $isTypeRadio /> handleMapStyleChange('osm-vector')} $isActive={banMapConfig.mapStyle === 'osm-vector'} $isTypeRadio /> diff --git a/src/app/carte-base-adresse-nationale/page.styles.tsx b/src/app/carte-base-adresse-nationale/page.styles.tsx index 0ebfa3c91..7a4fc8b01 100644 --- a/src/app/carte-base-adresse-nationale/page.styles.tsx +++ b/src/app/carte-base-adresse-nationale/page.styles.tsx @@ -15,43 +15,3 @@ export const MapSearchResultsWrapper = styled.div` margin-top: 0; } ` - -export const ActionWrapper = styled.div` - display: block; -` - -export const ActionList = styled.ul` - display: block; - padding: 0; - margin: 0; - list-style: none; -` - -export const ItemAction = styled.li` - display: inline-flex; - align-items: center; - margin-bottom: 0.5rem; -` - -export const ActionLabel = styled.span` - display: flex; - margin-left: 0.5rem; - max-width: 0; - overflow: hidden; -` - -export const IconButton = styled.button.attrs({ - className: 'Mui-Not-DSFR', -})` - border: 0.15rem solid currentColor; - padding: 0.5rem; - border-radius: 2rem; - background-color: red; - box-shadow: 0rem 0.3rem 0.7rem -0.25rem rgba(0, 0, 0, .5); - margin: 0 0.5rem 0 0; - color: #fff; - - &:hover { - background-color: blue; - } -` diff --git a/src/app/carte-base-adresse-nationale/page.tsx b/src/app/carte-base-adresse-nationale/page.tsx index 3f09ac109..fe3773c48 100644 --- a/src/app/carte-base-adresse-nationale/page.tsx +++ b/src/app/carte-base-adresse-nationale/page.tsx @@ -11,11 +11,14 @@ import { getBanItem, getDistrict } from '@/lib/api-ban' import Aside from './components/Aside' import MapBreadcrumb from './components/MapBreadcrumb' import MapDataLoader from './components/MapDataLoader' -import MicroToponymAddressList from './components/micro-toponym/MicroToponymAddressList' -import MicroToponymCard from './components/micro-toponym/MicroToponymCard' -import { AddressCard } from './components/address' -import { DistrictCard, DistrictMicroToponymList } from './components/district' -import { MapSearchResultsWrapper } from './page.styles' +import { AddressCard, AsideFooterAddress } from './components/address' +import { MicroToponymCard, MicroToponymAddressList, AsideFooterMicroToponym } from './components/micro-toponym' +import { DistrictCard, DistrictMicroToponymList, AsideFooterDistrict } from './components/district' +import { + MapSearchResultsWrapper, + +} from './page.styles' + import BanMap from './components/ban-map' import type { @@ -108,7 +111,6 @@ function CartoView() { const typeView = getBanItemTypes(mapSearchResults) useEffect(() => { - console.log('isMapReady', isMapReady) isMapReady ? setIsLoadMapTiles(false) : setIsLoadMapTiles(true) }, [isMapReady]) @@ -121,7 +123,6 @@ function CartoView() { setMapSearchResults(banItem) const districtFlagUrl = await getCommuneFlag(banItemId) - console.log('districtFlagUrl', districtFlagUrl) setDistrictLogo(districtFlagUrl || DEFAULT_URL_DISTRICT_FLAG) setIsLoadMapSearchResults(false) @@ -221,6 +222,26 @@ function CartoView() {