Project

General

Profile

1
import {
2
  Component,
3
  Input,
4
  Output,
5
  EventEmitter,
6
  OnInit,
7
  OnChanges,
8
  SimpleChanges
9
} from '@angular/core';
10
import { Filter, Value} from './searchHelperClasses.class';
11
import {ActivatedRoute, Router} from "@angular/router";
12
import {SearchFields} from "../../utils/properties/searchFields";
13
@Component({
14
    selector: 'search-filter',
15
    templateUrl: 'searchFilter.component.html'
16
})
17

    
18
export class SearchFilterComponent implements OnInit, OnChanges{
19

    
20
  @Input() filter:Filter;
21
  @Input() showResultCount:boolean = true;
22
  @Input() isDisabled:boolean = false;
23
  @Input() addShowMore:boolean = true;
24
  @Input() showMoreInline: boolean = true;
25
  @Input() filterValuesNum: number = 6;
26
  public showAll:boolean = false;
27
  public _maxCharacters:number =28;
28

    
29
  @Output() toggleModal = new EventEmitter();
30

    
31
  @Output() modalChange = new EventEmitter();
32
  @Output() onFilterChange = new EventEmitter();
33
  keyword = "";
34
  sortBy = "name";
35
  queryParams = {};
36
  paramPosition = 0;
37
  @Input() actionRoute:boolean = false;
38
  @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
39
  sub;
40
  public isOpen:boolean=false;
41

    
42
    constructor (private _router: Router, private route: ActivatedRoute) {
43
    }
44
  ngOnDestroy() {
45
    if(this.sub){
46
      this.sub.unsubscribe();
47
    }
48
  }
49
    ngOnInit() {
50
      this.sub = this.route.queryParams.subscribe(params => {
51
        this.queryParams = Object.assign({}, params);
52
        this.paramPosition = SearchFields.getParameterOrder(this.filter.filterId,  this.getEntries(params));
53
      });
54
      this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
55
      if(this.filter.filterType == "radio"){
56
        this.filter.radioValue = "";
57
        this.filter.values.forEach(value => {
58
          if(value.selected){
59
            this.filter.radioValue = value.id
60
          }
61
        });
62
      }
63
    }
64
    
65
    ngOnChanges(changes: SimpleChanges) {
66
      if(changes.filter) {
67
        this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
68
        if(this.filter.filterType == "radio"){
69
          this.filter.radioValue = "";
70
          this.filter.values.forEach(value => {
71
            if(value.selected){
72
              this.filter.radioValue = value.id
73
            }
74
          });
75
        }
76
      }
77
    }
78
  
79
  public _formatTitle(title,length){
80
      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title)+" ("+(length>95?"100":length)+")";
81
    }
82
    public _formatName(value){
83
      //let maxLineLength = 24;
84
      let maxLineLength = 35;
85

    
86
      //1 space after checkbox
87
      //3 space before number + parenthesis
88
      if(!this.showResultCount && value.name.length+1 > maxLineLength ){
89
        return value.name.substr(0, maxLineLength -3 -1)+'...';
90
      }
91
      if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){
92
        return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...';
93
      }
94

    
95
      return value.name;
96
    }
97

    
98
    filterKeywords(value){
99
      if(this.keyword.length > 0){
100
        if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
101
          return false;
102
        }
103
      }
104
      return true;
105
    }
106
    filterChange(selected:boolean){
107
      if(selected){
108
          this.filter.countSelectedValues++;
109
      }else{
110
          this.filter.countSelectedValues--;
111
      }
112
      this.onFilterChange.emit({
113
          value: this.filter
114
      });
115
    }
116
    uniqueFilterChange(value: Value) {
117
      let tmp = value.selected;
118
      value.selected = !tmp;
119

    
120
      if(value.selected){
121
        this.filter.countSelectedValues = 1;
122
      }else{
123
        this.filter.countSelectedValues = 0;
124
      }
125

    
126
      this.filter.values.forEach(value => {
127
          value.selected = (value.id == this.filter.radioValue);
128
      });
129
      this.onFilterChange.emit({
130
        value: this.filter
131
      });
132
    }
133
    clearFilter() {
134
      for (var i=0; i < this.filter.values.length; i++){
135
        this.filter.values[i].selected = false;
136
      }
137
      this.filter.countSelectedValues = 0;
138
      this.onFilterChange.emit({
139
        value: this.filter
140
      });
141
      this.filter.radioValue = "";
142
    }
143

    
144
  getSelectedAndTopValues(filter, topNum: number = 6):any{
145
    var values = [];
146

    
147
    for (let i=0; i < topNum; i++){
148
      if(filter.values.length <= i) {
149
        break;
150
      }
151
      values.push(filter.values[i]);
152
    }
153

    
154
    if(filter.countSelectedValues >0){
155
      for (let i=topNum; i < filter.values.length; i++){
156
        if(filter.values[i].selected){
157
          values.push(filter.values[i]);
158
        }
159
      }
160
    }
161

    
162
    return values;
163
  }
164

    
165
    getSelectedValues(filter, sortBy:string = "num"):any{
166
      var selected = [];
167
      if(filter.countSelectedValues >0){
168
        for (var i=0; i < filter.values.length; i++){
169
          if(filter.values[i].selected){
170
            selected.push(filter.values[i]);
171
          }
172
        }
173
      }
174
      if(sortBy == "name"){
175

    
176
        selected.sort((n1,n2)=> {
177
          if (n1.name > n2.name) {
178
              return 1;
179
          }
180

    
181
          if (n1.name < n2.name) {
182
              return -1;
183
          }
184

    
185
          return 0;
186
        });
187
      }
188
      return selected;
189

    
190
    }
191
    getNotSelectedValues(filter, sortBy:string = "num"):any{
192
      var notSselected = [];
193
      for (var i=0; i < filter.values.length; i++){
194
        if(!filter.values[i].selected){
195
          notSselected.push(filter.values[i]);
196
        }
197
      }
198

    
199
      if(sortBy == "name"){
200

    
201
        notSselected.sort((n1,n2)=> {
202
          if (n1.name > n2.name) {
203
              return 1;
204
          }
205
          if (n1.name < n2.name) {
206
              return -1;
207
          }
208

    
209
          return 0;
210
        });
211
      }
212
      return notSselected;
213
    }
214

    
215
    sort(values: Value[]) {
216
      let sorted: Value[] = values.slice();
217
      if(this.sortBy == "name"){
218

    
219
        sorted.sort((n1,n2)=> {
220
          if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
221
            return 1;
222
          }
223

    
224
          if (n1.name < n2.name) {
225
            return -1;
226
          }
227

    
228
          return 0;
229
        });
230
      }
231
      return sorted;
232
    }
233

    
234
  toggle() {
235
    this.isOpen = !this.isOpen;
236
  }
237

    
238
  getFilterName(value){
239
    let name = value.name +" ("+ value.number.format()+")";
240
    console.log(name);
241
    return name;
242
  }
243
  getRoute(){
244
    return   this._router.url.split("?")[0];
245
  }
246
  getParams(filter:Filter, value:Value){
247
      let params = Object.assign({}, this.queryParams);
248
/*      let qf=false;
249
      if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){
250
        params['qf']="false";
251
        qf=true;
252
      }*/
253
      if(params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','),value.id)==-1 /*&& !qf*/) {
254
        //has other values of this filter --> add this value
255
        params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"';
256
      }else if(params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','),value.id)!=-1) {
257
        // has this filter and the value -- > remove it
258

    
259
        let values = params[filter.filterId].split(',');
260
        values.splice(this.checkIfValueIndexOf(values,value.id), 1);
261
        params[filter.filterId] =values.join(',');
262
        if(values.length == 0){
263
          delete params[filter.filterId];
264
        }
265
      } else /*if(!qf)*/{
266
        //has no filter, no value --> add the value
267
        //check the order
268
        let keyValues = this.getEntries(params);
269
        keyValues.splice(this.paramPosition,0, [filter.filterId,'"' + encodeURIComponent(value.id) + '"']); // insert key value at paramPosition.
270
        params = keyValues.reduce((o, key) => Object.assign(o, {[key[0]]:key[1]}), {});
271
        // params[filter.filterId] = '"' + encodeURIComponent(value.id) + '"' ;
272
      }
273
      delete params['page'];
274
      return params;
275
  }
276
  checkIfValueIndexOf(array, value){
277
      let encodedValue = encodeURIComponent(value);
278
      if(array.indexOf(encodedValue)!=-1){
279
        return array.indexOf(encodedValue);
280
      }
281
      if(array.indexOf('"'+encodedValue+'"')!=-1){
282
        return array.indexOf('"'+encodedValue+'"');
283
      }
284
      return -1;
285
  }
286
  getEntries(obj) {
287
    if (!Object.entries) {
288

    
289
      var ownProps = Object.keys(obj),
290
        i = ownProps.length,
291
        resArray = new Array(i); // preallocate the Array
292
      while (i--)
293
        resArray[i] = [ownProps[i], obj[ownProps[i]]];
294
      return resArray;
295
    }else{
296
      return Object.entries(obj);
297
    }
298
  }
299
}
(26-26/44)