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">

            No projects available

        </div-->

        <div *ngIf="fetchProjects.searchUtils.status == errorCodes.NONE" class="uk-alert uk-alert-primary uk-animation-fade" role="alert">No projects available</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-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img src="./assets/loading.gif" class="uk-align-center" alt="Loading"></div>

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

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

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

                    routerLinkActive="router-link-active" [routerLink]="linkToSearchProjects" class="uk-button uk-button-text">

                    View all {{fetchProjects.searchUtils.totalResultsNoFilters}} results

                </a>

			      </div>

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

              <div class="uk-clearfix">

                <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>

              </div>

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

                <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.searchUtils.totalResultsNoFilters "> Filtered {{fetchProjects.searchUtils.totalResults}} results of {{fetchProjects.searchUtils.totalResultsNoFilters}} total results</li>

                <li></li>

              </ul>

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

                            type="project" urlParam="projectId" [showLoading] = true [showOrganizations] = false>

              </tab-result>

            </div>

        </div>

    `

})

export class SearchingProjectsTabComponent {

    @Input() fetchProjects : FetchProjects;

    @Input()  organizationId:string = "";

    public page :number = 1;

    public size :number = 10;

    public linkToSearchProjects: string;

    public routerHelper:RouterHelper = new RouterHelper();

    public errorCodes:ErrorCodes = new ErrorCodes();

    private filterQuery:string = "";

    constructor (private  route: ActivatedRoute,

                 private _searchProjectsService: SearchProjectsService) {

    }

    ngOnInit() {

            if(this.organizationId) {

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

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

                  this.search(false,"");

                }

            }

    }

    private search(refine:boolean, filterQuery:string){

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

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

    }

    public pageChange($event) {

      this.page=$event.value;

      this.search(false, this.filterQuery);

    }

    public filterChange($event) {

      console.log("Filter Changed");

      this.updateFilters();

      //this.search(true, this.filterQuery);

      this.search(false, this.filterQuery);

    }

    private 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)+'"';

              filterLimits+=((filterLimits.length == 0)?'':' or ')+filter.filterId+' exact ';

              filterLimits+='"'+ StringUtils.URIEncode(value.id)+'"';

             }

        }

        if(filterLimits.length > 0){

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

          this.filterQuery+=' and ( ' + filterLimits + ' ) ';

        }

      }

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

    }

}