fix: carto zoom after orientation (#387)

* fix: carto zoom after orientation * fix: test lieux presenter
anct-cartographie-nationale · Nov 16, 2023 · f50e795 · f50e795
1 parent 4868267
commit f50e795
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 37 deletions.
diff --git a/src/features/adresse/components/user-location/user-location.component.ts b/src/features/adresse/components/user-location/user-location.component.ts
@@ -38,6 +38,8 @@ export class UserLocationComponent implements OnInit {
 
   @Input() placeholder: string = 'Entrez une adresse';
 
+  @Input() fromOrientation: boolean = false;
+
   private readonly _initialSearch$: BehaviorSubject<string> = new BehaviorSubject<string>('');
 
   private readonly _searchTerm$: Subject<string> = new Subject<string>();
@@ -71,7 +73,11 @@ export class UserLocationComponent implements OnInit {
     distinctUntilChanged(),
     switchMap(
       (searchTerm: string): Observable<ResultFoundPresentation<{ type: AddressType }>[][]> =>
-        forkJoin(this._searchables.map((searchable: Searchable<{ type: AddressType }>) => searchable.search$(searchTerm)))
+        forkJoin(
+          this._searchables.map((searchable: Searchable<{ type: AddressType }>) =>
+            searchable.search$(searchTerm, this.fromOrientation)
+          )
+        )
     ),
     map((resultsToCombine: ResultFoundPresentation<{ type: AddressType }>[][]) => resultsToCombine.flat()),
     tap(

diff --git a/src/features/adresse/configuration/searchable.configuration.ts b/src/features/adresse/configuration/searchable.configuration.ts
@@ -7,7 +7,7 @@ export type WithType<ResultType = string> = {
 };
 
 export interface Searchable<T extends WithType = WithType> {
-  search$(searchTerm: string): Observable<ResultFoundPresentation<T>[]>;
+  search$(searchTerm: string, fromOrientation?: boolean): Observable<ResultFoundPresentation<T>[]>;
 }
 
 export const SEARCHABLE_TOKEN: InjectionToken<Searchable> = new InjectionToken<Searchable>('address.searchable');
diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.html b/src/features/cartographie/layouts/cartographie/cartographie.layout.html
@@ -36,6 +36,7 @@ <h3 class="card-title text-primary">
         placeholder="Recherchez un lieu ou une adresse"
         class="me-3 d-sm-inline-block d-none"
         [adresse]="(defaultAddress$ | async) ?? ''"
+        [fromOrientation]="this.fromOrientation"
         (resultFound)="onResultFound($event)"></app-user-location>
       <app-location-breadcrumb
         id="breadcrumb"
@@ -95,6 +96,7 @@ <h3 class="card-title text-primary">
             class="m-3 d-sm-none d-block"
             [adresse]="(defaultAddress$ | async) ?? ''"
             [fullWidth]="true"
+            [fromOrientation]="this.fromOrientation"
             (resultFound)="onResultFound($event)"></app-user-location>
           <app-location-breadcrumb
             class="d-lg-none d-block"

diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.ts b/src/features/cartographie/layouts/cartographie/cartographie.layout.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, Optional, ViewChild } from '@angular/core';
-import { ActivatedRoute, ParamMap, Router, RouterOutlet } from '@angular/router';
-import { BehaviorSubject, Observable, of, Subject, tap, withLatestFrom } from 'rxjs';
+import { ActivatedRoute, ParamMap, Params, Router, RouterOutlet } from '@angular/router';
+import { BehaviorSubject, combineLatest, Observable, of, Subject, tap, withLatestFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { LngLatBounds, MapLibreEvent } from 'maplibre-gl';
 import { Localisation } from '@gouvfr-anct/lieux-de-mediation-numerique';
@@ -85,7 +85,9 @@ export class CartographieLayout {
   public resultsCount$: Observable<number> = this._resultsCount$.asObservable();
 
   private _lieuxMediationNumeriqueListPresenterArgs: [Observable<Localisation>, Observable<FilterPresentation>, Date] = [
-    of(toLocalisationFromFilterFormPresentation(toFilterFormPresentationFromQuery(this.route.snapshot.queryParams))),
+    this.route.queryParams.pipe(
+      map((queryParams: Params) => toLocalisationFromFilterFormPresentation(toFilterFormPresentationFromQuery(queryParams)))
+    ),
     this.route.queryParams.pipe(map(toFilterFormPresentationFromQuery)),
     new Date()
   ];
@@ -117,31 +119,31 @@ export class CartographieLayout {
       })
     );
 
-  public lieuxMediationNumerique$: Observable<LieuMediationNumeriqueOnMapPresentation[]> =
-    this._lieuxMediationNumeriqueListPresenter
-      .lieuxMediationNumeriqueByDistance$(
-        ...this._lieuxMediationNumeriqueListPresenterArgs,
-        this.markersPresenter.boundingBox$,
-        this.currentZoom$
-      )
-      .pipe(
-        map((lieux: LieuMediationNumeriquePresentation[]): LieuMediationNumeriquePresentation[] =>
-          toLieuxFilteredByDepartement(lieux, this.getRouteParam('nomDepartement'))
-        ),
-        withLatestFrom(this._currentZoom$),
-        map(toLieuxWithOpeningState(new Date())),
-        map(toLieuxByLongitude),
-        tap((lieux: LieuMediationNumeriquePresentation[]): void => {
-          lieux.length > 0 && this._resultsCount$.next(lieux.length);
-          this._loadingState$.next(false);
-        })
-      );
+  public lieuxMediationNumerique$: Observable<LieuMediationNumeriqueOnMapPresentation[]> = combineLatest([
+    this._lieuxMediationNumeriqueListPresenter.lieuxMediationNumeriqueByDistance$(
+      ...this._lieuxMediationNumeriqueListPresenterArgs,
+      this.markersPresenter.boundingBox$,
+      this.currentZoom$
+    ),
+    this.route.paramMap
+  ]).pipe(
+    map(([lieux]: [LieuMediationNumeriquePresentation[], ParamMap]): LieuMediationNumeriquePresentation[] =>
+      toLieuxFilteredByDepartement(lieux, this.getRouteParam('nomDepartement'))
+    ),
+    withLatestFrom(this._currentZoom$),
+    map(toLieuxWithOpeningState(new Date())),
+    map(toLieuxByLongitude),
+    tap((lieux: LieuMediationNumeriquePresentation[]): void => {
+      lieux.length > 0 && this._resultsCount$.next(lieux.length);
+      this._loadingState$.next(false);
+    })
+  );
 
   public allLieuxMediationNumerique$: Observable<LieuMediationNumeriquePresentation[]> =
     this._lieuxMediationNumeriqueListPresenter.lieuxMediationNumeriqueByDistance$(of(NO_LOCALISATION));
 
   public defaultAddress$: Observable<string | null> = this.route.queryParamMap.pipe(
-    map((paramMap: ParamMap) => (this.fromOrientation ? null : paramMap.get('address')))
+    map((paramMap: ParamMap) => paramMap.get('address'))
   );
 
   public fromOrientation: boolean = Object.keys(this.route.snapshot.queryParams).length > 0;
@@ -242,6 +244,7 @@ export class CartographieLayout {
     result.localisation &&
       this.router.navigate(result.payload?.id ? ['/cartographie', result.payload.id, 'details'] : ['/cartographie'], {
         queryParams: {
+          address: result.label,
           latitude: result.localisation.latitude,
           longitude: result.localisation.longitude
         },

diff --git a/...res/core/presenters/lieux-mediation-numerique/lieux-mediation-numerique.presenter.spec.ts b/...res/core/presenters/lieux-mediation-numerique/lieux-mediation-numerique.presenter.spec.ts
@@ -2461,7 +2461,7 @@ describe('lieux-mediation-numerique-list presenter', (): void => {
     );
 
     const searchResults: ResultFoundPresentation<{ id: string; type: string }>[] = await firstValueFrom(
-      lieuxMediationNumeriqueListPresenter.search$('ANONYM', 2)
+      lieuxMediationNumeriqueListPresenter.search$('ANONYM', false, 2)
     );
 
     expect<ResultFoundPresentation<{ id: string; type: string }>[]>(searchResults).toStrictEqual([

diff --git a/...features/core/presenters/lieux-mediation-numerique/lieux-mediation-numerique.presenter.ts b/...features/core/presenters/lieux-mediation-numerique/lieux-mediation-numerique.presenter.ts
@@ -378,17 +378,23 @@ export class LieuxMediationNumeriquePresenter implements Searchable<{ id: string
     );
   }
 
-  public search$(searchTerm: string, limit: number = 5): Observable<ResultFoundPresentation<{ id: string; type: 'place' }>[]> {
-    return this.lieuxMediationNumerique$.pipe(
-      map((lieux: LieuMediationNumerique[]): ResultFoundPresentation<{ id: string; type: 'place' }>[] => {
-        const matchingByName: ResultFoundPresentation<{ id: string; type: 'place' }>[] = lieux
-          .filter(onlyNomMatching(searchTerm))
-          .slice(0, limit)
-          .map(toResultFound);
-
-        return matchingByName.length === 5 ? matchingByName : appendSearchByAdresse(matchingByName, lieux, searchTerm);
-      })
-    );
+  public search$(
+    searchTerm: string,
+    fromOrientation?: boolean,
+    limit: number = 5
+  ): Observable<ResultFoundPresentation<{ id: string; type: 'place' }>[]> {
+    return fromOrientation
+      ? of([])
+      : this.lieuxMediationNumerique$.pipe(
+          map((lieux: LieuMediationNumerique[]): ResultFoundPresentation<{ id: string; type: 'place' }>[] => {
+            const matchingByName: ResultFoundPresentation<{ id: string; type: 'place' }>[] = lieux
+              .filter(onlyNomMatching(searchTerm))
+              .slice(0, limit)
+              .map(toResultFound);
+
+            return matchingByName.length === 5 ? matchingByName : appendSearchByAdresse(matchingByName, lieux, searchTerm);
+          })
+        );
   }
 
   public lieuxMediationNumerique$: Observable<LieuMediationNumerique[]> = this.lieuxMediationNumeriqueRepository.getAll$();