D-Net

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

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

import {Location} from '@angular/common';

import { Filter, Value} from '../searchUtils/searchHelperClasses.class';

import {RefineFieldResultsService} from '../../services/refineFieldResults.service';

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

import {SearchFields} from '../../utils/properties/searchFields';

import {SearchPageComponent } from '../searchUtils/searchPage.component';

import {SearchUtilsClass} from '../searchUtils/searchUtils.class';

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

@Component({

    selector: 'browse-statistic',

    template: `

      <h4 class="tm-article-subtitle">{{filter.title}}</h4>

      <div *ngIf="filter.values.length == 0" class="uk-alert uk-alert-primary" role="alert">No {{filter.title}} statistics found</div>

      <ul *ngIf="filter.values.length > 0 && !viewAll" class="uk-list uk-list-divider  browseFilters">

        <li *ngFor= "let value of filter.values.slice(0,5)"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->

          <a class = " filterItem"  [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>

          <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number}})</span></a>

        </li>

        <li *ngIf= " filter.values.length > 5  ">

          <a href="#modal-{{filter.filterId}}" uk-toggle><span class="uk-text-muted">View more </span><span uk-icon="icon: triangle-right"></span></a>

          <!--

              uk-toggle="target: modal-"

              uk-toggle='{"target": modal-}'>

              uk-toggle target="modal-"

          -->

          <!--span uk-toggle='{"target": modal-}'><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span-->

        </li>

      </ul>

      <ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-divider   browseFilters">

        <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->

        <a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>

          <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number}})</span></a>

        </li>

        <li *ngIf= " filter.values.length > 5 && viewAll " (click)="viewAll=false;">

          <span  ><span class="uk-text-muted clickable">View less </span><a><span uk-icon="icon: triangle-up"></span></a></span>

        </li>

      </ul>

      <!-- This is the modal -->

      <div id="modal-{{filter.filterId}}" uk-modal>

        <div class="uk-modal-dialog uk-modal-body">

          <button class="uk-modal-close-default" type="button" uk-close></button>

          <h4 class="tm-article-subtitle">{{filter.title}}</h4>

          <ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line   browseFilters">

            <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->

            <a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>

              <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>

            </li>

          </ul>

        </div>

      </div>

    `

})

export class BrowseStatisticComponent {

  @Input() public baseUrl:string = "";

  @Input() public filter:any = "";

  private _maxCharacters = 30;

  public viewAll = false;

  public routerHelper:RouterHelper = new RouterHelper();

  constructor () {

  }

  public ngOnInit() {

  }

      quote(str:string){

        return '"'+str+'"';

      }

  private _formatName(value){

    return value.name+" ";//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)

  }

}