AW-2714

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

@@ -33,4 +33,4 @@
     <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>
+<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="periodLocal.startDate" [endDate]="periodLocal.endDate"></fm-map-select-period-modal>

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

@@ -22,7 +22,10 @@ export class MapSearchComponent {
   @Input() set searchMinified(minified: boolean) {
     this.searchMinifiedLocal = minified;
   }
-  @Input() period: IPeriodState
+  @Input() set period(period:IPeriodState) {
+    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() onClear = new EventEmitter<any>();
   @Output() onSearchCollapse = new EventEmitter<any>();
@@ -30,6 +33,7 @@ export class MapSearchComponent {
   @Output() onToggleMenu = new EventEmitter<any>();
   @Output() onOpenModal = new EventEmitter<string>();
   @Output() onCloseModal = new EventEmitter<any>();
+  @Output() onPeriodChange = new EventEmitter<IPeriodState>();
   @Input() openedModalName: string;
   @Input() set filterOptions(filterOptions: IQueryState) {
     if (filterOptions && filterOptions.query && filterOptions.query.length > 0) {
@@ -42,23 +46,18 @@ export class MapSearchComponent {
       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 periodLocal: IPeriodState = { startDate:new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1), endDate:new Date(Date.now())};
   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);
+  public dateFilter: boolean = true; 
+  public startEndCaption: string = this.timespanService.getCaption(this.periodLocal.startDate, this.periodLocal.endDate, 4);
 
   searching = false;
   searchFailed = false;
@@ -94,8 +93,8 @@ export class MapSearchComponent {
     this.filterOptionsLocal.parentCode = null;
     this.filterOptionsLocal.query = this.searchTextLocalOutput;
     if (this.dateFilter) {
-      this.filterOptionsLocal.startDate = this.startDate;
-      this.filterOptionsLocal.endDate = this.endDate;
+      this.filterOptionsLocal.startDate = this.periodLocal.startDate;
+      this.filterOptionsLocal.endDate = this.periodLocal.endDate;
     }
     this.onSearch.emit(this.filterOptionsLocal);
   }
@@ -117,26 +116,30 @@ export class MapSearchComponent {
     this.filterOptionsLocal.parentCode = null;
     this.filterOptionsLocal.tags = event.item.name;
     if (this.dateFilter) {
-      this.filterOptionsLocal.startDate = this.startDate;
-      this.filterOptionsLocal.endDate = this.endDate;
+      this.filterOptionsLocal.startDate = this.periodLocal.startDate;
+      this.filterOptionsLocal.endDate = this.periodLocal.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.periodLocal = { startDate: event.startDate, endDate: event.endDate}
+    this.onPeriodChange.emit(this.periodLocal);
     this.startEndCaption = this.timespanService.getCaption(event.startDate, event.endDate, 4);
-    this.onSearch.emit(this.filterOptionsLocal);
+    if(this.dateFilter) {
+      this.filterOptionsLocal.startDate =event.startDate;
+      this.filterOptionsLocal.endDate = event.endDate;
+      this.onSearch.emit(this.filterOptionsLocal);
+    }
+    this.handleCloseModal();
   }
 
   handleChangeEnableDateFilter(enabled) {
     this.dateFilter = enabled;
     if (enabled) {
-      this.filterOptionsLocal.startDate = this.startDate;
-      this.filterOptionsLocal.endDate = this.endDate;
+      this.filterOptionsLocal.startDate = this.periodLocal.startDate;
+      this.filterOptionsLocal.endDate = this.periodLocal.endDate;
     } else {
       this.filterOptionsLocal.startDate = null;
       this.filterOptionsLocal.endDate = null;

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

@@ -50,7 +50,7 @@
     <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
 
     <div *ngIf="noContent">
-      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period"></fm-map-map-search>
+      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)"></fm-map-map-search>
     </div>
     <div class="side-panel-container">
       <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">

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

@@ -434,6 +434,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
   }
 
+  handlePeriodChange(period:IPeriodState) {
+    this.store.dispatch(new mapActions.SetPeriod(period));
+  }
+
   ngOnDestroy() {
     if (this.paramSub) this.paramSub.unsubscribe();
     if (this.itemTypeSub) this.itemTypeSub.unsubscribe();