From 5f1db7c6b99d0343e5f726eda3e5518b4d6a6033 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Tue, 20 Oct 2020 17:38:22 +0200
Subject: [PATCH] fix(search) : fix submit search when press enter key

---
 .../components/search/search.component.html   | 21 ++++++++++++------
 .../components/search/search.component.ts     | 22 ++++++++++---------
 .../structure-list/structure-list.module.ts   |  4 ++--
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 709182b53..8f8826d2e 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/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>
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 2bc7ad008..a2c205d20 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -1,4 +1,6 @@
 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);
   }
 
diff --git a/src/app/structure-list/structure-list.module.ts b/src/app/structure-list/structure-list.module.ts
index 9947bca5b..eac1b0ac0 100644
--- a/src/app/structure-list/structure-list.module.ts
+++ b/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 {}
-- 
GitLab