Renamed prefixes in angular.json

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

@@ -0,0 +1 @@
+export * from './map-search.component';

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

@@ -0,0 +1,33 @@
+<ng-template #rt let-r="result" let-t="term">
+  <i class="fa fa-search" aria-hidden="true" style="width:2rem"></i>
+  <ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight> 
+</ng-template>
+
+<div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
+  <div class="card p-2">
+    <form class="form" (ngSubmit)="handleSearch($event)">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
+        </div>
+        <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
+        <div class="input-group-append">
+          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fa fa-search"></i></button>
+          <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fa fa-remove"></i></button>
+        </div>
+      </div>
+      <div class="options">
+        <div class="form-check">
+          <input class="form-check-input" (ngModelChange)="handleChangeEnableDateFilter($event)" [ngModel]="dateFilter" name="datefilterEnabled" type="checkbox" value="" id="filtercheck1">
+          <label class="form-check-label" for="filtercheck1">from <a (click)="handleOpenSelectPeriodModal($event)" href="#">{{startEndCaption}}</a></label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" (ngModelChange)="handleChangeEnableBBOXFilter($event)" [ngModel]="filterOptionsLocal.bboxFilter" name="bboxfilterEnabled" type="checkbox" value="" id="filtercheck2">
+          <label class="form-check-label" for="filtercheck2">Restrict to visible area</label>
+        </div>    
+      </div>
+    </form>
+    <ng-content></ng-content>
+  </div>
+</div>
+<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></fm-map-select-period-modal>

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

@@ -0,0 +1,94 @@
+div.map-search {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  transition: opacity 0.5s ease-out, left 0.3s,max-height 0.3s ease-out,max-width 0.3s ease-out;
+  max-height: 10rem;
+  width: 21rem;
+  max-width: 21rem;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  z-index:3;
+}
+
+.input-group {
+  flex-wrap:nowrap;
+}
+
+.disabled {
+  color:lighten(#000000,80%);
+}
+
+:host ::ng-deep ngb-typeahead-window.dropdown-menu {
+  width: 20rem;
+  left:-2.5rem !important;
+}
+
+:host ::ng-deep button.dropdown-item {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  padding: 0.375rem 0.75rem;
+}
+
+div.map-search input[type=text] {
+  transition: width 0.3s ease-out;
+}
+
+div.map-search button {
+  transition: width 0.3s ease-out;
+}
+
+div.map-search.collapsed {
+  max-height:3.5rem;
+  max-width:10rem;
+}
+
+div.map-search.searchcollapsed {
+  max-height: 3.5rem;
+  max-width: 6rem;
+}
+
+div.map-search div.options {
+  padding-top: 0.5rem;
+  line-height: 1.5rem;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  max-height:4.5rem;
+}
+
+div.map-search.collapsed div.options, div.map-search.searchcollapsed div.options {
+  max-height: 0;
+  padding:0;
+}
+
+div.map-search button {
+  overflow: hidden;
+}
+
+div.map-search.collapsed input[type=text] {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+div.map-search.searchcollapsed input[type=text] {
+  display: none;
+}
+
+div.map-search.collapsed button.clear, div.map-search.collapsed button[type="submit"] {
+  width: 0;
+  padding: 0;
+  border-color:transparent;
+}
+
+div.map-search.searchcollapsed button[type="submit"] {
+  width: 0;
+  padding: 0;
+  border-color: transparent;
+}
+
+.options label {
+  white-space:nowrap;
+}
+
+
+
+

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

@@ -0,0 +1,178 @@
+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,IPeriodState } from '../../models';
+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<IQueryState>();
+  @Output() onClear = new EventEmitter<any>();
+  @Output() onSearchCollapse = new EventEmitter<any>();
+  @Output() onSearchExpand = new EventEmitter<any>();
+  @Output() onToggleMenu = new EventEmitter<any>();
+  @Output() onOpenModal = new EventEmitter<string>();
+  @Output() onCloseModal = new EventEmitter<any>();
+  @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<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),
+          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({});
+  }
+}
+