diff --git a/.env.default b/.env.default index f16264b20..85a91a5ce 100644 --- a/.env.default +++ b/.env.default @@ -13,7 +13,7 @@ NEXT_PUBLIC_CERTIFICAT_NUMEROTATION_ENABLED=0 ENABLE_HELMET=0 # Internal URL -NEXT_PUBLIC_URL_CARTOGRAPHY_BAN = '/carte-base-adresse-nationale' +NEXT_PUBLIC_URL_CARTOGRAPHY_BAN = /carte-base-adresse-nationale # ----------------------------------------------- # --- Parametres URL Externe autre projet BAN --- 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 d9359125c..3bcc24f7c 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 @@ -17,19 +17,26 @@ export const AsideWrapper = styled.div<{ z-index: 9; overflow-x: hidden; overflow-y: auto; + scroll-behavior: smooth; scroll-snap-type: y mandatory; + scroll-padding-top: 8rem; + font-size: 1rem; pointer-events: none; + @media (hover: hover) { + &:hover, + &:focus-within, + &:active { + pointer-events: auto; + } + } + &::before { ${({ $isTypeInfo }) => !$isTypeInfo && css`content: ''`}; display: block; - height: calc(100% - 2.5rem); + height: 100%; scroll-snap-align: start; transition: height 0.5s ease; - - ${({ $isVisible }) => css` - height: ${$isVisible ? 'calc(100% - 2.5rem)' : '100%'}; - `} } .body { @@ -38,15 +45,21 @@ export const AsideWrapper = styled.div<{ max-height: 100%; overflow-x: hidden; overflow-y: auto; - box-shadow: 0 0 .5rem -0.125rem rgba(0, 0, 0, 0.7); scroll-snap-align: start; - - ${({ $isTypeInfo }) => $isTypeInfo && css` - display: flex; - flex-flow: column nowrap; - justify-content: flex-end; - align-items: center; - padding-bottom: 4rem; ` + scroll-snap-stop: always; + + ${({ $isTypeInfo }) => $isTypeInfo + ? css` + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + align-items: center; + padding-bottom: 4rem; + ` + : css` + background: var(--background-default-grey); + box-shadow: 0 0 .5rem -0.125rem rgba(0, 0, 0, 0.7); + ` } } @@ -58,9 +71,10 @@ export const AsideWrapper = styled.div<{ max-width: calc(25% + 2rem); overflow: hidden; transition: transform 0.5s ease; + pointer-events: none; ${({ $withTogglerButton }) => $withTogglerButton - ? css` + ? css` width: calc(400px + 2rem); max-width: calc(25% + 2rem); ` @@ -81,22 +95,23 @@ export const AsideWrapper = styled.div<{ .body { justify-content: flex-start; height: 100%; + padding-bottom: 8rem; overflow-x: hidden; overflow-y: auto; scroll-snap-type: x mandatory; - ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 4rem;`}; + ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 8rem;`}; } } ` export const AsideTogglerButtonWrapper = styled.div` + height: 0; + display: flex; flex-direction: column; justify-content: center; align-items: center; - height: 2.5rem; - max-height: 2.5rem; pointer-events: none; &::after { @@ -197,6 +212,11 @@ export const AsideWrapperTogglerButton = styled.button.attrs<{ $isOpen: boolean } ` +export const AsideBody = styled.div` + background: var(--background-default-grey); + pointer-events: auto; +` + export const AsideFooter = styled.footer` position: sticky; z-index: 1; 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 c855d4476..7f8042e91 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx @@ -1,19 +1,45 @@ +import AsideHeader from './AsideHeader' + import { AsideWrapper, AsideTogglerButtonWrapper, AsideWrapperTogglerButton, + AsideBody, AsideFooter, } from './Aside.styles' -interface AsideProps { +import type { MapBreadcrumbPath } from '../MapBreadcrumb' + +interface AsideDefaultProps { children: React.ReactNode + header?: React.ReactNode footer?: React.ReactNode + path?: MapBreadcrumbPath + onClose?: () => void onClickToggler?: (args: { isOpen: boolean, togglerButtonType: 'horizontal' | 'vertical' }) => void isOpen?: boolean isInfo?: boolean } -function Aside({ children, footer, onClickToggler, isOpen = true, isInfo }: AsideProps) { +interface AsideProps extends AsideDefaultProps { + header: React.ReactNode + isInfo?: false +} +interface AsideInfoProps extends AsideDefaultProps { + header?: undefined | null + isInfo: true +} + +function Aside({ + children, + header, + footer, + path, + onClose, + onClickToggler, + isOpen = true, + isInfo, +}: AsideProps | AsideInfoProps) { const withTogglerButton = Boolean(onClickToggler) return ( @@ -25,18 +51,6 @@ function Aside({ children, footer, onClickToggler, isOpen = true, isInfo }: Asid > {withTogglerButton && ( - { - onClickToggler?.({ - isOpen, - togglerButtonType: 'vertical', - }) - }} - $isOpen={isOpen} - /> - { @@ -50,9 +64,22 @@ function Aside({ children, footer, onClickToggler, isOpen = true, isInfo }: Asid )} -
- {children} +
+
+ {header && ( + + {header} + + )} + {isInfo + ? children + : children && ( + + {children} + + )} +
{footer && ( {footer} diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.styles.tsx similarity index 82% rename from src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.styles.tsx rename to src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.styles.tsx index 9755929e6..5f09b4aa2 100644 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.styles.tsx @@ -2,7 +2,9 @@ import styled from 'styled-components' -export const AsideFooterWrapper = styled.div`` +export const AsideFooterWrapper = styled.div` + font-size: 1rem; +` export const ActionWrapper = styled.ul` display: flex; diff --git a/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.tsx new file mode 100644 index 000000000..f79bad597 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.tsx @@ -0,0 +1,47 @@ +import { useMemo } from 'react' + +import Button, { ButtonProps } from '@codegouvfr/react-dsfr/Button' + +import { + AsideFooterWrapper, + ActionWrapper, + ActionList, +} from './AsideFooter.styles' + +interface AsideFooterAddressProps { + children?: React.ReactNode + actions?: { + label: ButtonProps['children'] + onClick: ButtonProps['onClick'] + iconId: ButtonProps['iconId'] + priority?: ButtonProps['priority'] + }[] +} + +function AsideFooterDistrict({ children, actions }: AsideFooterAddressProps) { + const actionsButtons = useMemo(() => actions?.map(({ label, ...props }, index) => ( + + + + ) + ), [actions]) + + return ( + + {children} + {actions && actions.length > 0 && ( + + + {actionsButtons} + + + )} + + ) +} + +export default AsideFooterDistrict diff --git a/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx new file mode 100644 index 000000000..da301a99e --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx @@ -0,0 +1,73 @@ +'use client' + +import styled from 'styled-components' + +export const AsideHeader = styled.div` + position: absolute; + display: flex; + flex-direction: column-reverse; + overflow: hidden; + width: 100%; + padding: 0 1rem 1rem; + font-size: 1rem; + transform: translateY(-100%); + scroll-snap-align: start; + scroll-snap-stop: always; + + @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + position: static; + padding: 8rem 1rem 1rem; + background: var(--background-default-grey); + margin: 0; + transform: none; + } + + & * { + pointer-events: auto; + } + + &::after { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: linear-gradient(0deg, var(--background-default-grey) 0%, rgba(0, 0, 0, 0) 100%); + background-repeat: no-repeat; + background-size: 100% 100%; + background-position: 100% center; + pointer-events: auto; + transform: translateY(0); + transition: transform 0.5s ease; + + @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + content: none; + } + } +` + +export const AsideHeaderContent = styled.div` + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 1.25rem; + padding: 1rem; + margin-bottom: 1rem; + border-bottom: 4px solid var(--border-active-blue-france); + background-color: var(--background-default-grey); + + @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + padding: 1rem 0; + } +` + +export const AsideHeaderCloseButtonWrapper = styled.div` + position: absolute; + top: 0; + right: 0; + z-index: 1; + pointer-events: auto; +` diff --git a/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.tsx new file mode 100644 index 000000000..d7707fcec --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.tsx @@ -0,0 +1,40 @@ +import Button from '@codegouvfr/react-dsfr/Button' + +import MapBreadcrumb from '../MapBreadcrumb' +import type { MapBreadcrumbPath } from '../MapBreadcrumb' + +import { + AsideHeader as AsideHeaderStyle, + AsideHeaderContent, + AsideHeaderCloseButtonWrapper, +} from './AsideHeader.styles' + +interface AsideHeaderProps { + path?: MapBreadcrumbPath + children?: React.ReactNode + onClose?: () => void +} + +function AsideHeader({ path, children, onClose }: AsideHeaderProps) { + return ( + + {path && } + + {onClose && ( + +
+ + ) } -export default DistrictCard +export default PanelDistrict diff --git a/src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictFooter.styles.tsx similarity index 100% rename from src/app/carte-base-adresse-nationale/components/address/AsideFooterAddress.styles.tsx rename to src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictFooter.styles.tsx diff --git a/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictFooter.tsx similarity index 81% rename from src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.tsx rename to src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictFooter.tsx index 851d4edfe..f71a7be25 100644 --- a/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictFooter.tsx @@ -6,17 +6,17 @@ import { AsideFooterWrapper, ActionWrapper, ActionList, -} from './AsideFooterDistrict.styles' +} from './PanelDistrictFooter.styles' import type { TypeDistrictExtended } from '../../types/LegacyBan.types' -interface AsideFooterAddressProps { +interface PanelDistrictFooterProps { banItem: TypeDistrictExtended withCertificate: boolean children?: React.ReactNode } -function AsideFooterDistrict({ banItem: microToponym, children }: AsideFooterAddressProps) { +function PanelDistrictFooter({ banItem: microToponym, children }: PanelDistrictFooterProps) { const focusOnMap = useFocusOnMap(microToponym) const handleClick = (evt: React.MouseEvent) => { @@ -43,4 +43,4 @@ function AsideFooterDistrict({ banItem: microToponym, children }: AsideFooterAdd ) } -export default AsideFooterDistrict +export default PanelDistrictFooter diff --git a/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictHeader.styles.tsx new file mode 100644 index 000000000..db37b3670 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictHeader.styles.tsx @@ -0,0 +1,39 @@ +'use client' + +import styled from 'styled-components' + +import { mainInfo } from '../PanelStyles/PanelStyles' + +export const DistrictHeaderWrapper = styled.div` + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 1.25rem; + font-size: 1rem; +` + +export const DistrictLogoWrapper = styled.div`` + +export const DistrictLabelWrapper = styled.div`` + +export const DistrictLabelPrefix = styled.span` + display: block; + font-size: .8em; + font-weight: 300; + line-height: 1; + margin-bottom: 0.25rem; +` + +export const DistrictLabel = styled.span` + ${mainInfo} + display: block; + margin-bottom: 0.5rem; + line-height: 1; +` + +export const DistrictLabelCode = styled.span` + display: block; + margin-bottom: 0.5rem; + font-size: 0.9em; + font-weight: 700; +` diff --git a/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictHeader.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictHeader.tsx new file mode 100644 index 000000000..48ff30ee1 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictHeader.tsx @@ -0,0 +1,47 @@ +import Image from 'next/image' + +import DistrictLink from '../DistrictLink' + +import { + DistrictHeaderWrapper, + DistrictLabelWrapper, + DistrictLabelPrefix, + DistrictLabel, + DistrictLabelCode, + DistrictLogoWrapper, +} from './PanelDistrictHeader.styles' + +import type { TypeDistrictExtended } from '../../types/LegacyBan.types' + +interface PanelDistrictHeaderProps { + district: TypeDistrictExtended + logo?: string +} + +function PanelDistrictHeader({ district, logo }: PanelDistrictHeaderProps) { + const formatedDistrict = { + nom: district.nomCommune, + code: district.codeCommune, + } + + return ( + + + {logo && ( + + logo commune par défault + + )} + + Commune de + + {district.nomCommune} + + COG {district.codeCommune} + + + + ) +} + +export default PanelDistrictHeader diff --git a/src/app/carte-base-adresse-nationale/components/district/DistrictMicroToponymList.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.styles.tsx similarity index 100% rename from src/app/carte-base-adresse-nationale/components/district/DistrictMicroToponymList.styles.tsx rename to src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.styles.tsx diff --git a/src/app/carte-base-adresse-nationale/components/district/DistrictMicroToponymList.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx similarity index 91% rename from src/app/carte-base-adresse-nationale/components/district/DistrictMicroToponymList.tsx rename to src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx index c79e25397..aae40ee63 100644 --- a/src/app/carte-base-adresse-nationale/components/district/DistrictMicroToponymList.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx @@ -3,14 +3,14 @@ import Link from 'next/link' import { ToggleSwitch } from '@codegouvfr/react-dsfr/ToggleSwitch' import { Table } from '@codegouvfr/react-dsfr/Table' -import { DistrictMicroToponymListInfo } from './DistrictMicroToponymList.styles' +import { DistrictMicroToponymListInfo } from './PanelDistrictMicroToponymList.styles' import type { TypeDistrictExtended } from '../../types/LegacyBan.types' import { env } from 'next-runtime-env' const URL_CARTOGRAPHY_BAN = env('NEXT_PUBLIC_URL_CARTOGRAPHY_BAN') -interface DistrictMicroToponymListProps { +interface PanelDistrictMicroToponymListProps { district: TypeDistrictExtended } @@ -22,7 +22,7 @@ const sortMicroToponymes = ( const testMicroTopoWithAddress = ({ nbNumeros }: { nbNumeros: number }) => nbNumeros && nbNumeros > 0 const testMicroTopoWithoutAddress = ({ nbNumeros }: { nbNumeros: number }) => !nbNumeros || nbNumeros === 0 -function DistrictMicroToponymList({ district }: DistrictMicroToponymListProps) { +function PanelDistrictMicroToponymList({ district }: PanelDistrictMicroToponymListProps) { const [isMicroTopoWithAddressVisible, setIsMicroTopoWithAddressVisible] = useState(true) const [isMicroTopoWithoutAddressVisible, setIsMicroTopoWithoutAddressVisible] = useState(true) @@ -90,4 +90,4 @@ function DistrictMicroToponymList({ district }: DistrictMicroToponymListProps) { ) } -export default DistrictMicroToponymList +export default PanelDistrictMicroToponymList diff --git a/src/app/carte-base-adresse-nationale/components/PanelDistrict/index.ts b/src/app/carte-base-adresse-nationale/components/PanelDistrict/index.ts new file mode 100644 index 000000000..6eccf48eb --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/index.ts @@ -0,0 +1,4 @@ +export { default as PanelDistrictHeader } from './PanelDistrictHeader' +export { default, default as PanelDistrict } from './PanelDistrict' +export { default as PanelDistrictMicroToponymList } from './PanelDistrictMicroToponymList' +export { default as PanelDistrictFooter } from './PanelDistrictFooter' diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymCard.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponym.styles.tsx similarity index 96% rename from src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymCard.styles.tsx rename to src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponym.styles.tsx index ae58e9c94..0237b7a42 100644 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymCard.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponym.styles.tsx @@ -14,8 +14,7 @@ export const MicroToponymHeaderWrapper = styled.div` border-bottom: 4px solid var(--border-active-blue-france); ` -export const MicroToponymLabelWrapper = styled.div` -` +export const MicroToponymLabelWrapper = styled.div`` export const MicroToponymLabel = styled.span` display: block; @@ -34,7 +33,6 @@ export const MicroToponymLabelAlt = styled.span` ` const flagSize = '1.3em' - export const MicroToponymLabelFlag = styled(Image).attrs({ width: 24, height: 24, diff --git a/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponym.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponym.tsx new file mode 100644 index 000000000..f7c7f061b --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponym.tsx @@ -0,0 +1,15 @@ +import PanelMicroToponymAddressList from './PanelMicroToponymAddressList' + +import type { TypeMicroToponymExtended } from '../../types/LegacyBan.types' + +interface PanelMicroToponymProps { + microToponym: TypeMicroToponymExtended +} + +function PanelMicroToponym({ microToponym }: PanelMicroToponymProps) { + return ( + + ) +} + +export default PanelMicroToponym diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymAddressList.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.styles.tsx similarity index 90% rename from src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymAddressList.styles.tsx rename to src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.styles.tsx index 97ec41cb4..8410d3e15 100644 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymAddressList.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.styles.tsx @@ -1,6 +1,7 @@ 'use client' import styled from 'styled-components' +import Link from 'next/link' import { Table } from '@codegouvfr/react-dsfr/Table' export const MicroToponymAddressListInfo = styled.div.attrs({ className: 'ri-information-line' })` @@ -19,6 +20,16 @@ export const MicroToponymAddressListInfo = styled.div.attrs({ className: 'ri-inf } ` +export const MicroToponymAddressLink = styled(Link)` + display: inline-flex; + gap: 0.25rem; + + span:first-child { + min-width: 1.5rem; + text-align: right; + } +` + export const MicroToponymAddressListTable = styled(Table)` margin-top: 1.5rem; @@ -28,7 +39,7 @@ export const MicroToponymAddressListTable = styled(Table)` } th:nth-child(2) { - width: 4rem; + width: 5rem; text-align: center; } } @@ -36,16 +47,6 @@ export const MicroToponymAddressListTable = styled(Table)` & > table tbody { td:nth-child(1) { text-align: left; - - a { - display: inline-flex; - gap: 0.25rem; - - span:first-child { - min-width: 1.5rem; - text-align: right; - } - } } td:nth-child(2) { diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymAddressList.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx similarity index 58% rename from src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymAddressList.tsx rename to src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx index 264b60895..0392f8017 100644 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymAddressList.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx @@ -4,10 +4,12 @@ import { fr } from '@codegouvfr/react-dsfr' import { ToggleSwitch } from '@codegouvfr/react-dsfr/ToggleSwitch' import sortAddresses from '../../tools/sortAddresses' + import { MicroToponymAddressListInfo, MicroToponymAddressListTable, -} from './MicroToponymAddressList.styles' + MicroToponymAddressLink, +} from './PanelMicroToponymAddressList.styles' import type { SortAddressesEntry } from '../../tools/sortAddresses' import type { TypeMicroToponymExtended } from '../../types/LegacyBan.types' @@ -15,11 +17,11 @@ import { env } from 'next-runtime-env' const URL_CARTOGRAPHY_BAN = env('NEXT_PUBLIC_URL_CARTOGRAPHY_BAN') -interface MicroToponymAddressListProps { +interface PanelMicroToponymAddressListProps { microToponym: TypeMicroToponymExtended } -function MicroToponymAddressList({ microToponym }: MicroToponymAddressListProps) { +function PanelMicroToponymAddressList({ microToponym }: PanelMicroToponymAddressListProps) { const [isAddressUncertifiedVisible, setIsAddressUncertifiedVisible] = useState(true) const [isAddressCertifiedVisible, setIsAddressCertifiedVisible] = useState(true) const addressesUncertified = useMemo( @@ -40,11 +42,11 @@ function MicroToponymAddressList({ microToponym }: MicroToponymAddressListProps)

Adresses

- Une adresse certifiée garantit aux utilisateurs de la Base Adresses Natinale que l’adresse est valide et existe bel et bien sur le territoire de la commune et à la position fournie. + Une adresse certifiée garantit aux utilisateurs de la Base Adresses Natinale que cette dernière est valide et existe bel et bien sur le territoire de la commune, à la position fournie. {addressesUncertified.length} Adresses non certifiés} + label={<>{addressesUncertified.length} {addressesUncertified.length > 1 ? 'Adresses non certifiées' : 'Adresse non certifiée'}} labelPosition="right" inputTitle="terms" showCheckedHint={false} @@ -53,7 +55,7 @@ function MicroToponymAddressList({ microToponym }: MicroToponymAddressListProps) /> {addressesCertified.length} Adresses Certifiés} + label={<>{addressesCertified.length} {addressesCertified.length > 1 ? 'Adresses certifiées' : 'Adresse certifiée'}} labelPosition="right" inputTitle="terms" showCheckedHint={false} @@ -63,17 +65,37 @@ function MicroToponymAddressList({ microToponym }: MicroToponymAddressListProps) N° ({addresses.length} trouvés dans l’odonyme), - 'État', + <>N° ( + <> + {addresses.length}{' '} + {addresses.length > 1 ? 'trouvés sur l’odonyme' : 'trouvé sur l’odonyme'} + + ) + , + 'Certif.', ]} data={ addresses.map((address: any) => ( [ - + {address.numero} - {address?.suffixe && {address.suffixe}} - , - address?.certifie ? : '', + {address?.suffixe ? {address.suffixe} : {' '}} + , + address?.certifie + ? ( + + ) + : ( + + ), ] )) } @@ -84,4 +106,4 @@ function MicroToponymAddressList({ microToponym }: MicroToponymAddressListProps) ) } -export default MicroToponymAddressList +export default PanelMicroToponymAddressList diff --git a/src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymFooter.styles.tsx similarity index 100% rename from src/app/carte-base-adresse-nationale/components/district/AsideFooterDistrict.styles.tsx rename to src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymFooter.styles.tsx diff --git a/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymFooter.tsx similarity index 80% rename from src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.tsx rename to src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymFooter.tsx index ed0294281..194a38812 100644 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/AsideFooterMicroToponym.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymFooter.tsx @@ -6,17 +6,17 @@ import { AsideFooterWrapper, ActionWrapper, ActionList, -} from './AsideFooterMicroToponym.styles' +} from './PanelMicroToponymFooter.styles' import type { TypeMicroToponymExtended } from '../../types/LegacyBan.types' -interface AsideFooterAddressProps { +interface PanelMicroToponymFooterProps { banItem: TypeMicroToponymExtended withCertificate: boolean children?: React.ReactNode } -function AsideFooterMicroToponym({ banItem: microToponym, children }: AsideFooterAddressProps) { +function PanelMicroToponymFooter({ banItem: microToponym, children }: PanelMicroToponymFooterProps) { const focusOnMap = useFocusOnMap(microToponym) const handleClick = (evt: React.MouseEvent) => { @@ -43,4 +43,4 @@ function AsideFooterMicroToponym({ banItem: microToponym, children }: AsideFoote ) } -export default AsideFooterMicroToponym +export default PanelMicroToponymFooter diff --git a/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymHeader.styles.tsx new file mode 100644 index 000000000..0551f812f --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymHeader.styles.tsx @@ -0,0 +1,7 @@ +'use client' + +import styled from 'styled-components' + +export const MicroToponymLabelWrapper = styled.div` + font-size: 1rem; +` diff --git a/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymHeader.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymHeader.tsx new file mode 100644 index 000000000..e479d448a --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymHeader.tsx @@ -0,0 +1,43 @@ +import DistrictLink from '../DistrictLink' + +import { + MicroToponymLabelWrapper, +} from './PanelMicroToponymHeader.styles' + +import { + PanelDistrictLabelPrefix, + PanelDistrictLabel, + PanelNumberAndMicroTopoLabel, + PanelMicroTopoLabelAlt, + PanelMicroTopoLabelAltFlag, +} from '../PanelStyles/PanelStyles' + +import type { TypeMicroToponymExtended } from '../../types/LegacyBan.types' + +interface PanelMicroToponymHeaderProps { + microToponym: TypeMicroToponymExtended +} + +function PanelMicroToponymHeader({ microToponym }: PanelMicroToponymHeaderProps) { + const district = microToponym.commune + + return ( + <> + + {microToponym.nomVoie} + {microToponym?.nomVoieAlt && Object.entries(microToponym.nomVoieAlt).map(([lang, odonyme]) => ( + + {' '} + {odonyme} + + ))} + + Commune de + {district.nom} (COG {district.code}) + + + + ) +} + +export default PanelMicroToponymHeader diff --git a/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/index.ts b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/index.ts new file mode 100644 index 000000000..6b4eef681 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/index.ts @@ -0,0 +1,4 @@ +export { default as PanelMicroToponymHeader } from './PanelMicroToponymHeader' +export { default, default as PanelMicroToponym } from './PanelMicroToponym' +export { default as PanelMicroToponymAddressList } from './PanelMicroToponymAddressList' +export { default as PanelMicroToponymFooter } from './PanelMicroToponymFooter' diff --git a/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx b/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx new file mode 100644 index 000000000..ca6955164 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx @@ -0,0 +1,83 @@ +'use client' + +import styled, { css } from 'styled-components' +import Image from 'next/image' + +const flagSize = '1.05em' + +export const mainInfo = css` + font-size: 2rem; + font-weight: 700; + line-height: 1.25; +` +export const secondaryInfo = css` + font-size: 1.25rem; + font-weight: 400; + line-height: 1.25; +` +export const tertiaryInfo = css` + font-size: 1rem; + font-weight: 300; + line-height: 1.5; +` + +// --------------- +// MAIN INFO ----- +// --------------- + +export const PanelNumberAndMicroTopoLabel = styled.span` + ${mainInfo} + display: block; + margin-bottom: 0.5rem; +` + +// ------------------- +// TERTIARY INFO ----- +// ------------------- + +export const PanelMicroTopoLabelAlt = styled.span` + ${tertiaryInfo} + display: block; +` + +export const PanelMicroTopoLabelAltFlag = styled(Image).attrs({ + width: 24, + height: 24, +})` + width: ${flagSize}; + height: ${flagSize}; + border-radius: 50%; + vertical-align: -0.1em; + border: 1px solid #fff; + box-shadow: 0 0 0.3rem -0.1rem rgba(0, 0, 0, 0.7); +` + +export const PanelAddressPostCode = styled.span` + ${tertiaryInfo} + display: block; +` + +// -------------------- +// SECONDARY INFO ----- +// -------------------- + +export const PanelDistrictLabelPrefix = styled.span` + ${secondaryInfo} + display: block; + font-size: .8em; + font-weight: 300; +` + +export const PanelDistrictLabel = styled.span<{ $historique?: boolean }>` + display: block; + ${secondaryInfo} + ${({ $historique }) => $historique + ? css` + ${tertiaryInfo} + font-weight: 300; + ` + : css` + font-weight: 600; + ` + }; +` diff --git a/src/app/carte-base-adresse-nationale/components/PanelStyles/index.ts b/src/app/carte-base-adresse-nationale/components/PanelStyles/index.ts new file mode 100644 index 000000000..e69de29bb 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 deleted file mode 100644 index 9af1b39a6..000000000 --- a/src/app/carte-base-adresse-nationale/components/address/AddressCard.styles.tsx +++ /dev/null @@ -1,113 +0,0 @@ -'use client' - -import styled from 'styled-components' -import Image from 'next/image' - -export const AddressHeaderWrapper = styled.div` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 1.25rem; - margin-top: 2rem; - margin-bottom: 2rem; - padding-bottom: 2rem; - border-bottom: 4px solid var(--border-active-blue-france); -` - -export const AddressLabelWrapper = styled.div` - font-size: 1.5rem; -` - -export const AddressPostCode = styled.span` - display: block; - font-size: .7em; - line-height: 1.5; -` - -export const AddressNumberAndMicroTopoLabel = styled.span` - display: block; - font-size: 1.5rem; - font-size: 1em; - line-height: 1.25; - font-weight: 700; - margin-bottom: 0.5rem; - -` - -export const AddressMicroTopoLabelAlt = styled.span` - display: block; - font-size: 0.95rem; - line-height: 1; - font-weight: 700; - margin-bottom: 0.5rem; -` - -export const AddressMicroTopoLabelFlag = styled(Image).attrs({ - width: 24, - height: 24, -})` - width: 1em; - height: 1em; - border-radius: 50%; - vertical-align: -0.1em; -` - -export const AddressDistrictLabelPrefix = styled.span` - display: block; - font-size: .6em; - line-height: 1; - margin-bottom: 0.25rem; -` - -export const AddressDistrictLabel = styled.span<{ $historique?: boolean }>` - display: block; - font-size: 0.7em; - line-height: 1.25; - font-weight: ${({ $historique }) => $historique ? '400' : '700'}; - margin-bottom: 0rem; -` - -export const AddressDetailsWrapper = styled.ul` - padding: 0; - line-height: 1.5; - font-size: 0.9rem; - margin: 2rem 0; -` - -const AddressDetailsItemStyle = styled.li` - display: flex; - flex-direction: row; - margin-bottom: 0.2em; - - b { - font-weight: 500; - font-weight: normal; - font-size: 1.1em; - } - - &::before { - margin-right: 0.5em; - width: 1.25em; - height: 1.25em; - vertical-align: -0.25rem; - } -` - -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; - margin-bottom: 0.5rem; - white-space: pre-line; -` diff --git a/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx b/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx deleted file mode 100644 index 744c813fc..000000000 --- a/src/app/carte-base-adresse-nationale/components/address/AddressCard.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { - AddressDetailsItemValue, - - AddressHeaderWrapper, - - AddressLabelWrapper, - AddressPostCode, - - AddressNumberAndMicroTopoLabel, - AddressMicroTopoLabelAlt, - AddressMicroTopoLabelFlag, - - AddressDistrictLabelPrefix, - AddressDistrictLabel, - AddressDetailsWrapper, - AddressDetailsItem, -} from './AddressCard.styles' -import type { TypeAddressExtended } from '../../types/LegacyBan.types' - -interface AddressCardProps { - address: TypeAddressExtended -} - -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', { - year: 'numeric', - 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 ( - <> - - - - {address.numero ? `${address.numero} ` : ''} - {address.suffixe ? `${address.suffixe} ` : ''}
- {microToponym.nomVoie}, - - {microToponym?.nomVoieAlt && Object.entries(microToponym.nomVoieAlt).map(([lang, odonyme]) => ( - - {' '} - {odonyme} - - ))} - {address.nomAncienneCommune && ( - <> - Commune historique de - {address.nomAncienneCommune}, - - )} - CP {address.codePostal}, - {district.nom} (COG {district.code}) - - - - - - - Identifiant BAN :
- {address.banId} - - - - - Clé d’interopérabilité :
- {address.cleInterop} - - - - - Parcelles cadastrales :
- {address?.parcelles.join(', ') || 'Non renseignée(s)'} - - - - Date de mise à jour :
- {dateMaj} - - - Producteur :
- {address.sourcePosition} - - - - Libellé d’acheminement :
- {address.libelleAcheminement} - - - {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. - ))} -
- - )} - - - ) -} - -export default AddressCard diff --git a/src/app/carte-base-adresse-nationale/components/address/index.ts b/src/app/carte-base-adresse-nationale/components/address/index.ts deleted file mode 100644 index 8d9ce7891..000000000 --- a/src/app/carte-base-adresse-nationale/components/address/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -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 3aee85d4b..b9a9ba11d 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 @@ -14,7 +14,7 @@ interface MapItem { } const initBanMapConfig = { - mapStyle: 'ign-vector', + mapStyle: 'osm-vector', displayLandRegister: false, } 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 b877e905e..0dd1d7214 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 @@ -5,8 +5,6 @@ import LayerBan from './LayerBan' import LayerCadastre from './LayerCadastre' import Popups from './Popups' -import { ControlGroup } from './BanMap.styles' - import type { MapMouseEvent, MapGeoJSONFeature } from 'react-map-gl/maplibre' import type { PopupFeature } from './Popups' import type { Address, PopupInfo } from './types' @@ -146,7 +144,6 @@ function BanMap({ address, onSelect, isCadastreLayersShown }: BanMapProps) { )} - 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 deleted file mode 100644 index 837f9711e..000000000 --- a/src/app/carte-base-adresse-nationale/components/district/DistrictCard.styles.tsx +++ /dev/null @@ -1,66 +0,0 @@ -'use client' - -import styled from 'styled-components' - -export const DistrictHeaderWrapper = styled.div` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 1.25rem; - margin-top: 2rem; - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 4px solid var(--border-active-blue-france); -` - -export const DistrictLogoWrapper = styled.div` -` - -export const DistrictLabelWrapper = styled.div` -` - -export const DistrictLabelPrefix = styled.span` - display: block; - margin-bottom: 0.25rem; - font-size: 0.8rem; - line-height: 1; -` - -export const DistrictLabel = styled.span` - display: block; - margin-bottom: 0.5rem; - font-size: 2rem; - font-weight: 700; - line-height: 1; -` - -export const DistrictLabelCode = styled.span` - display: block; - margin-bottom: 0.5rem; - font-size: 0.9rem; - font-weight: 700; -` - -export const DistrictDetailsWrapper = styled.ul` - padding: 0; - margin: 2rem 0; - font-size: 0.9rem; - line-height: 1.5; -` - -export const DistrictDetailsItem = styled.li` - display: block; - margin-bottom: 0.2em; - - b { - font-weight: 500; - font-size: 1.1em; - } - - &::before { - width: 1.25em; - height: 1.25em; - margin-right: 0.5em; - vertical-align: -0.25rem; - } -` diff --git a/src/app/carte-base-adresse-nationale/components/district/index.ts b/src/app/carte-base-adresse-nationale/components/district/index.ts deleted file mode 100644 index 45fa4f9e3..000000000 --- a/src/app/carte-base-adresse-nationale/components/district/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -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/MicroToponymCard.tsx b/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymCard.tsx deleted file mode 100644 index 25a7d622e..000000000 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/MicroToponymCard.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import Link from 'next/link' - -import { - MicroToponymHeaderWrapper, - MicroToponymLabelWrapper, - MicroToponymDistrictLabelPrefix, - MicroToponymDistrictLabel, - MicroToponymLabel, - MicroToponymLabelAlt, - MicroToponymLabelFlag, -} from './MicroToponymCard.styles' - -import type { TypeMicroToponymExtended } from '../../types/LegacyBan.types' - -interface MicroToponymCardProps { - microToponym: TypeMicroToponymExtended -} - -function MicroToponymCard({ microToponym }: MicroToponymCardProps) { - const district = microToponym.commune - - return ( - <> - - - {microToponym.nomVoie} - {microToponym?.nomVoieAlt && Object.entries(microToponym.nomVoieAlt).map(([lang, odonyme]) => ( - - {' '} - {odonyme} - - ))} - Commune de - {district.nom} (COG {district.code}) - - - - ) -} - -export default MicroToponymCard 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 deleted file mode 100644 index 12184e418..000000000 --- a/src/app/carte-base-adresse-nationale/components/micro-toponym/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -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 954d07ee4..908296d04 100644 --- a/src/app/carte-base-adresse-nationale/layout.styles.tsx +++ b/src/app/carte-base-adresse-nationale/layout.styles.tsx @@ -27,9 +27,11 @@ export const CartoWrapper = styled.div` position: relative; display: flex; height: calc(100vh - 10.3rem); + height: calc(100dvh - 10.3rem); - @media (min-width: ${({ theme }) => theme.breakpoints.md}) { - height: calc(100vh - 7.4rem - 3.5rem); + @media (min-width: ${({ theme }) => theme.breakpoints.lg}) { + height: calc(100vh - 7.4rem - 3.5rem + 3.5rem); + height: calc(100dvh - 7.4rem - 3.5rem + 3.5rem); } &::before { @@ -102,7 +104,7 @@ export const MapParamsWrapper = styled.div.attrs({ position: relative; z-index: 1; - @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + @media (min-width: ${({ theme }) => theme.breakpoints.lg}) { justify-content: space-between; } ` @@ -124,7 +126,7 @@ export const RingButtonStyled = styled.button.attrs({ box-shadow: 0rem 0.3rem 0.7rem -0.25rem rgba(0, 0, 0, .5), 0rem 0.3rem 0.7rem -0.15rem rgba(255, 255, 255, .5), ${({ $isTypeRadio, $isActive }) => !$isTypeRadio || $isActive ? css`0rem 0rem 0rem -0rem rgba(0, 0, 0, .5) inset` : css`0rem 0.3rem 0.7rem -0.25rem rgba(0, 0, 0, .5) inset`}, - ${({ $isActive }) => $isActive ? css`0rem 0rem 1px 2px #fff inset` : css`0rem 0rem 0px 0px #fff inset`}, + ${({ $isActive }) => $isActive ? css`0rem 0rem 1px 2px var(--background-raised-grey) inset` : css`0rem 0rem 0px 0px var(--background-raised-grey) inset`}, ${({ $isActive }) => $isActive ? css`0rem 0rem 1px 3px currentColor inset` : css`0rem 0rem 0px 0px currentColor inset`}; margin: 0 0.5rem 0 0; color: var(--text-action-high-blue-france); diff --git a/src/app/carte-base-adresse-nationale/layout.tsx b/src/app/carte-base-adresse-nationale/layout.tsx index 43c8d7fde..a04c9e7af 100644 --- a/src/app/carte-base-adresse-nationale/layout.tsx +++ b/src/app/carte-base-adresse-nationale/layout.tsx @@ -5,6 +5,7 @@ import { Tooltip } from '@codegouvfr/react-dsfr/Tooltip' import SearchBAN from '@/components/SearchBAN' import { BALWidgetContext } from '@/contexts/BALWidget.context' +import { useMainLayout } from '@/layouts/MainLayout' import { BanMapProvider, useBanMapConfig } from './components/ban-map/BanMap.context' import { theme } from './components/ban-map/theme' @@ -34,11 +35,19 @@ const RingButton = ({ tooltip, ...props }: { tooltip?: string, [key: string]: an } function Carto({ children }: { children: JSX.Element }) { + const { setTypeLayout } = useMainLayout() + const [isLegendVisible, setIsLegendVisible] = useState(false) const banMapConfigState = useBanMapConfig() const [banMapConfig, dispatchToBanMapConfig] = banMapConfigState const { mapStyle, displayLandRegister } = banMapConfig + useEffect(() => { + setTypeLayout('full-screen') + window?.setTimeout(() => window?.scrollTo(0, 1), 1000) + return () => setTypeLayout('default') + }, [setTypeLayout]) + const toggleLegend = useCallback(() => { setIsLegendVisible(!isLegendVisible) }, [isLegendVisible]) @@ -59,9 +68,9 @@ function Carto({ children }: { children: JSX.Element }) { - handleMapStyleChange('ign-vector')} $isActive={banMapConfig.mapStyle === 'ign-vector'} $isTypeRadio /> handleMapStyleChange('osm-vector')} $isActive={banMapConfig.mapStyle === 'osm-vector'} $isTypeRadio /> - handleMapStyleChange('ign-ortho')} $isActive={banMapConfig.mapStyle === 'ign-ortho'} $isTypeRadio /> + handleMapStyleChange('ign-vector')} $isActive={banMapConfig.mapStyle === 'ign-vector'} $isTypeRadio /> + handleMapStyleChange('ign-ortho')} $isActive={banMapConfig.mapStyle === 'ign-ortho'} $isTypeRadio /> diff --git a/src/app/carte-base-adresse-nationale/page.styles.tsx b/src/app/carte-base-adresse-nationale/page.styles.tsx index 7a4fc8b01..c4d45624d 100644 --- a/src/app/carte-base-adresse-nationale/page.styles.tsx +++ b/src/app/carte-base-adresse-nationale/page.styles.tsx @@ -4,14 +4,15 @@ import styled from 'styled-components' export const MapSearchResultsWrapper = styled.div` min-height: 200%; - padding: 8.5rem 1rem 1rem; - background-color: var(--background-default-grey); + padding: 1rem; scroll-snap-align: start; - pointer-events: auto; - @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + @media (min-width: ${({ theme }) => theme.breakpoints.lg}) { width: 100%; min-height: 100%; margin-top: 0; } ` + +export const MapSearchResultsHead = styled.div`` +export const MapSearchResultsBody = styled.div`` diff --git a/src/app/carte-base-adresse-nationale/page.tsx b/src/app/carte-base-adresse-nationale/page.tsx index 44d57b442..4c54bf25d 100644 --- a/src/app/carte-base-adresse-nationale/page.tsx +++ b/src/app/carte-base-adresse-nationale/page.tsx @@ -2,25 +2,22 @@ import { useState, useEffect, useRef, Suspense, useCallback } from 'react' import { AttributionControl, MapProvider, Map, NavigationControl, ScaleControl } from 'react-map-gl/maplibre' -import { useSearchParams } from 'next/navigation' +import { useRouter, useSearchParams } from 'next/navigation' import type { MapRef } from 'react-map-gl/maplibre' import { getCommuneFlag } from '@/lib/api-wikidata' import { getBanItem, getDistrict } from '@/lib/api-ban' import Aside from './components/Aside' -import MapBreadcrumb from './components/MapBreadcrumb' -import MapDataLoader from './components/MapDataLoader' -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 LoadingBar from './components/LoadingBar' +import { PanelAddressHeader, PanelAddress, PanelAddressFooter } from './components/PanelAddress' +import { PanelMicroToponymHeader, PanelMicroToponym, PanelMicroToponymFooter } from './components/PanelMicroToponym' +import { PanelDistrictHeader, PanelDistrict, PanelDistrictFooter } from './components/PanelDistrict' +import { MapSearchResultsWrapper } from './page.styles' import BanMap from './components/ban-map' +import type { MapBreadcrumbPath } from './components/MapBreadcrumb' import type { TypeAddressExtended, TypeMicroToponymPartial, @@ -28,7 +25,6 @@ import type { TypeDistrictExtended, TypeDistrict, } from './types/LegacyBan.types' -import { useRouter } from 'next/navigation' import { useBanMapConfig } from './components/ban-map/BanMap.context' @@ -39,7 +35,6 @@ interface LinkProps { href: string target?: string } -type MapBreadcrumbPathSegment = string | { label: string, linkProps?: LinkProps } const DEFAULT_CENTER = [1.7, 46.9] const DEFAULT_ZOOM = 6 @@ -99,18 +94,35 @@ function CartoView() { const [isMenuVisible, setIsMenuVisible] = useState(false) const [mapSearchResults, setMapSearchResults] = useState() const [districtLogo, setDistrictLogo] = useState() - const [mapBreadcrumbPath, setMapBreadcrumbPath] = useState([]) + const [mapBreadcrumbPath, setMapBreadcrumbPath] = useState([]) const [withCertificate, setWithCertificate] = useState(false) const [isLoadMapSearchResults, setIsLoadMapSearchResults] = useState(false) const [isLoadMapTiles, setIsLoadMapTiles] = useState(false) - + const router = useRouter() const banMapConfigState = useBanMapConfig() - const [banMapConfig, dispatchToBanMapConfig] = banMapConfigState + const [banMapConfig] = banMapConfigState const { mapStyle, displayLandRegister } = banMapConfig const banItemId = searchParams?.get('id') const typeView = getBanItemTypes(mapSearchResults) + const closeMapSearchResults = useCallback(() => { + setIsMenuVisible(false) + const timer = setTimeout(() => { + setMapSearchResults(undefined) + setDistrictLogo(undefined) + }, 1000) + return () => { + setMapSearchResults(undefined) + setDistrictLogo(undefined) + clearTimeout(timer) + } + }, []) + + const selectBanItem = useCallback(({ id }: { id: string }) => router.push(`${URL_CARTOGRAPHY_BAN}?id=${id}`), [router]) + + const unselectBanItem = useCallback(() => router.push(`${URL_CARTOGRAPHY_BAN}`), [router]) + useEffect(() => { isMapReady ? setIsLoadMapTiles(false) : setIsLoadMapTiles(true) }, [isMapReady]) @@ -129,7 +141,10 @@ function CartoView() { setIsLoadMapSearchResults(false) })() } - }, [banItemId]) + else { + return closeMapSearchResults() + } + }, [banItemId, closeMapSearchResults]) useEffect(() => { if (isMapReady && mapSearchResults) { @@ -173,14 +188,9 @@ function CartoView() { } , [isMapReady, mapSearchResults]) - const router = useRouter() - - const selectAddress = useCallback(({ id }: { id: string }) => { - router.push(`${URL_CARTOGRAPHY_BAN}?id=${id}`) - }, [router]) - return ( + - -