import {Component, Input, ViewChild, Output, EventEmitter, ViewEncapsulation, OnInit, AfterViewInit} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; import {Location} from '@angular/common'; import { Filter, Value} from './searchHelperClasses.class'; import {SearchResult} from '../../utils/entities/searchResult'; import {SearchFields, FieldDetails} from '../../utils/properties/searchFields'; import {SearchUtilsClass} from './searchUtils.class'; import {DOI, StringUtils} from '../../utils/string-utils.class'; import {ModalLoading} from '../../utils/modal/loading.component'; import { Meta} from '../../../angular2-meta'; import{SearchFilterComponent} from './searchFilter.component'; import {SearchFilterModalComponent} from './searchFilterModal.component'; import { ErrorCodes} from '../../utils/properties/openaireProperties'; import {OpenaireProperties} from '../../utils/properties/openaireProperties'; import {PiwikService} from '../../utils/piwik/piwik.service'; import { DataTableDirective } from 'angular-datatables'; import {SearchDataprovidersService} from '../../services/searchDataproviders.service'; @Component({ selector: 'search-page-table', templateUrl:'searchPageTableView.component.html', styles: [` #dpTable_info, #dpTable_paginate, #dpTable_length, #dpTable_filter{ display: none; } `], encapsulation: ViewEncapsulation.None // this used in order styles to work }) export class SearchPageTableViewComponent implements OnInit, AfterViewInit { @Input() pageTitle = ""; @Input() results; @Input() filters = []; @Input() type:string = ""; @Input() entityType: string = ""; @Input() searchUtils:SearchUtilsClass;// = new SearchUtilsClass(); //@Output() downloadClick = new EventEmitter(); @Input() showResultCount:boolean = true; @Input() showRefine:boolean = true; @Input() refineFields = []; //@Input() csvParams: string; //@Input() csvPath: string; @Input() searchViewLink: string; @Input() disableForms: boolean = false; @Input() searchFormClass: string = "searchForm"; @Input() formPlaceholderText = "Type Keywords..."; @ViewChild (ModalLoading) loading : ModalLoading ; private searchFieldsHelper:SearchFields = new SearchFields(); private queryParameters: Map = new Map(); public countFilters= 0; public parameterNames:string[] =[]; public parameterValues:string[] =[]; public rowsOnPage:number = 10; @ViewChild (SearchFilterModalComponent) searchFilterModal : SearchFilterModalComponent ; public currentFilter: Filter; public errorCodes:ErrorCodes = new ErrorCodes(); piwiksub: any; dtOptions: DataTables.Settings = {}; showTable = false; filteringAdded = false; @ViewChild(DataTableDirective) datatableElement: DataTableDirective; dtTrigger: Subject = new Subject(); //necessary constructor (private location: Location , private _meta: Meta, private _piwikService:PiwikService, private _searchDataprovidersService: SearchDataprovidersService ) { } ngOnInit() { this.dtOptions = { "paging": true, "searching": false, "lengthChange": false, "pageLength": this.rowsOnPage }; this.updateTitle(this.pageTitle); this.updateDescription("Openaire, search, repositories, open access, type, content provider, funder, project, " + this.type + "," +this.pageTitle); if(typeof window !== 'undefined') { this.updateUrl(OpenaireProperties.getBaseLink()+location.pathname); } if(OpenaireProperties.isPiwikTrackEnabled() && (typeof document !== 'undefined')){ this.piwiksub = this._piwikService.trackView(this.pageTitle).subscribe(); } } ngOnDestroy() { if(this.piwiksub){ this.piwiksub.unsubscribe(); } } ngAfterViewInit(): void { $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => { if (this.filterData(data, this.searchUtils.keyword, this.filters)) { return true; } return false; }); } totalPages(): number { let totalPages:any = this.searchUtils.totalResults/(this.rowsOnPage); if(!(Number.isInteger(totalPages))) { totalPages = (parseInt(totalPages, 10) + 1); } return totalPages; } toggleModal($event) { this.currentFilter = $event.value; this.searchFilterModal.open(); } updateDescription(description:string){ this._meta.updateMeta("description", description); this._meta.updateProperty("og:description", description); } updateTitle(title:string){ var _prefix ="OpenAIRE | "; var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title); this._meta.setTitle(_title ); this._meta.updateProperty("og:title",_title); } updateUrl(url:string){ this._meta.updateProperty("og:url", url); } public getParametersFromUrl(params) { for(var i=0; i< this.refineFields.length ; i++) { var filterId = this.refineFields[i]; if(params[filterId] != undefined) { if(this.queryParameters == undefined){ this.queryParameters = new Map(); } this.queryParameters[filterId]=decodeURIComponent(params[filterId]); } } } /* * Mark as check the new filters that are selected, when you get them from search */ public checkSelectedFilters(filters:Filter[]){ this.filters = filters; for(var i=0; i< filters.length ; i++){ var filter:Filter = filters[i]; filter.countSelectedValues = 0; if(this.queryParameters[filter.filterId] != undefined) { let values = (decodeURIComponent(this.queryParameters[filter.filterId])).split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,-1); for(let filterValue of filter.values) { if(values.indexOf(StringUtils.quote(filterValue.id)) > -1) { filterValue.selected = true; filter.countSelectedValues++; }else{ filterValue.selected = false; } } }else{ for(let filterValue of filter.values) { filterValue.selected = false; } } } return filters; } /* * */ private createUrlParameters(filters:Filter[], includePage:boolean){ var allLimits="";//location.search.slice(1); this.parameterNames.splice(0,this.parameterNames.length); this.parameterValues.splice(0,this.parameterValues.length); for (let filter of filters){ var filterLimits=""; if(filter.countSelectedValues > 0){ for (let value of filter.values){ if(value.selected == true){ filterLimits+=((filterLimits.length == 0)?'':',') +'"'+ StringUtils.URIEncode(value.id)+'"'; } } this.queryParameters[filter.filterId]=filterLimits; if(filterLimits.length > 0){ this.parameterNames.push(filter.filterId); this.parameterValues.push(filterLimits); } allLimits+=(allLimits.length==0?"?":"&")+((filterLimits.length == 0 )?'':filter.filterId + '='+ filterLimits) ; } } if(this.searchUtils.keyword.length > 0 ){ allLimits+=(allLimits.length==0?"?":"&")+'keyword=' + this.searchUtils.keyword; this.parameterNames.push("keyword"); this.parameterValues.push(this.searchUtils.keyword); } return allLimits; } public isFiltered(){ var filtered=false; for (let filter of this.filters){ if(filter.countSelectedValues > 0){ filtered = true; break; } } if(this.searchUtils.keyword.length > 0 ){ filtered = true; } return filtered; } private clearKeywords(){ if(this.searchUtils.keyword.length > 0 ){ this.searchUtils.keyword =''; } this.goTo(1); } private clearFilters(){ for (var i =0 ; i < this.filters.length; i++) { for (var j=0; j < this.filters[i].values.length; j++) { if(this.filters[i].values[j].selected) { this.filters[i].values[j].selected = false; } } this.filters[i].countSelectedValues = 0; } this.clearKeywords(); } private removeFilter(value:Value,filter:Filter){ filter.countSelectedValues--; if(value.selected == true){ value.selected = false; } this.goTo(1); } goTo(page:number = 1){ this.searchUtils.page=page; var table = $('#dpTable').DataTable(); table.page( page - 1 ).draw( false ); // Object { page: 0, pages: 3, start: 0, end: 10, length: 10, recordsTotal: 28, recordsDisplay: 21, serverSide: false } var info = table.page.info(); this.searchUtils.totalResults = info.recordsDisplay; var urlParameters = this.createUrlParameters(this.filters,true); this.location.go(location.pathname,urlParameters); } filterChanged($event){ this.goTo(1); } keywordChanged($event) { this.searchUtils.keyword = $event.value; this.goTo(1); } /* downloadClicked($event) { if($event.value == true) { var queryParameters = this.createSearchQueryParameters(this.filters); this.downloadClick.emit({ value: queryParameters }); } } */ 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; } /* Trigger a table draw in order to get the initial filtering */ triggerInitialLoad(){ setTimeout(function(){ var table = $('#dpTable').DataTable(); table.page( 0 ).draw( false ); }, 500); } /* Transform initial - not filtered results to get the filtered number */ transform(results): any { if(results.length > 0) { var errorCodes:ErrorCodes = new ErrorCodes(); this.searchUtils.status = errorCodes.LOADING; var result = results.filter(row=>this.filterAll(row, this.searchUtils.keyword.toLowerCase(),this.filters)); let oldTotal = this.searchUtils.totalResults; console.log(" Length: "+result.length); this.searchUtils.totalResults = result.length; var errorCodes:ErrorCodes = new ErrorCodes(); this.searchUtils.status = errorCodes.DONE; if(this.searchUtils.totalResults == 0 ){ this.searchUtils.status = errorCodes.NONE; } // if(oldTotal != this.searchUtils.totalResults) { // args[3].detectChanges(); // } return result; } return []; } filterAll(row: any, query: string, filters:Filter[]) { // console.log(row); let returnValue: boolean = false; if(query) { if(row.title.name.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.type.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.countries && row.countries.length > 0) { for(let country of row.countries) { if(country.toLowerCase().indexOf(query) > -1) { returnValue = true; break; } } } if(row.compatibility && row.compatibility.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.organizations && row.organizations.length > 0) { for(let organization of row.organizations) { if(organization.name.toLowerCase().indexOf(query) > -1) { returnValue = true; break; } } } if(!returnValue) { return false; } } for (let filter of filters){ if(filter.countSelectedValues > 0){ for (let value of filter.values){ if(value.selected == true){ // make it generic in future commit let field:string = ""; if(filter.title == "Type") { field = "type"; } else if(filter.title == "Compatibility Level") { field = "compatibility"; } if(row[field] == value.name) { returnValue = true; if(filter.filterOperator == "or") { break; } } else { if(filter.filterOperator == "and") { return false; } returnValue = false; } } } if(!returnValue) { return false; } } } return true; } filterQuery(data, query){ if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){ return true; }else{ return false; } } filterData(row: any, query: string, filters:Filter[]) { let returnValue: boolean = false; if(query) { for(var i=0; i <5; i++){ var r= this.filterQuery(row[i], query); // console.log(query+" "+ row+" "+r); if(r) { returnValue = true; break; } } if(!returnValue) { return false; } } for (let filter of filters){ if(filter.countSelectedValues > 0){ for (let value of filter.values){ if(value.selected == true){ let field = 1; if(filter.title == "Type") { field = 1; } else if(filter.title == "Compatibility Level") { field = 4; } r= this.filterQuery(row[field], value.name); if(r) { returnValue = true; if(filter.filterOperator == "or") { break; } } else { if(filter.filterOperator == "and") { return false; } returnValue = false; } } } if(!returnValue) { return false; } } } return true; } }