feat(geo): allow query results to show results as tab instead of a li…

…st (#1156) * 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 <[email protected]>
infra-geo-ouverte · Mar 15, 2023 · 1a79c2d · 1a79c2d
1 parent a03e502
commit 1a79c2d
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 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
@@ -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>
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
@@ -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
@@ -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
@@ -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,