[develop | DONE | ADDED] Add filters in dashboards, add fos lvl1 &lvl2 filters
This commit is contained in:
argirok
parent
b32ff455b2
commit
ebdff9eb44
|
|
@ -164,3 +164,85 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a *ngIf="stakeholder" href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
|
||||
class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset">
|
||||
<icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
|
||||
<span [class.uk-hidden]="countSelectedFilters() === 0"
|
||||
class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
|
||||
{{countSelectedFilters()}}
|
||||
</span>
|
||||
</a>
|
||||
<div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
|
||||
uk-offcanvas="flip:true; overlay: true">
|
||||
<div class="uk-offcanvas-bar">
|
||||
<div class="uk-float-right">
|
||||
<button class="uk-offcanvas-close uk-close uk-icon" type="button">
|
||||
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-bottom">
|
||||
<h4 class="uk-margin-remove-bottom">Filters</h4>
|
||||
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear All </a>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
|
||||
<div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
|
||||
<ul *ngIf="user" class="uk-list uk-list-xlarge uk-list-divider uk-margin-top">
|
||||
<li>
|
||||
<range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear"
|
||||
[mandatoryRange]="true"
|
||||
(onFilterChange)="filter()"></range-filter>
|
||||
</li>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<li *ngIf="filter.values.length >0">
|
||||
<a *ngIf="filter.filterId == 'fos'" class="uk-float-right" href="https://explore.openaire.eu/fields-of-science" target="_blank" uk-tooltip="title:More information about Fields of Science"><span uk-icon="info"></span></a>
|
||||
<search-filter [filter]="filter" [showResultCount]=false
|
||||
(onFilterChange)="filterChanged($event)"></search-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
<i *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-text-small uk-display-block">
|
||||
<sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #selected_filters_pills>
|
||||
<div class="uk-slider filters-slider" uk-slider="finite: true">
|
||||
<div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
|
||||
<div class="uk-slider-container" style="height: 40px">
|
||||
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
|
||||
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span
|
||||
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
|
||||
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
|
||||
[disabled]="loading">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
<ng-container *ngFor="let filter of filters">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let value of filter.values; let i = index;">
|
||||
<ng-container *ngIf="value.selected">
|
||||
<li>
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
|
||||
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
|
||||
class="uk-close uk-icon" [disabled]="loading">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
<slider-arrow type="previous"></slider-arrow>
|
||||
<slider-arrow type="next"></slider-arrow>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ import {IndicatorPath, Visibility} from "../../openaireLibrary/monitor/entities/
|
|||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
|
||||
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service";
|
||||
import {CustomFilterService} from "../customFilter.service";
|
||||
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
|
||||
import {Filter} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
|
||||
|
||||
@Component({
|
||||
selector: 'monitor',
|
||||
|
|
@ -28,6 +32,8 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
|
|||
protected cdr: ChangeDetectorRef,
|
||||
protected layoutService: LayoutService,
|
||||
protected statisticsService: StatisticsService,
|
||||
protected searchResearchResultsService: SearchResearchResultsService,
|
||||
protected customFilterService: CustomFilterService,
|
||||
private userManagementService: UserManagementService,
|
||||
private stakeholderService: StakeholderService) {
|
||||
super();
|
||||
|
|
@ -47,15 +53,32 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
|
|||
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
|
||||
if (stakeholder) {
|
||||
this.stakeholder = stakeholder;
|
||||
|
||||
this.subscriptions.push(this._route.queryParams.subscribe(queryParams => {
|
||||
this.handleQueryParams(queryParams, params);
|
||||
this.title = this.stakeholder.name;
|
||||
this.description = this.stakeholder.name;
|
||||
this.setMetadata();
|
||||
this.setView(params);
|
||||
this.subscriptions.push(this.customFilterService.getCustomFilterAsObservable().subscribe(filters => {
|
||||
if(filters) {
|
||||
let customFilterParams = "";
|
||||
for (let customFilter of filters) {
|
||||
if (customFilter.isHiddenFilter) {
|
||||
customFilterParams += "&fq=" + StringUtils.URIEncode(customFilter.queryFieldName + " exact " + StringUtils.quote((customFilter.valueId)));
|
||||
}
|
||||
}
|
||||
this.subscriptions.push(this.searchResearchResultsService.advancedSearchResults("publication", null, 1, 0, null, this.properties,
|
||||
"&refine=true&fields=fos&type=publications", ["fos"], customFilterParams).subscribe(res => {
|
||||
this.filters = this.postProcessingFosFilters(res[2]);
|
||||
this.title = this.stakeholder.name;
|
||||
this.description = this.stakeholder.name;
|
||||
this.setMetadata();
|
||||
this.setView(params);
|
||||
}));
|
||||
|
||||
}
|
||||
}));
|
||||
|
||||
}));
|
||||
} else {
|
||||
this.navigateToError();
|
||||
// } else {
|
||||
// this.navigateToError();
|
||||
}
|
||||
}));
|
||||
}));
|
||||
|
|
@ -65,4 +88,27 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
|
|||
hasPermission(visibility: Visibility): boolean {
|
||||
return true;
|
||||
}
|
||||
logIn() {
|
||||
this.userManagementService.login();
|
||||
}
|
||||
|
||||
postProcessingFosFilters(refineFilters:Filter[]){
|
||||
let filters:Filter[] = [];
|
||||
for(let filter of refineFilters){
|
||||
if(filter.filterId == "fos"){
|
||||
let fos: Filter ={...filter};
|
||||
fos.values = [];
|
||||
for(let value of filter.values){
|
||||
let code = value.id.split(" ")[0];
|
||||
if(code.length <= 4){
|
||||
fos.values.push(value);
|
||||
}
|
||||
}
|
||||
filters.push(fos);
|
||||
}else{
|
||||
filters.push(filter);
|
||||
}
|
||||
}
|
||||
return filters;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slid
|
|||
import {NumberRoundModule} from "../../openaireLibrary/utils/pipes/number-round.module";
|
||||
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
|
||||
import {ClickModule} from "../../openaireLibrary/utils/click/click.module";
|
||||
import {RangeFilterModule} from "../../openaireLibrary/utils/rangeFilter/rangeFilter.module";
|
||||
import {SearchFilterModule} from "../../openaireLibrary/searchPages/searchUtils/searchFilter.module";
|
||||
import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
|
||||
import {filters} from "../../openaireLibrary/utils/icons/icons";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, RouterModule.forChild([
|
||||
|
|
@ -14,10 +18,12 @@ import {ClickModule} from "../../openaireLibrary/utils/click/click.module";
|
|||
{path: ':topic/', component: MonitorComponent},
|
||||
{path: ':topic/:category', component: MonitorComponent},
|
||||
{path: ':topic/:category/:subCategory', component: MonitorComponent}
|
||||
]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule],
|
||||
]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule],
|
||||
declarations: [MonitorComponent],
|
||||
exports: [MonitorComponent]
|
||||
})
|
||||
export class MonitorModule {
|
||||
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([ filters]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,3 +65,10 @@
|
|||
svg .a {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
&.semiFiltered {
|
||||
&, & > * > .highcharts-series-group {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue