Fix click on feature

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -15,6 +15,7 @@ export const SETPARENT = '[Map] SetParent';
 export const STARTSEARCH = '[Map] StartSearch';
 export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
 export const SELECTFEATURE = '[Map] SelectFeature';
+export const CLICKFEATURE = '[Map] ClickFeature';
 export const SELECTITEM = '[Map] SelectItem';
 export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
 export const SELECTTEMPORALITEMSSUCCESS = '[Map] SelectTemporalItemsSuccess';
@@ -90,6 +91,12 @@ export class SelectFeature implements Action {
   constructor(public feature:Feature) { }
 }
 
+export class ClickFeature implements Action {
+  readonly type = CLICKFEATURE;
+
+  constructor(public feature:Feature) { }
+}
+
 export class SelectItem implements Action {
   readonly type = SELECTITEM;
 
@@ -251,6 +258,7 @@ export type Actions = SetMapState
   | StartSearch
   | StartSearchSuccess
   | SelectFeature
+  | ClickFeature
   | SelectItem
   | SelectItemSuccess
   | SelectTemporalItemsSuccess

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -6,6 +6,7 @@ import  {IQueryState } from '@farmmaps/common';
 import * as mapReducers from '../../reducers/map.reducer';
 import * as mapActions from '../../actions/map.actions';
 import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
 
 
 @Component({
@@ -21,6 +22,7 @@ export class FeatureListContainerComponent {
   @Input() features: Array<Feature>
   @Input() queryState: IQueryState;
   @Input() selectedFeature: Feature;
+  @Input() clickedFeature:Observable<Feature>;
 
   @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
   componentRef:any;
@@ -52,6 +54,12 @@ export class FeatureListContainerComponent {
     (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
   }
 
+  ngOnInit() {
+    this.clickedFeature.subscribe((feature => {
+      (<AbstractFeatureListComponent>this.componentRef.instance).handleFeatureClick(feature);
+    }));
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if ((changes["features"] && changes["features"].currentValue)) {
       if (this.queryState) {

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.ts

@@ -2,12 +2,13 @@ import { Component, Injectable } from '@angular/core';
 import { Location } from '@angular/common';
 import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { Store } from '@ngrx/store';
+import { Store,Action } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
 import { commonReducers, ItemTypeService } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
 import { tassign } from 'tassign';
 import { Router } from '@angular/router';
+import { Feature } from 'ol';
 
 @ForItemType("vnd.farmmaps.itemtype.croppingscheme")
 @Injectable()
@@ -22,8 +23,8 @@ export class FeatureListCroppingschemeComponent extends AbstractFeatureListCompo
         super(store, itemTypeService, location);
     }
 
-    handleFeatureClick(feature) {
+    getAction(feature:Feature):Action {
         var queryState = tassign(mapReducers.initialState.queryState, { parentCode: feature.get('code'), itemType: "vnd.farmmaps.itemtype.cropfield" });
-        this.store.dispatch(new mapActions.DoQuery(queryState));
+        return new mapActions.DoQuery(queryState);
     }
 }

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

@@ -1,7 +1,7 @@
 import { Component, Input, Injectable,Directive,SimpleChanges } from '@angular/core';
 import { Location } from '@angular/common';
 import { Feature } from 'ol';
-import { Store } from '@ngrx/store';
+import { Store,Action} from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
 import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
@@ -21,9 +21,16 @@ export abstract class AbstractFeatureListComponent {
   }
 
   handleFeatureClick(feature:Feature) {
+    if(feature) {
+      let action = this.getAction(feature);
+      this.store.dispatch(action);  
+    }
+  }
+
+  getAction(feature:Feature):Action {
       var newQuery: any = tassign(mapReducers.initialState.query);
       newQuery.itemCode = feature.get('code');
-    this.store.dispatch(new mapActions.DoQuery(newQuery));
+      return new mapActions.DoQuery(newQuery)  
   }
 
   handleFeatureMouseEnter(feature) {

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

@@ -34,7 +34,7 @@
     <fm-map-item-layers [itemLayers]="state.overlayLayers"></fm-map-item-layers>
     <fm-map-item-layers [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
     <aol-layer-vector>
-      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
+      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
     <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container">
@@ -53,7 +53,7 @@
       <div class="panel-bottom">
   
         <div *ngIf="!(state.selectedItem)">
-          <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState"></fm-map-feature-list-container>
+          <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
         </div>
   
         <div *ngIf="state.selectedItem;let item">

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

@@ -63,6 +63,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
   public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
   public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
+  public clickedFeature: Observable<Feature> = this.store.select(mapReducers.selectGetClickedFeature);
   public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
   public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
   public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);
@@ -113,11 +114,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
   }
 
-  handleFeaturesSelected(feature: Feature) {
-    if (feature) {
-      let newQuery = tassign(mapReducers.initialQueryState, { parentCode: feature.get('parentCode'), itemCode: feature.get('code'),itemType:feature.get('itemType') });
-      this.store.dispatch(new mapActions.DoQuery(newQuery));
-    }
+  handleFeatureClick(feature: Feature) {
+    this.store.dispatch(new mapActions.ClickFeature(feature));
   }
 
   handleFeatureHover(feature: Feature) {

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -43,6 +43,7 @@ export interface State {
   panelVisible: boolean,
   panelCollapsed: boolean,
   selectedFeature: Feature,
+  clickedFeature: Feature,
   selectedItem:IItem,
   clearEnabled: boolean,
   searchCollapsed: boolean,
@@ -79,6 +80,7 @@ export const initialState: State = {
   panelVisible: false,
   panelCollapsed: false,
   selectedFeature: null,
+  clickedFeature: null,
   selectedItem: null, 
   clearEnabled: false,
   searchCollapsed: true,
@@ -148,7 +150,14 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.SELECTFEATURE: {
       let a = action as mapActions.SelectFeature;
       return tassign(state, {
-        selectedFeature: state.selectedItem?state.selectedFeature: a.feature
+        selectedFeature: state.selectedItem?state.selectedFeature: a.feature,
+        clickedFeature:null
+      });
+    }
+    case mapActions.CLICKFEATURE: {
+      let a = action as mapActions.ClickFeature;
+      return tassign(state, {
+        clickedFeature: a.feature
       });
     }
     case mapActions.SELECTITEM: {
@@ -279,6 +288,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         panelVisible: true,
         selectedFeature: a.feature,
+        clickedFeature:null,
         extent: a.feature.getGeometry().getExtent(),
         searchCollapsed: false,
         clearEnabled:true,
@@ -434,6 +444,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           selectedItem: null,
           selectedItemLayer: null,
           selectedFeature: null,
+          clickedFeature:null,
           queryState: newQueryState,
           clearEnabled: false,
           searchCollapsed: true,
@@ -471,6 +482,7 @@ export const getFeatures = (state: State) => state.features;
 export const getPanelVisible = (state: State) => state.panelVisible;
 export const getPanelCollapsed = (state: State) => state.panelCollapsed;
 export const getSelectedFeature = (state: State) => state.selectedFeature;
+export const getClickedFeature = (state: State) => state.clickedFeature;
 export const getSelectedItem = (state: State) => state.selectedItem;
 export const getQueryState = (state: State) => state.queryState;
 export const getClearEnabled = (state: State) => state.clearEnabled;
@@ -496,6 +508,7 @@ export const selectGetFeatures = createSelector(selectMapState, getFeatures);
 export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible);
 export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
 export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
+export const selectGetClickedFeature =  createSelector(selectMapState, getClickedFeature);
 export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
 export const selectGetQueryState = createSelector(selectMapState, getQueryState);
 export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);