Merge branch '454-2-annuaire-url-suite-a-une-recherche' into 'dev'

feat(registry): use URL params

See merge request !864

src/app/annuaire/annuaire-header/annuaire-header.component.html

 <div class="searchContainer">
   <div class="searchBarAndFilters">
-    <app-search-bar [(value)]="searchInput" (searchSubmitted)="applyFilter()" />
+    <app-search-bar [(value)]="searchInput" (searchSubmitted)="onSearchSubmitted($event)" />
     <div class="filters isntPhoneContent" (appClickOutside)="closeModal()">
       <app-collapsable-filter
         [label]="'Fonction'"

src/app/annuaire/annuaire-header/annuaire-header.component.ts

@@ -12,10 +12,8 @@ import { SearchQuery } from '../models/searchQuery.model';
 })
 export class AnnuaireHeaderComponent implements OnInit, OnChanges {
   @Input() shouldResetFilters = 0;
-  @Input() shouldShowNextPage = 0;
   @Output() searchEvent = new EventEmitter<SearchQuery>();
 
-  public addStructureFormModal = false;
   public modalTypeOpened: TypeModal;
   public employersFiltersActive = false;
   public jobsFiltersActive = false;
@@ -29,51 +27,80 @@ export class AnnuaireHeaderComponent implements OnInit, OnChanges {
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private route: ActivatedRoute,
     private router: Router,
     public searchService: SearchService,
   ) {}
 
   async ngOnInit(): Promise<void> {
+    this.loadQueryParams();
     // Will store the different categories
     await this.loadFilters();
-    const queryString = this.activatedRoute.snapshot.queryParamMap.get('search');
-    // Use existing query if back to the page or init the query
-    if (!this.searchService.annuaireSearchQuery) {
-      this.searchService.annuaireSearchQuery = { search: '', page: 1, jobFilters: [], employerFilters: [] };
-    }
-    if (queryString) {
-      this.searchService.annuaireSearchQuery.search = queryString;
+
+    if (this.searchService.previousResult$.getValue().docs.length === 0) {
+      this.applyFilter();
     }
-    this.splitFilters(this.searchService.checkedFilterList);
+  }
 
-    this.searchInput = this.searchService.annuaireSearchQuery.search || '';
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.shouldResetFilters?.currentValue !== 0) {
+      this.resetFilters();
+    }
+  }
 
-    // Prevent re-fetching if previous data
-    if (this.searchService.previousResult$.getValue().docs.length !== 0) return;
-    this.searchEvent.emit({
+  private loadQueryParams(): void {
+    const queryParams = this.activatedRoute.snapshot.queryParams;
+    this.searchInput = queryParams['search'] ?? '';
+    this.jobFilterChecked = queryParams['jobs']?.split('|') ?? [];
+    this.employerFilterChecked = queryParams['employers']?.split('|') ?? [];
+    this.searchService.checkedFilterList = [...this.jobFilterChecked, ...this.employerFilterChecked];
+    this.searchService.annuaireSearchQuery = {
       search: this.searchInput,
+      page: Number(queryParams['page']) || 1,
       jobFilters: this.jobFilterChecked,
       employerFilters: this.employerFilterChecked,
-    });
+    };
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.shouldResetFilters && changes.shouldResetFilters.currentValue !== 0) {
-      this.resetFilters();
+  public onSearchSubmitted(value: string): void {
+    this.searchInput = value;
+    this.applyFilter();
+  }
+
+  private updateQueryParams(): void {
+    const queryParams: Record<string, string> = {};
+
+    if (this.searchInput.trim()) {
+      queryParams.search = this.searchInput.trim();
     }
-    if (
-      changes.shouldShowNextPage &&
-      !changes.shouldShowNextPage.firstChange &&
-      changes.shouldShowNextPage.currentValue > 1
-    ) {
-      this.searchEvent.emit({
-        search: this.searchInput,
-        page: changes.shouldShowNextPage.currentValue,
-        jobFilters: this.jobFilterChecked,
-        employerFilters: this.employerFilterChecked,
-      });
+
+    if (this.jobFilterChecked.length) {
+      queryParams.jobs = this.jobFilterChecked.join('|');
+    }
+
+    if (this.employerFilterChecked.length) {
+      queryParams.employers = this.employerFilterChecked.join('|');
     }
+
+    // Delay to avoid error in console: "NG0100: ExpressionChangedAfterItHasBeenCheckedError"
+    setTimeout(
+      () =>
+        this.router.navigate([], {
+          relativeTo: this.activatedRoute,
+          queryParams: queryParams,
+        }),
+      1,
+    );
+  }
+
+  public applyFilter(page = 1): void {
+    this.searchEvent.emit({
+      search: this.searchInput.trim(),
+      page: page,
+      jobFilters: this.jobFilterChecked,
+      employerFilters: this.employerFilterChecked,
+    });
+
+    this.updateQueryParams();
   }
 
   /** Get the categories for each modal type */
@@ -89,30 +116,6 @@ export class AnnuaireHeaderComponent implements OnInit, OnChanges {
     this.countCheckedFilters();
   }
 
-  /** Sends an array containing all filters */
-  public applyFilter(): void {
-    this.shouldResetFilters = 0;
-    // Add search input filter
-    if (this.searchInput) {
-      this.router.navigate(['/annuaire'], {
-        relativeTo: this.route,
-        queryParams: { search: this.searchInput },
-        queryParamsHandling: 'merge',
-      });
-    } else {
-      this.router.navigate(['/annuaire'], {
-        relativeTo: this.route,
-      });
-    }
-    this.splitFilters(this.searchService.checkedFilterList);
-    this.searchEvent.emit({
-      search: this.searchInput,
-      page: 1,
-      jobFilters: this.jobFilterChecked,
-      employerFilters: this.employerFilterChecked,
-    });
-  }
-
   private splitFilters(checkedFilterList: string[]): void {
     this.employerFilterChecked = checkedFilterList.filter((filter) => this.employerTypes.includes(filter));
     this.jobFilterChecked = checkedFilterList.filter((filter) => this.jobTypes.includes(filter));
@@ -120,6 +123,7 @@ export class AnnuaireHeaderComponent implements OnInit, OnChanges {
 
   public fetchResults(checkedFilters: string[]): void {
     this.searchService.checkedFilterList = checkedFilters;
+    this.splitFilters(checkedFilters);
     this.closeModal();
     this.applyFilter();
   }
@@ -137,12 +141,7 @@ export class AnnuaireHeaderComponent implements OnInit, OnChanges {
 
   /** Open the modal and display the list according to the right filter button */
   public openModal(modalType: TypeModal): void {
-    // if modal already opened, reset type
-    if (this.modalTypeOpened === modalType) {
-      this.closeModal();
-    } else if (this.modalTypeOpened !== modalType) {
-      this.modalTypeOpened = modalType;
-    }
+    this.modalTypeOpened = this.modalTypeOpened === modalType ? undefined : modalType;
   }
 
   public closeModal(): void {
@@ -165,21 +164,26 @@ export class AnnuaireHeaderComponent implements OnInit, OnChanges {
     this.jobsFiltersActive = false;
     this.employerFilterChecked = [];
     this.jobFilterChecked = [];
-    this.searchEvent.emit({ search: '', page: 1, jobFilters: [], employerFilters: [] });
+
     // Delay to avoid error in console: "NG0100: ExpressionChangedAfterItHasBeenCheckedError"
-    setTimeout(() => this.router.navigate(['/annuaire']), 1);
+    setTimeout(
+      () =>
+        this.router.navigate([], {
+          relativeTo: this.activatedRoute,
+          queryParams: {},
+        }),
+      1,
+    );
   }
 
   public removeFilter(filter: string): void {
     const index = this.searchService.checkedFilterList.findIndex((checkedFilter: string) => checkedFilter === filter);
-    this.searchService.checkedFilterList.splice(index, 1);
-    this.splitFilters(this.searchService.checkedFilterList);
-    this.countCheckedFilters();
-    this.searchEvent.emit({
-      search: this.searchInput,
-      page: 1,
-      jobFilters: this.jobFilterChecked,
-      employerFilters: this.employerFilterChecked,
-    });
+    if (index !== -1) {
+      this.searchService.checkedFilterList.splice(index, 1);
+      this.splitFilters(this.searchService.checkedFilterList);
+      this.countCheckedFilters();
+      this.updateQueryParams();
+      this.applyFilter();
+    }
   }
 }

src/app/annuaire/annuaire.component.html

@@ -4,7 +4,6 @@
     <app-annuaire-header
       class="hide-on-print"
       [shouldResetFilters]="resetFilters"
-      [shouldShowNextPage]="searchService.annuaireSearchQuery?.page"
       (searchEvent)="searchUsers($event)"
     />
     <app-result-list

src/app/annuaire/annuaire.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { UserAnnuary } from '../models/user.model';
 import { AuthService } from '../services/auth.service';
 import { SearchService } from '../structure-list/services/search.service';
@@ -13,7 +14,9 @@ export class AnnuaireComponent implements OnInit {
   constructor(
     public searchService: SearchService,
     private authService: AuthService,
+    private route: ActivatedRoute,
   ) {}
+
   public userList: UserAnnuary[] = [];
   public totalUserResult: number;
   public resetFilters = 0;
@@ -21,6 +24,16 @@ export class AnnuaireComponent implements OnInit {
   private isAlreadySearching = false;
 
   ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      const searchQuery: SearchQuery = {
+        search: params['search'] || '',
+        page: Number(params['page']) || 1,
+        jobFilters: params['jobs'] ? params['jobs'].split('|') : [],
+        employerFilters: params['employers'] ? params['employers'].split('|') : [],
+      };
+      this.searchUsers(searchQuery);
+    });
+
     if (this.userIsLoggedIn()) {
       this.userList = this.searchService.previousResult$.getValue().docs;
       this.totalUserResult = this.searchService.previousResult$.getValue().count;
@@ -68,7 +81,11 @@ export class AnnuaireComponent implements OnInit {
   public shouldResetFilters(): void {
     this.resetFilters++;
   }
+
   public showMore(): void {
-    this.searchService.annuaireSearchQuery.page++;
+    if (this.searchService.annuaireSearchQuery) {
+      this.searchService.annuaireSearchQuery.page++;
+      this.searchUsers(this.searchService.annuaireSearchQuery);
+    }
   }
 }

src/app/annuaire/result-list/result-list.component.ts

@@ -53,12 +53,15 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
       }, 0);
     }
   }
+
   public goLogin(): void {
     this.router.navigate(['/connexion'], { queryParams: { returnUrl: '/annuaire' } });
   }
+
   public goRegister(): void {
     this.router.navigateByUrl('/formulaire/compte');
   }
+
   public resetFilters(): void {
     this.resetEvent.emit();
   }