From 834272ac6406a482efef3acd5453f2cf8cc00dc0 Mon Sep 17 00:00:00 2001
From: Dereck Lynch <Dereck.Lynch@mffp.gouv.qc.ca>
Date: Thu, 22 Aug 2019 12:16:44 -0400
Subject: [PATCH] fix(toast-panel): label select in toast-panel content is now
 working

---
 .../toast-panel/toast-panel.component.html    | 119 +++++++++---------
 .../toast-panel/toast-panel.component.scss    |   4 +
 .../toast-panel/toast-panel.component.ts      |  11 +-
 3 files changed, 77 insertions(+), 57 deletions(-)

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 f8ca96726..de2844ed3 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.component.html
+++ b/src/app/pages/portal/toast-panel/toast-panel.component.html
@@ -1,64 +1,71 @@
-<igo-panel
-  *ngIf="store.entities$ | async"
-  [title]="resultSelected$.value ? getTitle(resultSelected$.value) : 'Liste des résultats'"
-  (click)="onToggleClick($event)"
-  (swipeleft)="swipe($event.type)"
-  (swiperight)="swipe($event.type)"
-  (swipeup)="swipe($event.type)"
-  (swipedown)="swipe($event.type)">
+<ng-template #toast>
+  <igo-panel
+    *ngIf="store.entities$ | async"
+    [title]="resultSelected$.value ? getTitle(resultSelected$.value) : 'Liste des résultats'"
+    (click)="onToggleClick($event)">
 
-  <button
-    *ngIf="resultSelected$.value"
-    mat-icon-button
-    igoStopPropagation
-    panelLeftButton
-    (click)="unselectResult()">
-    <mat-icon svgIcon="format-list-bulleted-square"></mat-icon>
-  </button>
+    <button
+      *ngIf="resultSelected$.value"
+      mat-icon-button
+      igoStopPropagation
+      panelLeftButton
+      (click)="unselectResult()">
+      <mat-icon svgIcon="format-list-bulleted-square"></mat-icon>
+    </button>
+
+    <button
+      *ngIf="resultSelected$.value"
+      [disabled]="results[0].meta.id === resultSelected$.value.meta.id"
+      mat-icon-button
+      igoStopPropagation
+      panelLeftButton
+      (click)="previousResult()">
+      <mat-icon svgIcon="chevron-left"></mat-icon>
+    </button>
 
-  <button
-    *ngIf="resultSelected$.value"
-    [disabled]="results[0].meta.id === resultSelected$.value.meta.id"
-    mat-icon-button
-    igoStopPropagation
-    panelLeftButton
-    (click)="previousResult()">
-    <mat-icon svgIcon="chevron-left"></mat-icon>
-  </button>
+    <button
+      *ngIf="resultSelected$.value"
+      [disabled]="results[results.length-1].meta.id === resultSelected$.value.meta.id"
+      mat-icon-button
+      igoStopPropagation
+      panelRightButton
+      (click)="nextResult()">
+      <mat-icon svgIcon="chevron-right"></mat-icon>
+    </button>
 
-  <button
-    *ngIf="resultSelected$.value"
-    [disabled]="results[results.length-1].meta.id === resultSelected$.value.meta.id"
-    mat-icon-button
-    igoStopPropagation
-    panelRightButton
-    (click)="nextResult()">
-    <mat-icon svgIcon="chevron-right"></mat-icon>
-  </button>
+    <button
+      mat-icon-button
+      igoStopPropagation
+      panelRightButton
+      (click)="clear()">
+      <mat-icon svgIcon="close"></mat-icon>
+    </button>
 
-  <button
-    mat-icon-button
-    igoStopPropagation
-    panelRightButton
-    (click)="clear()">
-    <mat-icon svgIcon="close"></mat-icon>
-  </button>
+    <div
+      #content
+      igoStopPropagation>
 
-  <div
-    #content
-    igoStopPropagation>
+      <igo-feature-details
+        *ngIf="resultSelected$.value"
+        [feature]="resultSelected$.value.data">
+      </igo-feature-details>
 
-    <igo-feature-details
-      *ngIf="resultSelected$.value"
-      [feature]="resultSelected$.value.data">
-    </igo-feature-details>
+      <igo-search-results
+        *ngIf="!resultSelected$.value"
+        [store]="store"
+        (resultFocus)="focusResult($event)"
+        (resultSelect)="selectResult($event)">
+      </igo-search-results>
+
+    </div>
+  </igo-panel>
+</ng-template>
 
-    <igo-search-results
-      *ngIf="!resultSelected$.value"
-      [store]="store"
-      (resultFocus)="focusResult($event)"
-      (resultSelect)="selectResult($event)">
-    </igo-search-results>
+<div *ngIf="isMobile(); else toast"
+(swipeleft)="swipe($event.type)"
+(swiperight)="swipe($event.type)"
+(swipeup)="swipe($event.type)"
+(swipedown)="swipe($event.type)">
 
-  </div>
-</igo-panel>
+<ng-template [ngTemplateOutlet]="toast"></ng-template>
+</div>
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.scss b/src/app/pages/portal/toast-panel/toast-panel.component.scss
index 6d97d58aa..5c616b1ba 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.component.scss
+++ b/src/app/pages/portal/toast-panel/toast-panel.component.scss
@@ -50,4 +50,8 @@ igo-panel ::ng-deep .igo-panel-header ::ng-deep [panelrightbutton] {
 
 igo-panel ::ng-deep .igo-panel-content {
   max-height: 230px;
+  -webkit-user-select: auto !important;
+  -moz-user-select: auto !important;
+  -ms-user-select: auto !important;
+  user-select: auto !important;
 }
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 1a62a89ce..a931fd298 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.component.ts
+++ b/src/app/pages/portal/toast-panel/toast-panel.component.ts
@@ -11,6 +11,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { getEntityTitle, EntityStore } from '@igo2/common';
 import { Feature, SearchResult } from '@igo2/geo';
+import { Media, MediaService } from '@igo2/core';
 
 @Component({
   selector: 'app-toast-panel',
@@ -60,7 +61,9 @@ export class ToastPanelComponent {
     return this.store.all();
   }
 
-  constructor() {}
+  constructor(
+    public mediaService: MediaService
+    ) {}
 
   getTitle(result: SearchResult) {
     return getEntityTitle(result);
@@ -93,6 +96,12 @@ export class ToastPanelComponent {
     this.unselectResult();
   }
 
+  isMobile(): boolean {
+    return (
+      this.mediaService.getMedia() === Media.Mobile
+    );
+  }
+
   @HostListener('document:keydown.ArrowLeft')
   previousResult() {
     if (!this.resultSelected$.value) {