import {Component, Input} from '@angular/core'; import {ViewChild, Output} from '@angular/core'; import {EventEmitter, ViewEncapsulation} from '@angular/core'; import {OnInit, AfterViewInit} from '@angular/core'; import {Location} from '@angular/common'; import {ActivatedRoute, Router} from '@angular/router'; import {Title, Meta} from '@angular/platform-browser'; import {Observable, Subject} from 'rxjs'; import {DataTableDirective } from 'angular-datatables'; import {EnvProperties} from '../../utils/properties/env-properties'; 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 {SearchFilterComponent} from './searchFilter.component'; import {SearchFilterModalComponent} from './searchFilterModal.component'; import {ErrorCodes} from '../../utils/properties/errorCodes'; import {PiwikService} from '../../utils/piwik/piwik.service'; //import {SearchDataprovidersService} from '../../services/searchDataproviders.service'; import { SEOService } from '../../sharedComponents/SEO/SEO.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() piwikSiteId = null; @Input() hasPrefix: boolean = true; @Input() pageTitle = ""; @Input() results; @Input() filters = []; @Input() columnNames = []; @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() openaireLink: string; @Input() searchViewLink: string; @Input() disableForms: boolean = false; @Input() enableSearchView: boolean = true; @Input() searchFormClass: string = "searchForm"; @Input() formPlaceholderText = "Type Keywords..."; @Input() mapUrl: string = ""; @Input() mapTooltipType: string ="content providers"; @ViewChild (ModalLoading) loading : ModalLoading ; private searchFieldsHelper:SearchFields = new SearchFields(); private queryParameters: Map = new Map(); public parameterNames:string[] =[]; public parameterValues:string[] =[]; public isPiwikEnabled; @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 properties:EnvProperties; url = null; constructor (private route: ActivatedRoute, private router: Router, private location: Location, private _meta: Meta, private _title: Title, private _piwikService:PiwikService, private seoService: SEOService) { } ngOnInit() { this.route.data .subscribe((data: { envSpecific: EnvProperties }) => { this.properties = data.envSpecific; this.isPiwikEnabled = data.envSpecific.enablePiwikTrack; if(typeof window !== 'undefined') { this.updateUrl(data.envSpecific.baseLink+location.pathname); this.url =data.envSpecific.baseLink+location.pathname; } if(typeof document !== 'undefined' && this.isPiwikEnabled){ this.piwiksub = this._piwikService.trackView(data.envSpecific, this.pageTitle, this.piwikSiteId).subscribe(); } }); this.dtOptions = { "paging": true, "searching": false, "lengthChange": false, "pageLength": this.searchUtils.size }; this.updateTitle(this.pageTitle); var description = "Openaire, search, repositories, open access, type, content provider, funder, project, " + this.type + "," +this.pageTitle; this.updateDescription(description); this.seoService.createLinkForCanonicalURL(this.properties.baseLink+this.router.url,false); } ngOnDestroy() { if(this.piwiksub){ this.piwiksub.unsubscribe(); } try{ $.fn['dataTable'].ext.search.pop(); }catch(e){ console.error("An error occured in ngOnDestroy of SearchPageTableViewComponent ", e) } } ngAfterViewInit(): void { try{ $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => { //console.info(dataIndex+": "+data); //console.info(this.results); //if (this.filterData(this.results[dataIndex], this.searchUtils.keyword, this.filters)) { if(this.filterAll(this.results[dataIndex], this.searchUtils.keyword.toLowerCase(),this.filters)) { // console.info("filter true (keyword:"+this.searchUtils.keyword+")"); return true; } // console.info("filter false (keyword:"+this.searchUtils.keyword+")"); return false; }); }catch(e){ console.error("An error occured in ngAfterViewInit of SearchPageTableViewComponent ", e) } } totalPages(): number { let totalPages:any = this.searchUtils.totalResults/(this.searchUtils.size); 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.updateTag({content:description},"name='description'"); this._meta.updateTag({content:description},"property='og:description'"); } updateTitle(title:string) { var _prefix: string = ""; if(this.hasPrefix) { _prefix = "OpenAIRE | "; } var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title); this._title.setTitle(_title); this._meta.updateTag({content:_title},"property='og:title'"); } updateUrl(url:string) { this._meta.updateTag({content:url},"property='og: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); } sizeChanged($event) { this.searchUtils.size = $event.value; var table = $('#dpTable').DataTable(); table.page.len( this.searchUtils.size ).draw(); 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.info(result); 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[]) { let returnValue: boolean = false; if(query) { if(row.title && row.title.name.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.type && 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(row.name && row.name.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.acronym && row.acronym.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.grantId && row.grantId.toLowerCase().indexOf(query) > -1) { returnValue = true; } if(row.funder && row.funder.toLowerCase().indexOf(query) > -1) { returnValue = true; } 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 = ""; /* let index: number = -1; for(let i=0; i -1){ return true; }else{ return false; } } filterData(row: any, query: string, filters:Filter[]) { let returnValue: boolean = false; if(query) { for(var i=0; i 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; } else if(filter.title == "Funder") { field = 3 }*/ for(let i=0; i 0){ filters+=filter.countSelectedValues; } } if(this.searchUtils.keyword.length > 0 ){ filters++; } return filters; } }