Merge pull request #1948 from BaseAdresseNationale/fix/multiple-quick…

…-fix Fix/multiple quick fix
BaseAdresseNationale · Dec 23, 2024 · d213806 · d213806
2 parents 799bf12 + 88c0e93
commit d213806
Show file tree

Hide file tree

Showing 25 changed files with 524 additions and 157 deletions.
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
@@ -93,14 +93,14 @@ export const AsideWrapper = styled.div<{
     }
 
     .body {
+      display:flex;
+      flex-direction: column;
       justify-content: flex-start;
       height: 100%;
-      padding-bottom: 8rem;
-      overflow-x: hidden;
-      overflow-y: auto;
       scroll-snap-type: x mandatory;
+      pointer-events: auto;
 
-      ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 8rem;`};
+      ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 8rem;`}
     }
   }
 `
@@ -213,11 +213,16 @@ export const AsideWrapperTogglerButton = styled.button.attrs<{ $isOpen: boolean
 `
 
 export const AsideBody = styled.div`
+  flex: 1 1 auto;
   background: var(--background-default-grey);
   pointer-events: auto;
 `
 
-export const AsideFooter = styled.footer`
+export const AsideFooter = styled.footer<{
+  $onTargetClick?: () => void
+  $isForLargeScreen?: boolean
+  $isForSmallScreen?: boolean
+}>`
     position: sticky;
     z-index: 1;
     bottom: 0;
@@ -228,4 +233,16 @@ export const AsideFooter = styled.footer`
     box-shadow: 0 0 .5rem -0.125rem rgba(0, 0, 0, 0.7);
     background: var(--background-default-grey);
     pointer-events: auto;
+
+    ${({ $isForSmallScreen }) => $isForSmallScreen && css`
+      @media (min-width: ${({ theme }) => theme.breakpoints.md}) {
+        display: none;
+      }
+    `}
+
+    ${({ $isForLargeScreen }) => $isForLargeScreen && css`
+      @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
+        visibility: hidden;
+      }
+    `}
 `
diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useRef } from 'react'
+
 import AsideHeader from './AsideHeader'
 
 import {
@@ -40,6 +42,20 @@ function Aside({
   isOpen = true,
   isInfo,
 }: AsideProps | AsideInfoProps) {
+  const asideWrapperRef = useRef<HTMLDivElement>(null)
+  const asideBodyRef = useRef<HTMLDivElement>(null)
+
+  const onTargetClick = useCallback(() => {
+    asideWrapperRef.current?.scrollTo(0, 0)
+  }, [])
+
+  useEffect(() => {
+    if (path) {
+      asideWrapperRef.current?.scrollTo(0, 0)
+      asideBodyRef.current?.scrollTo(0, 0)
+    }
+  }, [path])
+
   const withTogglerButton = Boolean(onClickToggler)
 
   return (
@@ -48,6 +64,7 @@ function Aside({
       $isVisible={Boolean(children)}
       $withTogglerButton={withTogglerButton}
       $isTypeInfo={isInfo}
+      ref={asideWrapperRef}
     >
       {withTogglerButton && (
         <AsideTogglerButtonWrapper>
@@ -65,7 +82,7 @@ function Aside({
       )}
 
       <div className="aside-body-wrapper ">
-        <div className="body">
+        <div className="body" ref={asideBodyRef}>
           {header && (
             <AsideHeader path={path} onClose={onClose}>
               {header}
@@ -79,9 +96,15 @@ function Aside({
                 {children}
               </AsideBody>
             )}
+
+          {footer && (
+            <AsideFooter $isForLargeScreen>
+              {footer}
+            </AsideFooter>
+          )}
         </div>
         {footer && (
-          <AsideFooter>
+          <AsideFooter $onTargetClick={onTargetClick} $isForSmallScreen>
             {footer}
           </AsideFooter>
         )}

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
@@ -8,6 +8,7 @@ export const AsideHeader = styled.div`
   flex-direction: column-reverse;
   overflow: hidden;
   width: 100%;
+  min-height: fit-content;
   padding: 0 1rem 1rem;
   font-size: 1rem;
   transform: translateY(-100%);

diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
 export const DistrictLinkWrapper = styled.span`
   position: relative;
   font-size: 1em;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;

diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx
@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 import {
   DistrictLinkWrapper,
   DistrictName,
@@ -10,7 +12,7 @@ interface District {
 }
 
 interface DistrictLinkProps {
-  children?: React.ReactNode
+  children?: ReactNode
   district: District
 }
 

diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx
@@ -19,6 +19,19 @@ const AddressDetailsItemStyle = styled.li`
     font-size: 1.1em;
   }
 
+  &.isSuccessful {
+    color: var(--text-default-success);
+  }
+
+  &.isBAL {
+    color: var(--text-label-blue-france);
+  }
+
+  &.isIsolated {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
   &::before {
     margin-right: 0.5em;
     width: 1.25em;
@@ -40,14 +53,67 @@ export const AddressDetailsItem = ({ children, ...props }: AddressDetailsItemPro
 )
 
 interface AddressDetailsCertificationProps extends React.HTMLAttributes<HTMLLIElement> {
-  children: React.ReactNode
   isCertified: boolean
 }
 
-export const AddressDetailsCertification = ({ children, isCertified, ...props }: AddressDetailsCertificationProps) => (
-  <AddressDetailsItemStyle {...props} className="ri-verified-badge-fill">
+const AddressDetailsDesc = styled.div`
+  display: block;
+  font-size: 0.9em;
+  font-style: italic;
+  line-height: 1.5rem;
+  padding-right: 1em;
+  color: var(--text-mention-grey);
+`
+
+export const AddressDetailsCertification = ({ isCertified, className, ...props }: AddressDetailsCertificationProps) => (
+  <AddressDetailsItemStyle
+    {...props}
+    className={
+      `${isCertified ? 'ri-checkbox-circle-fill isSuccessful' : 'fr-icon-error-fill'} `
+      + `isIsolated `
+      + ` ${className}`
+    }
+  >
     <div>
-      {children}
+      <strong>{isCertified ? `Cette adresse est certifiée` : 'Cette adresse n’est pas certifiée'}</strong>
+      <AddressDetailsDesc>
+        Une adresse certifiée indique que la commune a validé l’exactitude des informations de l’adresse.
+      </AddressDetailsDesc>
+    </div>
+  </AddressDetailsItemStyle>
+)
+
+interface AddressDetailsOriginProps extends React.HTMLAttributes<HTMLLIElement> {
+  origin: string
+}
+
+export const AddressDetailsOrigin = ({ origin, className, ...props }: AddressDetailsOriginProps) => (
+  <AddressDetailsItemStyle
+    {...props}
+    className={
+      `${origin === 'bal' ? 'ri-star-fill isBAL' : 'ri-government-fill'} `
+      + `isIsolated `
+      + `${className}`
+    }
+  >
+    <div>
+      {origin === 'bal'
+        ? (
+            <>
+              <strong>Cette adresse est issue d’une Base&nbsp;Adresse&nbsp;Locale&nbsp;(BAL)</strong>
+              <AddressDetailsDesc>
+                Les Base&nbsp;Adresse&nbsp;Locale&nbsp;(BAL) sont directement produites par les communes.
+              </AddressDetailsDesc>
+            </>
+          )
+        : (
+            <>
+              <strong>Cette adresse à été produite par l’IGN à partir de sources diverses</strong>
+              <AddressDetailsDesc>
+                La commune n’a pas encore produit de Base&nbsp;Adresse&nbsp;Locale&nbsp;(BAL).
+              </AddressDetailsDesc>
+            </>
+          )}
     </div>
   </AddressDetailsItemStyle>
 )

diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx
@@ -2,6 +2,7 @@ import {
   AddressDetailsItemValue,
   AddressDetailsWrapper,
   AddressDetailsItem,
+  AddressDetailsOrigin,
   AddressDetailsCertification,
 } from './PanelAddress.styles'
 
@@ -47,9 +48,9 @@ function PanelAddress({ address }: PanelAddressProps) {
 
   return (
     <AddressDetailsWrapper>
-      <AddressDetailsCertification isCertified={address.certifie}>
-        <strong>{address.certifie ? `Adresse certifiée` : 'Adresse non certifiée'}</strong>
-      </AddressDetailsCertification>
+      <AddressDetailsOrigin origin={address.sourcePosition} />
+      <AddressDetailsCertification isCertified={address.certifie} />
+
       <AddressDetailsItem className="ri-key-line">
         <span>
           Identifiant BAN : <br />