From 0a500ad582eeddb4c1001456c04b591df0b5d772 Mon Sep 17 00:00:00 2001 From: PhilippeL Date: Tue, 25 Feb 2020 08:52:09 -0500 Subject: [PATCH 1/3] feat(context): allow user to filter context list --- .../context-list/context-list.component.html | 22 ++++++- .../context-list/context-list.component.scss | 8 +++ .../context-list/context-list.component.ts | 64 ++++++++++++++++++- packages/context/src/lib/context.module.ts | 8 ++- packages/context/src/locale/en.context.json | 3 +- packages/context/src/locale/fr.context.json | 3 +- .../search-results-tool.component.ts | 9 ++- 7 files changed, 108 insertions(+), 9 deletions(-) create mode 100644 packages/context/src/lib/context-manager/context-list/context-list.component.scss diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.html b/packages/context/src/lib/context-manager/context-list/context-list.component.html index b2e7d5fd96..3d05ec2f4c 100644 --- a/packages/context/src/lib/context-manager/context-list/context-list.component.html +++ b/packages/context/src/lib/context-manager/context-list/context-list.component.html @@ -1,5 +1,25 @@ - + + + + + + + diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.scss b/packages/context/src/lib/context-manager/context-list/context-list.component.scss new file mode 100644 index 0000000000..0a97044532 --- /dev/null +++ b/packages/context/src/lib/context-manager/context-list/context-list.component.scss @@ -0,0 +1,8 @@ +.contextFilter { + width: calc(100% - 10px); + margin: 5px; +} + +.clear-button{ + padding-right: 5px; +} diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.ts b/packages/context/src/lib/context-manager/context-list/context-list.component.ts index 61aa8f9fb5..b6eed52aaa 100644 --- a/packages/context/src/lib/context-manager/context-list/context-list.component.ts +++ b/packages/context/src/lib/context-manager/context-list/context-list.component.ts @@ -3,24 +3,30 @@ import { Input, Output, EventEmitter, - ChangeDetectorRef + ChangeDetectorRef, + OnInit } from '@angular/core'; import { AuthService } from '@igo2/auth'; import { DetailedContext, ContextsList } from '../shared/context.interface'; +import { Subscription, BehaviorSubject } from 'rxjs'; @Component({ selector: 'igo-context-list', - templateUrl: './context-list.component.html' + templateUrl: './context-list.component.html', + styleUrls: ['./context-list.component.scss'] }) -export class ContextListComponent { +export class ContextListComponent implements OnInit { + contexts$: BehaviorSubject = new BehaviorSubject(undefined); + @Input() get contexts(): ContextsList { return this._contexts; } set contexts(value: ContextsList) { this._contexts = value; + this.contexts$.next(value); this.cdRef.detectChanges(); } private _contexts: ContextsList = { ours: [] }; @@ -60,5 +66,57 @@ export class ContextListComponent { public: 'igo.context.contextManager.publicContexts' }; + /** + * Context filter term + */ + @Input() + set term(value: string) { + this.term$.next(value); + } + get term(): string { + return this.term$.value; + } + public term$: BehaviorSubject = new BehaviorSubject(''); + term$$: Subscription; + constructor(private cdRef: ChangeDetectorRef, public auth: AuthService) {} + + ngOnInit() { + this.term$$ = this.term$.subscribe((value) => { + if (value === '') { + this.contexts$.next(this.contexts); + } + + if (value.length) { + let ours; let publics; let shared; + ours = this.contexts.ours.filter((context) => { + const filterNormalized = value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + const contextTitleNormalized = context.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + return contextTitleNormalized.includes(filterNormalized); + }); + const updateContexts: ContextsList = { + ours + }; + + if (this.contexts.public) { + publics = this.contexts.public.filter((context) => { + const filterNormalized = value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + const contextTitleNormalized = context.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + return contextTitleNormalized.includes(filterNormalized); + }); + updateContexts.public = publics; + } + if (this.contexts.shared) { + shared = this.contexts.shared.filter((context) => { + const filterNormalized = value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + const contextTitleNormalized = context.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + return contextTitleNormalized.includes(filterNormalized); + }); + updateContexts.shared = shared; + } + + this.contexts$.next(updateContexts); + } + }); + } } diff --git a/packages/context/src/lib/context.module.ts b/packages/context/src/lib/context.module.ts index e0dd8df732..1d29f8c77e 100644 --- a/packages/context/src/lib/context.module.ts +++ b/packages/context/src/lib/context.module.ts @@ -1,4 +1,8 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; +import { + MatInputModule, + MatFormFieldModule +} from '@angular/material'; import { IgoContextManagerModule } from './context-manager/context-manager.module'; import { IgoContextMapButtonModule } from './context-map-button/context-map-button.module'; @@ -6,7 +10,9 @@ import { IgoShareMapModule } from './share-map/share-map.module'; import { IgoSidenavModule } from './sidenav/sidenav.module'; @NgModule({ - imports: [], + imports: [ + MatInputModule, + MatFormFieldModule], declarations: [], exports: [ IgoContextManagerModule, diff --git a/packages/context/src/locale/en.context.json b/packages/context/src/locale/en.context.json index 4346b773b3..a6e47e90c9 100644 --- a/packages/context/src/locale/en.context.json +++ b/packages/context/src/locale/en.context.json @@ -50,7 +50,8 @@ "ourContexts": "Our contexts", "publicContexts": "Public contexts", "save": "Save this context", - "sharedContexts": "Shared contexts" + "sharedContexts": "Shared contexts", + "filterPlaceHolder": "Filer the contexts list" }, "permission": { "addBtn": "Add", diff --git a/packages/context/src/locale/fr.context.json b/packages/context/src/locale/fr.context.json index b682ab03fd..6d19561893 100644 --- a/packages/context/src/locale/fr.context.json +++ b/packages/context/src/locale/fr.context.json @@ -50,7 +50,8 @@ "ourContexts": "Vos contextes", "publicContexts": "Contextes publics", "save": "Sauvegarder ce contexte", - "sharedContexts": "Contextes partagés" + "sharedContexts": "Contextes partagés", + "filterPlaceHolder": "Filtrer la liste des contextes" }, "permission": { "addBtn": "Ajouter", diff --git a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts index b12bcd8fcc..1a1d0268b5 100644 --- a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts +++ b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input, OnInit, OnDestroy } from '@angular/core'; import { Observable, BehaviorSubject, Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; import olFormatGeoJSON from 'ol/format/GeoJSON'; @@ -40,7 +40,7 @@ import { SearchState } from '../search.state'; templateUrl: './search-results-tool.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) -export class SearchResultsToolComponent implements OnInit { +export class SearchResultsToolComponent implements OnInit, OnDestroy { /** * to show hide results icons */ @@ -121,6 +121,11 @@ export class SearchResultsToolComponent implements OnInit { this.settingsChange$.next(true); }); } + + ngOnDestroy() { + this.searchTerm$$.unsubscribe(); + } + /** * Try to add a feature to the map when it's being focused * @internal From bc9268d356937f6c6e7e716c602bf0e41ef16431 Mon Sep 17 00:00:00 2001 From: PhilippeL Date: Tue, 25 Feb 2020 09:13:47 -0500 Subject: [PATCH 2/3] light interface changes --- .../context-list/context-list.component.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.scss b/packages/context/src/lib/context-manager/context-list/context-list.component.scss index 0a97044532..1ce6b46b7d 100644 --- a/packages/context/src/lib/context-manager/context-list/context-list.component.scss +++ b/packages/context/src/lib/context-manager/context-list/context-list.component.scss @@ -1,8 +1,13 @@ .contextFilter { width: calc(100% - 10px); margin: 5px; + padding-left: 6px; } -.clear-button{ +.clear-button { padding-right: 5px; } + +mat-form-field { + height: 40px; +} From f9ea833b51b54d8a44de15ad5425b54fb730f657 Mon Sep 17 00:00:00 2001 From: PhilippeL Date: Fri, 28 Feb 2020 10:44:14 -0500 Subject: [PATCH 3/3] Add a display control for the context filter --- .../context-list/context-list.component.html | 2 +- .../context-list/context-list.component.scss | 2 +- .../context-list/context-list.component.ts | 22 +++++++++++++++++++ .../context-list/context-list.enum.ts | 5 +++++ 4 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 packages/context/src/lib/context-manager/context-list/context-list.enum.ts diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.html b/packages/context/src/lib/context-manager/context-list/context-list.component.html index 3d05ec2f4c..71330f6ee3 100644 --- a/packages/context/src/lib/context-manager/context-list/context-list.component.html +++ b/packages/context/src/lib/context-manager/context-list/context-list.component.html @@ -1,5 +1,5 @@ - + = new BehaviorSubject(''); term$$: Subscription; + public showContextFilter = ContextListControlsEnum.default; + + public thresholdToFilter = 5; + constructor(private cdRef: ChangeDetectorRef, public auth: AuthService) {} ngOnInit() { @@ -119,4 +124,21 @@ export class ContextListComponent implements OnInit { } }); } + + public showFilter() { + switch (this.showContextFilter) { + case ContextListControlsEnum.always: + return true; + case ContextListControlsEnum.never: + return false; + default: + let totalLength = this.contexts.ours.length; + this.contexts.public ? totalLength += this.contexts.public.length : totalLength += 0; + this.contexts.shared ? totalLength += this.contexts.shared.length : totalLength += 0; + if (totalLength >= this.thresholdToFilter) { + return true; + } + return false; + } + } } diff --git a/packages/context/src/lib/context-manager/context-list/context-list.enum.ts b/packages/context/src/lib/context-manager/context-list/context-list.enum.ts new file mode 100644 index 0000000000..5199f941c9 --- /dev/null +++ b/packages/context/src/lib/context-manager/context-list/context-list.enum.ts @@ -0,0 +1,5 @@ +export enum ContextListControlsEnum { + always = 'always', + never = 'never', + default = 'default' +}