Recherche ajout loupe

demo/src/app/geo/search/search.module.ts

@@ -6,7 +6,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { IgoMessageModule } from '@igo2/core';
+import { IgoMessageModule, IgoLanguageModule, } from '@igo2/core';
 
 import {
   IgoPanelModule,
@@ -49,6 +49,7 @@ import { AppSearchRoutingModule } from './search-routing.module';
     IgoAppSearchModule,
     IgoActionbarModule,
     IgoContextMenuModule,
+    IgoLanguageModule,
     IgoFeatureModule
   ],
   exports: [AppSearchComponent],

packages/geo/src/lib/search/search-bar/search-bar.component.html

@@ -9,6 +9,7 @@
       [disabled]="disabled$ | async"
       [placeholder]="placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined"
       [value]="term$ | async"
+      (keydown.enter)="selectFirstElement()"
       (keyup)="onKeyup($event)"
       (touchend)="onKeyup($event)">
   </mat-form-field>
@@ -19,12 +20,14 @@
       [color]="color"
       (click)="onClearButtonClick()"
       [matTooltip]="'igo.geo.search.clearSearch' | translate">
-      <mat-icon svgIcon="close"></mat-icon>
+    <mat-icon svgIcon="close"></mat-icon>
     </button>
-    
+
     <button *ngIf="showSearchButton"
       mat-icon-button
-      [color]="color">
+      [color]="color"
+      (click)="selectFirstElement()"
+      [matTooltip]="'igo.geo.search.search' | translate">
       <mat-icon svgIcon="magnify"></mat-icon>
     </button>
 

packages/geo/src/lib/search/search-bar/search-bar.component.ts

@@ -81,7 +81,7 @@ export class SearchBarComponent implements OnInit, OnDestroy {
    * whether to show search button or not
    */
 
-  public showSearchButton: boolean = false;
+  public showSearchButton: boolean = true;
 
   /**
    * List of available search types
@@ -178,7 +178,7 @@ export class SearchBarComponent implements OnInit, OnDestroy {
   /**
    * Debounce time between each keystroke
    */
-  @Input() debounce = 200;
+  @Input() debounce = 400;
 
   /**
    * Minimum term length required to trigger a research
@@ -275,7 +275,7 @@ export class SearchBarComponent implements OnInit, OnDestroy {
       .subscribe((searchType: string) => this.onSetSearchType(searchType));
 
     const configValue = this.configService.getConfig("searchBar.showSearchButton");
-    this.showSearchButton = configValue !== undefined ? configValue : false;
+    this.showSearchButton = configValue !== undefined ? configValue : true;
   }
 
   /**
@@ -476,4 +476,33 @@ export class SearchBarComponent implements OnInit, OnDestroy {
       this.store.updateMany(newResults);
     }
   }
+
+  /**
+   * When the user clicks on the magnifying glass and
+   * this find the first object on the map otherwise the
+   * coordinate it will be the second option to be focused in the map
+   */
+
+ selectFirstElement(){
+
+     //Find the max value of scores
+      const maxScore = Math.max(...this.store.all().map(result => result.meta.score));
+
+      //Filter values who have the maxScore
+      const result = this.store.all().find(result => result.meta.score === maxScore);
+      //If the value has not a first maxScore it has to take the title
+      const coordInv=this.store.all().find(result => result.meta.title);
+
+      //Function to reverse the value of the parameter
+      function reverseString(coordReInv) {
+        return coordReInv;
+      }
+      //Condition to evaluate if the result has a maxScore if not it is going to take the value of coordinate
+      if(result){
+        this.store.state.update(result,{focused:true,selected:true},true);
+      }else{
+        reverseString(coordInv);
+        this.store.state.update(coordInv,{focused:true,selected:true},true);
+      }
+  }
 }

packages/geo/src/locale/en.geo.json

@@ -446,6 +446,7 @@
         "layer.placeholder": "Search for a layer",
         "ichercheReverse.name": "Search by coordinates",
         "clearSearch": "Clear search",
+        "search":"Search",
         "addToLayer": "Add to layer",
         "ilayer": {
           "name": "Layers",

packages/geo/src/locale/fr.geo.json

@@ -445,6 +445,7 @@
         "layer.placeholder": "Rechercher une couche de données.",
         "ichercheReverse.name": "Recherche par coordonnées",
         "clearSearch": "Effacer la recherche",
+        "search": "Faire une recherche",
         "addToLayer": "Ajouter à une couche",
         "ilayer": {
           "name": "Couches",