Project

General

Profile

1
import {Component, Input, Output, EventEmitter} from '@angular/core';
2
import {Observable}       from 'rxjs/Observable';
3

    
4
import { Filter, Value} from './searchHelperClasses.class';
5
import {Open} from '../../utils/modal/open.component';
6

    
7
@Component({
8
    selector: 'search-filter',
9
    template: `
10
  <ul *ngIf= "filter.values.length >0" class="uk-list">
11
    <li class="uk-open">
12
        <h5  class="uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
13
        </h5>
14
        <div  aria-expanded="false">
15
          <div class="searchFilterBoxValues ">
16
            <div *ngFor = "let value of getSelectedValues(filter)"  class = "uk-animation-fade filterItem">
17

    
18
               <span class="filterName"><div title = "{{value.name}}">
19
               <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
20
               {{_formatName(value)}} </div></span>
21
               <span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number}})</span>
22
            </div>
23
            <!--div class="uk-grid-divider uk-margin-remove"></div-->
24
            <hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">
25
            <div *ngFor = "let value of getNotSelectedValues(filter).slice(0,5-getSelectedValues(filter).length)" class = "uk-animation-fade filterItem">
26

    
27
               <span class="filterName"><div title = "{{value.name}}"> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
28
               {{_formatName(value)}} </div></span>
29
               <span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number}})</span>
30
            </div>
31

    
32
            <a *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="toggle()" [class]="(isDisabled)?'uk-disabled uk-link-muted':''">Show More</a>
33
            <!--button *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5"
34
                    class="uk-button uk-button-link" (click)="toggle()" [disabled]="isDisabled">
35
                    Show More
36
            </button-->
37
       </div>
38
      </div>
39
    </li>
40
    </ul>
41

    
42
    `
43
})
44

    
45
export class SearchFilterComponent {
46

    
47
    @Input() filter:Filter;
48
    @Input() showResultCount:boolean = true;
49
    @Input() isDisabled:boolean = false;
50
    public showAll:boolean = false;
51
    public _maxCharacters:number =28;
52

    
53
    @Output() toggleModal = new EventEmitter();
54

    
55
    @Output() modalChange = new EventEmitter();
56
    filterModalChange() {
57
      console.info("Modal Changed");
58
      this.modalChange.emit({
59
        value: true
60
      });
61
      //this.close();
62
    }
63

    
64
    constructor () {
65
    }
66

    
67
    ngOnInit() {
68

    
69
    }
70
    public _formatTitle(title,length){
71
      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+length+")")
72
    }
73
    private _formatName(value){
74
      return value.name;//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
75
    }
76
    toggleShowAll(){
77
        this.showAll = !this.showAll;
78
        if(this.showAll == false) {
79
            this.reorderFilterValues();
80
        }
81
    }
82

    
83
    filterChange(selected:boolean){
84
        if(selected){
85
            this.filter.countSelectedValues++;
86
            // this.reorderFilterValues();
87
        }else{
88
            this.filter.countSelectedValues--;
89
            // this.reorderFilterValues();
90
        }
91
    }
92
    getSelectedValues(filter):any{
93
      var selected = [];
94
      if(filter.countSelectedValues >0){
95
        for (var i=0; i < filter.values.length; i++){
96
          if(filter.values[i].selected){
97
            selected.push(filter.values[i]);
98
          }
99
        }
100
      }
101
      return selected;
102

    
103
    }
104
    getNotSelectedValues(filter):any{
105
      var notSselected = [];
106
      if(filter.countSelectedValues >0){
107
        for (var i=0; i < filter.values.length; i++){
108
          if(!filter.values[i].selected){
109
            notSselected.push(filter.values[i]);
110
          }
111
        }
112
      }else {
113
        notSselected = filter.values;
114
      }
115
      return notSselected;
116
    }
117
    reorderFilterValues() {
118
        for(let value of this.filter.values) {
119
            if(value.selected) {
120
                let index: number = this.filter.values.indexOf(value);
121
                let selectedValue:Value = this.filter.values[index];
122

    
123
                this.filter.values.splice(index, 1);
124
                this.filter.values.splice(0, 0, selectedValue);
125
            }
126
        }
127
    }
128
//     sliceSelected() {
129
//         let values: Value[] = [];
130
//
131
//         for(let value of this.filter.values) {
132
//             if(value.selected) {
133
//                 let index: number = this.filter.values.indexOf(value);
134
//                 let selectedValue:Value = this.filter.values[index];
135
//
136
//                 this.filter.values.splice(index, 1);
137
//                 this.filter.values.splice(0, 0, selectedValue);
138
//             }
139
//         }
140

    
141

    
142
  toggle() {
143
    this.toggleModal.emit({
144
      value: this.filter
145
    });
146
  }
147

    
148
}
(12-12/28)