import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core'; import { Filter, Value} from './searchHelperClasses.class'; @Component({ selector: 'search-filter', templateUrl: 'searchFilter.component.html' }) export class SearchFilterComponent { @Input() filter:Filter; @Input() showResultCount:boolean = true; @Input() isDisabled:boolean = false; @Input() addShowMore:boolean = true; @Input() showMoreInline: boolean = true; @Input() filterValuesNum: number = 4; public showAll:boolean = false; public _maxCharacters:number =28; @Output() toggleModal = new EventEmitter(); @Output() modalChange = new EventEmitter(); @Output() onFilterChange = new EventEmitter(); keyword = ""; sortBy = "name"; public isOpen:boolean=false; constructor () { } ngOnInit() {} public _formatTitle(title,length){ return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+length+")") } public _formatName(value){ //let maxLineLength = 24; let maxLineLength = 35; //1 space after checkbox //3 space before number + parenthesis if(!this.showResultCount && value.name.length+1 > maxLineLength ){ return value.name.substr(0, maxLineLength -3 -1)+'...'; } if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){ return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...'; } return value.name; } filterKeywords(value){ if(this.keyword.length > 0){ if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){ return false; } } return true; } filterChange(selected:boolean){ if(selected){ this.filter.countSelectedValues++; }else{ this.filter.countSelectedValues--; } this.onFilterChange.emit({ value: this.filter }); } uniqueFilterChange(value: Value) { let tmp = value.selected; value.selected = !tmp; if(value.selected){ this.filter.countSelectedValues++; }else{ this.filter.countSelectedValues--; } this.onFilterChange.emit({ value: this.filter }); } clearFilter() { for (var i=0; i < this.filter.values.length; i++){ this.filter.values[i].selected = false; } this.filter.countSelectedValues = 0; this.onFilterChange.emit({ value: this.filter }); } getSelectedAndTopValues(filter, topNum: number = 6):any{ var values = []; for (let i=0; i < topNum; i++){ if(filter.values.length <= i) { break; } values.push(filter.values[i]); } if(filter.countSelectedValues >0){ for (let i=topNum; i < filter.values.length; i++){ if(filter.values[i].selected){ values.push(filter.values[i]); } } } return values; } getSelectedValues(filter, sortBy:string = "num"):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]); } } } if(sortBy == "name"){ selected.sort((n1,n2)=> { if (n1.name > n2.name) { return 1; } if (n1.name < n2.name) { return -1; } return 0; }); } return selected; } getNotSelectedValues(filter, sortBy:string = "num"):any{ var notSselected = []; for (var i=0; i < filter.values.length; i++){ if(!filter.values[i].selected){ notSselected.push(filter.values[i]); } } if(sortBy == "name"){ notSselected.sort((n1,n2)=> { if (n1.name > n2.name) { return 1; } if (n1.name < n2.name) { return -1; } return 0; }); } return notSselected; } sort(values: Value[]) { let sorted: Value[] = values.slice(); if(this.sortBy == "name"){ sorted.sort((n1,n2)=> { if (n1.name > n2.name) { return 1; } if (n1.name < n2.name) { return -1; } return 0; }); } return sorted; } toggle() { this.isOpen = !this.isOpen; } getFilterName(value){ let name = value.name +" ("+ value.number.format()+")"; console.log(name); return name; } }