fix(search) : fix submit search when press enter key

src/app/structure-list/components/search/search.component.html

@@ -2,12 +2,19 @@
   <span class="title">Acteurs de la médiation</span>
 </div>
 <div class="content" fxLayout="column">
-  <div class="searchSection" fxLayout="row" fxLayoutGap="1.5vw">
-    <div class="icon">
-      <div class="ico-pin-search grey"></div>
-    </div>
-    <input type="text" [(ngModel)]="searchTerm" placeholder="Rechercher une adresse, une association..." />
-    <button type="button" (click)="applyFilter()">Rechercher</button>
+  <div class="searchSection">
+    <form
+      [formGroup]="searchForm"
+      fxLayout="row"
+      fxLayoutGap="1.5vw"
+      (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
+    >
+      <div class="icon">
+        <div class="ico-pin-search grey"></div>
+      </div>
+      <input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
+      <button type="submit">Rechercher</button>
+    </form>
   </div>
 
   <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
@@ -76,7 +83,7 @@
     </div>
     <div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
       <a (click)="clearFilters()">Effacer</a>
-      <button type="button" (click)="applyFilter(modalTypeOpened)">Appliquer</button>
+      <button type="button" (click)="applyFilter(searchForm.value.searchTerm)">Appliquer</button>
     </div>
   </div>
 </div>

src/app/structure-list/components/search/search.component.ts

 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { stringToKeyValue } from '@angular/flex-layout/extended/typings/style/style-transforms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Category } from '../../models/category.model';
 import { Filter } from '../../models/filter.model';
 import { Module } from '../../models/module.model';
@@ -10,12 +12,16 @@ import { SearchService } from '../../services/search.service';
   styleUrls: ['./search.component.scss'],
 })
 export class SearchComponent implements OnInit {
-  constructor(private searchService: SearchService) {}
+  constructor(private searchService: SearchService, private fb: FormBuilder) {
+    this.searchForm = this.fb.group({
+      searchTerm: '',
+    });
+  }
 
   @Output() searchEvent = new EventEmitter();
 
-  // Search input variable
-  searchTerm: string = '';
+  // Form search input
+  searchForm: FormGroup;
 
   // Button variable
   modalType: string[] = ['accompagnement', 'formations', 'plusFiltres'];
@@ -57,14 +63,13 @@ export class SearchComponent implements OnInit {
   }
 
   // Sends an array containing all filters
-  public applyFilter(): void {
+  public applyFilter(term: string): void {
     this.checkedModulesFilter = this.checkedModules.slice();
     this.openModal(this.modalTypeOpened);
-
     // Send search input filter
     let filters: Filter[] = [];
-    if (this.searchTerm) {
-      filters.push(new Filter('nom', this.searchTerm, false));
+    if (term) {
+      filters.push(new Filter('nom', term, false));
     }
 
     // Send checked box filter
@@ -89,9 +94,6 @@ export class SearchComponent implements OnInit {
 
   // Return index of a specific module in array modules
   public getIndex(id: number, categ: string): number {
-    console.log(this.checkedModules);
-    console.log(id);
-    console.log(categ);
     return this.checkedModules.findIndex((m: Module) => m.id === id && m.text === categ);
   }
 

src/app/structure-list/structure-list.module.ts

@@ -5,11 +5,11 @@ import { CardComponent } from './components/card/card.component';
 import { SearchComponent } from './components/search/search.component';
 import { HttpClientModule } from '@angular/common/http';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [StructureListComponent, CardComponent, SearchComponent],
-  imports: [CommonModule, HttpClientModule, FlexLayoutModule, FormsModule],
+  imports: [CommonModule, HttpClientModule, FlexLayoutModule, FormsModule, ReactiveFormsModule],
   exports: [StructureListComponent],
 })
 export class StructureListModule {}