MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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:
Konstantina Galouni 2023-05-12 18:52:13 +03:00
parent 5e4477c946
commit e07891e4fa
5 changed files with 82 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searchPages/find/searchAll.component.html
View File

@ -27,7 +27,7 @@
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'" <schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name [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> 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" <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"> uk-slider="finite: true" uk-sticky="media: @m" [attr.offset]="offset">
<div class="uk-position-relative"> <div class="uk-position-relative">

67
searchPages/searchUtils/newSearchPage.component.html
View File

@ -71,6 +71,15 @@
</div> </div>
</h1> </h1>
</ng-template> </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> <ng-template #filters_column>
<div [class.filterLoading]="disabled"> <div [class.filterLoading]="disabled">
<div class="uk-flex uk-flex-middle"> <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> <span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
</div> </div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge"> <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'"> <li *ngIf="filters.length > 0 && getFilterById('resultbestaccessright') && getFilterById('resultbestaccessright').values.length >0">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" <ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('resultbestaccessright')}"></ng-container>
[isDisabled]="disabled"
[filter]="filters[0]" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
[actionRoute]="true"></search-filter>
</li> </li>
<ng-container *ngFor="let filter of filters "> <li *ngIf="resultTypes && (filters.length > 0)">
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'"> <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disabled" [vertical]="true"
[isDisabled]="disabled" [actionRoute]="true">
[filter]="filter" [showResultCount]=showResultCount </quick-selections>
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter> </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> </li>
</ng-container> </ng-container>
<li *ngFor="let filter of rangeFilters"> <ng-container *ngFor="let filter of filters ">
<range-filter [isDisabled]="disabled" [filter]="filter" <li *ngIf="filter.values && filter.values.length > 0
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter> && 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> </li>
</ul> </ul>
</div> </div>
@ -199,11 +226,11 @@
<div [class.uk-margin-top]="properties.adminToolsPortalType == 'eosc'" > <div [class.uk-margin-top]="properties.adminToolsPortalType == 'eosc'" >
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [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"> <!-- <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)" <!-- <quick-selections class="uk-margin-bottom uk-margin-top" [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"-->
[isDisabled]="disabled" [actionRoute]="true"> <!-- [isDisabled]="disabled" [actionRoute]="true">-->
</quick-selections> <!-- </quick-selections>-->
</div> <!-- </div>-->
<div [class]="showRefine? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'"> <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 *ngIf="showRefine && mobile">
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true"> <div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true">

10
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -430,7 +430,9 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
var dependentTo = this.searchFieldsHelper.DEPENDENT_FIELDS[this.refineFields[i]]; 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 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]); fields.push(this.refineFields[i]);
} }
} }
@ -1718,4 +1720,8 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
} }
return totalPages; return totalPages;
} }
}
public getFilterById(filterId: string): Filter {
return this.filters.find(filter => filter.filterId == filterId);
}
}

38
searchPages/searchUtils/quick-selections.component.ts
View File

@ -11,27 +11,35 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
@Component({ @Component({
selector: 'quick-selections', selector: 'quick-selections',
template: ` template: `
<div *ngIf="quickFilter" class="uk-margin-bottom"> <div *ngIf="!vertical && (resultTypes || quickFilter)">
<mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()"> <div *ngIf="quickFilter" class="uk-margin-bottom">
<span class="uk-text-bold">{{quickFilter.value}}</span> <mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
</mat-slide-toggle> <span class="uk-text-bold">{{quickFilter.value}}</span>
</div> </mat-slide-toggle>
<div class="uk-flex uk-flex-middle uk-text-small uk-text-nowrap"> </div>
<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-flex uk-flex-middle uk-text-small uk-text-nowrap">
<div class="uk-width-expand"> <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-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> <div class="uk-width-expand">
<ng-container *ngFor="let value of resultTypes.values"> <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>
<div> <ng-container *ngFor="let value of resultTypes.values">
<input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/> <div>
<label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label> <input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
</div> <label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
</ng-container> </div>
</ng-container>
</div>
</div> </div>
</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 { export class QuickSelectionsComponent {
@Input() vertical: boolean=false;
@Input() resultTypes:Filter; @Input() resultTypes:Filter;
@Output() typeChange = new EventEmitter(); @Output() typeChange = new EventEmitter();
@Input() isDisabled; @Input() isDisabled;

5
utils/properties/searchFields.ts
View File

@ -694,7 +694,7 @@ export class SearchFields {
//add project field depending on funder //add project field depending on funder
public HIDDEN_FIELDS: string[] = ["fundinglevel0_id", "fundinglevel1_id", "fundinglevel2_id", 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 } = { public DEPENDENT_FIELDS: { [key: string]: string } = {
["relproject"]: "relfunder", ["relproject"]: "relfunder",
@ -703,7 +703,8 @@ export class SearchFields {
["fundinglevel2_id"]: "fundinglevel1_id", ["fundinglevel2_id"]: "fundinglevel1_id",
["relfundinglevel0_id"]: "relfunder", ["relfundinglevel0_id"]: "relfunder",
["relfundinglevel1_id"]: "relfundinglevel0_id", ["relfundinglevel1_id"]: "relfundinglevel0_id",
["relfundinglevel2_id"]: "relfundinglevel1_id" ["relfundinglevel2_id"]: "relfundinglevel1_id",
["instancetypename"]: "type"
}; };