From 1a79c2d6c2ddfc72b72af2fbd4a6f5b2e6dde228 Mon Sep 17 00:00:00 2001
From: Aziz <119948730+aziz-access@users.noreply.github.com>
Date: Wed, 15 Mar 2023 19:06:06 +0100
Subject: [PATCH] feat(geo): allow query results to show results as tab instead
 of a list (#1156)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf(geo): changer l'affichage de Query du liste collapse ver affichage par onglet

* verify the result for toast-panel or search-result-tools

* rename variable

* add animation to resize tabs content

---------

Co-authored-by: Pierre-Étienne Lord <pierre-etienne.lord@transports.gouv.qc.ca>
---
 .../search-results.component.html             | 50 ++++++++++++++++++-
 .../search-results.component.scss             |  4 ++
 .../search-results.component.ts               |  5 ++
 .../search-results/search-results.module.ts   |  2 +
 4 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/geo/src/lib/search/search-results/search-results.component.html b/packages/geo/src/lib/search/search-results/search-results.component.html
index d4173484eb..260f60e209 100644
--- a/packages/geo/src/lib/search/search-results/search-results.component.html
+++ b/packages/geo/src/lib/search/search-results/search-results.component.html
@@ -1,4 +1,4 @@
-<igo-list [navigation]="true">
+<igo-list [navigation]="true" *ngIf="tabsMode === false">
   <ng-template
     #groupTemplate
     ngFor let-group
@@ -48,3 +48,51 @@
   </ng-template>
 
 </igo-list>
+
+<igo-list [navigation]="true" *ngIf="tabsMode">
+
+  <ng-container *ngIf="mode === searchResultMode.Grouped; then tabsTemplate else flatTemplate"></ng-container>
+
+  <ng-template #tabsTemplate>
+    <mat-tab-group class="custom-tabs-view" dynamicHeight>
+      <mat-tab *ngFor="let group of results$ | async" [label]="computeGroupTitle(group)">
+        <ng-container *ngTemplateOutlet="storeItemTemplate; context: {group: group}"></ng-container>
+      </mat-tab>
+    </mat-tab-group>
+  </ng-template>
+
+  <ng-template #flatTemplate>
+    <ng-template ngFor let-group [ngForOf]="results$ | async">
+      <ng-container *ngTemplateOutlet="storeItemTemplate; context: {group: group}"></ng-container>
+    </ng-template>
+  </ng-template>
+
+  <ng-template #storeItemTemplate let-group="group">
+    <ng-template ngFor let-result [ngForOf]="group.results">
+      <igo-search-results-item
+        igoListItem
+        color="accent"
+        [map]="map"
+        [result]="result"
+        [showIcons]="showIcons"
+        [withZoomButton]="withZoomButton"
+        [focused]="store.state.get(result).focused"
+        [selected]="store.state.get(result).selected"
+        (focus)="resultFocus.emit(result)"
+        (unfocus)="resultUnfocus.emit(result)"
+        (select)="onResultSelect(result)"
+        (mouseenter)="resultFocus.emit(result)"
+        (mouseleave)="resultUnfocus.emit(result)">
+
+        <ng-container igoSearchItemToolbar
+          [ngTemplateOutlet]="templateSearchToolbar"
+          [ngTemplateOutletContext]="{result: result}">
+        </ng-container>
+
+      </igo-search-results-item>
+    </ng-template>
+    <span class="moreResults mat-typography" *ngIf="isMoreResults(group)" (click)="displayMoreResults(group)">
+      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>
+    </span>
+  </ng-template>
+</igo-list>
\ No newline at end of file
diff --git a/packages/geo/src/lib/search/search-results/search-results.component.scss b/packages/geo/src/lib/search/search-results/search-results.component.scss
index c2ea7f58a6..c80225ba47 100644
--- a/packages/geo/src/lib/search/search-results/search-results.component.scss
+++ b/packages/geo/src/lib/search/search-results/search-results.component.scss
@@ -8,4 +8,8 @@
 
 igo-list ::ng-deep mat-list {
   height: 100%;
+  .custom-tabs-view .mat-tab-header-pagination {
+    min-width: 20px;
+  }
 }
+
diff --git a/packages/geo/src/lib/search/search-results/search-results.component.ts b/packages/geo/src/lib/search/search-results/search-results.component.ts
index ec30ed98cd..8353dae8be 100644
--- a/packages/geo/src/lib/search/search-results/search-results.component.ts
+++ b/packages/geo/src/lib/search/search-results/search-results.component.ts
@@ -82,6 +82,11 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
    */
   @Input() withZoomButton = false;
 
+  /**
+   * To check if the view for tabsMode for search-result-tools
+   */
+  @Input() tabsMode: boolean = false;
+
   /**
    * Search term
    */
diff --git a/packages/geo/src/lib/search/search-results/search-results.module.ts b/packages/geo/src/lib/search/search-results/search-results.module.ts
index 529232716a..30fb21b6cd 100644
--- a/packages/geo/src/lib/search/search-results/search-results.module.ts
+++ b/packages/geo/src/lib/search/search-results/search-results.module.ts
@@ -6,6 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -38,6 +39,7 @@ import { SaveFeatureDialogComponent } from './save-feature-dialog.component';
     MatIconModule,
     MatListModule,
     MatButtonModule,
+    MatTabsModule,
     MatDialogModule,
     IgoCollapsibleModule,
     IgoListModule,