D-Net

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

import {Observable}       from 'rxjs/Observable';

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

@Component({

    selector: 'search-filter',

    template: `

    <h4>{{filter.title}}</h4>

    <p *ngFor = "let value of filter.values.slice(0,5)" >

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

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

    </p>

    <a *ngIf = "!showAll && filter.values.length > 5" (click)="toggleShowAll()" > More</a>

    <span *ngIf = "filter.values.length > 5 && showAll" >

        <p *ngFor = "let value of filter.values.slice(5)" >

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

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

        </p>

        <a (click)="toggleShowAll()" > Less</a>

    </span>

    `

})

export class SearchFilterComponent {

    // @Input() title;

    // @Input() filterId;

    // @Input() values; //array[] " name, id, number, selected"

    // @Input() countSelectedValues:number = 0; //array[] " name, id, number, selected"

    //@Output() change  = new EventEmitter();

    @Input() test:{value:number} ;

    @Input() filter:Filter;

    @Input() showResultCount:boolean = true;

    private showAll:boolean = false;

    private _maxCharacters:number =30;

    constructor () {

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

    }

    ngOnInit() {

    }

    private _formatName(value){

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

    }

    toggleShowAll(){

        this.showAll = !this.showAll;

        if(this.showAll == false) {

            this.reorderFilterValues();

        }

    }

    filterChange(selected:boolean){

        if(selected){

            this.filter.countSelectedValues++;

        }else{

            this.filter.countSelectedValues--;

        }

        //this.change.emit({

        //value: true

        //});

    }

    reorderFilterValues() {

        let values: Value[] = [];

        for(let value of this.filter.values) {

            if(value.selected) {

                let index: number = this.filter.values.indexOf(value);

                let selectedValue:Value = this.filter.values[index];

                this.filter.values.splice(index, 1);

                this.filter.values.splice(0, 0, selectedValue);

            }

        }

    }

}