[Library|Trunk]
- QuickSelection component: - change resultTypes to a Filter - use search-filter compoonent to show the types - add actionRoute property - Action route: - add in filters and range filters, - set it true in search pages, false for filters in claims git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59632 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
38027b7137
commit
2901fe8e48
|
|
@ -151,7 +151,7 @@
|
|||
</li>
|
||||
</ng-container>
|
||||
<search-filter *ngFor="let filter of filters " [isDisabled]="false" [filter]="filter" [showResultCount]=true
|
||||
(onFilterChange)="filterChanged($event)"></search-filter>
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
|
||||
<!-- <div *ngIf="openaireResultsNum != null && openaireResultsNum > 0" class="uk-clearfix portal-hr ">
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@
|
|||
<search-filter *ngFor="let filter of openaireResultsfilters " [isDisabled]="openaireResultsStatus ==
|
||||
errorCodes.LOADING" [filter]="filter"
|
||||
[showResultCount]=true
|
||||
(onFilterChange)="filterChanged($event)"></search-filter>
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
|
||||
<div class="uk-margin-top">
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
</span>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedTypesNum > 0 && resultTypes">
|
||||
<ng-container *ngFor="let type of resultTypeOptions; let i = index; let end = last; ">
|
||||
<ng-container *ngIf="resultTypes[type.id] == true">
|
||||
<ng-container *ngIf="resultTypes.countSelectedValues > 0 && resultTypes">
|
||||
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
|
||||
<ng-container *ngIf="type.selected">
|
||||
<span [title]="'Remove '+ type.name" (click)="removeResultType(type.id) "
|
||||
[class]="((disableForms || disableRefineForms) ? 'uk-disabled' : 'clickable') + ' uk-grid-margin'">
|
||||
<span class="selectedFilterLabel ">
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
<ng-template #filters_column>
|
||||
<div [class.filterLoading]="(disableForms || disableRefineForms)">
|
||||
<div class="uk-width-1-1 uk-margin-top" >
|
||||
<div class="uk-grid uk-flex uk-flex-bottom">
|
||||
<!-- *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum > 0)
|
||||
|
|
@ -114,20 +115,20 @@
|
|||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[filter]="filters[0]" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)"></search-filter>
|
||||
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
|
||||
[actionRoute]="true"></search-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngIf="resultTypes && (filters.length > 0)">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties" [vertical]="true" [delayTime]="0">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
|
||||
[isDisabled]="disableForms || disableRefineForms" [vertical]="true"
|
||||
[properties]="properties" [actionRoute]="true">
|
||||
</quick-selections>
|
||||
</li>
|
||||
<ng-container *ngFor="let filter of rangeFilters">
|
||||
<li>
|
||||
<range-filter [isDisabled]="disableForms || disableRefineForms" [filter]="filter"
|
||||
(onFilterChange)="filterChanged($event)"></range-filter>
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
|
|
@ -135,10 +136,11 @@
|
|||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[filter]="filter" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)"></search-filter>
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, ElementRef, Input, Output, ViewChild} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, ElementRef, Input, Output, ViewChild} from '@angular/core';
|
||||
import {Location} from '@angular/common';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {Meta, Title} from '@angular/platform-browser';
|
||||
|
|
@ -79,9 +79,9 @@ export class NewSearchPageComponent {
|
|||
@Input() keywordFields = [];
|
||||
@Input() simpleView: boolean = true;
|
||||
@Input() formPlaceholderText = "Type Keywords...";
|
||||
@Input() resultTypes = null;
|
||||
resultTypeOptions = [{"id":"publication", "name":"Publications"},{"id":"dataset", "name":"Research data"},
|
||||
{"id":"software", "name":"Software"},{"id":"other", "name":" Other research products"}];
|
||||
@Input() resultTypes:Filter = {values:[],filterId:"type", countSelectedValues: 0, filterType: 'checkbox', originalFilterId: "", valueIsExact: true, title: "Result Types",filterOperator:"or"};
|
||||
resultTypeOptions = {"publications":{"id":"publication", "name":"Publications"},"datasets":{"id":"dataset", "name":"Research data"},
|
||||
"software":{"id":"software", "name":"Software"},"other":{"id":"other", "name":" Other research products"}};
|
||||
selectedTypesNum = 0;
|
||||
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
|
||||
@Input() includeOnlyResultsAndFilter:boolean = false;
|
||||
|
|
@ -130,7 +130,8 @@ export class NewSearchPageComponent {
|
|||
private _piwikService: PiwikService,
|
||||
private router: Router,
|
||||
private seoService: SEOService,
|
||||
private helper: HelperService) {
|
||||
private helper: HelperService,
|
||||
private cdr:ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -276,10 +277,12 @@ export class NewSearchPageComponent {
|
|||
if (this.quickFilter) {
|
||||
this.removeValueFromQuickFilter();
|
||||
}
|
||||
this.resultTypes = {};
|
||||
for(let type of this.resultTypeOptions){
|
||||
this.resultTypes[type.id]=false;
|
||||
}
|
||||
// this.resultTypes = new Filter();
|
||||
// this.resultTypes.filterId = "";
|
||||
this.resultTypes.values = [];
|
||||
// for(let type of this.resultTypeOptions){
|
||||
// this.resultTypes.values.push({name: type.name , id:type.id,selected:false, number:0});
|
||||
// }
|
||||
this.goTo(1);
|
||||
// this.clearKeywords();
|
||||
}
|
||||
|
|
@ -306,8 +309,11 @@ export class NewSearchPageComponent {
|
|||
/* End Piwik Code */
|
||||
}
|
||||
|
||||
queryChanged() {
|
||||
|
||||
queryChanged($event) {
|
||||
if($event == "filters_update"){
|
||||
this.cdr.detectChanges();
|
||||
return;
|
||||
}
|
||||
this.goTo(1, false);
|
||||
}
|
||||
|
||||
|
|
@ -1022,12 +1028,17 @@ export class NewSearchPageComponent {
|
|||
|
||||
if (this.entityType == "result") {
|
||||
if (URLparams["type"]) {
|
||||
let types = URLparams["type"].split(",");
|
||||
let types = URLparams["type"];
|
||||
types = Array.isArray(types) ? types.join(',').split(","):types.split(",");
|
||||
types.map( function (t) {
|
||||
return StringUtils.unquote(StringUtils.URIDecode(t));
|
||||
} );
|
||||
|
||||
if(types.indexOf("publications")!=-1 && types.indexOf("datasets")!=-1 && types.indexOf("software")!=-1 && types.indexOf("other")!=-1 ){
|
||||
allFqs += "&type=results";
|
||||
}else{
|
||||
for (let type of types) {
|
||||
allFqs += "&type=" + type;
|
||||
allFqs += "&type=" + StringUtils.unquote(StringUtils.URIDecode(type));
|
||||
}
|
||||
}
|
||||
}else{
|
||||
|
|
@ -1309,17 +1320,8 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
|
|||
|
||||
if (this.resultTypes && this.entityType == "result") {
|
||||
let values = [];
|
||||
if (this.resultTypes.publication) {
|
||||
values.push("publications");
|
||||
}
|
||||
if (this.resultTypes.dataset) {
|
||||
values.push("datasets");
|
||||
}
|
||||
if (this.resultTypes.software) {
|
||||
values.push("software");
|
||||
}
|
||||
if (this.resultTypes.other) {
|
||||
values.push("other");
|
||||
for(let value of this.resultTypes.values){
|
||||
values.push(value.id);
|
||||
}
|
||||
this.selectedTypesNum = 0;
|
||||
if (values.length > 0 && values.length != 4) {
|
||||
|
|
@ -1398,23 +1400,16 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
|
|||
}
|
||||
}
|
||||
if (this.entityType == "result") {
|
||||
this.resultTypes = null;
|
||||
this.resultTypes = {
|
||||
|
||||
};
|
||||
|
||||
this.resultTypes.values = [];
|
||||
if (URLparams["type"]) {
|
||||
let types = URLparams["type"];
|
||||
types = Array.isArray(types) ? types.join(',').split(","):types.split(",");
|
||||
for(let type of types){
|
||||
if(["publications", "datasets","software", "other"].indexOf(StringUtils.unquote(type))!=-1 && this.resultTypeOptions[StringUtils.unquote(type)]){
|
||||
this.resultTypes.values.push({name: this.resultTypeOptions[StringUtils.unquote(type)].name , id:StringUtils.unquote(type),selected:true, number:0});
|
||||
}
|
||||
}
|
||||
|
||||
this.resultTypes['publication'] = (URLparams["type"].split(",").indexOf("publications") != -1);
|
||||
this.resultTypes['dataset'] = (URLparams["type"].split(",").indexOf("datasets") != -1);
|
||||
this.resultTypes['software'] = (URLparams["type"].split(",").indexOf("software") != -1);
|
||||
this.resultTypes['other'] = (URLparams["type"].split(",").indexOf("other") != -1);
|
||||
|
||||
} else {
|
||||
this.resultTypes['publication'] = false;
|
||||
this.resultTypes['dataset'] = false;
|
||||
this.resultTypes['software'] = false;
|
||||
this.resultTypes['other'] = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,48 @@
|
|||
import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
|
||||
import {FormBuilder, FormGroup} from "@angular/forms";
|
||||
import {ChangeDetectorRef, Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {FormBuilder} from "@angular/forms";
|
||||
import {Filter} from "./searchHelperClasses.class";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
import {ConfigurationService} from "../../utils/configuration/configuration.service";
|
||||
import {Subject, Subscription} from "rxjs";
|
||||
import {debounceTime} from "rxjs/operators";
|
||||
import {Subscription} from "rxjs";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'quick-selections',
|
||||
template: `
|
||||
<form *ngIf="!vertical && (resultTypes || quickFilter)" [formGroup]="control"
|
||||
<div *ngIf="!vertical && (resultTypes || quickFilter)"
|
||||
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-text-small uk-margin-small-bottom uk-grid uk-inline uk-flex uk-margin-small-left'">
|
||||
<div *ngIf="quickFilter" class="uk-margin-small-top uk-padding-remove-left uk-margin-right ">
|
||||
<span class="uk-text-bold">{{quickFilter.value}}</span>
|
||||
<mat-slide-toggle
|
||||
class="uk-margin-small-left" formControlName="QFselected" (change)="quickFilterChanged()">
|
||||
class="uk-margin-small-left" name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div *ngIf="resultTypes && showEntities" class="uk-margin-small-top uk-padding-remove-left">
|
||||
<span class="uk-text-muted">Include: </span>
|
||||
<span>
|
||||
<span *ngIf="showPublications" class="uk-margin-small-left"> <input type="checkbox" id="publ" name="Publications" formControlName="publication" (change)="changed()"> Publications </span>
|
||||
<span *ngIf="showDatasets" class="uk-margin-small-left"> <input type="checkbox" formControlName="dataset" (change)="changed()"> Research data </span>
|
||||
<span *ngIf="showSoftware" class="uk-margin-small-left"> <input type="checkbox" formControlName="software" (change)="changed()"> Software </span>
|
||||
<span *ngIf="showOrp" class="uk-margin-small-left"> <input type="checkbox" formControlName="other" (change)="changed()"> Other research products </span>
|
||||
<ng-container *ngFor="let value of resultTypes.values">
|
||||
<span class="uk-margin-small-left"> <input type="checkbox" class="uk-checkbox"
|
||||
[(ngModel)]="value.selected" (ngModelChange)="changed()" />{{value.name}}</span>
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form *ngIf="vertical && (resultTypes || quickFilter)" [formGroup]="control"
|
||||
</div>
|
||||
<div *ngIf="vertical && (resultTypes || quickFilter)"
|
||||
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-margin-small-bottom uk-list uk-list-divider'">
|
||||
<!-- <li *ngIf="quickFilter" class="uk-margin-small-bottom ">
|
||||
<div class="uk-margin-small-top uk-padding-remove-left uk-margin-right ">
|
||||
<h6 class="">{{quickFilter.value}}</h6>
|
||||
<mat-slide-toggle
|
||||
class="uk-margin-small-left" formControlName="QFselected" (change)="quickFilterChanged()">
|
||||
</mat-slide-toggle>
|
||||
<search-filter
|
||||
[isDisabled]="isDisabled"
|
||||
[filter]="resultTypes" [showResultCount]='false'
|
||||
(onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
|
||||
</div>
|
||||
</li>-->
|
||||
<!-- {{showEntities}} - {{showPublications}} - {{showDatasets}} - {{showSoftware}} -- {{showOrp}}-->
|
||||
<li *ngIf="resultTypes && showEntities" class="uk-margin-small-bottom ng-star-inserted">
|
||||
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
|
||||
<h6 class="uk-margin-bottom-remove" title="Community">Research Type ({{(this.showPublications + this.showDatasets + this.showSoftware + this.showOrp)}})</h6>
|
||||
<a *ngIf="selectedTypesNum>0" (click)="clearTypes()" class="portal-link">
|
||||
Clear
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div *ngIf="showPublications" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title="Publications">
|
||||
<label class="ng-star-inserted"><input class="uk-checkbox" type="checkbox" id="publ" name="Publications" formControlName="publication" (change)="changed()"> Publications</label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showDatasets" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title="Research data">
|
||||
<label class="ng-star-inserted"><input class="uk-checkbox" type="checkbox" formControlName="dataset" (change)="changed()"> Research data </label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showSoftware" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title="Software">
|
||||
<label class="ng-star-inserted"> <input class="uk-checkbox" type="checkbox" formControlName="software" (change)="changed()"> Software</label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showOrp" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title=" Other research products">
|
||||
<label class="ng-star-inserted"><input class="uk-checkbox" type="checkbox" formControlName="other" (change)="changed()"> Other research products</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</form>
|
||||
|
||||
`
|
||||
})
|
||||
|
||||
export class QuickSelectionsComponent implements OnChanges {
|
||||
@Input() resultTypes;
|
||||
export class QuickSelectionsComponent {
|
||||
@Input() resultTypes:Filter;
|
||||
@Output() typeChange = new EventEmitter();
|
||||
@Input() isDisabled;
|
||||
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
|
||||
@Input() QFselected: boolean;
|
||||
control: FormGroup;
|
||||
initialized = false;
|
||||
@Input() properties: EnvProperties;
|
||||
@Input() vertical: boolean=false;
|
||||
|
|
@ -89,55 +51,23 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
showSoftware: boolean = false;
|
||||
showOrp: boolean = false;
|
||||
showEntities = false;
|
||||
selectedTypesNum = 0;
|
||||
@Input() delayTime = 0;
|
||||
private clicks = new Subject();
|
||||
@Input() actionRoute:boolean = false;
|
||||
queryParams = {};
|
||||
|
||||
subs: Subscription[] = [];
|
||||
|
||||
constructor(private _fb: FormBuilder, private config: ConfigurationService) {
|
||||
|
||||
this.control = this._fb.group({
|
||||
publication: true,
|
||||
dataset: true,
|
||||
software: true,
|
||||
other: true,
|
||||
QFselected: true
|
||||
});
|
||||
|
||||
|
||||
constructor(private _fb: FormBuilder, private config: ConfigurationService, private _router: Router, private route: ActivatedRoute, private cdr:ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
changed() {
|
||||
if (!this.initialized && this.isDisabled) {
|
||||
this.initialized = true;
|
||||
return;
|
||||
}
|
||||
this.clicks.next();
|
||||
}
|
||||
actuallyChanged(){
|
||||
|
||||
let value = this.control.getRawValue();
|
||||
this.resultTypes.publication = value.publication;
|
||||
this.resultTypes.dataset = value.dataset;
|
||||
this.resultTypes.software = value.software;
|
||||
this.resultTypes.other = value.other;
|
||||
if (this.resultTypes && !this.resultTypes.publication && !this.resultTypes.dataset && !this.resultTypes.software && !this.resultTypes.other && !this.vertical) {
|
||||
this.resultTypes.publication = true;
|
||||
this.resultTypes.dataset = true;
|
||||
this.resultTypes.software = true;
|
||||
this.resultTypes.other = true;
|
||||
this.setFormValues();
|
||||
}
|
||||
this.typeChange.emit({});
|
||||
}
|
||||
|
||||
quickFilterChanged() {
|
||||
let value = this.control.getRawValue();
|
||||
this.quickFilter.selected = value.QFselected;
|
||||
if(this.quickFilter.filter) {
|
||||
this.quickFilter.filter.countSelectedValues = 0;
|
||||
if (value.QFselected) {
|
||||
if (this.quickFilter.selected) {
|
||||
for (let filterValue of this.quickFilter.filter.values) {
|
||||
if((filterValue.name == this.quickFilter.value)) {
|
||||
filterValue.selected = true
|
||||
|
|
@ -156,12 +86,13 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.resultTypes) {
|
||||
this.setFormValues();
|
||||
}
|
||||
if(this.properties) {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.queryParams = Object.assign({}, params);
|
||||
this.initializeFilters();
|
||||
});
|
||||
|
||||
if(this.properties && !this.initialized) {
|
||||
if(this.properties.adminToolsCommunity !== "monitor") {
|
||||
//this.subs.push(this.config.getCommunityInformation(this.properties, this.properties.adminToolsCommunity).subscribe(data => {
|
||||
this.subs.push(this.config.communityInformationState.subscribe(data => {
|
||||
if(data) {
|
||||
var showEntity = {};
|
||||
|
|
@ -173,6 +104,8 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
this.showSoftware = showEntity["software"];
|
||||
this.showOrp = showEntity["orp"];
|
||||
this.showEntities = this.showPublications || this.showDatasets || this.showSoftware || this.showOrp;
|
||||
this.initialized = true;
|
||||
this.initializeFilters();
|
||||
}
|
||||
}, error => {
|
||||
this.showPublications = true;
|
||||
|
|
@ -180,6 +113,7 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
this.showSoftware = true;
|
||||
this.showOrp = true;
|
||||
this.showEntities = true;
|
||||
this.initializeFilters();
|
||||
}));
|
||||
} else {
|
||||
this.showPublications = true;
|
||||
|
|
@ -187,59 +121,43 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
this.showSoftware = true;
|
||||
this.showOrp = true;
|
||||
this.showEntities = true;
|
||||
}
|
||||
}
|
||||
this.subs.push(this.clicks.pipe(
|
||||
debounceTime(this.delayTime)
|
||||
).subscribe(e =>{this.actuallyChanged()} ));
|
||||
|
||||
this.initialized = true;
|
||||
this.initializeFilters();
|
||||
}
|
||||
|
||||
}else{
|
||||
this.initializeFilters();
|
||||
}
|
||||
|
||||
}
|
||||
initializeFilters(){
|
||||
if(this.showEntities ){
|
||||
let selected = [];
|
||||
for(let value of this.resultTypes.values){
|
||||
if(value.selected){
|
||||
selected.push(value.id);
|
||||
}
|
||||
}
|
||||
this.resultTypes.countSelectedValues = selected.length;
|
||||
this.resultTypes.values = [];
|
||||
if(this.showPublications){
|
||||
this.resultTypes.values.push({name: "Publications" , id:"publications",selected:selected.indexOf("publications")!=-1, number:0});
|
||||
}
|
||||
if(this.showDatasets){
|
||||
this.resultTypes.values.push({name: "Research data" , id:"datasets",selected:selected.indexOf("datasets")!=-1, number:0});
|
||||
}
|
||||
if(this.showSoftware){
|
||||
this.resultTypes.values.push({name: "Software" , id:"software",selected:selected.indexOf("software")!=-1, number:0});
|
||||
}
|
||||
if(this.showOrp){
|
||||
this.resultTypes.values.push({name: "Other research products" , id:"other",selected:selected.indexOf("other")!=-1, number:0});
|
||||
}
|
||||
}
|
||||
this.typeChange.emit("filters_update");
|
||||
}
|
||||
public ngOnDestroy() {
|
||||
for (let sub of this.subs) {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes.isDisabled) {
|
||||
if (changes.isDisabled.currentValue == true) {
|
||||
this.control.disable();
|
||||
} else if (changes.isDisabled.currentValue == false) {
|
||||
this.control.enable();
|
||||
}
|
||||
}
|
||||
|
||||
if (changes.QFselected) {
|
||||
let value = this.control.getRawValue();
|
||||
if (changes.QFselected.currentValue != value.QFselected) {
|
||||
this.setFormValues();
|
||||
}
|
||||
|
||||
}
|
||||
if (changes.resultTypes) {
|
||||
this.setFormValues();
|
||||
}
|
||||
}
|
||||
|
||||
setFormValues() {
|
||||
this.control.setValue({
|
||||
publication: (this.resultTypes && this.resultTypes.publication)?this.resultTypes.publication:null,
|
||||
dataset: (this.resultTypes && this.resultTypes.dataset)?this.resultTypes.dataset:null,
|
||||
software: (this.resultTypes && this.resultTypes.software)?this.resultTypes.software:null,
|
||||
other: (this.resultTypes && this.resultTypes.other)?this.resultTypes.other:null,
|
||||
QFselected: this.QFselected
|
||||
});
|
||||
this.selectedTypesNum = (this.resultTypes && this.resultTypes.publication)?this.resultTypes.publication:0 + (this.resultTypes && this.resultTypes.dataset)?this.resultTypes.dataset:0+ (this.resultTypes && this.resultTypes.software)?this.resultTypes.software:0 + (this.resultTypes && this.resultTypes.other)?this.resultTypes.other:null;
|
||||
}
|
||||
|
||||
clearTypes(){
|
||||
this.resultTypes.publication = false;
|
||||
this.resultTypes.dataset = false;
|
||||
this.resultTypes.software = false;
|
||||
this.resultTypes.other = false;
|
||||
this.setFormValues();
|
||||
this.changed()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
|||
import {RouterModule} from '@angular/router';
|
||||
import {QuickSelectionsComponent} from "./quick-selections.component";
|
||||
import {MatCheckboxModule, MatSlideToggleModule} from "@angular/material";
|
||||
import {SearchFilterModule} from "./searchFilter.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule,
|
||||
RouterModule, MatCheckboxModule, ReactiveFormsModule, MatSlideToggleModule
|
||||
RouterModule, MatCheckboxModule, ReactiveFormsModule, MatSlideToggleModule, SearchFilterModule
|
||||
],
|
||||
declarations: [
|
||||
QuickSelectionsComponent,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div title = "{{value.name}}">
|
||||
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<ng-container *ngFor="let value of sort(filter.values)">
|
||||
<div *ngIf="filterKeywords(value.name)" title = "{{value.name}}"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -89,3 +89,13 @@
|
|||
</span>
|
||||
</label>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #input_label_wrapper let-filter="filter" let-value="value">
|
||||
<a *ngIf="actionRoute" class="filterLabel" [routerLink]="getRoute()"
|
||||
[queryParams]="getParams(filter,value)">
|
||||
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="!actionRoute">
|
||||
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ import {
|
|||
SimpleChanges
|
||||
} from '@angular/core';
|
||||
import { Filter, Value} from './searchHelperClasses.class';
|
||||
|
||||
import {ActivatedRoute, NavigationStart, Router} from "@angular/router";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import 'rxjs/add/operator/filter';
|
||||
@Component({
|
||||
selector: 'search-filter',
|
||||
templateUrl: 'searchFilter.component.html'
|
||||
|
|
@ -33,13 +35,18 @@ export class SearchFilterComponent implements OnInit, OnChanges{
|
|||
@Output() onFilterChange = new EventEmitter();
|
||||
keyword = "";
|
||||
sortBy = "name";
|
||||
|
||||
queryParams = {};
|
||||
@Input() actionRoute:boolean = false;
|
||||
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
|
||||
public isOpen:boolean=false;
|
||||
|
||||
constructor () {
|
||||
constructor (private _router: Router, private route: ActivatedRoute) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.queryParams = Object.assign({}, params);
|
||||
});
|
||||
this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
|
||||
if(this.filter.filterType == "radio"){
|
||||
this.filter.radioValue = "";
|
||||
|
|
@ -229,4 +236,32 @@ export class SearchFilterComponent implements OnInit, OnChanges{
|
|||
console.log(name);
|
||||
return name;
|
||||
}
|
||||
getRoute(){
|
||||
return properties.baseLink + this._router.url.split("?")[0];
|
||||
}
|
||||
getParams(filter:Filter, value:Value){
|
||||
let params = Object.assign({}, this.queryParams);
|
||||
let qf=false;
|
||||
if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){
|
||||
params['qf']="false";
|
||||
qf=true;
|
||||
}
|
||||
if(params[filter.filterId] && params[filter.filterId].indexOf(encodeURIComponent(value.id))==-1 && !qf) {
|
||||
//has other values of this filter --> add this value
|
||||
params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"';
|
||||
}else if(params[filter.filterId] && params[filter.filterId].indexOf(encodeURIComponent(value.id))!=-1) {
|
||||
// has this filter and the value -- > remove it
|
||||
|
||||
let values = params[filter.filterId].split(',');
|
||||
values.splice(values.indexOf('"' + encodeURIComponent(value.id)+'"'), 1);
|
||||
params[filter.filterId] =values.join(',');
|
||||
if(values.length == 0){
|
||||
delete params[filter.filterId];
|
||||
}
|
||||
} else if(!qf){
|
||||
//has no filter, no value --> add the value
|
||||
params[filter.filterId] = '"' + encodeURIComponent(value.id) + '"' ;
|
||||
}
|
||||
return params;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ import {SearchFilterComponent} from './searchFilter.component';
|
|||
import{SearchFilterModalComponent} from './searchFilterModal.component';
|
||||
import {ModalModule} from '../../utils/modal/modal.module';
|
||||
import {MatSelectModule} from "@angular/material";
|
||||
import {RouterModule} from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, ModalModule, MatSelectModule
|
||||
CommonModule, FormsModule, ModalModule, MatSelectModule, RouterModule
|
||||
],
|
||||
declarations: [
|
||||
SearchFilterComponent, SearchFilterModalComponent
|
||||
|
|
|
|||
|
|
@ -56,24 +56,52 @@
|
|||
<div class="uk-margin-small uk-margin-top uk-text-left">
|
||||
<ul class="uk-subnav uk-subnav-divider recentyears">
|
||||
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
|
||||
<li><a
|
||||
<li>
|
||||
<a *ngIf="actionRoute" [routerLink]="getRoute()"
|
||||
[queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
|
||||
currentYear
|
||||
&&stringToNum(filter.selectedFromValue) == currentYear))"
|
||||
[class]="'portal-link uk-text-center '
|
||||
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
|
||||
"
|
||||
(click)="yearChanged(0)"
|
||||
>This year</a></li>
|
||||
<li><a
|
||||
>This year</a>
|
||||
<a *ngIf="!actionRoute"
|
||||
[class]="'portal-link uk-text-center '
|
||||
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
|
||||
"
|
||||
(click)="yearChanged(0)"
|
||||
>This year</a>
|
||||
</li>
|
||||
<li><a *ngIf="actionRoute" [routerLink]="getRoute()"
|
||||
[queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
|
||||
&&stringToNum(filter.selectedFromValue) == currentYear-4))"
|
||||
[class]="'portal-link uk-text-center '
|
||||
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
|
||||
"
|
||||
(click)="yearChanged(4)"
|
||||
>Last 5 years</a></li>
|
||||
<li><a
|
||||
>Last 5 years</a>
|
||||
<a *ngIf="!actionRoute"
|
||||
[class]="'portal-link uk-text-center '
|
||||
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
|
||||
"
|
||||
(click)="yearChanged(4)"
|
||||
>Last 5 years</a>
|
||||
</li>
|
||||
<li><a *ngIf="actionRoute" [routerLink]="getRoute()"
|
||||
[queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))"
|
||||
[class]="'portal-link uk-text-center '
|
||||
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
|
||||
"
|
||||
(click)="yearChanged(9)"
|
||||
>Last 10 years</a></li>
|
||||
>Last 10 years</a>
|
||||
<a *ngIf="!actionRoute"
|
||||
[class]="'portal-link uk-text-center '
|
||||
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
|
||||
"
|
||||
(click)="yearChanged(9)"
|
||||
>Last 10 years</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- End of Natalia's suggestion -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { RangeFilter } from './rangeFilterHelperClasses.class';
|
||||
import { Dates } from "../string-utils.class";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {Filter, Value} from "../../searchPages/searchUtils/searchHelperClasses.class";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'range-filter',
|
||||
|
|
@ -20,10 +23,15 @@ export class RangeFilterComponent {
|
|||
public currentYear: number = Dates.currentYear;
|
||||
|
||||
@Output() onFilterChange = new EventEmitter();
|
||||
@Input() actionRoute:boolean = false;
|
||||
queryParams = {};
|
||||
constructor(private _router: Router, private route: ActivatedRoute) {}
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.queryParams = Object.assign({}, params);
|
||||
});
|
||||
}
|
||||
|
||||
public _formatTitle(title){
|
||||
return ((title.length > this._maxCharacters)?(title.substring(0,(this._maxCharacters - ('...').length))+"..."):title);
|
||||
|
|
@ -55,4 +63,19 @@ export class RangeFilterComponent {
|
|||
stringToNum(value: string): number {
|
||||
return +(value);
|
||||
}
|
||||
getFilterUrl(year:number, selected:boolean){
|
||||
return properties.baseLink + (this._router.url.indexOf('year=range') == -1 ? this._router.url: (this._router.url.split("year=range"+this.filter.selectedFromValue+':'+this.filter.selectedToValue).join(''))) + (selected ? '' : (this._router.url.indexOf('?')!=-1?'&':'?') +'year=range'+(this.currentYear - year) + ':'+ this.currentYear);
|
||||
}
|
||||
getRoute(){
|
||||
return properties.baseLink + this._router.url.split("?")[0];
|
||||
}
|
||||
getParams(year:number, selected:boolean){
|
||||
let params = Object.assign({}, this.queryParams);
|
||||
if(!selected){
|
||||
params['year'] = 'range'+(this.currentYear - year) + ':'+ this.currentYear;
|
||||
}else{
|
||||
delete params['year'];
|
||||
}
|
||||
return params;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue