fix(search) : add event click output modal

src/app/app.module.ts

@@ -16,9 +16,10 @@ import { StructureListComponent } from './structure-list/structure-list.componen
 import { CardComponent } from './structure-list/components/card/card.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SearchComponent } from './structure-list/components/search/search.component';
-import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
 import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
 import { StructureOpeningStatusComponent } from './structure-list/components/structure-opening-status/structure-opening-status.component';
+import { ModalOutsideDirective } from './structure-list/services/modalOutside.directive';
+import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
 
 @NgModule({
   declarations: [
@@ -32,6 +33,7 @@ import { StructureOpeningStatusComponent } from './structure-list/components/str
     ModalFilterComponent,
     StructureDetailsComponent,
     StructureOpeningStatusComponent,
+    ModalOutsideDirective,
   ],
   imports: [
     BrowserModule,

src/app/structure-list/components/modal-filter/modal-filter.component.html

-<div *ngIf="modalType" fxLayout="column" fxLayoutAlign="space-between" [ngClass]="['modal', 'modal' + modalType]">
+<div
+  *ngIf="modalType"
+  (clickOutside)="emitModules(modules)"
+  fxLayout="column"
+  fxLayoutAlign="space-between"
+  [ngClass]="['modal', 'modal' + modalType]"
+>
   <div class="body-wrap">
     <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
       <div class="blockFiltre" *ngFor="let c of categories">
@@ -27,7 +33,7 @@
     </div>
     <div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
       <a (click)="clearFilters()">Effacer</a>
-      <button type="button" (click)="emitModules()">Appliquer</button>
+      <button type="button" (click)="emitModules(checkedModules)">Appliquer</button>
     </div>
   </div>
 </div>

src/app/structure-list/components/modal-filter/modal-filter.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Category } from '../../models/category.model';
-import { Filter } from '../../models/filter.model';
 import { Module } from '../../models/module.model';
 
 @Component({
@@ -25,6 +24,7 @@ export class ModalFilterComponent implements OnInit {
   searchForm: FormGroup;
   ngOnInit(): void {
     // Manage checkbox
+    console.log('init');
     this.checkedModules = this.modules.slice();
   }
 
@@ -55,10 +55,11 @@ export class ModalFilterComponent implements OnInit {
         }
       });
     });
+    this.emitModules([]);
   }
 
   // Sends an array containing all modules
-  public emitModules(): void {
-    this.searchEvent.emit(this.checkedModules);
+  public emitModules(m: Module[]): void {
+    this.searchEvent.emit(m);
   }
 }

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

@@ -28,6 +28,7 @@
   <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
     <button
       type="button"
+      [disabled]="modalTypeOpened === TypeModal[0]"
       [ngClass]="{ selected: modalTypeOpened === TypeModal[0] }"
       (click)="openModal(TypeModal[0])"
       fxLayout="row"
@@ -38,6 +39,7 @@
     </button>
     <button
       type="button"
+      [disabled]="modalTypeOpened === TypeModal[1]"
       [ngClass]="{ selected: modalTypeOpened === TypeModal[1] }"
       (click)="openModal(TypeModal[1])"
       fxLayout="row"
@@ -48,8 +50,9 @@
     </button>
     <button
       type="button"
+      [disabled]="modalTypeOpened === TypeModal[2]"
       [ngClass]="{ selected: modalTypeOpened === TypeModal[2] }"
-      (click)="openModal(TypeModal[2])"
+      (click)="modalTypeOpened === TypeModal[2] ? test() : openModal(TypeModal[2])"
       fxLayout="row"
       fxLayoutAlign="space-between center"
     >

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

@@ -75,12 +75,14 @@ export class SearchComponent implements OnInit {
     this.checkedModulesFilter = checkedModules;
 
     // Close modal after receive filters from her.
-    this.openModal(this.modalTypeOpened);
+    this.closeModal();
     inputTerm ? this.applyFilter(inputTerm) : this.applyFilter(null);
   }
 
   // Open the modal and display the list according to the right filter button
   public openModal(option: string): void {
+    console.log(this.modalTypeOpened);
+    console.log(option);
     this.categories = [];
     if (this.modalTypeOpened !== option) {
       this.modalTypeOpened = option;
@@ -89,6 +91,12 @@ export class SearchComponent implements OnInit {
       this.modalTypeOpened = null;
     }
   }
+  test() {
+    console.log('test');
+  }
+  public closeModal(): void {
+    this.modalTypeOpened = null;
+  }
 
   private fromStringToIdExcel(categ: string): string {
     const splitStr = categ.toLowerCase().split(' ');

src/app/structure-list/services/modalOutside.directive.ts

+/* tslint:disable:member-ordering */
+import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core';
+
+@Directive({
+  selector: '[clickOutside]',
+})
+export class ModalOutsideDirective {
+  constructor(private _elementRef: ElementRef) {}
+
+  @Output('clickOutside') clickOutside: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('document:mousedown', ['$event.target']) onMouseEnter(targetElement) {
+    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
+    if (!clickedInside) {
+      this.clickOutside.emit(null);
+    }
+  }
+}