D-Net

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

import {Observable}       from 'rxjs/Observable';

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

import {Open} from '../../utils/modal/open.component';

@Component({

    selector: 'search-filter',

    template: `

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

    <li class="uk-open">

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

        </h5>

        <div  aria-expanded="false">

          <div class="searchFilterBoxValues ">

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

               <span class="filterName"><div title = "{{value.name}}">

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

               {{_formatName(value)}} </div></span>

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

            </div>

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

            <hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">

            <div *ngFor = "let value of getNotSelectedValues(filter).slice(0,5-getSelectedValues(filter).length)" class = "uk-animation-fade filterItem">

               <span class="filterName"><div title = "{{value.name}}"> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />

               {{_formatName(value)}} </div></span>

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

            </div>

            <!--a *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="toggle()" [class]="(isDisabled)?'uk-disabled uk-link-muted':''">Show More</a-->

            <!--button *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5"

                    class="uk-button uk-button-link" (click)="toggle()" [disabled]="isDisabled">

                    Show More

            </button-->

            <a *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="open()" [class]="(isDisabled)?'uk-disabled uk-link-muted':''">Show More</a>

            <div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" uk-modal  [open]="!isOpen" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" bg-close="true">

              <div class="uk-modal-dialog uk-width-1-4 uk-padding-small uk-padding-remove-top uk-padding-remove-horizontal">

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

                <h3  class="uk-margin-remove uk-padding uk-padding-remove-bottom">

                  {{filter.title}}

                </h3>

                <div class="uk-modal-body uk-overflow-auto uk-height-medium uk-padding-remove

                            uk-margin-medium-left uk-margin-medium-right uk-margin-medium-top uk-margin-bottom">

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

                     <span class="filterName"><div title = "{{value.name}}">

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

                     {{_formatName(value)}} </div></span>

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

                  </div>

                  <hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">

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

                     <span class="filterName"><div title = "{{value.name}}"> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />

                     {{_formatName(value)}} </div></span>

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

                  </div>

                </div>

              </div>

            </div>

       </div>

      </div>

    </li>

    </ul>

    `

})

export class SearchFilterComponent {

    @Input() filter:Filter;

    @Input() showResultCount:boolean = true;

    @Input() isDisabled:boolean = false;

    public showAll:boolean = false;

    public _maxCharacters:number =28;

    @Output() toggleModal = new EventEmitter();

    @Output() modalChange = new EventEmitter();

    public isOpen:boolean=false;

    filterModalChange() {

      console.info("Modal Changed");

      this.modalChange.emit({

        value: true

      });

      //this.close();

    }

    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.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){

      console.info("filter change: "+selected);

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

//             }

//         }

  toggle() {

    this.toggleModal.emit({

      value: this.filter

    });

  }

  open() {

    this.isOpen = true;

  }

  close() {

    this.isOpen = false;

  }

  filterChange2(selected:boolean){

    console.info("filter change2");

      if(selected){

          this.filter.countSelectedValues++;

          // this.reorderFilterValues();

      }else{

          this.filter.countSelectedValues--;

          // this.reorderFilterValues();

      }

      this.close();

  }

}