AW-3096 Zoeken op locatie (geocoding) mogelijk maken

projects/common-map/src/fm-map/components/map-search/map-search.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
-import { Observable ,  of } from 'rxjs';
-import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
+import { Observable ,  of,merge,forkJoin } from 'rxjs';
+import { debounceTime,distinctUntilChanged,tap,switchMap,catchError,map} from 'rxjs/operators';
 import { TypeaheadService, TimespanService } from '@farmmaps/common';
 import { IQueryState } from '@farmmaps/common';
 import { IPeriodState } from '../../models/period.state';
@@ -26,7 +26,8 @@ export class MapSearchComponent {
     this.periodLocal =  tassign(this.periodLocal,{startDate: period.startDate,endDate:period.endDate});
     this.startEndCaption = this.timespanService.getCaption(period.startDate, period.endDate, 4)
   }
-  @Output() onSearch = new EventEmitter<IQueryState>();
+  @Output() onSearch = new EventEmitter<IQueryState>()
+  @Output() onCitySearch = new EventEmitter<string>()
   @Output() onClear = new EventEmitter<any>();
   @Output() onSearchCollapse = new EventEmitter<any>();
   @Output() onSearchExpand = new EventEmitter<any>();
@@ -69,20 +70,27 @@ export class MapSearchComponent {
     this.filterOptionsLocal = { query: "", tags: "", startDate: null, endDate: null, bboxFilter: false, itemType: null, itemCode:null,level:0,parentCode:null,bbox:[] };   
   }
 
-  search = (text$: Observable<string>) =>
+  search = (text$: Observable<string>) => 
     text$.pipe(
       debounceTime(300),
       distinctUntilChanged(),
-      tap(() => this.searching = true),
-      switchMap(term => term.length < 1 ? of([]) :
-        this.typeaheadService.getSearchTypeaheadItems(term).pipe(
-          tap(() => this.searchFailed = false),
+      tap(() => {this.searching = true;this.searchFailed=false;}),
+      switchMap(term => term.length < 1 ? of([]) : 
+      forkJoin(
+        this.typeaheadService.getTagTypeaheadItems(term).pipe(
           catchError(() => {
             this.searchFailed = true;
             return of([]);
-          })) ),
+          }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"tag"})))),
+          this.typeaheadService.getCityTypeaheadItems(term).pipe(
+            catchError(() => {
+              this.searchFailed = true;
+              return of([]);
+            }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"city"})))),
+        ).pipe(map(([a1,a2]) => [...a1, ...a2] ),map(a => a.sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase()) ? 1 : -1)))
+      ),
       tap(() => this.searching = false),
-      merge(this.hideSearchingWhenUnsubscribed));
+      );
 
   formatter = (x: { name: string }) => x.name;
 
@@ -109,18 +117,23 @@ export class MapSearchComponent {
   }
 
   handleSelect(event) {
-    event.preventDefault();
-    this.filterOptionsLocal.query = null;
-    this.filterOptionsLocal.itemType = null;
-    this.filterOptionsLocal.itemCode = null;
-    this.filterOptionsLocal.parentCode = null;
-    this.filterOptionsLocal.tags = event.item.name;
-    if (this.dateFilter) {
-      this.filterOptionsLocal.startDate = this.periodLocal.startDate;
-      this.filterOptionsLocal.endDate = this.periodLocal.endDate;
+    if(event.item.type == "tag") {
+      event.preventDefault();
+      this.filterOptionsLocal.query = null;
+      this.filterOptionsLocal.itemType = null;
+      this.filterOptionsLocal.itemCode = null;
+      this.filterOptionsLocal.parentCode = null;
+      this.filterOptionsLocal.tags = event.item.name;
+      if (this.dateFilter) {
+        this.filterOptionsLocal.startDate = this.periodLocal.startDate;
+        this.filterOptionsLocal.endDate = this.periodLocal.endDate;
+      }
+      this.onSearch.emit(this.filterOptionsLocal);
+      this.searchTextLocal = { name: this.filterOptionsLocal.tags };  
+    } else if (event.item.type == "city") {
+      this.clearEnabled = true;
+      this.onCitySearch.emit(event.item.name);
     }
-    this.onSearch.emit(this.filterOptionsLocal);
-    this.searchTextLocal = { name: this.filterOptionsLocal.tags };
   }
 
   handleSelectPeriod(event: { startDate: Date, endDate: Date }) {
@@ -177,5 +190,15 @@ export class MapSearchComponent {
   handleClearClick(event) {
     this.onClear.emit({});
   }
+
+  getIcon(type):string {
+    if(type == "tag")
+      return "fal fa-tag";
+    else if(type == "city")
+      return "fal fa-map-marker-alt";
+    else if(type == "search")
+      return "fal fa-search";
+
+  }
 }