D-Net

import {Component, Input} from '@angular/core';

import {ActivatedRoute} from '@angular/router';

import { FetchProjects } from '../utils/fetchEntitiesClasses/fetchProjects.class';

import { SearchProjectsService } from '../services/searchProjects.service';

import {OpenaireProperties, ErrorCodes} from '../utils/properties/openaireProperties';

import {StringUtils} from '../utils/string-utils.class';

import {RouterHelper} from '../utils/routerHelper.class';

@Component({

    selector: 'searchingProjectsTab',

    template: `

        <!--div *ngIf="fetchProjects.searchUtils.totalResults == 0" class = "uk-alert">

            There are no projects

        </div-->

        <div *ngIf="fetchProjects.searchUtils.status == errorCodes.NONE" class="uk-alert uk-alert-primary uk-animation-fade" role="alert">There are no projects</div>

        <div *ngIf="fetchProjects.searchUtils.status == errorCodes.ERROR" class="uk-alert uk-alert-warning uk-animation-fade" role="alert">An Error Occured</div>

        <div *ngIf="fetchProjects.searchUtils.status == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger uk-animation-fade" role="alert">Service not available</div>

        <div *ngIf="fetchProjects.searchUtils.status == errorCodes.LOADING" class="uk-alert uk-alert-primary uk-animation-fade" role="alert">Loading...</div>

        <div *ngIf="fetchProjects.searchUtils.totalResults > 0">

            <div class = "uk-text-right" *ngIf = "fetchProjects.totalResults > 10">

				<!--a [href] = "linkToSearchProjects">

                    View all {{fetchProjects.totalResults}} results

                </a-->

                <a  [queryParams]="routerHelper.createQueryParams(['organizationId', 'or'], [organizationId, 'and'])"

                    routerLinkActive="router-link-active" [routerLink]="linkToSearchProjects">

                    View all {{fetchProjects.totalResults}} results

                </a>

			</div>

            <div class= "searchPaging uk-panel uk-margin-top">

              <div class="uk-float-right" *ngIf="fetchProjects.results  && fetchProjects.searchUtils.totalResults > fetchProjects.searchUtils.size">

              <paging-no-load [currentPage]="page" [totalResults]="fetchProjects.searchUtils.totalResults" [term]="keyword" [size]="size"  (pageChange)="pageChange($event)"> </paging-no-load>

            </div>

            <ul  *ngIf = "fetchProjects.funders.length > 1" class="uk-list uk-list-divider">

              <li  *ngFor="let filter of fetchProjects.filters "  >

                  <div class="text-bold">Filter by {{filter.title}}:</div>

                  <span *ngFor = "let value of filter.values"  class = "uk-animation-fade">

                     <input [(ngModel)]="value.selected" type="checkbox"  (ngModelChange)="filterChange(value.selected)" />

                     <span title = "{{value.name}}"> {{value.name}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>

                  </span>

              </li>

              <li *ngIf = "fetchProjects.searchUtils.totalResults !=fetchProjects.totalResults "> Filtered {{fetchProjects.searchUtils.totalResults}} results of {{fetchProjects.totalResults}} total results</li>

              <li></li>

            </ul>

            <tab-result  [(results)]="fetchProjects.results" [(status)]= "fetchProjects.searchUtils.status"

                            type="project" urlParam="projectId" showLoading = true>

            </tab-result>

        </div>

    `

})

export class SearchingProjectsTabComponent {

    @Input() fetchProjects : FetchProjects;

    public organizationId:string = "";

    public page :number = 1;

    public size :number = 10;

    public linkToSearchProjects;

    private filterQuery:string = "";

    private sub: any;

    public routerHelper:RouterHelper = new RouterHelper();

    public errorCodes:ErrorCodes = new ErrorCodes();

    constructor (private  route: ActivatedRoute,

                 private _searchProjectsService: SearchProjectsService) {

    }

    ngOnInit() {

        this.sub =  this.route.queryParams.subscribe(params => {

            this.organizationId = params['organizationId'];

            if(this.organizationId) {

                //this.fetchProjects = new FetchProjects(this._searchProjectsService);

                this.linkToSearchProjects = OpenaireProperties.getLinkToAdvancedSearchProjects();//+"?organization="+this.organizationId+"or=and";;

                if(this.fetchProjects.searchUtils.totalResults > 0) {

                  this.search(false,"");

                }

            }

        });

    }

    ngOnDestroy() {

      this.sub.unsubscribe();

    }

    search(refine:boolean, filterQuery:string){

      var refineFields:string [] = ["funderid"];

      this.fetchProjects.getResultsForOrganizations(this.organizationId, filterQuery, this.page, this.size,(refine)?refineFields:[]);

    }

    pageChange($event) {

      this.page=$event.value;

      this.search(false, this.filterQuery);

    }

    filterChange($event) {

      console.log("Filter Changed");

      this.updateFilters();

      this.search(true, this.filterQuery);

    }

    updateFilters (){

      this.filterQuery = "";

      for (let filter of this.fetchProjects.filters){

        var filterLimits="";

        for (let value of filter.values){

            if(value.selected == true){

              filterLimits+=((filterLimits.length == 0)?'':',') +'"'+ StringUtils.URIEncode(value.id)+'"';

             }

        }

        if(filterLimits.length > 0){

          this.filterQuery+=' and '+filter.filterId + ' exact '+ filterLimits + ' ';

        }

      }

      console.log("Filter Changed"+this.filterQuery);

    }

}