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

  <div *ngIf= "filter.values.length >0" class = "uk-accordion uk-animation-fade"  data-uk-accordion="{collapse: true, showfirst: true}">

        <h3  class="uk-accordion-title uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}

        </h3>

        <div data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">

          <div class="uk-accordion-content searchFilterBoxValues ">

            <div *ngFor = "let value of getSelectedValues(filter)"  class = "uk-animation-fade">

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

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

            </div>

            <div class="uk-grid-divider uk-margin-remove"></div>

            <div *ngFor = "let value of getNotSelectedValues(filter)" class = "uk-animation-fade">

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

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

            </div>

           <!--div *ngFor = "let value of filter.values" >

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

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

          </div-->

       </div>

      </div>

    </div>

    <!--div *ngIf="filter.countSelectedValues == 0 " class = "uk-accordion "  data-uk-accordion="{collapse: true, showfirst: false}">

            <h3  class="uk-accordion-title">{{_formatTitle(filter.title,filter.values.length)}}

            </h3>

            <div data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">

              <div class="uk-accordion-content searchFilterBoxValues ">

               <div *ngFor = "let value of filter.values" >

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

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

              </div>

           </div>

          </div>

        </div-->

    `

})

export class SearchFilterComponent {

    @Input() filter:Filter;

    @Input() showResultCount:boolean = true;

    public showAll:boolean = false;

    public _maxCharacters:number =28;

    constructor () {

    }

    ngOnInit() {

    }

    public _formatTitle(title,length){

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

    }

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

            // this.reorderFilterValues();

        }else{

            this.filter.countSelectedValues--;

            // this.reorderFilterValues();

        }

    }

    getSelectedValues(filter):any{

      var selected = [];

      if(filter.countSelectedValues >0){

        for (var i=0; i < filter.values.length; i++){

          if(filter.values[i].selected){

            selected.push(filter.values[i]);

          }

        }

      }

      return selected;

    }

    getNotSelectedValues(filter):any{

      var notSselected = [];

      if(filter.countSelectedValues >0){

        for (var i=0; i < filter.values.length; i++){

          if(!filter.values[i].selected){

            notSselected.push(filter.values[i]);

          }

        }

      }else {

        notSselected = filter.values;

      }

      return notSselected;

    }

    reorderFilterValues() {

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

            }

        }

    }

//     sliceSelected() {

//         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);

//             }

//         }

}