[develop-filters | DONE | ADDED]: Added structures for grouping and ordering search filters.

1. searchFields.base.ts: Added RESULT_FIELDS_ORDERED and PROJECT_FIELDS_ORDERED.
2. searchResearchResults.component.ts: Set and initialize orderedFields and orderedFilters and pass them to <new-search-page>.
3. newSearchPage.component.html: If there are orderedFilters, show filters from this structure.
This commit is contained in:
Konstantina Galouni 2023-12-14 18:23:28 +02:00
parent d9c7d35e57
commit afcbb07a24
3 changed files with 130 additions and 89 deletions

View File

@ -38,6 +38,7 @@ import {RefineFieldResultsService} from "../services/refineFieldResults.service"
[searchForm]="searchForm" [searchForm]="searchForm"
[filters]="filters" [quickFilter]="quickFilter" [filters]="filters" [quickFilter]="quickFilter"
[rangeFilters]="rangeFilters" [rangeFields]="rangeFields" [rangeFilters]="rangeFilters" [rangeFields]="rangeFields"
[orderedFilters]="orderedFilters"
[simpleView]="simpleView" formPlaceholderText="Search by title, author, abstract, DOI, orcid..." [simpleView]="simpleView" formPlaceholderText="Search by title, author, abstract, DOI, orcid..."
[includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter" [showBreadcrumb]="showBreadcrumb" [includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter" [showBreadcrumb]="showBreadcrumb"
[showSwitchSearchLink]="showSwitchSearchLink" [showSwitchSearchLink]="showSwitchSearchLink"
@ -73,7 +74,7 @@ export class SearchResearchResultsComponent {
public staticFields: string[] = this.searchFields.RESULT_STATIC_FIELDS; public staticFields: string[] = this.searchFields.RESULT_STATIC_FIELDS;
public staticFieldValues = this.searchFields.RESULT_STATIC_FIELD_VALUES; public staticFieldValues = this.searchFields.RESULT_STATIC_FIELD_VALUES;
public staticFilters = RefineResultsUtils.parse(this.staticFieldValues, this.staticFields, this.resultType, "search", true); public staticFilters = RefineResultsUtils.parse(this.staticFieldValues, this.staticFields, this.resultType, "search", true);
// public orderedFilters; public orderedFilters;
public resourcesQuery = "((oaftype exact result) and (resulttypeid exact " + this.resultType + "))"; public resourcesQuery = "((oaftype exact result) and (resulttypeid exact " + this.resultType + "))";
public csvParams: string; public csvParams: string;
@ -87,6 +88,7 @@ export class SearchResearchResultsComponent {
properties: EnvProperties = properties; properties: EnvProperties = properties;
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
public refineFields: string[] = this.searchFields.RESULT_REFINE_FIELDS; public refineFields: string[] = this.searchFields.RESULT_REFINE_FIELDS;
public orderedFields = this.searchFields.RESULT_FIELDS_ORDERED;
@ViewChild(NewSearchPageComponent, { static: true }) searchPage: NewSearchPageComponent; @ViewChild(NewSearchPageComponent, { static: true }) searchPage: NewSearchPageComponent;
@Input() simpleView: boolean = true; @Input() simpleView: boolean = true;
quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = { quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = {
@ -311,43 +313,43 @@ export class SearchResearchResultsComponent {
this.rangeFilters = this.searchPage.prepareRangeFiltersToShow(); this.rangeFilters = this.searchPage.prepareRangeFiltersToShow();
this.staticFilters = this.searchPage.prepareStaticFiltersToShow(); this.staticFilters = this.searchPage.prepareStaticFiltersToShow();
// if(this.orderedFields) { if(this.orderedFields) {
// this.orderedFilters = []; this.orderedFilters = [];
// for(let group of this.orderedFields) { for(let group of this.orderedFields) {
// if (group.type == "refine") { if (group.type == "refine") {
// let groupedFilters = {title: group.title, values: []}; let groupedFilters = {title: group.title, values: []};
// for (let field of group.values) { for (let field of group.values) {
// let index = this.filters.findIndex(filter => filter.filterId == field); let index = this.filters.findIndex(filter => filter.filterId == field);
// if (index > -1) { if (index > -1) {
// groupedFilters.values.push(this.filters[index]); groupedFilters.values.push(this.filters[index]);
// } }
// } }
// if (groupedFilters.values.length > 0) { if (groupedFilters.values.length > 0) {
// this.orderedFilters.push(groupedFilters); this.orderedFilters.push(groupedFilters);
// } }
// } else if (group.type == "range") { } else if (group.type == "range") {
// let groupedFilters = {title: group.title, values: []}; let groupedFilters = {title: group.title, values: []};
// let from = group.values[0]; let from = group.values[0];
// let to = group.values[1]; let to = group.values[1];
// let index = this.rangeFilters.findIndex(filter => filter.originalFilterIdFrom == from && filter.originalFilterIdTo == to); let index = this.rangeFilters.findIndex(filter => filter.originalFilterIdFrom == from && filter.originalFilterIdTo == to);
// if (index > -1) { if (index > -1) {
// groupedFilters.values.push(this.rangeFilters[index]); groupedFilters.values.push(this.rangeFilters[index]);
// this.orderedFilters.push(groupedFilters); this.orderedFilters.push(groupedFilters);
// } }
// } else if (group.type == "static") { } else if (group.type == "static") {
// let groupedFilters = {title: group.title, values: []}; let groupedFilters = {title: group.title, values: []};
// for (let field of group.values) { for (let field of group.values) {
// let index = this.staticFilters.findIndex(filter => filter.filterId == field); let index = this.staticFilters.findIndex(filter => filter.filterId == field);
// if (index > -1) { if (index > -1) {
// groupedFilters.values.push(this.staticFilters[index]); groupedFilters.values.push(this.staticFilters[index]);
// } }
// } }
// if (groupedFilters.values.length > 0) { if (groupedFilters.values.length > 0) {
// this.orderedFilters.push(groupedFilters); this.orderedFilters.push(groupedFilters);
// } }
// } }
// } }
// } }
} }
this.searchUtils.refineStatus = this.errorCodes.DONE; this.searchUtils.refineStatus = this.errorCodes.DONE;
@ -528,7 +530,7 @@ export class SearchResearchResultsComponent {
filter.countSelectedValues = oldFilter.countSelectedValues; filter.countSelectedValues = oldFilter.countSelectedValues;
filter.radioValue = oldFilter.radioValue; filter.radioValue = oldFilter.radioValue;
this.filters[index] = filter; this.filters[index] = filter;
// this.updateOrderedFilter(filter); this.updateOrderedFilter(filter);
this.cdr.detectChanges(); this.cdr.detectChanges();
}, },
@ -536,25 +538,25 @@ export class SearchResearchResultsComponent {
let index: number = this.filters.findIndex((fltr: Filter) => fltr.filterId == oldFilter.filterId); let index: number = this.filters.findIndex((fltr: Filter) => fltr.filterId == oldFilter.filterId);
oldFilter.countAllValues = 0; oldFilter.countAllValues = 0;
this.filters[index] = oldFilter; this.filters[index] = oldFilter;
// this.updateOrderedFilter(oldFilter); this.updateOrderedFilter(oldFilter);
this.cdr.detectChanges(); this.cdr.detectChanges();
} }
) )
} }
// public updateOrderedFilter(filter: Filter) { public updateOrderedFilter(filter: Filter) {
// if(this.orderedFilters) { if(this.orderedFilters) {
// let groupIndex = 0; let groupIndex = 0;
// let index; let index;
// for(let group of this.orderedFilters) { for(let group of this.orderedFilters) {
// index = group.values.findIndex((fltr: Filter) => fltr.filterId == filter.filterId); index = group.values.findIndex((fltr: Filter) => fltr.filterId == filter.filterId);
// if(index != -1) { if(index != -1) {
// break; break;
// } }
// groupIndex++; groupIndex++;
// } }
// this.orderedFilters[groupIndex].values[index] = filter; this.orderedFilters[groupIndex].values[index] = filter;
// } }
// } }
} }

View File

@ -123,9 +123,29 @@
<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 && getFilterById('resultbestaccessright') && getFilterById('resultbestaccessright').values.length >0"> <ng-container *ngIf="orderedFilters && orderedFilters.length > 0">
<ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('resultbestaccessright')}"></ng-container> <ng-container *ngFor="let group of orderedFilters">
<h5 *ngIf="group.title" class="uk-h5">{{group.title}}</h5>
<ng-container *ngFor="let filter of group.values">
<li *ngIf="filter.originalFilterIdFrom && filter.originalFilterIdTo; else refineBlock">
<range-filter [isDisabled]="disabled" [filter]="filter"
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
</li> </li>
<ng-template #refineBlock>
<li *ngIf="filter.values && filter.values.length > 0">
<ng-container *ngTemplateOutlet="search_filter; context: {filter: filter, showResultCount: filter.type!='static'}"></ng-container>
</li>
</ng-template>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="!orderedFilters || orderedFilters.length == 0">
<ng-container *ngFor="let filter of staticFilters ">
<li *ngIf="filter.values && filter.values.length > 0">
<ng-container *ngTemplateOutlet="search_filter; context: {filter: filter, showResultCount: false}"></ng-container>
</li>
</ng-container>
<li *ngIf="resultTypes && (filters.length > 0)"> <li *ngIf="resultTypes && (filters.length > 0)">
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)" <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
[isDisabled]="disabled" [vertical]="true" [isDisabled]="disabled" [vertical]="true"
@ -133,7 +153,7 @@
</quick-selections> </quick-selections>
</li> </li>
<li *ngIf="filters.length > 0 && getFilterById('instancetypename') && getFilterById('instancetypename').values.length >0"> <li *ngIf="filters.length > 0 && getFilterById('instancetypename') && getFilterById('instancetypename').values.length >0">
<ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('instancetypename')}"></ng-container> <ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('instancetypename'), showResultCount: showResultCount}"></ng-container>
</li> </li>
<ng-container *ngIf="entityType == 'result'"> <ng-container *ngIf="entityType == 'result'">
<li *ngFor="let filter of rangeFilters"> <li *ngFor="let filter of rangeFilters">
@ -144,11 +164,11 @@
<ng-container *ngFor="let filter of filters "> <ng-container *ngFor="let filter of filters ">
<li *ngIf="filter.values && filter.values.length > 0 <li *ngIf="filter.values && filter.values.length > 0
&& filter.filterId != 'resultbestaccessright' && filter.filterId != 'instancetypename' && filter.filterId != 'projectoamandatepublications'"> && filter.filterId != 'resultbestaccessright' && filter.filterId != 'instancetypename' && filter.filterId != 'projectoamandatepublications'">
<!-- <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"--> <!-- <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"-->
<!-- [isDisabled]="disabled"--> <!-- [isDisabled]="disabled"-->
<!-- [filter]="filter" [showResultCount]=showResultCount--> <!-- [filter]="filter" [showResultCount]=showResultCount-->
<!-- (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>--> <!-- (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>-->
<ng-container *ngTemplateOutlet="search_filter; context: {filter: filter}"></ng-container> <ng-container *ngTemplateOutlet="search_filter; context: {filter: filter, showResultCount: showResultCount}"></ng-container>
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="entityType == 'project'"> <ng-container *ngIf="entityType == 'project'">
@ -158,8 +178,9 @@
</li> </li>
</ng-container> </ng-container>
<li *ngIf="filters.length > 0 && getFilterById('projectoamandatepublications') && getFilterById('projectoamandatepublications').values.length >0"> <li *ngIf="filters.length > 0 && getFilterById('projectoamandatepublications') && getFilterById('projectoamandatepublications').values.length >0">
<ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('projectoamandatepublications')}"></ng-container> <ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('projectoamandatepublications'), showResultCount: showResultCount}"></ng-container>
</li> </li>
</ng-container>
</ul> </ul>
</div> </div>
</ng-template> </ng-template>

View File

@ -20,6 +20,17 @@ export class SearchFieldsBase {
"relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id", "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
"relproject", "sdg", "country", "resultlanguagename", "resulthostingdatasource", "community"]; "relproject", "sdg", "country", "resultlanguagename", "resulthostingdatasource", "community"];
RESULT_FIELDS_ORDERED = [
{type: "static", title: "", values: ["resultbestaccessright", "type"]},
{type: "refine", title: "", values: ["instancetypename"]},
{type: "range", title: "", values: ["resultacceptanceyear", "resultacceptanceyear"]},
{type: "refine", title: "", values: [
properties.environment!='production'?"foslabel":'fos', "relfunder",
"relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
"relproject", "sdg", "country", "resultlanguagename", "resulthostingdatasource", "community"
]}
];
public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "eoscifguidelines", "resultpublisher", public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "eoscifguidelines", "resultpublisher",
"resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance", "resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance",
"relfunder", "relfunder",
@ -307,6 +318,13 @@ export class SearchFieldsBase {
]; ];
public PROJECT_REFINE_FIELDS: string[] = ["funder", "fundinglevel0_id", "fundinglevel1_id", public PROJECT_REFINE_FIELDS: string[] = ["funder", "fundinglevel0_id", "fundinglevel1_id",
"fundinglevel2_id", "projectoamandatepublications", "projectstartyear", "projectendyear"]; "fundinglevel2_id", "projectoamandatepublications", "projectstartyear", "projectendyear"];
public PROJECT_FIELDS_ORDERED = [
{type: "refine", title: "", values: ["funder", "fundinglevel0_id", "fundinglevel1_id", "fundinglevel2_id"]},
{type: "range", title: "", values: ["projectstartyear", "projectendyear"]},
{type: "refine", title: "", values: ["projectoamandatepublications"]}
];
public PROJECT_ADVANCED_FIELDS: string[] = ["q", "projectacronym", "projecttitle", "projectkeywords", public PROJECT_ADVANCED_FIELDS: string[] = ["q", "projectacronym", "projecttitle", "projectkeywords",
"funder", "fundinglevel0_id", "fundinglevel1_id", "fundinglevel2_id", "funder", "fundinglevel0_id", "fundinglevel1_id", "fundinglevel2_id",
"projectstartdate", "projectenddate", "projectstartdate", "projectenddate",