openaire-library/searchPages/searchUtils/searchPageTableView.compone...

586 lines
19 KiB
TypeScript

import {Component, Input} from '@angular/core';
import {ViewChild} from '@angular/core';
import {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 {Subject} from 'rxjs';
import {DataTableDirective } from 'angular-datatables';
import {EnvProperties} from '../../utils/properties/env-properties';
import {Filter, Value} from './searchHelperClasses.class';
import {SearchFields} from '../../utils/properties/searchFields';
import {SearchCustomFilter, SearchUtilsClass} from './searchUtils.class';
import {StringUtils} from '../../utils/string-utils.class';
import {ModalLoading} from '../../utils/modal/loading.component';
import {SearchFilterModalComponent} from './searchFilterModal.component';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import {PiwikService} from '../../utils/piwik/piwik.service';
import { SEOService } from '../../sharedComponents/SEO/SEO.service';
import {HelperService} from "../../utils/helper/helper.service";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
@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<string, string> = new Map<string,string>();
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<any> = new Subject(); //necessary
properties:EnvProperties;
url = null;
public pageContents = null;
@Input() customFilter: SearchCustomFilter = null;
@Input() enableEntitySelection: boolean = false;
@Input() includeOnlyResultsAndFilter:boolean = false;
@Input() showBreadcrumb:boolean = false;
breadcrumbs:Breadcrumb[] = [];
constructor (private route: ActivatedRoute,
private router: Router,
private location: Location,
private _meta: Meta,
private _title: Title,
private _piwikService:PiwikService,
private seoService: SEOService,
private helper: HelperService) { }
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.getPageContents();
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);
this.breadcrumbs.push({name: 'home', route: '/'}, {name: this.pageTitle, route: null});
}
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<string,string>();
}
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?"?":"&")+'fv0=' + this.searchUtils.keyword;
this.parameterNames.push("fv0");
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;
}
}
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;
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, searchUtils:SearchUtilsClass = null ): any {
if(searchUtils!=null) {
this.searchUtils = searchUtils;
}
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<this.columnNames.length; i++) {
if(filter.title == this.columnNames[i]) {
index = i;
}
}
*/
if(filter.title == "Type") {
field = "type";
} else if(filter.title == "Compatibility") {
field = "compatibility";
} else if(filter.title == "Funder") {
field = "funder";
} else if(filter.title == "Country") {
field = "countries";
}
//console.info(row);
//console.info("|"+row[field]+"|"+" "+"|"+value.name+"|");
//if(row[field] == value.name) {
if(row[field] &&
((filter.valueIsExact && (row[field].trim() == value.name.trim()))
|| (!filter.valueIsExact && (row[field].includes(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 <this.columnNames.length; 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;
} else if(filter.title == "Funder") {
field = 3
}*/
for(let i=0; i<this.columnNames.length; i++) {
if(filter.title == this.columnNames[i]) {
field = i;
}
}
//if(row[field].trim() == value.name.trim()) {
if((filter.valueIsExact && (row[field].trim() == value.name.trim()))
|| (!filter.valueIsExact && (row[field].includes(value.name)))){
returnValue = true;
if(filter.filterOperator == "or") {
break;
}
} else {
if(filter.filterOperator == "and") {
return false;
}
returnValue = false;
}
}
}
if(!returnValue) {
return false;
}
}
}
return true;
}
public encode(param: string): string {
return StringUtils.URIEncode(param);
}
public countFilters():number{
var filters=0;
for (let filter of this.filters){
if(filter.countSelectedValues > 0){
filters+=filter.countSelectedValues;
}
}
return filters;
}
private getPageContents() {
this.helper.getPageHelpContents(this.properties, (this.customFilter) ? this.customFilter.valueId : null, this.router.url).subscribe(contents => {
this.pageContents = contents;
})
}
}