From 96e98a075a96d3b26c4e00a95e473f12f5cd1485 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Tue, 24 Mar 2020 14:45:39 -0400
Subject: [PATCH 01/13] feat(context): add context list tool

---
 .../context/context/context.component.html    |   2 +-
 .../context-list/context-list.component.html  |  25 ++-
 .../context-list/context-list.component.scss  |   2 +-
 .../context-list/context-list.component.ts    | 194 +++++++++++++++---
 .../context-manager/context-manager.module.ts |  12 +-
 .../context-map-button.module.ts              |   2 +-
 packages/context/src/locale/en.context.json   |   4 +-
 packages/context/src/locale/fr.context.json   |   4 +-
 .../context-manager-tool.component.html       |   1 +
 .../context-manager-tool.component.ts         |   7 +-
 10 files changed, 212 insertions(+), 41 deletions(-)

diff --git a/demo/src/app/context/context/context.component.html b/demo/src/app/context/context/context.component.html
index 0a7b6724f9..21543d2fbe 100644
--- a/demo/src/app/context/context/context.component.html
+++ b/demo/src/app/context/context/context.component.html
@@ -20,7 +20,7 @@
   </igo-map-browser>
 
   <igo-panel title="Contexts list">
-    <igo-context-list igoContextListBinding></igo-context-list>
+    <igo-context-list igoContextListBinding [map]="map"></igo-context-list>
   </igo-panel>
 
   <igo-panel title="Layers">
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 71330f6ee3..2c12000e43 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
@@ -13,10 +13,33 @@
       *ngIf="term.length"
       aria-label="Clear"
       color="warn"
-      (click)="term = ''">
+      (click)="clearFilter()">
       <mat-icon svgIcon="close"></mat-icon>
     </button>
   </mat-form-field>
+  <button
+  *ngIf="!sortedAlpha"
+  mat-icon-button
+  [matTooltip]="'igo.context.contextManager.sortAlphabetically' | translate"
+  matTooltipShowDelay="500"
+  (click)="toggleSort(true)">
+  <mat-icon color="primary" svgIcon="sort-alphabetical"></mat-icon>
+  </button>
+  <button
+    *ngIf="sortedAlpha"
+    mat-icon-button
+    [matTooltip]="'igo.context.contextManager.sortContextOrder' | translate"
+    matTooltipShowDelay="500"
+    (click)="toggleSort(false)">
+    <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
+  </button>
+  <button *ngIf="auth.authenticated"
+    mat-icon-button
+    [matTooltip]="'igo.context.bookmarkButton.create' | translate"
+    matTooltipShowDelay="500"
+    (click)="createContext()">
+    <mat-icon color="primary" svgIcon="star"></mat-icon>
+  </button>
 
   <ng-template ngFor let-groupContexts [ngForOf]="contexts$ | async | keyvalue">
 
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 5bee875245..fc6cd77e9e 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,5 +1,5 @@
 .contextFilter {
-  width: calc(100% - 20px);
+  width: calc(100% - 100px);
   margin: 5px;
   padding-left: 6px;
 }
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 19d323bacd..37a7d0de1a 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
@@ -4,14 +4,21 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnInit
+  OnInit,
+  ElementRef
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
+import { LanguageService, MessageService } from '@igo2/core';
+import { IgoMap } from '@igo2/geo';
 
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
 import { Subscription, BehaviorSubject } from 'rxjs';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { ContextService } from '../shared';
+import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
+
 
 @Component({
   selector: 'igo-context-list',
@@ -31,6 +38,9 @@ export class ContextListComponent implements OnInit {
     this.cdRef.detectChanges();
   }
   private _contexts: ContextsList = { ours: [] };
+  contexts$$: Subscription;
+
+  private contextsInitial: ContextsList = { ours: [] };
 
   @Input()
   get selectedContext(): DetailedContext {
@@ -42,6 +52,15 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
+  @Input()
+  get map(): IgoMap {
+    return this._map;
+  }
+  set map(value: IgoMap) {
+    this._map = value;
+  }
+  private _map: IgoMap;
+
   @Input()
   get defaultContextId(): string {
     return this._defaultContextId;
@@ -80,49 +99,78 @@ export class ContextListComponent implements OnInit {
   public term$: BehaviorSubject<string> = new BehaviorSubject('');
   term$$: Subscription;
 
-  public showContextFilter = ContextListControlsEnum.default;
+  get sortedAlpha(): boolean {
+    return this._sortedAlpha;
+  }
+  set sortedAlpha(value: boolean) {
+    this._sortedAlpha = value;
+  }
+  private _sortedAlpha: boolean = undefined;
+
+  public contextsAlpha: ContextsList;
+
+  public contextsTemp: ContextsList;
+
+  public showContextFilter = ContextListControlsEnum.always;
 
   public thresholdToFilter = 5;
 
-  constructor(private cdRef: ChangeDetectorRef, public auth: AuthService) {}
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    public auth: AuthService,
+    private dialog: MatDialog,
+    private contextService: ContextService,
+    private languageService: LanguageService,
+    private messageService: MessageService) {}
 
   ngOnInit() {
+    this.contexts$$ = this.contexts$.subscribe(() => {
+      if (this.sortedAlpha === undefined && this.term === '') {
+        this.contextsInitial = this.contexts;
+      }
+    })
+
     this.term$$ = this.term$.subscribe((value) => {
-      if (value === '') {
-        this.contexts$.next(this.contexts);
+      if (this.filterContextsList(value)) {
+        this.contexts = this.filterContextsList(value);
       }
+    });
+  }
+
+  private filterContextsList(term) {
+    if (term === '') {
+      return;
+    }
+
+    if (term.length) {
+      let ours; let publics; let shared;
+      ours = this.contexts.ours.filter((context) => {
+        const filterNormalized = term.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 (value.length) {
-        let ours; let publics; let shared;
-        ours = this.contexts.ours.filter((context) => {
-          const filterNormalized = value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+      if (this.contexts.public) {
+        publics = this.contexts.public.filter((context) => {
+          const filterNormalized = term.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 = term.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);
+        updateContexts.shared = shared;
       }
-    });
+      return updateContexts;
+    }
   }
 
   public showFilter() {
@@ -141,4 +189,86 @@ export class ContextListComponent implements OnInit {
         return false;
     }
   }
+
+  sortContextsList(contexts: ContextsList) {
+    if (contexts) {
+      const contextsList = JSON.parse(JSON.stringify(contexts));
+      contextsList.ours.sort((a, b) => {
+        if (a.title < b.title) {
+          return -1;
+        }
+        if (a.title > b.title) {
+          return 1;
+        }
+        return 0;
+      });
+
+      if (contextsList.shared) {
+        contextsList.shared.sort((a, b) => {
+          if (a.title < b.title) {
+            return -1;
+          }
+          if (a.title > b.title) {
+            return 1;
+          }
+          return 0;
+        });
+      } else if (contextsList.public) {
+        contextsList.public.sort((a, b) => {
+          if (a.title < b.title) {
+            return -1;
+          }
+          if (a.title > b.title) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      return contextsList;
+    }
+  }
+
+  toggleSort(sortAlpha: boolean) {
+    this.sortedAlpha = sortAlpha;
+    if (this.sortedAlpha === true) {
+      const filterList = this.filterContextsList(this.term) ? this.filterContextsList(this.term) : this.contextsInitial;
+      this.contextsTemp = filterList;
+      this.contextsAlpha = this.sortContextsList(filterList);
+      this.contexts = this.contextsAlpha;
+    } else if (this.sortedAlpha === false) {
+      const filterList = this.filterContextsList(this.term) ? this.contextsTemp : this.contextsInitial;
+      this.contexts = filterList;
+    }
+  }
+
+  clearFilter() {
+    this.term = '';
+    this.contexts = this.contextsInitial;
+  }
+
+  createContext() {
+    this.dialog
+      .open(BookmarkDialogComponent, { disableClose: false })
+      .afterClosed()
+      .subscribe(title => {
+        if (title) {
+          const context = this.contextService.getContextFromMap(this.map);
+          context.title = title;
+          this.contextService.create(context).subscribe(() => {
+            const translate = this.languageService.translate;
+            const titleD = translate.instant(
+              'igo.context.bookmarkButton.dialog.createTitle'
+            );
+            const message = translate.instant(
+              'igo.context.bookmarkButton.dialog.createMsg',
+              {
+                value: context.title
+              }
+            );
+            this.messageService.success(message, titleD);
+            this.contextService.loadContext(context.uri);
+          });
+        }
+      });
+  }
 }
diff --git a/packages/context/src/lib/context-manager/context-manager.module.ts b/packages/context/src/lib/context-manager/context-manager.module.ts
index 66cbe3068a..cff525e3ff 100644
--- a/packages/context/src/lib/context-manager/context-manager.module.ts
+++ b/packages/context/src/lib/context-manager/context-manager.module.ts
@@ -9,7 +9,8 @@ import {
   MatFormFieldModule,
   MatInputModule,
   MatCheckboxModule,
-  MatRadioModule
+  MatRadioModule,
+  MatDialogModule
 } from '@angular/material';
 
 import { IgoAuthModule } from '@igo2/auth';
@@ -21,6 +22,7 @@ import {
   IgoStopPropagationModule
 } from '@igo2/common';
 
+import { BookmarkDialogComponent } from './../context-map-button/bookmark-button/bookmark-dialog.component';
 import { MapContextDirective } from './shared/map-context.directive';
 import { LayerContextDirective } from './shared/layer-context.directive';
 import { ContextListComponent } from './context-list/context-list.component';
@@ -31,6 +33,7 @@ import { ContextEditComponent } from './context-edit/context-edit.component';
 import { ContextEditBindingDirective } from './context-edit/context-edit-binding.directive';
 import { ContextPermissionsComponent } from './context-permissions/context-permissions.component';
 import { ContextPermissionsBindingDirective } from './context-permissions/context-permissions-binding.directive';
+import { IgoContextMapButtonModule } from '../context-map-button/context-map-button.module';
 
 const CONTEXT_DIRECTIVES = [
   MapContextDirective,
@@ -50,12 +53,17 @@ const CONTEXT_DIRECTIVES = [
     MatListModule,
     MatCheckboxModule,
     MatRadioModule,
+    MatDialogModule,
     IgoAuthModule,
     IgoListModule,
     IgoKeyValueModule,
     IgoCollapsibleModule,
     IgoStopPropagationModule,
-    IgoLanguageModule
+    IgoLanguageModule,
+    IgoContextMapButtonModule
+  ],
+  entryComponents: [
+    BookmarkDialogComponent
   ],
   exports: [
     ContextListComponent,
diff --git a/packages/context/src/lib/context-map-button/context-map-button.module.ts b/packages/context/src/lib/context-map-button/context-map-button.module.ts
index 10454df268..51ddcfa1c0 100644
--- a/packages/context/src/lib/context-map-button/context-map-button.module.ts
+++ b/packages/context/src/lib/context-map-button/context-map-button.module.ts
@@ -42,7 +42,7 @@ import { UserButtonComponent } from './user-button/user-button.component';
     MatDialogModule,
     MatInputModule
   ],
-  exports: [BookmarkButtonComponent, PoiButtonComponent, UserButtonComponent],
+  exports: [BookmarkButtonComponent, PoiButtonComponent, UserButtonComponent, BookmarkDialogComponent],
   declarations: [
     BookmarkButtonComponent,
     BookmarkDialogComponent,
diff --git a/packages/context/src/locale/en.context.json b/packages/context/src/locale/en.context.json
index a6e47e90c9..f436a92d1d 100644
--- a/packages/context/src/locale/en.context.json
+++ b/packages/context/src/locale/en.context.json
@@ -51,7 +51,9 @@
         "publicContexts": "Public contexts",
         "save": "Save this context",
         "sharedContexts": "Shared contexts",
-        "filterPlaceHolder": "Filer the contexts list"
+        "filterPlaceHolder": "Filer the contexts list",
+        "sortAlphabetically": "Sort the context's list alphabetically",
+        "sortContextOrder": "Replace contexts according to the initial list"
       },
       "permission": {
         "addBtn": "Add",
diff --git a/packages/context/src/locale/fr.context.json b/packages/context/src/locale/fr.context.json
index 6d19561893..70f014732f 100644
--- a/packages/context/src/locale/fr.context.json
+++ b/packages/context/src/locale/fr.context.json
@@ -51,7 +51,9 @@
         "publicContexts": "Contextes publics",
         "save": "Sauvegarder ce contexte",
         "sharedContexts": "Contextes partagés",
-        "filterPlaceHolder": "Filtrer la liste des contextes"
+        "filterPlaceHolder": "Filtrer la liste des contextes",
+        "sortAlphabetically": "Trier la liste des contextes en ordre alphabétique",
+        "sortContextOrder": "Replacer les contextes selon la liste initial"
       },
       "permission": {
         "addBtn": "Ajouter",
diff --git a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
index 940d4c8319..8cb8e5fbdf 100644
--- a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
+++ b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
@@ -1,5 +1,6 @@
 <igo-context-list
   igoContextListBinding
+  [map]="map"
   (edit)="editContext()"
   (managePermissions)="managePermissions()">
 </igo-context-list>
diff --git a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
index 3d34cbfed1..b5ca175645 100644
--- a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
+++ b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
@@ -3,6 +3,8 @@ import { Component } from '@angular/core';
 import { ToolComponent } from '@igo2/common';
 
 import { ToolState } from '../../tool/tool.state';
+import { MapState } from '../../map/map.state';
+import { IgoMap } from '@igo2/geo';
 
 @ToolComponent({
   name: 'contextManager',
@@ -14,7 +16,10 @@ import { ToolState } from '../../tool/tool.state';
   templateUrl: './context-manager-tool.component.html'
 })
 export class ContextManagerToolComponent {
-  constructor(private toolState: ToolState) {}
+
+  get map(): IgoMap { return this.mapState.map; }
+
+  constructor(private toolState: ToolState, private mapState: MapState) {}
 
   editContext() {
     this.toolState.toolbox.activateTool('contextEditor');

From 96525c8a9be44f8c7a80d95b2cb245765fab61e6 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Tue, 24 Mar 2020 14:45:39 -0400
Subject: [PATCH 02/13] feat(context): add context list tool

---
 .../context/context/context.component.html    |   2 +-
 .../context-list/context-list.component.html  |  25 ++-
 .../context-list/context-list.component.scss  |   2 +-
 .../context-list/context-list.component.ts    | 194 +++++++++++++++---
 .../context-manager/context-manager.module.ts |  12 +-
 .../context-map-button.module.ts              |   2 +-
 packages/context/src/locale/en.context.json   |   4 +-
 packages/context/src/locale/fr.context.json   |   4 +-
 .../context-manager-tool.component.html       |   1 +
 .../context-manager-tool.component.ts         |   7 +-
 10 files changed, 212 insertions(+), 41 deletions(-)

diff --git a/demo/src/app/context/context/context.component.html b/demo/src/app/context/context/context.component.html
index 0a7b6724f9..21543d2fbe 100644
--- a/demo/src/app/context/context/context.component.html
+++ b/demo/src/app/context/context/context.component.html
@@ -20,7 +20,7 @@
   </igo-map-browser>
 
   <igo-panel title="Contexts list">
-    <igo-context-list igoContextListBinding></igo-context-list>
+    <igo-context-list igoContextListBinding [map]="map"></igo-context-list>
   </igo-panel>
 
   <igo-panel title="Layers">
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 71330f6ee3..2c12000e43 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
@@ -13,10 +13,33 @@
       *ngIf="term.length"
       aria-label="Clear"
       color="warn"
-      (click)="term = ''">
+      (click)="clearFilter()">
       <mat-icon svgIcon="close"></mat-icon>
     </button>
   </mat-form-field>
+  <button
+  *ngIf="!sortedAlpha"
+  mat-icon-button
+  [matTooltip]="'igo.context.contextManager.sortAlphabetically' | translate"
+  matTooltipShowDelay="500"
+  (click)="toggleSort(true)">
+  <mat-icon color="primary" svgIcon="sort-alphabetical"></mat-icon>
+  </button>
+  <button
+    *ngIf="sortedAlpha"
+    mat-icon-button
+    [matTooltip]="'igo.context.contextManager.sortContextOrder' | translate"
+    matTooltipShowDelay="500"
+    (click)="toggleSort(false)">
+    <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
+  </button>
+  <button *ngIf="auth.authenticated"
+    mat-icon-button
+    [matTooltip]="'igo.context.bookmarkButton.create' | translate"
+    matTooltipShowDelay="500"
+    (click)="createContext()">
+    <mat-icon color="primary" svgIcon="star"></mat-icon>
+  </button>
 
   <ng-template ngFor let-groupContexts [ngForOf]="contexts$ | async | keyvalue">
 
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 5bee875245..fc6cd77e9e 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,5 +1,5 @@
 .contextFilter {
-  width: calc(100% - 20px);
+  width: calc(100% - 100px);
   margin: 5px;
   padding-left: 6px;
 }
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 19d323bacd..37a7d0de1a 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
@@ -4,14 +4,21 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnInit
+  OnInit,
+  ElementRef
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
+import { LanguageService, MessageService } from '@igo2/core';
+import { IgoMap } from '@igo2/geo';
 
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
 import { Subscription, BehaviorSubject } from 'rxjs';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { ContextService } from '../shared';
+import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
+
 
 @Component({
   selector: 'igo-context-list',
@@ -31,6 +38,9 @@ export class ContextListComponent implements OnInit {
     this.cdRef.detectChanges();
   }
   private _contexts: ContextsList = { ours: [] };
+  contexts$$: Subscription;
+
+  private contextsInitial: ContextsList = { ours: [] };
 
   @Input()
   get selectedContext(): DetailedContext {
@@ -42,6 +52,15 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
+  @Input()
+  get map(): IgoMap {
+    return this._map;
+  }
+  set map(value: IgoMap) {
+    this._map = value;
+  }
+  private _map: IgoMap;
+
   @Input()
   get defaultContextId(): string {
     return this._defaultContextId;
@@ -80,49 +99,78 @@ export class ContextListComponent implements OnInit {
   public term$: BehaviorSubject<string> = new BehaviorSubject('');
   term$$: Subscription;
 
-  public showContextFilter = ContextListControlsEnum.default;
+  get sortedAlpha(): boolean {
+    return this._sortedAlpha;
+  }
+  set sortedAlpha(value: boolean) {
+    this._sortedAlpha = value;
+  }
+  private _sortedAlpha: boolean = undefined;
+
+  public contextsAlpha: ContextsList;
+
+  public contextsTemp: ContextsList;
+
+  public showContextFilter = ContextListControlsEnum.always;
 
   public thresholdToFilter = 5;
 
-  constructor(private cdRef: ChangeDetectorRef, public auth: AuthService) {}
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    public auth: AuthService,
+    private dialog: MatDialog,
+    private contextService: ContextService,
+    private languageService: LanguageService,
+    private messageService: MessageService) {}
 
   ngOnInit() {
+    this.contexts$$ = this.contexts$.subscribe(() => {
+      if (this.sortedAlpha === undefined && this.term === '') {
+        this.contextsInitial = this.contexts;
+      }
+    })
+
     this.term$$ = this.term$.subscribe((value) => {
-      if (value === '') {
-        this.contexts$.next(this.contexts);
+      if (this.filterContextsList(value)) {
+        this.contexts = this.filterContextsList(value);
       }
+    });
+  }
+
+  private filterContextsList(term) {
+    if (term === '') {
+      return;
+    }
+
+    if (term.length) {
+      let ours; let publics; let shared;
+      ours = this.contexts.ours.filter((context) => {
+        const filterNormalized = term.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 (value.length) {
-        let ours; let publics; let shared;
-        ours = this.contexts.ours.filter((context) => {
-          const filterNormalized = value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+      if (this.contexts.public) {
+        publics = this.contexts.public.filter((context) => {
+          const filterNormalized = term.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 = term.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);
+        updateContexts.shared = shared;
       }
-    });
+      return updateContexts;
+    }
   }
 
   public showFilter() {
@@ -141,4 +189,86 @@ export class ContextListComponent implements OnInit {
         return false;
     }
   }
+
+  sortContextsList(contexts: ContextsList) {
+    if (contexts) {
+      const contextsList = JSON.parse(JSON.stringify(contexts));
+      contextsList.ours.sort((a, b) => {
+        if (a.title < b.title) {
+          return -1;
+        }
+        if (a.title > b.title) {
+          return 1;
+        }
+        return 0;
+      });
+
+      if (contextsList.shared) {
+        contextsList.shared.sort((a, b) => {
+          if (a.title < b.title) {
+            return -1;
+          }
+          if (a.title > b.title) {
+            return 1;
+          }
+          return 0;
+        });
+      } else if (contextsList.public) {
+        contextsList.public.sort((a, b) => {
+          if (a.title < b.title) {
+            return -1;
+          }
+          if (a.title > b.title) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      return contextsList;
+    }
+  }
+
+  toggleSort(sortAlpha: boolean) {
+    this.sortedAlpha = sortAlpha;
+    if (this.sortedAlpha === true) {
+      const filterList = this.filterContextsList(this.term) ? this.filterContextsList(this.term) : this.contextsInitial;
+      this.contextsTemp = filterList;
+      this.contextsAlpha = this.sortContextsList(filterList);
+      this.contexts = this.contextsAlpha;
+    } else if (this.sortedAlpha === false) {
+      const filterList = this.filterContextsList(this.term) ? this.contextsTemp : this.contextsInitial;
+      this.contexts = filterList;
+    }
+  }
+
+  clearFilter() {
+    this.term = '';
+    this.contexts = this.contextsInitial;
+  }
+
+  createContext() {
+    this.dialog
+      .open(BookmarkDialogComponent, { disableClose: false })
+      .afterClosed()
+      .subscribe(title => {
+        if (title) {
+          const context = this.contextService.getContextFromMap(this.map);
+          context.title = title;
+          this.contextService.create(context).subscribe(() => {
+            const translate = this.languageService.translate;
+            const titleD = translate.instant(
+              'igo.context.bookmarkButton.dialog.createTitle'
+            );
+            const message = translate.instant(
+              'igo.context.bookmarkButton.dialog.createMsg',
+              {
+                value: context.title
+              }
+            );
+            this.messageService.success(message, titleD);
+            this.contextService.loadContext(context.uri);
+          });
+        }
+      });
+  }
 }
diff --git a/packages/context/src/lib/context-manager/context-manager.module.ts b/packages/context/src/lib/context-manager/context-manager.module.ts
index 66cbe3068a..cff525e3ff 100644
--- a/packages/context/src/lib/context-manager/context-manager.module.ts
+++ b/packages/context/src/lib/context-manager/context-manager.module.ts
@@ -9,7 +9,8 @@ import {
   MatFormFieldModule,
   MatInputModule,
   MatCheckboxModule,
-  MatRadioModule
+  MatRadioModule,
+  MatDialogModule
 } from '@angular/material';
 
 import { IgoAuthModule } from '@igo2/auth';
@@ -21,6 +22,7 @@ import {
   IgoStopPropagationModule
 } from '@igo2/common';
 
+import { BookmarkDialogComponent } from './../context-map-button/bookmark-button/bookmark-dialog.component';
 import { MapContextDirective } from './shared/map-context.directive';
 import { LayerContextDirective } from './shared/layer-context.directive';
 import { ContextListComponent } from './context-list/context-list.component';
@@ -31,6 +33,7 @@ import { ContextEditComponent } from './context-edit/context-edit.component';
 import { ContextEditBindingDirective } from './context-edit/context-edit-binding.directive';
 import { ContextPermissionsComponent } from './context-permissions/context-permissions.component';
 import { ContextPermissionsBindingDirective } from './context-permissions/context-permissions-binding.directive';
+import { IgoContextMapButtonModule } from '../context-map-button/context-map-button.module';
 
 const CONTEXT_DIRECTIVES = [
   MapContextDirective,
@@ -50,12 +53,17 @@ const CONTEXT_DIRECTIVES = [
     MatListModule,
     MatCheckboxModule,
     MatRadioModule,
+    MatDialogModule,
     IgoAuthModule,
     IgoListModule,
     IgoKeyValueModule,
     IgoCollapsibleModule,
     IgoStopPropagationModule,
-    IgoLanguageModule
+    IgoLanguageModule,
+    IgoContextMapButtonModule
+  ],
+  entryComponents: [
+    BookmarkDialogComponent
   ],
   exports: [
     ContextListComponent,
diff --git a/packages/context/src/lib/context-map-button/context-map-button.module.ts b/packages/context/src/lib/context-map-button/context-map-button.module.ts
index 10454df268..51ddcfa1c0 100644
--- a/packages/context/src/lib/context-map-button/context-map-button.module.ts
+++ b/packages/context/src/lib/context-map-button/context-map-button.module.ts
@@ -42,7 +42,7 @@ import { UserButtonComponent } from './user-button/user-button.component';
     MatDialogModule,
     MatInputModule
   ],
-  exports: [BookmarkButtonComponent, PoiButtonComponent, UserButtonComponent],
+  exports: [BookmarkButtonComponent, PoiButtonComponent, UserButtonComponent, BookmarkDialogComponent],
   declarations: [
     BookmarkButtonComponent,
     BookmarkDialogComponent,
diff --git a/packages/context/src/locale/en.context.json b/packages/context/src/locale/en.context.json
index a6e47e90c9..f436a92d1d 100644
--- a/packages/context/src/locale/en.context.json
+++ b/packages/context/src/locale/en.context.json
@@ -51,7 +51,9 @@
         "publicContexts": "Public contexts",
         "save": "Save this context",
         "sharedContexts": "Shared contexts",
-        "filterPlaceHolder": "Filer the contexts list"
+        "filterPlaceHolder": "Filer the contexts list",
+        "sortAlphabetically": "Sort the context's list alphabetically",
+        "sortContextOrder": "Replace contexts according to the initial list"
       },
       "permission": {
         "addBtn": "Add",
diff --git a/packages/context/src/locale/fr.context.json b/packages/context/src/locale/fr.context.json
index 6d19561893..70f014732f 100644
--- a/packages/context/src/locale/fr.context.json
+++ b/packages/context/src/locale/fr.context.json
@@ -51,7 +51,9 @@
         "publicContexts": "Contextes publics",
         "save": "Sauvegarder ce contexte",
         "sharedContexts": "Contextes partagés",
-        "filterPlaceHolder": "Filtrer la liste des contextes"
+        "filterPlaceHolder": "Filtrer la liste des contextes",
+        "sortAlphabetically": "Trier la liste des contextes en ordre alphabétique",
+        "sortContextOrder": "Replacer les contextes selon la liste initial"
       },
       "permission": {
         "addBtn": "Ajouter",
diff --git a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
index 940d4c8319..8cb8e5fbdf 100644
--- a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
+++ b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
@@ -1,5 +1,6 @@
 <igo-context-list
   igoContextListBinding
+  [map]="map"
   (edit)="editContext()"
   (managePermissions)="managePermissions()">
 </igo-context-list>
diff --git a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
index 3d34cbfed1..b5ca175645 100644
--- a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
+++ b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
@@ -3,6 +3,8 @@ import { Component } from '@angular/core';
 import { ToolComponent } from '@igo2/common';
 
 import { ToolState } from '../../tool/tool.state';
+import { MapState } from '../../map/map.state';
+import { IgoMap } from '@igo2/geo';
 
 @ToolComponent({
   name: 'contextManager',
@@ -14,7 +16,10 @@ import { ToolState } from '../../tool/tool.state';
   templateUrl: './context-manager-tool.component.html'
 })
 export class ContextManagerToolComponent {
-  constructor(private toolState: ToolState) {}
+
+  get map(): IgoMap { return this.mapState.map; }
+
+  constructor(private toolState: ToolState, private mapState: MapState) {}
 
   editContext() {
     this.toolState.toolbox.activateTool('contextEditor');

From d88374ccefea6510f47acc50cad39fe7807a589c Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Tue, 31 Mar 2020 11:29:50 -0400
Subject: [PATCH 03/13] WIP

---
 .../context-list/context-list.component.html  | 21 +++++++++++++++++-
 .../context-list/context-list.component.ts    | 22 +++++++++++++++----
 .../context-manager/context-manager.module.ts |  4 +++-
 packages/context/src/locale/en.context.json   |  3 ++-
 packages/context/src/locale/fr.context.json   |  3 ++-
 5 files changed, 45 insertions(+), 8 deletions(-)

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 2c12000e43..2e4a34f3d7 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
@@ -33,7 +33,26 @@
     (click)="toggleSort(false)">
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
-  <button *ngIf="auth.authenticated"
+
+  <button
+    mat-icon-button
+    [matTooltip]="'igo.context.contextManager.userAccount' | translate"
+    matTooltipShowDelay="500"
+    [matMenuTriggerFor]="accountMenu">
+    <mat-icon color="primary" svgIcon="account"></mat-icon>
+  </button>
+  <mat-menu #accountMenu="matMenu">
+    <ng-container *ngFor="let user of users">
+      <mat-checkbox
+        class="mat-menu-item"
+        [checked]="true"
+        (change)="userSelection()">
+        {{user}}
+      </mat-checkbox>
+    </ng-container>
+  </mat-menu>
+
+  <button *ngIf="authenticated"
     mat-icon-button
     [matTooltip]="'igo.context.bookmarkButton.create' | translate"
     matTooltipShowDelay="500"
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 37a7d0de1a..4d0e4a44e7 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
@@ -4,8 +4,7 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnInit,
-  ElementRef
+  OnInit
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
@@ -15,8 +14,8 @@ import { IgoMap } from '@igo2/geo';
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
 import { Subscription, BehaviorSubject } from 'rxjs';
-import { MatDialog, MatDialogRef } from '@angular/material';
-import { ContextService } from '../shared';
+import { MatDialog } from '@angular/material';
+import { ContextService } from '../shared/context.service';
 import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
 
 
@@ -52,6 +51,15 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
+  @Input()
+  get authenticated(): boolean {
+    return this._authenticated;
+  }
+  set authenticated(value: boolean) {
+    this._authenticated = value;
+  }
+  private _authenticated = false;
+
   @Input()
   get map(): IgoMap {
     return this._map;
@@ -86,6 +94,8 @@ export class ContextListComponent implements OnInit {
     public: 'igo.context.contextManager.publicContexts'
   };
 
+  public users = ['COG', '911', 'Public'];
+
   /**
    * Context filter term
    */
@@ -271,4 +281,8 @@ export class ContextListComponent implements OnInit {
         }
       });
   }
+
+  userSelection() {
+    return;
+  }
 }
diff --git a/packages/context/src/lib/context-manager/context-manager.module.ts b/packages/context/src/lib/context-manager/context-manager.module.ts
index cff525e3ff..a31d6bfd5b 100644
--- a/packages/context/src/lib/context-manager/context-manager.module.ts
+++ b/packages/context/src/lib/context-manager/context-manager.module.ts
@@ -10,7 +10,8 @@ import {
   MatInputModule,
   MatCheckboxModule,
   MatRadioModule,
-  MatDialogModule
+  MatDialogModule,
+  MatMenuModule
 } from '@angular/material';
 
 import { IgoAuthModule } from '@igo2/auth';
@@ -54,6 +55,7 @@ const CONTEXT_DIRECTIVES = [
     MatCheckboxModule,
     MatRadioModule,
     MatDialogModule,
+    MatMenuModule,
     IgoAuthModule,
     IgoListModule,
     IgoKeyValueModule,
diff --git a/packages/context/src/locale/en.context.json b/packages/context/src/locale/en.context.json
index f436a92d1d..0f1189f987 100644
--- a/packages/context/src/locale/en.context.json
+++ b/packages/context/src/locale/en.context.json
@@ -53,7 +53,8 @@
         "sharedContexts": "Shared contexts",
         "filterPlaceHolder": "Filer the contexts list",
         "sortAlphabetically": "Sort the context's list alphabetically",
-        "sortContextOrder": "Replace contexts according to the initial list"
+        "sortContextOrder": "Replace contexts according to the initial list",
+        "userAccount": "User account"
       },
       "permission": {
         "addBtn": "Add",
diff --git a/packages/context/src/locale/fr.context.json b/packages/context/src/locale/fr.context.json
index 70f014732f..e40b4e0381 100644
--- a/packages/context/src/locale/fr.context.json
+++ b/packages/context/src/locale/fr.context.json
@@ -53,7 +53,8 @@
         "sharedContexts": "Contextes partagés",
         "filterPlaceHolder": "Filtrer la liste des contextes",
         "sortAlphabetically": "Trier la liste des contextes en ordre alphabétique",
-        "sortContextOrder": "Replacer les contextes selon la liste initial"
+        "sortContextOrder": "Replacer les contextes selon la liste initial",
+        "userAccount": "Profils utilisateurs"
       },
       "permission": {
         "addBtn": "Ajouter",

From f649d62b7a095bc5e116a2eb10abf4291862f554 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 9 Apr 2020 14:51:44 -0400
Subject: [PATCH 04/13] WIP

---
 .../context-list/context-list.component.html        |  2 +-
 .../context-list/context-list.component.scss        |  8 +++++++-
 .../context-list/context-list.component.ts          | 13 +++++--------
 3 files changed, 13 insertions(+), 10 deletions(-)

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 2e4a34f3d7..cb9f47f624 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 @@
 <igo-list [navigation]="true">
-  <mat-form-field *ngIf="showFilter()" class="contextFilter">
+  <mat-form-field *ngIf="showFilter()" [ngClass]="authenticated ? 'context-filter-min-width' : 'context-filter-max-width'">
     <input
       matInput
       type="text"
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 fc6cd77e9e..335cd659cd 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,9 +1,15 @@
-.contextFilter {
+.context-filter-max-width {
   width: calc(100% - 100px);
   margin: 5px;
   padding-left: 6px;
 }
 
+.context-filter-min-width {
+  width: calc(100% - 135px);
+  margin: 5px;
+  padding-left: 6px;
+}
+
 .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 4d0e4a44e7..c6e2c41787 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
@@ -51,14 +51,7 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
-  @Input()
-  get authenticated(): boolean {
-    return this._authenticated;
-  }
-  set authenticated(value: boolean) {
-    this._authenticated = value;
-  }
-  private _authenticated = false;
+  public authenticated = false;
 
   @Input()
   get map(): IgoMap {
@@ -145,6 +138,10 @@ export class ContextListComponent implements OnInit {
         this.contexts = this.filterContextsList(value);
       }
     });
+
+    this.auth.authenticate$.subscribe((value) => {
+      this.authenticated = value;
+    })
   }
 
   private filterContextsList(term) {

From 2b3fc828c253b1ef982421da43f9812daeb02fd9 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 16 Apr 2020 15:27:04 -0400
Subject: [PATCH 05/13] WIP

---
 .../context-list/context-list.component.html        |  4 ++--
 .../context-list/context-list.component.ts          | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

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 cb9f47f624..8a8ee3ff40 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
@@ -34,7 +34,7 @@
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
 
-  <button
+  <!-- <button *ngIf="authenticated"
     mat-icon-button
     [matTooltip]="'igo.context.contextManager.userAccount' | translate"
     matTooltipShowDelay="500"
@@ -50,7 +50,7 @@
         {{user}}
       </mat-checkbox>
     </ng-container>
-  </mat-menu>
+  </mat-menu> -->
 
   <button *ngIf="authenticated"
     mat-icon-button
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 c6e2c41787..09add75c04 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
@@ -18,7 +18,6 @@ import { MatDialog } from '@angular/material';
 import { ContextService } from '../shared/context.service';
 import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
 
-
 @Component({
   selector: 'igo-context-list',
   templateUrl: './context-list.component.html',
@@ -131,7 +130,7 @@ export class ContextListComponent implements OnInit {
       if (this.sortedAlpha === undefined && this.term === '') {
         this.contextsInitial = this.contexts;
       }
-    })
+    });
 
     this.term$$ = this.term$.subscribe((value) => {
       if (this.filterContextsList(value)) {
@@ -141,7 +140,7 @@ export class ContextListComponent implements OnInit {
 
     this.auth.authenticate$.subscribe((value) => {
       this.authenticated = value;
-    })
+    });
   }
 
   private filterContextsList(term) {
@@ -165,7 +164,7 @@ export class ContextListComponent implements OnInit {
           const filterNormalized = term.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) {
@@ -279,7 +278,7 @@ export class ContextListComponent implements OnInit {
       });
   }
 
-  userSelection() {
-    return;
-  }
+  // userSelection() {
+  //   return;
+  // }
 }

From 48ecd7e823d3b7e711a14de79326b25a0cba88fc Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Tue, 24 Mar 2020 14:45:39 -0400
Subject: [PATCH 06/13] feat(context): add context list tool

---
 .../context/context/context.component.html    |   2 +-
 .../context-list/context-list.component.html  |  25 ++-
 .../context-list/context-list.component.scss  |   2 +-
 .../context-list/context-list.component.ts    | 194 +++++++++++++++---
 .../context-manager/context-manager.module.ts |  12 +-
 .../context-map-button.module.ts              |   2 +-
 packages/context/src/locale/en.context.json   |   4 +-
 packages/context/src/locale/fr.context.json   |   4 +-
 .../context-manager-tool.component.html       |   1 +
 .../context-manager-tool.component.ts         |   7 +-
 10 files changed, 212 insertions(+), 41 deletions(-)

diff --git a/demo/src/app/context/context/context.component.html b/demo/src/app/context/context/context.component.html
index 0a7b6724f9..21543d2fbe 100644
--- a/demo/src/app/context/context/context.component.html
+++ b/demo/src/app/context/context/context.component.html
@@ -20,7 +20,7 @@
   </igo-map-browser>
 
   <igo-panel title="Contexts list">
-    <igo-context-list igoContextListBinding></igo-context-list>
+    <igo-context-list igoContextListBinding [map]="map"></igo-context-list>
   </igo-panel>
 
   <igo-panel title="Layers">
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 71330f6ee3..2c12000e43 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
@@ -13,10 +13,33 @@
       *ngIf="term.length"
       aria-label="Clear"
       color="warn"
-      (click)="term = ''">
+      (click)="clearFilter()">
       <mat-icon svgIcon="close"></mat-icon>
     </button>
   </mat-form-field>
+  <button
+  *ngIf="!sortedAlpha"
+  mat-icon-button
+  [matTooltip]="'igo.context.contextManager.sortAlphabetically' | translate"
+  matTooltipShowDelay="500"
+  (click)="toggleSort(true)">
+  <mat-icon color="primary" svgIcon="sort-alphabetical"></mat-icon>
+  </button>
+  <button
+    *ngIf="sortedAlpha"
+    mat-icon-button
+    [matTooltip]="'igo.context.contextManager.sortContextOrder' | translate"
+    matTooltipShowDelay="500"
+    (click)="toggleSort(false)">
+    <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
+  </button>
+  <button *ngIf="auth.authenticated"
+    mat-icon-button
+    [matTooltip]="'igo.context.bookmarkButton.create' | translate"
+    matTooltipShowDelay="500"
+    (click)="createContext()">
+    <mat-icon color="primary" svgIcon="star"></mat-icon>
+  </button>
 
   <ng-template ngFor let-groupContexts [ngForOf]="contexts$ | async | keyvalue">
 
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 5bee875245..fc6cd77e9e 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,5 +1,5 @@
 .contextFilter {
-  width: calc(100% - 20px);
+  width: calc(100% - 100px);
   margin: 5px;
   padding-left: 6px;
 }
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 19d323bacd..37a7d0de1a 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
@@ -4,14 +4,21 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnInit
+  OnInit,
+  ElementRef
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
+import { LanguageService, MessageService } from '@igo2/core';
+import { IgoMap } from '@igo2/geo';
 
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
 import { Subscription, BehaviorSubject } from 'rxjs';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { ContextService } from '../shared';
+import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
+
 
 @Component({
   selector: 'igo-context-list',
@@ -31,6 +38,9 @@ export class ContextListComponent implements OnInit {
     this.cdRef.detectChanges();
   }
   private _contexts: ContextsList = { ours: [] };
+  contexts$$: Subscription;
+
+  private contextsInitial: ContextsList = { ours: [] };
 
   @Input()
   get selectedContext(): DetailedContext {
@@ -42,6 +52,15 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
+  @Input()
+  get map(): IgoMap {
+    return this._map;
+  }
+  set map(value: IgoMap) {
+    this._map = value;
+  }
+  private _map: IgoMap;
+
   @Input()
   get defaultContextId(): string {
     return this._defaultContextId;
@@ -80,49 +99,78 @@ export class ContextListComponent implements OnInit {
   public term$: BehaviorSubject<string> = new BehaviorSubject('');
   term$$: Subscription;
 
-  public showContextFilter = ContextListControlsEnum.default;
+  get sortedAlpha(): boolean {
+    return this._sortedAlpha;
+  }
+  set sortedAlpha(value: boolean) {
+    this._sortedAlpha = value;
+  }
+  private _sortedAlpha: boolean = undefined;
+
+  public contextsAlpha: ContextsList;
+
+  public contextsTemp: ContextsList;
+
+  public showContextFilter = ContextListControlsEnum.always;
 
   public thresholdToFilter = 5;
 
-  constructor(private cdRef: ChangeDetectorRef, public auth: AuthService) {}
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    public auth: AuthService,
+    private dialog: MatDialog,
+    private contextService: ContextService,
+    private languageService: LanguageService,
+    private messageService: MessageService) {}
 
   ngOnInit() {
+    this.contexts$$ = this.contexts$.subscribe(() => {
+      if (this.sortedAlpha === undefined && this.term === '') {
+        this.contextsInitial = this.contexts;
+      }
+    })
+
     this.term$$ = this.term$.subscribe((value) => {
-      if (value === '') {
-        this.contexts$.next(this.contexts);
+      if (this.filterContextsList(value)) {
+        this.contexts = this.filterContextsList(value);
       }
+    });
+  }
+
+  private filterContextsList(term) {
+    if (term === '') {
+      return;
+    }
+
+    if (term.length) {
+      let ours; let publics; let shared;
+      ours = this.contexts.ours.filter((context) => {
+        const filterNormalized = term.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 (value.length) {
-        let ours; let publics; let shared;
-        ours = this.contexts.ours.filter((context) => {
-          const filterNormalized = value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+      if (this.contexts.public) {
+        publics = this.contexts.public.filter((context) => {
+          const filterNormalized = term.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 = term.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);
+        updateContexts.shared = shared;
       }
-    });
+      return updateContexts;
+    }
   }
 
   public showFilter() {
@@ -141,4 +189,86 @@ export class ContextListComponent implements OnInit {
         return false;
     }
   }
+
+  sortContextsList(contexts: ContextsList) {
+    if (contexts) {
+      const contextsList = JSON.parse(JSON.stringify(contexts));
+      contextsList.ours.sort((a, b) => {
+        if (a.title < b.title) {
+          return -1;
+        }
+        if (a.title > b.title) {
+          return 1;
+        }
+        return 0;
+      });
+
+      if (contextsList.shared) {
+        contextsList.shared.sort((a, b) => {
+          if (a.title < b.title) {
+            return -1;
+          }
+          if (a.title > b.title) {
+            return 1;
+          }
+          return 0;
+        });
+      } else if (contextsList.public) {
+        contextsList.public.sort((a, b) => {
+          if (a.title < b.title) {
+            return -1;
+          }
+          if (a.title > b.title) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      return contextsList;
+    }
+  }
+
+  toggleSort(sortAlpha: boolean) {
+    this.sortedAlpha = sortAlpha;
+    if (this.sortedAlpha === true) {
+      const filterList = this.filterContextsList(this.term) ? this.filterContextsList(this.term) : this.contextsInitial;
+      this.contextsTemp = filterList;
+      this.contextsAlpha = this.sortContextsList(filterList);
+      this.contexts = this.contextsAlpha;
+    } else if (this.sortedAlpha === false) {
+      const filterList = this.filterContextsList(this.term) ? this.contextsTemp : this.contextsInitial;
+      this.contexts = filterList;
+    }
+  }
+
+  clearFilter() {
+    this.term = '';
+    this.contexts = this.contextsInitial;
+  }
+
+  createContext() {
+    this.dialog
+      .open(BookmarkDialogComponent, { disableClose: false })
+      .afterClosed()
+      .subscribe(title => {
+        if (title) {
+          const context = this.contextService.getContextFromMap(this.map);
+          context.title = title;
+          this.contextService.create(context).subscribe(() => {
+            const translate = this.languageService.translate;
+            const titleD = translate.instant(
+              'igo.context.bookmarkButton.dialog.createTitle'
+            );
+            const message = translate.instant(
+              'igo.context.bookmarkButton.dialog.createMsg',
+              {
+                value: context.title
+              }
+            );
+            this.messageService.success(message, titleD);
+            this.contextService.loadContext(context.uri);
+          });
+        }
+      });
+  }
 }
diff --git a/packages/context/src/lib/context-manager/context-manager.module.ts b/packages/context/src/lib/context-manager/context-manager.module.ts
index 66cbe3068a..cff525e3ff 100644
--- a/packages/context/src/lib/context-manager/context-manager.module.ts
+++ b/packages/context/src/lib/context-manager/context-manager.module.ts
@@ -9,7 +9,8 @@ import {
   MatFormFieldModule,
   MatInputModule,
   MatCheckboxModule,
-  MatRadioModule
+  MatRadioModule,
+  MatDialogModule
 } from '@angular/material';
 
 import { IgoAuthModule } from '@igo2/auth';
@@ -21,6 +22,7 @@ import {
   IgoStopPropagationModule
 } from '@igo2/common';
 
+import { BookmarkDialogComponent } from './../context-map-button/bookmark-button/bookmark-dialog.component';
 import { MapContextDirective } from './shared/map-context.directive';
 import { LayerContextDirective } from './shared/layer-context.directive';
 import { ContextListComponent } from './context-list/context-list.component';
@@ -31,6 +33,7 @@ import { ContextEditComponent } from './context-edit/context-edit.component';
 import { ContextEditBindingDirective } from './context-edit/context-edit-binding.directive';
 import { ContextPermissionsComponent } from './context-permissions/context-permissions.component';
 import { ContextPermissionsBindingDirective } from './context-permissions/context-permissions-binding.directive';
+import { IgoContextMapButtonModule } from '../context-map-button/context-map-button.module';
 
 const CONTEXT_DIRECTIVES = [
   MapContextDirective,
@@ -50,12 +53,17 @@ const CONTEXT_DIRECTIVES = [
     MatListModule,
     MatCheckboxModule,
     MatRadioModule,
+    MatDialogModule,
     IgoAuthModule,
     IgoListModule,
     IgoKeyValueModule,
     IgoCollapsibleModule,
     IgoStopPropagationModule,
-    IgoLanguageModule
+    IgoLanguageModule,
+    IgoContextMapButtonModule
+  ],
+  entryComponents: [
+    BookmarkDialogComponent
   ],
   exports: [
     ContextListComponent,
diff --git a/packages/context/src/lib/context-map-button/context-map-button.module.ts b/packages/context/src/lib/context-map-button/context-map-button.module.ts
index 10454df268..51ddcfa1c0 100644
--- a/packages/context/src/lib/context-map-button/context-map-button.module.ts
+++ b/packages/context/src/lib/context-map-button/context-map-button.module.ts
@@ -42,7 +42,7 @@ import { UserButtonComponent } from './user-button/user-button.component';
     MatDialogModule,
     MatInputModule
   ],
-  exports: [BookmarkButtonComponent, PoiButtonComponent, UserButtonComponent],
+  exports: [BookmarkButtonComponent, PoiButtonComponent, UserButtonComponent, BookmarkDialogComponent],
   declarations: [
     BookmarkButtonComponent,
     BookmarkDialogComponent,
diff --git a/packages/context/src/locale/en.context.json b/packages/context/src/locale/en.context.json
index a6e47e90c9..f436a92d1d 100644
--- a/packages/context/src/locale/en.context.json
+++ b/packages/context/src/locale/en.context.json
@@ -51,7 +51,9 @@
         "publicContexts": "Public contexts",
         "save": "Save this context",
         "sharedContexts": "Shared contexts",
-        "filterPlaceHolder": "Filer the contexts list"
+        "filterPlaceHolder": "Filer the contexts list",
+        "sortAlphabetically": "Sort the context's list alphabetically",
+        "sortContextOrder": "Replace contexts according to the initial list"
       },
       "permission": {
         "addBtn": "Add",
diff --git a/packages/context/src/locale/fr.context.json b/packages/context/src/locale/fr.context.json
index 6d19561893..70f014732f 100644
--- a/packages/context/src/locale/fr.context.json
+++ b/packages/context/src/locale/fr.context.json
@@ -51,7 +51,9 @@
         "publicContexts": "Contextes publics",
         "save": "Sauvegarder ce contexte",
         "sharedContexts": "Contextes partagés",
-        "filterPlaceHolder": "Filtrer la liste des contextes"
+        "filterPlaceHolder": "Filtrer la liste des contextes",
+        "sortAlphabetically": "Trier la liste des contextes en ordre alphabétique",
+        "sortContextOrder": "Replacer les contextes selon la liste initial"
       },
       "permission": {
         "addBtn": "Ajouter",
diff --git a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
index 940d4c8319..8cb8e5fbdf 100644
--- a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
+++ b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.html
@@ -1,5 +1,6 @@
 <igo-context-list
   igoContextListBinding
+  [map]="map"
   (edit)="editContext()"
   (managePermissions)="managePermissions()">
 </igo-context-list>
diff --git a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
index 3d34cbfed1..b5ca175645 100644
--- a/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
+++ b/packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts
@@ -3,6 +3,8 @@ import { Component } from '@angular/core';
 import { ToolComponent } from '@igo2/common';
 
 import { ToolState } from '../../tool/tool.state';
+import { MapState } from '../../map/map.state';
+import { IgoMap } from '@igo2/geo';
 
 @ToolComponent({
   name: 'contextManager',
@@ -14,7 +16,10 @@ import { ToolState } from '../../tool/tool.state';
   templateUrl: './context-manager-tool.component.html'
 })
 export class ContextManagerToolComponent {
-  constructor(private toolState: ToolState) {}
+
+  get map(): IgoMap { return this.mapState.map; }
+
+  constructor(private toolState: ToolState, private mapState: MapState) {}
 
   editContext() {
     this.toolState.toolbox.activateTool('contextEditor');

From 798133151cdca4de29d850945cad0b81a9752bf1 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Tue, 31 Mar 2020 11:29:50 -0400
Subject: [PATCH 07/13] WIP

---
 .../context-list/context-list.component.html  | 21 +++++++++++++++++-
 .../context-list/context-list.component.ts    | 22 +++++++++++++++----
 .../context-manager/context-manager.module.ts |  4 +++-
 packages/context/src/locale/en.context.json   |  3 ++-
 packages/context/src/locale/fr.context.json   |  3 ++-
 5 files changed, 45 insertions(+), 8 deletions(-)

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 2c12000e43..2e4a34f3d7 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
@@ -33,7 +33,26 @@
     (click)="toggleSort(false)">
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
-  <button *ngIf="auth.authenticated"
+
+  <button
+    mat-icon-button
+    [matTooltip]="'igo.context.contextManager.userAccount' | translate"
+    matTooltipShowDelay="500"
+    [matMenuTriggerFor]="accountMenu">
+    <mat-icon color="primary" svgIcon="account"></mat-icon>
+  </button>
+  <mat-menu #accountMenu="matMenu">
+    <ng-container *ngFor="let user of users">
+      <mat-checkbox
+        class="mat-menu-item"
+        [checked]="true"
+        (change)="userSelection()">
+        {{user}}
+      </mat-checkbox>
+    </ng-container>
+  </mat-menu>
+
+  <button *ngIf="authenticated"
     mat-icon-button
     [matTooltip]="'igo.context.bookmarkButton.create' | translate"
     matTooltipShowDelay="500"
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 37a7d0de1a..4d0e4a44e7 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
@@ -4,8 +4,7 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnInit,
-  ElementRef
+  OnInit
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
@@ -15,8 +14,8 @@ import { IgoMap } from '@igo2/geo';
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
 import { Subscription, BehaviorSubject } from 'rxjs';
-import { MatDialog, MatDialogRef } from '@angular/material';
-import { ContextService } from '../shared';
+import { MatDialog } from '@angular/material';
+import { ContextService } from '../shared/context.service';
 import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
 
 
@@ -52,6 +51,15 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
+  @Input()
+  get authenticated(): boolean {
+    return this._authenticated;
+  }
+  set authenticated(value: boolean) {
+    this._authenticated = value;
+  }
+  private _authenticated = false;
+
   @Input()
   get map(): IgoMap {
     return this._map;
@@ -86,6 +94,8 @@ export class ContextListComponent implements OnInit {
     public: 'igo.context.contextManager.publicContexts'
   };
 
+  public users = ['COG', '911', 'Public'];
+
   /**
    * Context filter term
    */
@@ -271,4 +281,8 @@ export class ContextListComponent implements OnInit {
         }
       });
   }
+
+  userSelection() {
+    return;
+  }
 }
diff --git a/packages/context/src/lib/context-manager/context-manager.module.ts b/packages/context/src/lib/context-manager/context-manager.module.ts
index cff525e3ff..a31d6bfd5b 100644
--- a/packages/context/src/lib/context-manager/context-manager.module.ts
+++ b/packages/context/src/lib/context-manager/context-manager.module.ts
@@ -10,7 +10,8 @@ import {
   MatInputModule,
   MatCheckboxModule,
   MatRadioModule,
-  MatDialogModule
+  MatDialogModule,
+  MatMenuModule
 } from '@angular/material';
 
 import { IgoAuthModule } from '@igo2/auth';
@@ -54,6 +55,7 @@ const CONTEXT_DIRECTIVES = [
     MatCheckboxModule,
     MatRadioModule,
     MatDialogModule,
+    MatMenuModule,
     IgoAuthModule,
     IgoListModule,
     IgoKeyValueModule,
diff --git a/packages/context/src/locale/en.context.json b/packages/context/src/locale/en.context.json
index f436a92d1d..0f1189f987 100644
--- a/packages/context/src/locale/en.context.json
+++ b/packages/context/src/locale/en.context.json
@@ -53,7 +53,8 @@
         "sharedContexts": "Shared contexts",
         "filterPlaceHolder": "Filer the contexts list",
         "sortAlphabetically": "Sort the context's list alphabetically",
-        "sortContextOrder": "Replace contexts according to the initial list"
+        "sortContextOrder": "Replace contexts according to the initial list",
+        "userAccount": "User account"
       },
       "permission": {
         "addBtn": "Add",
diff --git a/packages/context/src/locale/fr.context.json b/packages/context/src/locale/fr.context.json
index 70f014732f..e40b4e0381 100644
--- a/packages/context/src/locale/fr.context.json
+++ b/packages/context/src/locale/fr.context.json
@@ -53,7 +53,8 @@
         "sharedContexts": "Contextes partagés",
         "filterPlaceHolder": "Filtrer la liste des contextes",
         "sortAlphabetically": "Trier la liste des contextes en ordre alphabétique",
-        "sortContextOrder": "Replacer les contextes selon la liste initial"
+        "sortContextOrder": "Replacer les contextes selon la liste initial",
+        "userAccount": "Profils utilisateurs"
       },
       "permission": {
         "addBtn": "Ajouter",

From b4285de4f7dd2837725fb3e511f80f17293d0a7d Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 9 Apr 2020 14:51:44 -0400
Subject: [PATCH 08/13] WIP

---
 .../context-list/context-list.component.html        |  2 +-
 .../context-list/context-list.component.scss        |  8 +++++++-
 .../context-list/context-list.component.ts          | 13 +++++--------
 3 files changed, 13 insertions(+), 10 deletions(-)

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 2e4a34f3d7..cb9f47f624 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 @@
 <igo-list [navigation]="true">
-  <mat-form-field *ngIf="showFilter()" class="contextFilter">
+  <mat-form-field *ngIf="showFilter()" [ngClass]="authenticated ? 'context-filter-min-width' : 'context-filter-max-width'">
     <input
       matInput
       type="text"
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 fc6cd77e9e..335cd659cd 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,9 +1,15 @@
-.contextFilter {
+.context-filter-max-width {
   width: calc(100% - 100px);
   margin: 5px;
   padding-left: 6px;
 }
 
+.context-filter-min-width {
+  width: calc(100% - 135px);
+  margin: 5px;
+  padding-left: 6px;
+}
+
 .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 4d0e4a44e7..c6e2c41787 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
@@ -51,14 +51,7 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
-  @Input()
-  get authenticated(): boolean {
-    return this._authenticated;
-  }
-  set authenticated(value: boolean) {
-    this._authenticated = value;
-  }
-  private _authenticated = false;
+  public authenticated = false;
 
   @Input()
   get map(): IgoMap {
@@ -145,6 +138,10 @@ export class ContextListComponent implements OnInit {
         this.contexts = this.filterContextsList(value);
       }
     });
+
+    this.auth.authenticate$.subscribe((value) => {
+      this.authenticated = value;
+    })
   }
 
   private filterContextsList(term) {

From f9543511c106844ca34f156581a5a0f861fef5ae Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 16 Apr 2020 15:27:04 -0400
Subject: [PATCH 09/13] WIP

---
 .../context-list/context-list.component.html        |  4 ++--
 .../context-list/context-list.component.ts          | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

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 cb9f47f624..8a8ee3ff40 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
@@ -34,7 +34,7 @@
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
 
-  <button
+  <!-- <button *ngIf="authenticated"
     mat-icon-button
     [matTooltip]="'igo.context.contextManager.userAccount' | translate"
     matTooltipShowDelay="500"
@@ -50,7 +50,7 @@
         {{user}}
       </mat-checkbox>
     </ng-container>
-  </mat-menu>
+  </mat-menu> -->
 
   <button *ngIf="authenticated"
     mat-icon-button
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 c6e2c41787..09add75c04 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
@@ -18,7 +18,6 @@ import { MatDialog } from '@angular/material';
 import { ContextService } from '../shared/context.service';
 import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
 
-
 @Component({
   selector: 'igo-context-list',
   templateUrl: './context-list.component.html',
@@ -131,7 +130,7 @@ export class ContextListComponent implements OnInit {
       if (this.sortedAlpha === undefined && this.term === '') {
         this.contextsInitial = this.contexts;
       }
-    })
+    });
 
     this.term$$ = this.term$.subscribe((value) => {
       if (this.filterContextsList(value)) {
@@ -141,7 +140,7 @@ export class ContextListComponent implements OnInit {
 
     this.auth.authenticate$.subscribe((value) => {
       this.authenticated = value;
-    })
+    });
   }
 
   private filterContextsList(term) {
@@ -165,7 +164,7 @@ export class ContextListComponent implements OnInit {
           const filterNormalized = term.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) {
@@ -279,7 +278,7 @@ export class ContextListComponent implements OnInit {
       });
   }
 
-  userSelection() {
-    return;
-  }
+  // userSelection() {
+  //   return;
+  // }
 }

From f1dc0f26ad54e73c899887f25461ae8fe9168d96 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Fri, 17 Apr 2020 11:57:22 -0400
Subject: [PATCH 10/13] WIP

---
 .../context-list/context-list.component.html  | 17 +++---
 .../context-list/context-list.component.scss  |  4 +-
 .../context-list/context-list.component.ts    | 54 ++++++++++++-------
 3 files changed, 46 insertions(+), 29 deletions(-)

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 8a8ee3ff40..c191839ed6 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
@@ -17,6 +17,7 @@
       <mat-icon svgIcon="close"></mat-icon>
     </button>
   </mat-form-field>
+
   <button
   *ngIf="!sortedAlpha"
   mat-icon-button
@@ -34,6 +35,14 @@
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
 
+  <button *ngIf="authenticated"
+  mat-icon-button
+  [matTooltip]="'igo.context.bookmarkButton.create' | translate"
+  matTooltipShowDelay="500"
+  (click)="createContext()">
+  <mat-icon color="primary" svgIcon="star"></mat-icon>
+  </button>
+
   <!-- <button *ngIf="authenticated"
     mat-icon-button
     [matTooltip]="'igo.context.contextManager.userAccount' | translate"
@@ -52,14 +61,6 @@
     </ng-container>
   </mat-menu> -->
 
-  <button *ngIf="authenticated"
-    mat-icon-button
-    [matTooltip]="'igo.context.bookmarkButton.create' | translate"
-    matTooltipShowDelay="500"
-    (click)="createContext()">
-    <mat-icon color="primary" svgIcon="star"></mat-icon>
-  </button>
-
   <ng-template ngFor let-groupContexts [ngForOf]="contexts$ | async | keyvalue">
 
     <igo-collapsible *ngIf="groupContexts.value.length && auth.authenticated" [title]="titleMapping[groupContexts.key] | translate">
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 335cd659cd..127d90524a 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,11 +1,11 @@
 .context-filter-max-width {
-  width: calc(100% - 100px);
+  width: calc(100% - 60px);
   margin: 5px;
   padding-left: 6px;
 }
 
 .context-filter-min-width {
-  width: calc(100% - 135px);
+  width: calc(100% - 95px);
   margin: 5px;
   padding-left: 6px;
 }
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 09add75c04..fcfe34b75d 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
@@ -4,7 +4,8 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnInit
+  OnInit,
+  ChangeDetectionStrategy
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
@@ -21,7 +22,8 @@ import { BookmarkDialogComponent } from '../../context-map-button/bookmark-butto
 @Component({
   selector: 'igo-context-list',
   templateUrl: './context-list.component.html',
-  styleUrls: ['./context-list.component.scss']
+  styleUrls: ['./context-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextListComponent implements OnInit {
   contexts$: BehaviorSubject<ContextsList> = new BehaviorSubject(undefined);
@@ -86,7 +88,7 @@ export class ContextListComponent implements OnInit {
     public: 'igo.context.contextManager.publicContexts'
   };
 
-  public users = ['COG', '911', 'Public'];
+  // public users = ['COG', '911', 'Public'];
 
   /**
    * Context filter term
@@ -94,6 +96,7 @@ export class ContextListComponent implements OnInit {
   @Input()
   set term(value: string) {
     this.term$.next(value);
+    this.cdRef.detectChanges();
   }
   get term(): string {
     return this.term$.value;
@@ -135,32 +138,37 @@ export class ContextListComponent implements OnInit {
     this.term$$ = this.term$.subscribe((value) => {
       if (this.filterContextsList(value)) {
         this.contexts = this.filterContextsList(value);
+        this.cdRef.detectChanges();
       }
     });
 
-    this.auth.authenticate$.subscribe((value) => {
-      this.authenticated = value;
+    this.auth.authenticate$.subscribe(() => {
+      this.authenticated = this.auth.authenticated;
     });
   }
 
   private filterContextsList(term) {
+    this.contexts = this.contextsInitial;
     if (term === '') {
+      if (this.sortedAlpha) {
+        this.contexts = this.sortContextsList(this.contextsInitial);
+      }
       return;
     }
 
     if (term.length) {
-      let ours; let publics; let shared;
-      ours = this.contexts.ours.filter((context) => {
+      const ours = this.contexts.ours.filter((context) => {
         const filterNormalized = term.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 = {
+
+      let updateContexts: ContextsList = {
         ours
       };
 
       if (this.contexts.public) {
-        publics = this.contexts.public.filter((context) => {
+        const publics = this.contexts.public.filter((context) => {
           const filterNormalized = term.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
           const contextTitleNormalized = context.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
           return contextTitleNormalized.includes(filterNormalized);
@@ -168,13 +176,17 @@ export class ContextListComponent implements OnInit {
         updateContexts.public = publics;
       }
       if (this.contexts.shared) {
-        shared = this.contexts.shared.filter((context) => {
+        const shared = this.contexts.shared.filter((context) => {
           const filterNormalized = term.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;
       }
+
+      if (this.sortedAlpha) {
+        updateContexts = this.sortContextsList(updateContexts);
+      }
       return updateContexts;
     }
   }
@@ -236,20 +248,24 @@ export class ContextListComponent implements OnInit {
 
   toggleSort(sortAlpha: boolean) {
     this.sortedAlpha = sortAlpha;
-    if (this.sortedAlpha === true) {
-      const filterList = this.filterContextsList(this.term) ? this.filterContextsList(this.term) : this.contextsInitial;
-      this.contextsTemp = filterList;
-      this.contextsAlpha = this.sortContextsList(filterList);
-      this.contexts = this.contextsAlpha;
-    } else if (this.sortedAlpha === false) {
-      const filterList = this.filterContextsList(this.term) ? this.contextsTemp : this.contextsInitial;
-      this.contexts = filterList;
+    if (this.term === '') {
+      if (this.sortedAlpha) {
+        this.contexts = this.sortContextsList(this.contextsInitial);
+      } else {
+        this.contexts = this.contextsInitial;
+      }
+      return;
     }
+    this.contexts = this.filterContextsList(this.term);
   }
 
   clearFilter() {
     this.term = '';
-    this.contexts = this.contextsInitial;
+    if (this.sortedAlpha) {
+      this.contexts = this.sortContextsList(this.contextsInitial);
+    } else {
+      this.contexts = this.contextsInitial;
+    }
   }
 
   createContext() {

From 0703108a1c5d8cf0e102f65fd1c33070935c5510 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 23 Apr 2020 11:28:27 -0400
Subject: [PATCH 11/13] WIP

---
 .../context-item/context-item.component.ts    |  5 +-
 .../context-list/context-list.component.html  | 14 +--
 .../context-list/context-list.component.ts    | 94 ++++++++-----------
 3 files changed, 47 insertions(+), 66 deletions(-)

diff --git a/packages/context/src/lib/context-manager/context-item/context-item.component.ts b/packages/context/src/lib/context-manager/context-item/context-item.component.ts
index feedd5b961..1ecc97c6d7 100644
--- a/packages/context/src/lib/context-manager/context-item/context-item.component.ts
+++ b/packages/context/src/lib/context-manager/context-item/context-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
 import { TypePermission } from '../shared/context.enum';
@@ -7,7 +7,8 @@ import { DetailedContext } from '../shared/context.interface';
 @Component({
   selector: 'igo-context-item',
   templateUrl: './context-item.component.html',
-  styleUrls: ['./context-item.component.scss']
+  styleUrls: ['./context-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextItemComponent {
   public typePermission = TypePermission;
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 c191839ed6..eebde1504f 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 @@
 <igo-list [navigation]="true">
-  <mat-form-field *ngIf="showFilter()" [ngClass]="authenticated ? 'context-filter-min-width' : 'context-filter-max-width'">
+  <mat-form-field *ngIf="showFilter()" [ngClass]="auth.authenticated ? 'context-filter-min-width' : 'context-filter-max-width'">
     <input
       matInput
       type="text"
@@ -35,12 +35,12 @@
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
 
-  <button *ngIf="authenticated"
-  mat-icon-button
-  [matTooltip]="'igo.context.bookmarkButton.create' | translate"
-  matTooltipShowDelay="500"
-  (click)="createContext()">
-  <mat-icon color="primary" svgIcon="star"></mat-icon>
+  <button *ngIf="auth.authenticated"
+    mat-icon-button
+    [matTooltip]="'igo.context.bookmarkButton.create' | translate"
+    matTooltipShowDelay="500"
+    (click)="createContext()">
+    <mat-icon color="primary" svgIcon="star"></mat-icon>
   </button>
 
   <!-- <button *ngIf="authenticated"
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 fcfe34b75d..5cbb916de0 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
@@ -5,7 +5,8 @@ import {
   EventEmitter,
   ChangeDetectorRef,
   OnInit,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  OnDestroy
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
@@ -14,7 +15,7 @@ import { IgoMap } from '@igo2/geo';
 
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
-import { Subscription, BehaviorSubject } from 'rxjs';
+import { Subscription, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { MatDialog } from '@angular/material';
 import { ContextService } from '../shared/context.service';
 import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
@@ -25,8 +26,13 @@ import { BookmarkDialogComponent } from '../../context-map-button/bookmark-butto
   styleUrls: ['./context-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ContextListComponent implements OnInit {
-  contexts$: BehaviorSubject<ContextsList> = new BehaviorSubject(undefined);
+export class ContextListComponent implements OnInit, OnDestroy {
+  private contextsInitial: ContextsList = { ours: [] };
+  contexts$: BehaviorSubject<ContextsList> = new BehaviorSubject(this.contextsInitial);
+
+  change$ = new ReplaySubject<void>(1);
+
+  private change$$: Subscription;
 
   @Input()
   get contexts(): ContextsList {
@@ -34,13 +40,10 @@ export class ContextListComponent implements OnInit {
   }
   set contexts(value: ContextsList) {
     this._contexts = value;
-    this.contexts$.next(value);
     this.cdRef.detectChanges();
+    this.next();
   }
   private _contexts: ContextsList = { ours: [] };
-  contexts$$: Subscription;
-
-  private contextsInitial: ContextsList = { ours: [] };
 
   @Input()
   get selectedContext(): DetailedContext {
@@ -52,8 +55,6 @@ export class ContextListComponent implements OnInit {
   }
   private _selectedContext: DetailedContext;
 
-  public authenticated = false;
-
   @Input()
   get map(): IgoMap {
     return this._map;
@@ -95,20 +96,20 @@ export class ContextListComponent implements OnInit {
    */
   @Input()
   set term(value: string) {
-    this.term$.next(value);
-    this.cdRef.detectChanges();
+    this._term = value;
+    this.next();
   }
   get term(): string {
-    return this.term$.value;
+    return this._term;
   }
-  public term$: BehaviorSubject<string> = new BehaviorSubject('');
-  term$$: Subscription;
+  public _term: string = '';
 
   get sortedAlpha(): boolean {
     return this._sortedAlpha;
   }
   set sortedAlpha(value: boolean) {
     this._sortedAlpha = value;
+    this.next();
   }
   private _sortedAlpha: boolean = undefined;
 
@@ -129,36 +130,24 @@ export class ContextListComponent implements OnInit {
     private messageService: MessageService) {}
 
   ngOnInit() {
-    this.contexts$$ = this.contexts$.subscribe(() => {
-      if (this.sortedAlpha === undefined && this.term === '') {
-        this.contextsInitial = this.contexts;
-      }
-    });
-
-    this.term$$ = this.term$.subscribe((value) => {
-      if (this.filterContextsList(value)) {
-        this.contexts = this.filterContextsList(value);
-        this.cdRef.detectChanges();
-      }
+    this.change$$ = this.change$.subscribe(() => {
+      this.contexts$.next(this.filterContextsList(this.contexts));
     });
+  }
 
-    this.auth.authenticate$.subscribe(() => {
-      this.authenticated = this.auth.authenticated;
-    });
+  private next() {
+    this.change$.next();
   }
 
-  private filterContextsList(term) {
-    this.contexts = this.contextsInitial;
-    if (term === '') {
+  private filterContextsList(contexts: ContextsList) {
+    if (this.term === '') {
       if (this.sortedAlpha) {
-        this.contexts = this.sortContextsList(this.contextsInitial);
+        contexts = this.sortContextsList(contexts);
       }
-      return;
-    }
-
-    if (term.length) {
-      const ours = this.contexts.ours.filter((context) => {
-        const filterNormalized = term.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+      return contexts;
+    } else {
+      const ours = contexts.ours.filter((context) => {
+        const filterNormalized = this.term.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
         const contextTitleNormalized = context.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
         return contextTitleNormalized.includes(filterNormalized);
       });
@@ -168,16 +157,17 @@ export class ContextListComponent implements OnInit {
       };
 
       if (this.contexts.public) {
-        const publics = this.contexts.public.filter((context) => {
-          const filterNormalized = term.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        const publics = contexts.public.filter((context) => {
+          const filterNormalized = this.term.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) {
-        const shared = this.contexts.shared.filter((context) => {
-          const filterNormalized = term.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        const shared = contexts.shared.filter((context) => {
+          const filterNormalized = this.term.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
           const contextTitleNormalized = context.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
           return contextTitleNormalized.includes(filterNormalized);
         });
@@ -191,6 +181,10 @@ export class ContextListComponent implements OnInit {
     }
   }
 
+  ngOnDestroy() {
+    this.change$$.unsubscribe();
+  }
+
   public showFilter() {
     switch (this.showContextFilter) {
       case ContextListControlsEnum.always:
@@ -248,24 +242,10 @@ export class ContextListComponent implements OnInit {
 
   toggleSort(sortAlpha: boolean) {
     this.sortedAlpha = sortAlpha;
-    if (this.term === '') {
-      if (this.sortedAlpha) {
-        this.contexts = this.sortContextsList(this.contextsInitial);
-      } else {
-        this.contexts = this.contextsInitial;
-      }
-      return;
-    }
-    this.contexts = this.filterContextsList(this.term);
   }
 
   clearFilter() {
     this.term = '';
-    if (this.sortedAlpha) {
-      this.contexts = this.sortContextsList(this.contextsInitial);
-    } else {
-      this.contexts = this.contextsInitial;
-    }
   }
 
   createContext() {

From ccd1cf9d024d0b14bbfbc61624f165b327d00c73 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 30 Apr 2020 15:03:06 -0400
Subject: [PATCH 12/13] feat(context-list): add context list tool (alpha, add
 context)

---
 .../context-list/context-list.component.ts        | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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 5cbb916de0..eb7f55f941 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
@@ -15,10 +15,11 @@ import { IgoMap } from '@igo2/geo';
 
 import { DetailedContext, ContextsList } from '../shared/context.interface';
 import { ContextListControlsEnum } from './context-list.enum';
-import { Subscription, BehaviorSubject, ReplaySubject } from 'rxjs';
+import { Subscription, BehaviorSubject, ReplaySubject, EMPTY, timer } from 'rxjs';
 import { MatDialog } from '@angular/material';
 import { ContextService } from '../shared/context.service';
 import { BookmarkDialogComponent } from '../../context-map-button/bookmark-button/bookmark-dialog.component';
+import { debounce } from 'rxjs/operators';
 
 @Component({
   selector: 'igo-context-list',
@@ -130,9 +131,15 @@ export class ContextListComponent implements OnInit, OnDestroy {
     private messageService: MessageService) {}
 
   ngOnInit() {
-    this.change$$ = this.change$.subscribe(() => {
-      this.contexts$.next(this.filterContextsList(this.contexts));
-    });
+    this.change$$ = this.change$
+      .pipe(
+        debounce(() => {
+          return this.contexts.ours.length === 0 ? EMPTY : timer(50);
+        })
+      )
+      .subscribe(() => {
+        this.contexts$.next(this.filterContextsList(this.contexts));
+      });
   }
 
   private next() {

From 712bfbd50b1954921769493404c0c2550dafe4f6 Mon Sep 17 00:00:00 2001
From: PhilippeL <PHILIPPE.LAFRENIERE@msp.gouv.qc.ca>
Date: Thu, 30 Apr 2020 15:18:02 -0400
Subject: [PATCH 13/13] LAST

---
 .../context-manager/context-list/context-list.component.ts    | 4 ----
 1 file changed, 4 deletions(-)

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 eb7f55f941..9486e137ed 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
@@ -114,10 +114,6 @@ export class ContextListComponent implements OnInit, OnDestroy {
   }
   private _sortedAlpha: boolean = undefined;
 
-  public contextsAlpha: ContextsList;
-
-  public contextsTemp: ContextsList;
-
   public showContextFilter = ContextListControlsEnum.always;
 
   public thresholdToFilter = 5;