From f3ff70b9accc3381e9ff5ee85c53bc8fee44a302 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Tue, 3 Nov 2020 12:32:19 +0100
Subject: [PATCH] fix(search) : add event click output modal
---
src/app/app.module.ts | 4 +++-
.../modal-filter/modal-filter.component.html | 10 ++++++++--
.../modal-filter/modal-filter.component.ts | 7 ++++---
.../components/search/search.component.html | 5 ++++-
.../components/search/search.component.ts | 10 +++++++++-
.../services/modalOutside.directive.ts | 18 ++++++++++++++++++
6 files changed, 46 insertions(+), 8 deletions(-)
create mode 100644 src/app/structure-list/services/modalOutside.directive.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a2af3088e..a737e0f0f 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.html b/src/app/structure-list/components/modal-filter/modal-filter.component.html
index ec2d69fb0..57437de6c 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.html
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.html
@@ -1,4 +1,10 @@
-<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>
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.ts b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
index 2f46075fa..ee1a02278 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.ts
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
@@ -1,7 +1,6 @@
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);
}
}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 5bd17e8fd..e8acc2e99 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/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"
>
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 10f0393f2..604a1967a 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/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(' ');
diff --git a/src/app/structure-list/services/modalOutside.directive.ts b/src/app/structure-list/services/modalOutside.directive.ts
new file mode 100644
index 000000000..b8ebc284c
--- /dev/null
+++ b/src/app/structure-list/services/modalOutside.directive.ts
@@ -0,0 +1,18 @@
+/* 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);
+ }
+ }
+}
--
GitLab