From aba40328c8651981f4e004975e14e24328b37095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Barbeau?=
 <marc-andre.barbeau@msp.gouv.qc.ca>
Date: Thu, 6 Jun 2019 15:50:22 -0400
Subject: [PATCH] feat(query toas panel): in progress

---
 src/app/pages/portal/portal.component.html    |  18 +--
 src/app/pages/portal/portal.component.ts      |  10 +-
 .../toast-panel/toast-panel.component.html    |  26 +++-
 .../toast-panel/toast-panel.component.ts      | 121 ++++++++++++------
 .../portal/toast-panel/toast-panel.module.ts  |   5 +-
 5 files changed, 114 insertions(+), 66 deletions(-)

diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
index 7dabf5604..a919bbdc7 100644
--- a/src/app/pages/portal/portal.component.html
+++ b/src/app/pages/portal/portal.component.html
@@ -91,24 +91,10 @@
 </app-expansion-panel>
 
 <app-toast-panel
-  *ngIf="toastPanelShown"
-  [title]="toastPanelTitle"
-  [withHeader]="toastPanelContent === 'feature'"
-  [(opened)]="toastPanelOpened"
+  [results]="queryResults"
+  [store]="searchStore"
   [@toastPanelOffsetX]="sidenavOpened"
   [@toastPanelOffsetY]="expansionPanelExpanded">
-
-  <igo-feature-details
-    *ngIf="toastPanelContent === 'feature'"
-    [feature]="searchResult.data">
-  </igo-feature-details>
-
-  <!-- <igo-editor-outlet
-    *ngIf="toastPanelContent === 'editor'"
-    [editor]="editor"
-    (deactivateWidget)="onDeactivateEditorWidget()">
-  </igo-editor-outlet> -->
-
 </app-toast-panel>
 
   <!-- <igo-toast
diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
index da5fdfe92..85fc6a71e 100644
--- a/src/app/pages/portal/portal.component.ts
+++ b/src/app/pages/portal/portal.component.ts
@@ -75,6 +75,8 @@ export class PortalComponent implements OnInit, OnDestroy {
   public searchResult: SearchResult;
   public minSearchTermLength = 2;
 
+  public queryResults: SearchResult[];
+
   public expansionPanelExpanded = false;
   public hasExpansionPanel = true;
   public sidenavOpened = false;
@@ -276,9 +278,11 @@ export class PortalComponent implements OnInit, OnDestroy {
       reverse: false,
       source: querySearchSource
     };
-    research.request.subscribe((_results: SearchResult<Feature>[]) => {
-      this.searchResult = _results[0];
-      this.openToastPanel();
+    research.request.subscribe((queryResults: SearchResult<Feature>[]) => {
+      this.queryResults = queryResults;
+      this.searchStore.load(queryResults);
+      // this.searchResult = _results[0];
+      // this.openToastPanel();
       // this.onSearch({ research, results: _results });
     });
   }
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.html b/src/app/pages/portal/toast-panel/toast-panel.component.html
index de8050a1e..340aa2703 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.component.html
+++ b/src/app/pages/portal/toast-panel/toast-panel.component.html
@@ -1,11 +1,11 @@
 <igo-panel
-  [title]="title"
-  [withHeader]="withHeader"
+  *ngIf="results && results.length"
+  [title]="resultSelected ? getTitle(resultSelected) : 'Liste des résultats'"
   (click)="onToggleClick()">
 
-
   <button
     mat-icon-button
+    igoStopPropagation
     panelLeftButton
     (click)="onListClick()">
     <mat-icon>list</mat-icon>
@@ -13,20 +13,23 @@
 
   <button
     mat-icon-button
+    igoStopPropagation
     panelLeftButton
-    (click)="onCloseClick()">
+    (click)="onPreviousClick()">
     <mat-icon>chevron_left</mat-icon>
   </button>
 
   <button
     mat-icon-button
+    igoStopPropagation
     panelRightButton
-    (click)="onCloseClick()">
+    (click)="onNextClick()">
     <mat-icon>chevron_right</mat-icon>
   </button>
 
   <button
     mat-icon-button
+    igoStopPropagation
     panelRightButton
     (click)="onCloseClick()">
     <mat-icon>close</mat-icon>
@@ -36,6 +39,17 @@
     #content
     igoStopPropagation
     [@showContent]="opened">
-    <ng-content></ng-content>
+
+    <igo-feature-details
+      *ngIf="resultSelected"
+      [feature]="resultSelected.data">
+    </igo-feature-details>
+
+    <igo-search-results
+      *ngIf="!resultSelected"
+      [store]="store"
+      (resultSelect)="onResultSelect($event)">
+    </igo-search-results>
+
   </div>
 </igo-panel>
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.ts b/src/app/pages/portal/toast-panel/toast-panel.component.ts
index 5c5921ee8..3ce104dfb 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.component.ts
+++ b/src/app/pages/portal/toast-panel/toast-panel.component.ts
@@ -9,70 +9,111 @@ import {
   ViewChild
 } from '@angular/core';
 
+import { getEntityTitle, EntityStore } from '@igo2/common';
+
+import { Feature, SearchResult } from '@igo2/geo';
+
 import { showContent } from './toast-panel.animations';
 
 @Component({
   selector: 'app-toast-panel',
   templateUrl: './toast-panel.component.html',
   styleUrls: ['./toast-panel.component.scss'],
-  animations: [showContent()],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  animations: [showContent()]
+  // changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToastPanelComponent {
-  @Input()
-  get opened(): boolean {
-    return this._opened;
-  }
-  set opened(value: boolean) {
-    if (value === this._opened) {
-      return;
-    }
-    this._opened = value;
-    this.openedChange.emit(this._opened);
-  }
-  private _opened: boolean;
+  private opened: boolean = true;
+  //
+  // @Input()
+  // get title(): string {
+  //   return this._title;
+  // }
+  // set title(value: string) {
+  //   this._title = value;
+  // }
+  // private _title: string;
 
-  @Input()
-  get title(): string {
-    return this._title;
-  }
-  set title(value: string) {
-    this._title = value;
-  }
-  private _title: string;
+  @Input() results: SearchResult<Feature>[];
 
-  @Input()
-  get withHeader(): boolean {
-    return this._withHeader;
-  }
-  set withHeader(value: boolean) {
-    this._withHeader = value;
-  }
-  private _withHeader: boolean;
+  @Input() store: EntityStore<SearchResult<Feature>[]>;
+
+  resultSelected: SearchResult<Feature>;
 
-  @Output() openedChange = new EventEmitter<boolean>();
+  // @Output() openedChange = new EventEmitter<boolean>();
+  // @Output() close = new EventEmitter<boolean>();
 
   @HostBinding('class.app-toast-panel-opened')
   get hasOpenedClass() {
     return this.opened;
   }
 
-  @HostBinding('style.visibility')
-  get displayStyle() {
-    return this.withHeader || this.opened ? 'visible' : 'hidden';
-  }
+  // @HostBinding('style.visibility')
+  // get displayStyle() {
+  //   return this.opened ? 'visible' : 'hidden';
+  // }
+
+  // @ViewChild('content') content: ElementRef;
+  //
+  // get empty(): boolean {
+  //   return this.content.nativeElement.children.length === 0;
+  // }
 
-  @ViewChild('content') content: ElementRef;
+  constructor() {}
 
-  get empty(): boolean {
-    return this.content.nativeElement.children.length === 0;
+  getTitle(result: SearchResult) {
+    return getEntityTitle(result);
   }
 
-  constructor() {}
+  selectResult(result: SearchResult<Feature>) {
+    this.resultSelected = result;
+  }
 
   onToggleClick() {
     this.opened = !this.opened;
   }
 
-  onCloseClick() {}
+  onCloseClick() {
+    this.results = undefined;
+  }
+
+  onPreviousClick() {
+    let i = this.results.indexOf(this.resultSelected);
+    const previousResult = this.results[i--];
+    if (previousResult) {
+      this.selectResult(previousResult);
+    }
+  }
+
+  onNextClick() {
+    let i = this.results.indexOf(this.resultSelected);
+    const nextResult = this.results[i++];
+    if (nextResult) {
+      this.selectResult(nextResult);
+    }
+  }
+
+  onListClick() {
+    this.selectResult(undefined);
+  }
+
+  onResultSelect(result: SearchResult<Feature>) {
+    this.selectResult(result);
+    this.addFeatureToMap(result);
+  }
+
+  // onResultSelect(result: SearchResult<Feature>) {
+  //   this.addFeatureToMap(result);
+  // }
+
+  private addFeatureToMap(result: SearchResult<Feature>) {
+    const feature = result.data;
+
+    // Somethimes features have no geometry. It happens with some GetFeatureInfo
+    if (feature.geometry === undefined) {
+      return;
+    }
+
+    // this.map.overlay.setFeatures([feature], FeatureMotion.Default);
+  }
 }
diff --git a/src/app/pages/portal/toast-panel/toast-panel.module.ts b/src/app/pages/portal/toast-panel/toast-panel.module.ts
index 7633aa8e0..95a12fbba 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.module.ts
+++ b/src/app/pages/portal/toast-panel/toast-panel.module.ts
@@ -4,6 +4,7 @@ import { MatIconModule, MatButtonModule } from '@angular/material';
 
 import { IgoPanelModule, IgoStopPropagationModule } from '@igo2/common';
 import { IgoLanguageModule } from '@igo2/core';
+import { IgoFeatureModule, IgoSearchResultsModule } from '@igo2/geo';
 
 import { ToastPanelComponent } from './toast-panel.component';
 
@@ -14,7 +15,9 @@ import { ToastPanelComponent } from './toast-panel.component';
     MatButtonModule,
     IgoLanguageModule,
     IgoPanelModule,
-    IgoStopPropagationModule
+    IgoStopPropagationModule,
+    IgoFeatureModule,
+    IgoSearchResultsModule
   ],
   exports: [ToastPanelComponent],
   declarations: [ToastPanelComponent]