[Library | explore-redesign]: Moved <quick-selections> to the left as filter and re-arranged the order of the filters.
1. searchFields.ts: a. Added in HIDDEN_FIELDS, "instancetypename" (refine filter for research products). b. In DEPENDENT_FIELDS, set ["instancetypename"]: "type" 2. quick-selections.component.ts: Added again (as in the past), @Input() vertical: boolean=false and show types using <search-filter> if vertical is true. 3. searchAll.component.html: Changed medium top and bottom margins to uk-margin-top uk-margin-bottom. 4. newSearchPage.component.ts: a. In method "getFields()", check for HIDDEN_FIELDS, also dependencies to resultTypes. b. Added method "getFilterById()". 5. newSearchPage.component.html: a. Moved <quick-selections> to the left as filter (removed "include" line). b. Added <ng-template #search_filter> and re-arranged the order of the filters
This commit is contained in:
parent
5e4477c946
commit
e07891e4fa
|
|
@ -27,7 +27,7 @@
|
|||
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
|
||||
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
|
||||
description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Research Graph. "></schema2jsonld>
|
||||
<div class="uk-container-large uk-container uk-margin-medium-top uk-margin-medium-bottom">
|
||||
<div class="uk-container-large uk-container uk-margin-top uk-margin-bottom">
|
||||
<div class="uk-width-1-1 uk-background-default uk-padding-small uk-padding-remove-bottom uk-padding-remove-horizontal"
|
||||
uk-slider="finite: true" uk-sticky="media: @m" [attr.offset]="offset">
|
||||
<div class="uk-position-relative">
|
||||
|
|
|
|||
|
|
@ -71,6 +71,15 @@
|
|||
</div>
|
||||
</h1>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #search_filter let-filter="filter">
|
||||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disabled"
|
||||
[filter]="filter" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)"
|
||||
[actionRoute]="true"></search-filter>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #filters_column>
|
||||
<div [class.filterLoading]="disabled">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
|
|
@ -91,24 +100,42 @@
|
|||
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
|
||||
</div>
|
||||
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
|
||||
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
|
||||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disabled"
|
||||
[filter]="filters[0]" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
|
||||
[actionRoute]="true"></search-filter>
|
||||
<li *ngIf="filters.length > 0 && getFilterById('resultbestaccessright') && getFilterById('resultbestaccessright').values.length >0">
|
||||
<ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('resultbestaccessright')}"></ng-container>
|
||||
</li>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
|
||||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disabled"
|
||||
[filter]="filter" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
|
||||
<li *ngIf="resultTypes && (filters.length > 0)">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
|
||||
[isDisabled]="disabled" [vertical]="true"
|
||||
[actionRoute]="true">
|
||||
</quick-selections>
|
||||
</li>
|
||||
<li *ngIf="filters.length > 0 && getFilterById('instancetypename') && getFilterById('instancetypename').values.length >0">
|
||||
<ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('instancetypename')}"></ng-container>
|
||||
</li>
|
||||
<ng-container *ngIf="entityType == 'result'">
|
||||
<li *ngFor="let filter of rangeFilters">
|
||||
<range-filter [isDisabled]="disabled" [filter]="filter"
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngFor="let filter of rangeFilters">
|
||||
<range-filter [isDisabled]="disabled" [filter]="filter"
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<li *ngIf="filter.values && filter.values.length > 0
|
||||
&& filter.filterId != 'resultbestaccessright' && filter.filterId != 'instancetypename' && filter.filterId != 'projectoamandatepublications'">
|
||||
<!-- <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"-->
|
||||
<!-- [isDisabled]="disabled"-->
|
||||
<!-- [filter]="filter" [showResultCount]=showResultCount-->
|
||||
<!-- (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>-->
|
||||
<ng-container *ngTemplateOutlet="search_filter; context: {filter: filter}"></ng-container>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="entityType == 'project'">
|
||||
<li *ngFor="let filter of rangeFilters">
|
||||
<range-filter [isDisabled]="disabled" [filter]="filter"
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngIf="filters.length > 0 && getFilterById('projectoamandatepublications') && getFilterById('projectoamandatepublications').values.length >0">
|
||||
<ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('projectoamandatepublications')}"></ng-container>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -199,11 +226,11 @@
|
|||
<div [class.uk-margin-top]="properties.adminToolsPortalType == 'eosc'" >
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
<div *ngIf="resultTypes" class="uk-flex uk-flex-center uk-padding-small uk-padding-remove-vertical uk-background-muted uk-border-rounded">
|
||||
<quick-selections class="uk-margin-bottom uk-margin-top" [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
|
||||
[isDisabled]="disabled" [actionRoute]="true">
|
||||
</quick-selections>
|
||||
</div>
|
||||
<!-- <div *ngIf="resultTypes" class="uk-flex uk-flex-center uk-padding-small uk-padding-remove-vertical uk-background-muted uk-border-rounded">-->
|
||||
<!-- <quick-selections class="uk-margin-bottom uk-margin-top" [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"-->
|
||||
<!-- [isDisabled]="disabled" [actionRoute]="true">-->
|
||||
<!-- </quick-selections>-->
|
||||
<!-- </div>-->
|
||||
<div [class]="showRefine? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
|
||||
<div *ngIf="showRefine && mobile">
|
||||
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true">
|
||||
|
|
|
|||
|
|
@ -430,7 +430,9 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
|
|||
var dependentTo = this.searchFieldsHelper.DEPENDENT_FIELDS[this.refineFields[i]];
|
||||
|
||||
//if filter is not marked as hidden OR it is hidden but it is dependent to a field that it IS selected
|
||||
if (this.searchFieldsHelper.HIDDEN_FIELDS.indexOf(this.refineFields[i]) == -1 || (selected_filters.indexOf(dependentTo) != -1) || (selected_filters.indexOf(this.refineFields[i]) != -1)) {
|
||||
if (this.searchFieldsHelper.HIDDEN_FIELDS.indexOf(this.refineFields[i]) == -1
|
||||
|| (selected_filters.indexOf(dependentTo) != -1) || (selected_filters.indexOf(this.refineFields[i]) != -1)
|
||||
|| (this.resultTypes && this.resultTypes.filterId == dependentTo && this.resultTypes.countSelectedValues > 0)) {
|
||||
fields.push(this.refineFields[i]);
|
||||
}
|
||||
}
|
||||
|
|
@ -1718,4 +1720,8 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
|
|||
}
|
||||
return totalPages;
|
||||
}
|
||||
}
|
||||
|
||||
public getFilterById(filterId: string): Filter {
|
||||
return this.filters.find(filter => filter.filterId == filterId);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,27 +11,35 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
|
|||
@Component({
|
||||
selector: 'quick-selections',
|
||||
template: `
|
||||
<div *ngIf="quickFilter" class="uk-margin-bottom">
|
||||
<mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
|
||||
<span class="uk-text-bold">{{quickFilter.value}}</span>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-middle uk-text-small uk-text-nowrap">
|
||||
<div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div>
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@m uk-child-width-1-2@s uk-child-width-1-1" uk-grid>
|
||||
<ng-container *ngFor="let value of resultTypes.values">
|
||||
<div>
|
||||
<input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
|
||||
<label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div *ngIf="!vertical && (resultTypes || quickFilter)">
|
||||
<div *ngIf="quickFilter" class="uk-margin-bottom">
|
||||
<mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
|
||||
<span class="uk-text-bold">{{quickFilter.value}}</span>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-middle uk-text-small uk-text-nowrap">
|
||||
<div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div>
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@m uk-child-width-1-2@s uk-child-width-1-1" uk-grid>
|
||||
<ng-container *ngFor="let value of resultTypes.values">
|
||||
<div>
|
||||
<input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
|
||||
<label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="vertical && (resultTypes || quickFilter)" [class.uk-disabled]="isDisabled">
|
||||
<search-filter [isDisabled]="isDisabled" [filter]="resultTypes" [showResultCount]='false'
|
||||
(onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class QuickSelectionsComponent {
|
||||
@Input() vertical: boolean=false;
|
||||
@Input() resultTypes:Filter;
|
||||
@Output() typeChange = new EventEmitter();
|
||||
@Input() isDisabled;
|
||||
|
|
|
|||
|
|
@ -694,7 +694,7 @@ export class SearchFields {
|
|||
|
||||
//add project field depending on funder
|
||||
public HIDDEN_FIELDS: string[] = ["fundinglevel0_id", "fundinglevel1_id", "fundinglevel2_id",
|
||||
"relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id", "relproject"];
|
||||
"relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id", "relproject", "instancetypename"];
|
||||
|
||||
public DEPENDENT_FIELDS: { [key: string]: string } = {
|
||||
["relproject"]: "relfunder",
|
||||
|
|
@ -703,7 +703,8 @@ export class SearchFields {
|
|||
["fundinglevel2_id"]: "fundinglevel1_id",
|
||||
["relfundinglevel0_id"]: "relfunder",
|
||||
["relfundinglevel1_id"]: "relfundinglevel0_id",
|
||||
["relfundinglevel2_id"]: "relfundinglevel1_id"
|
||||
["relfundinglevel2_id"]: "relfundinglevel1_id",
|
||||
["instancetypename"]: "type"
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue