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 { TypeaheadService, TimespanService } from '@farmmaps/common'; import { IQueryState } from '../../models/query.state'; import { IPeriodState } from '../../models/period.state'; import { fillProperties } from '@angular/core/src/util/property'; import { tassign } from 'tassign'; @Component({ selector: 'fm-map-map-search', templateUrl: './map-search.component.html', styleUrls: ['./map-search.component.scss'] }) export class MapSearchComponent { @ViewChild('searchText') searchText; @Input() clearEnabled: boolean @Input() set collapsed(collapsed: boolean) { this.collapsedLocal = collapsed; if (collapsed) this.searchText.nativeElement.blur(); } @Input() set searchMinified(minified: boolean) { this.searchMinifiedLocal = minified; } @Input() period: IPeriodState @Output() onSearch = new EventEmitter(); @Output() onClear = new EventEmitter(); @Output() onSearchCollapse = new EventEmitter(); @Output() onSearchExpand = new EventEmitter(); @Output() onToggleMenu = new EventEmitter(); @Output() onOpenModal = new EventEmitter(); @Output() onCloseModal = new EventEmitter(); @Input() openedModalName: string; @Input() set filterOptions(filterOptions: IQueryState) { if (filterOptions && filterOptions.query && filterOptions.query.length > 0) { this.disabled = false; } else { this.disabled = true; } this.filterOptionsLocal = tassign(this.filterOptionsLocal, { tags: filterOptions.tags, query: filterOptions.query,bbox:filterOptions.bbox }); if (filterOptions.tags) { this.searchTextLocal = { name: filterOptions.tags }; } else { this.searchTextLocal = { name: filterOptions.query }; } if (this.dateFilter) { this.filterOptionsLocal.startDate = this.startDate; this.filterOptionsLocal.endDate = this.endDate; } } public collapsedLocal: boolean = true; public searchMinifiedLocal: boolean = false; public filterOptionsLocal: IQueryState; private extent: number[]; public searchTextLocal: any; public searchTextLocalOutput: string; public dateFilter: boolean = true; public startDate: Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1); public endDate: Date = new Date(Date.now()); public startEndCaption: string = this.timespanService.getCaption(this.startDate, this.endDate, 4); searching = false; searchFailed = false; hideSearchingWhenUnsubscribed = new Observable(() => () => this.searching = false); public disabled: boolean = true; constructor(private typeaheadService: TypeaheadService, private timespanService: TimespanService) { this.filterOptionsLocal = { query: "", tags: "", startDate: null, endDate: null, bboxFilter: true, itemType: null, itemCode:null,level:0,parentCode:null,bbox:[] }; } search = (text$: Observable) => text$.pipe( debounceTime(300), distinctUntilChanged(), tap(() => this.searching = true), switchMap(term => term.length < 1 ? of([]) : this.typeaheadService.getSearchTypeaheadItems(term).pipe( tap(() => this.searchFailed = false), catchError(() => { this.searchFailed = true; return of([]); })) ), tap(() => this.searching = false), merge(this.hideSearchingWhenUnsubscribed)); formatter = (x: { name: string }) => x.name; handleSearch(event) { this.filterOptionsLocal.tags = null; this.filterOptionsLocal.itemType = null; this.filterOptionsLocal.itemCode = null; this.filterOptionsLocal.parentCode = null; this.filterOptionsLocal.query = this.searchTextLocalOutput; if (this.dateFilter) { this.filterOptionsLocal.startDate = this.startDate; this.filterOptionsLocal.endDate = this.endDate; } this.onSearch.emit(this.filterOptionsLocal); } handleOpenSelectPeriodModal(event: MouseEvent) { event.preventDefault(); this.onOpenModal.emit('selectPeriodModal'); } handleCloseModal() { this.onCloseModal.emit({}); } 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.startDate; this.filterOptionsLocal.endDate = this.endDate; } this.onSearch.emit(this.filterOptionsLocal); this.searchTextLocal = { name: this.filterOptionsLocal.tags }; } handleSelectPeriod(event: { startDate: Date, endDate: Date }) { this.startDate = event.startDate; this.endDate = event.endDate; this.handleCloseModal(); this.startEndCaption = this.timespanService.getCaption(event.startDate, event.endDate, 4); this.onSearch.emit(this.filterOptionsLocal); } handleChangeEnableDateFilter(enabled) { this.dateFilter = enabled; if (enabled) { this.filterOptionsLocal.startDate = this.startDate; this.filterOptionsLocal.endDate = this.endDate; } else { this.filterOptionsLocal.startDate = null; this.filterOptionsLocal.endDate = null; } if(this.filterOptionsLocal.query || this.filterOptionsLocal.tags) this.onSearch.emit(this.filterOptionsLocal); } handleChangeEnableBBOXFilter(enabled) { this.filterOptionsLocal.bboxFilter = enabled; if (this.filterOptionsLocal.query || this.filterOptionsLocal.tags) this.onSearch.emit(this.filterOptionsLocal); } handleToggleMenu(event) { this.onToggleMenu.emit({}); } handleFocus(event) { this.onSearchExpand.emit({}); } handleChange(event: string) { this.searchTextLocalOutput = event; if (event && event.length == 1) { this.onSearchExpand.emit({}); } if (event && event.length > 0) this.disabled = false; else this.disabled = true; } handleClearClick(event) { this.onClear.emit({}); } }