feat: add source header and scroll to new section source fiche detail (…

…#393)
anct-cartographie-nationale · Dec 6, 2023 · 220f2cf · 220f2cf
1 parent 1118e7f
commit 220f2cf
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 107 deletions.
diff --git a/src/features/cartographie/components/index.ts b/src/features/cartographie/components/index.ts
@@ -24,11 +24,11 @@ import {
   SendByEmailModalComponent,
   PublicPrisEnChargeComponent,
   ServicesComponent,
-  MiseAJourComponent,
   AccessibiliteComponent,
   BandeauErreurComponent,
   ErreurFormModalComponent,
-  ImpressionChoiceModalComponent
+  ImpressionChoiceModalComponent,
+  SourceDonneesComponent
 } from './lieux-mediation-numerique-details';
 import { LocationBreadcrumbComponent } from './location-breadcrumb/location-breadcrumb.component';
 import { AffinerRechercheFormComponent } from './affiner-recherche-form/affiner-recherche-form.component';
@@ -60,13 +60,13 @@ export const components = [
   LieuMediationNumeriqueMarkersComponent,
   TerritoireMarkersComponent,
   NoLieuxFoundComponent,
-  MiseAJourComponent,
   AccessibiliteComponent,
   LocationBreadcrumbComponent,
   ModifierOrientationComponent,
   LabelModalComponent,
   HubModalComponent,
   BandeauErreurComponent,
   ErreurFormModalComponent,
-  ImpressionChoiceModalComponent
+  ImpressionChoiceModalComponent,
+  SourceDonneesComponent
 ];
diff --git a/src/features/cartographie/components/lieux-mediation-numerique-details/index.ts b/src/features/cartographie/components/lieux-mediation-numerique-details/index.ts
@@ -11,8 +11,8 @@ export * from './services/services.component';
 export * from './aidants/aidants.component';
 export * from './lieux-mediation-numerique-details.component';
 export * from './lieux-mediation-numerique-details-print.component';
-export * from './mise-a-jour/mise-a-jour.component';
 export * from './accessibilite/accessibilite.component';
 export * from './bandeau-erreur/bandeau-erreur.component';
 export * from './erreur-form-modal/erreur-form-modal.component';
 export * from './impression-choice-modal/impression-choice-modal.component';
+export * from './source-donnees/source-donnees.component';
diff --git a/...-mediation-numerique-details/informations-generales/informations-generales.component.html b/...-mediation-numerique-details/informations-generales/informations-generales.component.html
@@ -1,34 +1,67 @@
 <div class="d-flex flex-row-reverse">
-  <div class="d-flex flex-column">
-    <div class="flex-grow-1 text-end">
+  <div class="flex-grow-1 align-self-center">
+    <div class="d-flex">
+      <small class="flex-grow-1" *ngIf="typologie">{{ typologie }}</small>
       <button
         type="button"
         class="btn btn-close btn-close-white opacity-100"
         tabindex="0"
         aria-label="Revenir à la liste"
         (click)="closeDetails.emit()"></button>
     </div>
-  </div>
-  <div class="flex-grow-1 align-self-center">
-    <small *ngIf="typologie">{{ typologie }}</small>
-    <h1 class="h2 fw-bold mb-0 text-first-letter-uppercase">
-      {{ nom }}
-    </h1>
-    <ng-container *ngIf="date">
-      <span *ngIf="isTooOld(date); else updateDate" class="badge rounded-pill bg-tertiary text-primary fw-normal me-1">
-        <i class="ri-alert-line" aria-hidden="true"></i>
-        Dernière mise à jour il y a plus d'un an
-      </span>
-      <ng-template #updateDate>
-        <span class="mt-1 fst-italic me-2">Mise à jour le {{ date | date : 'dd/MM/y' }}</span>
-      </ng-template>
-    </ng-container>
-    <small *ngIf="source" class="opacity-75 fst-italic">
-      source :
-      <a href="{{ source.link }}" target="_blank" rel="noopener noreferrer" class="text-secondary">
-        {{ source.label }}
-      </a>
-    </small>
+    <div class="d-flex">
+      <div class="w-50 flex-grow-1">
+        <h1 class="h2 fw-bold mb-0 text-first-letter-uppercase">
+          {{ nom }}
+        </h1>
+        <ng-container *ngIf="date">
+          <span *ngIf="isTooOld(date); else updateDate" class="badge rounded-pill bg-tertiary text-primary fw-normal me-1">
+            <i class="ri-alert-line" aria-hidden="true"></i>
+            Dernière mise à jour il y a plus d'un an
+          </span>
+          <ng-template #updateDate>
+            <span class="mt-1 fst-italic me-2">Mise à jour le {{ date | date : 'dd/MM/y' }}</span>
+          </ng-template>
+        </ng-container>
+        <div class="d-flex">
+          <div class="text-end ms-1" *ngFor="let source of sources">
+            <a
+              role="button"
+              (click)="scrollToSource.emit()"
+              *ngIf="source.logo as logo"
+              class="d-block d-sm-none text-secondary mt-1">
+              <span class="circle-wrapper">
+                <img
+                  class="img-fluid p-1"
+                  [src]="assetsConfiguration.path + '/img/logo/source-update/' + logo + '.svg'"
+                  alt="{{ source.label }}" />
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="mt-2" *ngIf="sources">
+        <small role="button" (click)="scrollToSource.emit()" class="d-none d-sm-block opacity-75 fst-italic d-flex">
+          <span class="text-decoration-underline">Sources des données</span>
+        </small>
+        <div class="d-flex justify-content-end">
+          <div class="text-end ms-1" *ngFor="let source of sources">
+            <a
+              role="button"
+              (click)="scrollToSource.emit()"
+              *ngIf="source.logo as logo"
+              class="d-none d-sm-block text-secondary mt-1 circle-wrapper">
+              <span class="circle-wrapper">
+                <img
+                  class="img-fluid p-1"
+                  [src]="assetsConfiguration.path + '/img/logo/source-update/' + logo + '.svg'"
+                  alt="{{ source.label }}" />
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <i class="ri-4x ri-map-pin-2-line my-auto me-2 d-md-inline d-none" aria-hidden="true"></i>
 </div>
diff --git a/...ux-mediation-numerique-details/informations-generales/informations-generales.component.ts b/...ux-mediation-numerique-details/informations-generales/informations-generales.component.ts
@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Output } from '@angular/core';
 import { OpeningState } from '../../../../core/presenters';
 import { SourcePresentation } from '../../../presenters';
 import { isTooOld } from './informations-generales.presenter';
+import { ASSETS_TOKEN, AssetsConfiguration } from 'projects/client-application/src/root';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,9 +15,12 @@ export class InformationsGeneralesComponent {
   @Input() public typologie: string | undefined;
   @Input() public date: Date | undefined;
   @Input() public status: OpeningState | undefined;
-  @Input() public source: SourcePresentation | undefined;
+  @Input() public sources: SourcePresentation[] | undefined;
 
   @Output() public closeDetails: EventEmitter<void> = new EventEmitter<void>();
+  @Output() scrollToSource: EventEmitter<string> = new EventEmitter<string>();
 
   public isTooOld = isTooOld(new Date());
+
+  public constructor(@Inject(ASSETS_TOKEN) public assetsConfiguration: AssetsConfiguration) {}
 }
diff --git a/...onents/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.html b/...onents/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.html
@@ -6,8 +6,9 @@
     [typologie]="lieuMediationNumerique.typologies"
     [date]="lieuMediationNumerique.date_maj"
     [status]="lieuMediationNumerique.status"
-    [source]="lieuMediationNumerique.source"
-    (closeDetails)="closeDetails.emit(lieuMediationNumerique)"></app-informations-generales>
+    [sources]="lieuMediationNumerique.source"
+    (closeDetails)="closeDetails.emit(lieuMediationNumerique)"
+    (scrollToSource)="onScrollToSource()"></app-informations-generales>
   <div class="position-relative">
     <app-boutons-action
       [siteWeb]="lieuMediationNumerique.contact?.site_web"
@@ -135,6 +136,11 @@ <h2 class="h5 my-3 d-print-none fw-bold text-muted">Horaires détaillées</h2>
         (showLabelInvokingContext)="showLabelInvokingContext.emit($event)"></app-labellisations>
     </li>
   </ul>
+  <div #source class="bg-light px-2">
+    <div class="mx-3">
+      <app-source-donnees></app-source-donnees>
+    </div>
+  </div>
   <span class="d-flex ms-3 my-1">
     <a
       class="nav-link me-1 text-primary"
@@ -145,9 +151,6 @@ <h2 class="h5 my-3 d-print-none fw-bold text-muted">Horaires détaillées</h2>
       Participer au webinaire "Mettre à jour ses données"
     </a>
   </span>
-  <div class="bg-light px-2">
-    <app-mise-a-jour [source]="lieuMediationNumerique.source"></app-mise-a-jour>
-  </div>
   <div class="bg-primary p-2">
     <app-bandeau-erreur
       (openImpressionChoiceModal)="impressionChoiceModal.control.toggle($event)"

diff --git a/...mponents/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.ts b/...mponents/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { LabelNational } from '@gouvfr-anct/lieux-de-mediation-numerique';
 import { LieuMediationNumeriqueDetailsPresentation } from '../../presenters';
 import { OrientationSheetForm, SendLieuByEmail } from '../../models';
@@ -11,6 +11,8 @@ import { FormGroup } from '@angular/forms';
   templateUrl: './lieux-mediation-numerique-details.component.html'
 })
 export class LieuxMediationNumeriqueDetailsComponent {
+  @ViewChild('source') sourceRef!: ElementRef;
+
   @Input() public lieuMediationNumerique!: LieuMediationNumeriqueDetailsPresentation;
 
   @Input() public filters?: FilterPresentation;
@@ -35,4 +37,8 @@ export class LieuxMediationNumeriqueDetailsComponent {
   @Output() public showLabel: EventEmitter<LabelNational> = new EventEmitter<LabelNational>();
 
   @Output() public showLabelInvokingContext: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  onScrollToSource = (): void => {
+    this.sourceRef.nativeElement.scrollIntoView({ behavior: 'instant', block: 'start', inline: 'start' });
+  };
 }
diff --git a/...aphie/components/lieux-mediation-numerique-details/mise-a-jour/mise-a-jour.component.html b/...aphie/components/lieux-mediation-numerique-details/mise-a-jour/mise-a-jour.component.html
diff --git a/...graphie/components/lieux-mediation-numerique-details/mise-a-jour/mise-a-jour.component.ts b/...graphie/components/lieux-mediation-numerique-details/mise-a-jour/mise-a-jour.component.ts
diff --git a/...components/lieux-mediation-numerique-details/source-donnees/source-donnees.component.html b/...components/lieux-mediation-numerique-details/source-donnees/source-donnees.component.html
@@ -0,0 +1,8 @@
+<div class="py-3">
+  <h2 class="h5 text-muted text-uppercase">Sources des données</h2>
+  <p class="my-2">
+    Les informations de cette structure sont récupérées automatiquement sur différentes plateformes de collectes d'information.
+    Il se peut que certaines erreurs s'y soient glissées, dans ce cas n'hésitez pas à remonter l'information aux plateformes
+    concernées.
+  </p>
+</div>
diff --git a/...e/components/lieux-mediation-numerique-details/source-donnees/source-donnees.component.ts b/...e/components/lieux-mediation-numerique-details/source-donnees/source-donnees.component.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-source-donnees',
+  templateUrl: './source-donnees.component.html'
+})
+export class SourceDonneesComponent {}
diff --git a/...senters/lieu-mediation-numerique-details/lieu-mediation-numerique-details.presentation.ts b/...senters/lieu-mediation-numerique-details/lieu-mediation-numerique-details.presentation.ts
@@ -43,7 +43,7 @@ export type LieuMediationNumeriqueDetailsPresentation = {
   prise_rdv?: string;
   aidants?: Aidant[];
   prive?: boolean;
-  source?: SourcePresentation;
+  source?: SourcePresentation[];
 };
 
 export type ModaliteAccompagnementPresentation = { label: string; icon: string; description: string };
diff --git a/...resenters/lieu-mediation-numerique-details/lieux-mediation-numerique-details.presenter.ts b/...resenters/lieu-mediation-numerique-details/lieux-mediation-numerique-details.presenter.ts
@@ -494,6 +494,16 @@ const ifAnyHorairesWithWeeks =
   (horaires?: string): HorairesPresentation[] | {} =>
     horaires?.includes('week') ? ifAny('full_horaires', getHorairesWeeksByWeeks(date)(horaires)) : [];
 
+const getMultipleSourcesIfAny = (id: string, lieuSource?: string): SourcePresentation[] =>
+  id.includes('|')
+    ? Array.from(availableSourcesMap)
+        .filter(([source]: [string, SourcePresentation]) => id.includes(source))
+        .map(([, source]) => source)
+    : [availableSourcesMap.get(lieuSource ?? '') ?? []].flat();
+
+const getSourcesIfAny = (id: string, lieuSource?: string): SourcePresentation[] | undefined =>
+  lieuSource ? getMultipleSourcesIfAny(id, lieuSource) : undefined;
+
 export class LieuxMediationNumeriqueDetailsPresenter {
   public constructor(private readonly lieuxMediationNumeriqueRepository: LieuxMediationNumeriqueRepository) {}
 
@@ -512,44 +522,38 @@ export class LieuxMediationNumeriqueDetailsPresenter {
         ([lieu, localisation]: [
           LieuMediationNumeriqueWithAidants,
           Localisation
-        ]): LieuMediationNumeriqueDetailsPresentation => {
-          return {
-            id: lieu.id,
-            nom: lieu.nom,
-            adresse: [
-              lieu.adresse.voie,
-              lieu.adresse.complement_adresse,
-              lieu.adresse.code_postal,
-              `${lieu.adresse.commune.charAt(0).toUpperCase()}${lieu.adresse.commune.substring(1).toLowerCase()}`
-            ].join(' '),
-            commune: lieu.adresse.commune,
-            code_postal: lieu.adresse.code_postal,
-            services: lieu.services,
-            ...ifAny('horaires', parseHoraires(date)(lieu.horaires)),
-            ...ifAnyHorairesWithWeeks(date)(lieu.horaires),
-            ...ifAny('status', openingState(date)(lieu.horaires)),
-            ...ifAny('typologies', lieu.typologies?.map((typologie) => typologieMatchingMap.get(typologie) || '').join(', ')),
-            ...ifAny('contact', lieu.contact),
-            ...ifAny('presentation', lieu.presentation),
-            ...ifAny('date_maj', lieu.date_maj),
-            ...ifAny('publics_accueillis', lieu.publics_accueillis),
-            ...ifAny('conditions_acces', toConditionAccesDetailsPresentation(lieu.conditions_acces)),
-            ...ifAny('labels_nationaux', lieu.labels_nationaux),
-            ...ifAny('labels_autres', lieu.labels_autres),
-            ...ifAny(
-              'modalites_accompagnement',
-              toModalitesAccompagnementPresentation(lieu.modalites_accompagnement),
-              notEmpty
-            ),
-            ...ifAny('accessibilite', lieu.accessibilite),
-            ...ifAny('localisation', lieu.localisation),
-            ...ifAny('distance', getDistance(lieu, localisation)),
-            ...ifAny('prise_rdv', lieu.prise_rdv),
-            ...ifAny('aidants', lieu.aidants),
-            ...ifAny('source', availableSourcesMap.get(lieu.source ?? '') ?? undefined),
-            ...ifAny('prive', lieu.prive)
-          };
-        }
+        ]): LieuMediationNumeriqueDetailsPresentation => ({
+          id: lieu.id,
+          nom: lieu.nom,
+          adresse: [
+            lieu.adresse.voie,
+            lieu.adresse.complement_adresse,
+            lieu.adresse.code_postal,
+            `${lieu.adresse.commune.charAt(0).toUpperCase()}${lieu.adresse.commune.substring(1).toLowerCase()}`
+          ].join(' '),
+          commune: lieu.adresse.commune,
+          code_postal: lieu.adresse.code_postal,
+          services: lieu.services,
+          ...ifAny('horaires', parseHoraires(date)(lieu.horaires)),
+          ...ifAnyHorairesWithWeeks(date)(lieu.horaires),
+          ...ifAny('status', openingState(date)(lieu.horaires)),
+          ...ifAny('typologies', lieu.typologies?.map((typologie) => typologieMatchingMap.get(typologie) || '').join(', ')),
+          ...ifAny('contact', lieu.contact),
+          ...ifAny('presentation', lieu.presentation),
+          ...ifAny('date_maj', lieu.date_maj),
+          ...ifAny('publics_accueillis', lieu.publics_accueillis),
+          ...ifAny('conditions_acces', toConditionAccesDetailsPresentation(lieu.conditions_acces)),
+          ...ifAny('labels_nationaux', lieu.labels_nationaux),
+          ...ifAny('labels_autres', lieu.labels_autres),
+          ...ifAny('modalites_accompagnement', toModalitesAccompagnementPresentation(lieu.modalites_accompagnement), notEmpty),
+          ...ifAny('accessibilite', lieu.accessibilite),
+          ...ifAny('localisation', lieu.localisation),
+          ...ifAny('distance', getDistance(lieu, localisation)),
+          ...ifAny('prise_rdv', lieu.prise_rdv),
+          ...ifAny('aidants', lieu.aidants),
+          ...ifAny('source', getSourcesIfAny(lieu.id, lieu.source ?? '')),
+          ...ifAny('prive', lieu.prive)
+        })
       )
     );
   }

diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss
@@ -128,6 +128,17 @@ $font-family-icons-lower: string.to-lower-case($font-family-icons);
   }
 }
 
+.circle-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: $secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .ri-focus-3-line::before {
   content: '\ed4c';
 }