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

import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject} from '@angular/core';
import { Feature } from 'ol';
import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import  {IQueryState } from '@farmmaps/common';
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import { Store } from '@ngrx/store';


@Component({
  selector: 'fm-map-feature-list-container',
  templateUrl: './feature-list-container.component.html',
  styleUrls: ['./feature-list-container.component.scss']
})
export class FeatureListContainerComponent {

  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[] ) {
  }

  @Input() features: Array<Feature>
  @Input() queryState: IQueryState;
  @Input() selectedFeature: Feature;

  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
  componentRef:any;

  loadComponent(queryState:IQueryState) {
    var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
    var selected = -1;
    for (var i = 0; i < this.featureLists.length; i++) {
      if (this.featureLists[i]['forItemType'] == queryState.itemType && this.featureLists[i]['forChild'] && queryState.parentCode && queryState.parentCode != "") {
        selected = i;
        break;
      } else if (this.featureLists[i]['forItemType'] == queryState.itemType) {
        selected = i;        
        break;
      }
    }
    if (selected >= 0) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
      if (this.featureLists[selected]['collapseSearch'] === true) {
        this.store.dispatch(new mapActions.CollapseSearch());
      }
    }
    const viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();

    this.componentRef = viewContainerRef.createComponent(componentFactory);
    (<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
    (<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
    (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
  }

  ngOnChanges(changes: SimpleChanges) {
    if ((changes["features"] && changes["features"].currentValue)) {
      if (this.queryState) {
        this.loadComponent(this.queryState);
      }
    }
    if(changes["selectedFeature"]) {
      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = changes["selectedFeature"].currentValue;
    }
  }
}