Add advanced-search-input with entities selections in all search-pages

This commit is contained in:
Konstantinos Triantafyllou 2022-04-16 00:49:35 +03:00
parent d17f9b4d5c
commit cee1d9f876
14 changed files with 247 additions and 368 deletions

View File

@ -1,72 +1,67 @@
<div uk-height-viewport="offset-top: true;offset-bottom: 60" style="box-sizing: border-box; "
class="image-front-topbar uk-background-norepeat uk-background-cover uk-background-bottom-center uk-section uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed generalSearchForm">
<div class="uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom
uk-flex uk-flex-middle uk-background-fixed uk-section uk-section-small" [ngClass]="searchForm.class">
<div class="uk-width-1-1">
<div class="uk-position-relative uk-flex uk-flex-center">
<div id="searchForm" class=" uk-container uk-grid uk-flex uk-flex-center uk-flex-middle">
<div *ngIf="breadcrumbs.length > 0" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark">
<div class="uk-padding-small uk-padding-remove-bottom">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative">
<div class="uk-container uk-container-large uk-section uk-section-small uk-margin-bottom" id="searchForm">
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid>
<div id="searchImage"></div>
<advanced-search-form
entityType="all"
(queryChange)="keywordChanged($event)"
[isDisabled]="disableForms"
[simpleView]="true" [formPlaceholderText]="formPlaceholderText"
[selectedFields]="selectedFields" [showSwitchSearchLink]="true"
[selectedFields]="selectedFields" [showSwitchSearchLink]="true" [dark]="searchForm.dark"
[fieldIdsMap]="fieldIdsMap" [fieldIds]="fieldIds" [entitiesSelection]="true" [customFilter]="customFilter"
>
</advanced-search-form>
</div>
</div>
</div>
</div>
</div>
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
description="Search for research outcomes (publications, datasets, software, other research products), projects, organizations, content providers in the OpenAIRE Research Graph. "></schema2jsonld>
<div class="uk-container-large uk-container">
<ul class=" portalTabs uk-tab uk-width-1-1 " uk-tab="animation: uk-animation-fade">
<div class="uk-container-large uk-container uk-margin-large-top uk-flex uk-flex-center">
<ul class="uk-tab" uk-tab="animation: uk-animation-fade">
<li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')"
[class]="activeEntity == 'result'?'uk-active':''">
<a>
Research outcomes
<a class="uk-text-uppercase">
{{resultsName}}
<span *ngIf=" fetchPublications.searchUtils.totalResults!=null">
({{fetchPublications.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showProjects" (click)="entityChanged('projects')" [class]="activeEntity == 'projects'?'uk-active':''">
<a>
Projects
<a class="uk-text-uppercase">
{{projectName}}
<span *ngIf="fetchProjects.searchUtils.totalResults!=null">
({{fetchProjects.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showDataProviders" (click)="entityChanged('datasources')"
[class]="activeEntity == 'datasources'?'uk-active':''">
<a>
Content Providers
<a class="uk-text-uppercase">
{{dataSourcesName}}
<span *ngIf="fetchDataproviders.searchUtils.totalResults!=null">
({{fetchDataproviders.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showOrganizations" (click)="entityChanged('organizations')"
[class]="activeEntity == 'organizations'?'uk-active':''">
<a>
Organizations
<a class="uk-text-uppercase">
{{organizationsName}}
<span *ngIf="fetchOrganizations.searchUtils.totalResults!=null">
({{fetchOrganizations.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
<!-- <quick-selections *ngIf="activeEntity == 'result' && quickFilter" [resultTypes]="resultTypes"
(typeChange)="quickSelectionsChanged()" [isDisabled]="disableForms"
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
[properties]="properties">
</quick-selections>-->
</div>
<search-research-results *ngIf="activeEntity == 'result'" resultType="result" [includeOnlyResultsAndFilter]="true"

View File

@ -15,7 +15,7 @@ import {SearchDataprovidersService} from '../../services/searchDataproviders.ser
import {SearchProjectsService} from '../../services/searchProjects.service';
import {SearchOrganizationsService} from '../../services/searchOrganizations.service';
import {SearchFields} from '../../utils/properties/searchFields';
import {OpenaireEntities, SearchFields} from '../../utils/properties/searchFields';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import {RouterHelper} from '../../utils/routerHelper.class';
import {RefineFieldResultsService} from '../../services/refineFieldResults.service';
@ -31,26 +31,16 @@ import {SearchResearchResultsComponent} from "../searchResearchResults.component
import {SearchProjectsComponent} from "../searchProjects.component";
import {SearchOrganizationsComponent} from "../searchOrganizations.component";
import {SearchDataProvidersComponent} from "../searchDataProviders.component";
import {NewSearchPageComponent} from "../searchUtils/newSearchPage.component";
import {NewSearchPageComponent, SearchForm} from "../searchUtils/newSearchPage.component";
import {properties} from "../../../../environments/environment";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
@Component({
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.Emulated,
selector: 'search-all',
templateUrl: 'searchAll.component.html'
})
export class SearchAllComponent {
// public reloadResults: boolean;
// public reloadPublications: boolean;
// public reloadDatasets: boolean;
// public reloadSoftware: boolean;
// public reloadOrps: boolean;
// public reloadProjects: boolean;
// public reloadDataproviders: boolean;
// public reloadOrganizations: boolean;
reload:{result:boolean, projects:boolean, datasources: boolean, organizations:boolean} = {result:true, projects:true, datasources: true, organizations:true};
public pageTitle = "Search in OpenAIRE"
public keyword: string = "";
public publications: string[];
@ -60,13 +50,11 @@ export class SearchAllComponent {
public projectsTab: string[];
public dataproviders: string[];
public organizations: string[];
public activeEntity = null;
public linkToSearchPublications = "";
public linkToSearchProjects = "";
public linkToSearchDataproviders = "";
public linkToSearchOrganizations = "";
public fetchPublications: FetchResearchResults;
public fetchDataproviders: FetchDataproviders;
public fetchProjects: FetchProjects;
@ -74,11 +62,13 @@ export class SearchAllComponent {
public fetchSoftware: FetchResearchResults;
public fetchOrps: FetchResearchResults;
public fetchOrganizations: FetchOrganizations;
public searchFields: SearchFields = new SearchFields();
public errorCodes: ErrorCodes = new ErrorCodes();
public routerHelper: RouterHelper = new RouterHelper();
public resultsName = OpenaireEntities.RESULTS;
public projectName = OpenaireEntities.PROJECTS;
public organizationsName = OpenaireEntities.ORGANIZATIONS;
public dataSourcesName = OpenaireEntities.DATASOURCES;
showPublications: boolean = false;
showDatasets: boolean = false;
showSoftware: boolean = false;
@ -93,7 +83,9 @@ export class SearchAllComponent {
@Input() customFilter: SearchCustomFilter = null;
@Input() piwikSiteId = null;
@Input() formPlaceholderText = "Search for research outcomes, projects, content providers & organizations in OpenAIRE";
@Input() searchForm: SearchForm = {class: 'search-form', dark: true}
@Input() breadcrumbs: Breadcrumb[] = [];
subs: Subscription[] = [];
quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = {

View File

@ -21,13 +21,14 @@ import {SearchProjectsModule} from "../searchProjects.module";
import {SearchOrganizationsModule} from "../searchOrganizations.module";
import {SearchDataProvidersModule} from "../searchDataProviders.module";
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
DataProvidersServiceModule, ProjectsServiceModule,
SearchResearchResultsServiceModule, OrganizationsServiceModule,
SearchResultsModule, PiwikServiceModule, Schema2jsonldModule, SEOServiceModule, AdvancedSearchFormModule, SearchResearchResultsModule, SearchProjectsModule, SearchOrganizationsModule, SearchDataProvidersModule
SearchResultsModule, PiwikServiceModule, Schema2jsonldModule, SEOServiceModule, AdvancedSearchFormModule, SearchResearchResultsModule, SearchProjectsModule, SearchOrganizationsModule, SearchDataProvidersModule, BreadcrumbsModule
],
declarations: [
SearchAllComponent

View File

@ -132,47 +132,46 @@
</div>
</form>
<div *ngIf="simpleView">
<form>
<div class="uk-margin-small-bottom uk-flex uk-flex-right" [class.uk-light]="dark" *ngIf="showSwitchSearchLink">
<a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
[routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a>
<a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
[routerLink]="selectedEntityAdvancedUrl"
[queryParams]="{q:this.selectedFields[0].value,op:'and'}"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a>
<ng-container *ngIf="this.entityType=='all'">
<a>Advanced Search</a>
<div uk-dropdown class="uk-dropdown">
<ul class="uk-list uk-margin-remove-bottom">
<li><a
[routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="advancedSearchLinkParameters"
>Research
outcomes</a></li>
<li><a
[routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="advancedSearchLinkParameters" >
Projects</a></li>
<li><a
[routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="advancedSearchLinkParameters">
Content providers</a></li>
<li><a
[routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="advancedSearchLinkParameters">
Organizations</a></li>
</ul>
</div>
</ng-container>
</div>
<div class="uk-flex uk-flex-center">
<div *ngIf="entitiesSelection">
<entities-selection [simpleView]="true" [currentEntity]="entityType"
[properties]="properties"
(selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
<div class="uk-margin-small-bottom uk-flex uk-flex-right" [class.uk-light]="dark" *ngIf="showSwitchSearchLink">
<a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
[routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a>
<a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
[routerLink]="selectedEntityAdvancedUrl"
[queryParams]="{q:this.selectedFields[0].value,op:'and'}"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a>
<ng-container *ngIf="this.entityType=='all'">
<a>Advanced Search</a>
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; offset: 5; delay-hide: 0;">
<ul class="uk-nav uk-dropdown-nav">
<li>
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="advancedSearchLinkParameters">Research outcomes</a>
</li>
<li>
<a [routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="advancedSearchLinkParameters" >Projects</a>
</li>
<li>
<a [routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="advancedSearchLinkParameters">Content providers</a>
</li>
<li>
<a [routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="advancedSearchLinkParameters">Organizations</a>
</li>
</ul>
</div>
<div *ngIf="selectedFields[0] && entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" class="uk-width-xlarge@l uk-width-large"></div>
</div>
</form>
</ng-container>
</div>
<div *ngIf="entitiesSelection" class="uk-flex uk-flex-center uk-width-xlarge@l uk-width-large uk-child-width-1-1">
<advanced-search-input [class.uk-hidden]="entities.disableSelect" [dark]="dark" [disabled]="isDisabled" (searchEmitter)="simpleKeywordChanged()">
<entities-selection #entities [simpleView]="true" [currentEntity]="entityType"
(selectionChange)="simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
<div input placeholder="Scholary works" [hint]="formPlaceholderText" [(value)]="selectedFields[0].value"></div>
</advanced-search-input>
<div *ngIf="selectedFields[0] && entities.disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div>
<div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div>
</div>
</div>

View File

@ -13,11 +13,13 @@ import {EntitiesSelectionModule} from "./entitiesSelection.module";
import { MatSelectModule } from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module";
import {InputModule} from "../../sharedComponents/input/input.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule, AdvancedSearchInputModule, InputModule
],
declarations: [
AdvancedSearchFormComponent,

View File

@ -1,206 +1,119 @@
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {FormBuilder} from "@angular/forms";
import {EnvProperties} from "../../utils/properties/env-properties";
import {SearchCustomFilter} from "./searchUtils.class";
import {ConfigurationService} from "../../utils/configuration/configuration.service";
import {Router} from "@angular/router";
import { MatSelect } from "@angular/material/select";
import {Subscription} from "rxjs";
import {properties} from '../../../../environments/environment';
import {InputComponent, Option} from "../../sharedComponents/input/input.component";
import {OpenaireEntities} from "../../utils/properties/searchFields";
@Component({
selector: 'entities-selection',
template: `
<span *ngIf="!disableSelect && show>1 && selectedEntity"
class=" entitiesSelection portal-box uk-text-small clickable" style=""
(click)="open()">
<mat-select *ngIf="!onlyresults" [(value)]="selectedEntity"
(valueChange)="entityChanged()" [disableOptionCentering]="true" [panelClass]="matPanelClass">
<mat-option *ngIf="simpleView && showAll"
value="all">All content
</mat-option>
<mat-option *ngIf="showResearchOutcomes" value="result">Research outcomes</mat-option>
<mat-option *ngIf="showProjects" value="project">Projects</mat-option>
<mat-option *ngIf="showDataProviders" value="dataprovider">Content providers</mat-option>
<mat-option *ngIf="showOrganizations" value="organization">Organizations</mat-option>
</mat-select>
<mat-select *ngIf="onlyresults" [(value)]="selectedEntity"
(valueChange)="entityChanged()" [disableOptionCentering]="true" [panelClass]="matPanelClass">
<mat-option
*ngIf="simpleView && showAll"
value="all">All research outcomes
</mat-option>
<mat-option *ngIf="showPublications" value="publications">Publications</mat-option>
<mat-option *ngIf="showDatasets" value="datasets">Datasets</mat-option>
<mat-option *ngIf="showSoftware" value="software">Software</mat-option>
<mat-option *ngIf="showOther" value="other">Other Research products</mat-option>
</mat-select>
</span>
<span *ngIf="currentEntity && disableSelect" class="entitiesSelection portal-box uk-text-small " style="">
<div>
<span *ngIf="currentEntity=='all'">{{onlyresults ? 'All research outcomes' : 'All content'}}</span>
<span *ngIf="currentEntity=='result'">Research outcomes</span>
<span *ngIf="currentEntity=='project'">Projects</span>
<span *ngIf="currentEntity=='dataprovider'">Content providers</span>
<span *ngIf="currentEntity=='organization'">Organizations</span>
<span *ngIf="currentEntity=='publications'">Publications</span>
<span *ngIf="currentEntity=='datasets'">Datasets</span>
<span *ngIf="currentEntity=='software'">Software</span>
<span *ngIf="currentEntity=='other'">Other Research products</span>
</div>
</span>
<!--<span *ngIf="onlyresults && !disableSelect">
<select *ngIf="show" [(ngModel)]="selectedEntity" class="uk-select uk-width-auto portal-box uk-text-small" (ngModelChange)="entityChanged()" >
<option
*ngIf="simpleView && (show)>1 && !(this.customFilter && this.customFilter.queryFieldName=='communityId' )"
value="all">All research outcomes
</option>
<option *ngIf="showPublications" value="publications">Publications</option>
<option *ngIf="showDatasets" value="datasets">Datasets</option>
<option *ngIf="showSoftware" value="software">Software</option>
<option *ngIf="showOther" value="other">Other Research products</option>
</select>
</span>-->
<ng-container *ngIf="simpleView">
<div #input input placeholder="Type" hint="What type of content?" inputClass="advanced-search"
[options]="entities" [(value)]="selectedEntity" (valueChange)="entityChanged()" type="select"></div>
</ng-container>
`
})
export class EntitiesSelectionComponent {
showResearchOutcomes: boolean = false;
showPublications: boolean = false;
showDatasets: boolean = false;
showSoftware: boolean = false;
showOther: boolean = false;
showProjects: boolean = false;
showDataProviders: boolean = false;
showOrganizations: boolean = false;
showAll: boolean = true;
@Input() allEnable = false;
@Input() properties: EnvProperties = properties;
@Input() onlyresults: boolean = false;
@Input() customFilter: SearchCustomFilter = null;
@Input() @Output() selectedEntity = "Research Outcomes";
@Input() currentEntity = "Research Outcomes";
@Input() selectedEntity = "result";
@Input() currentEntity = "result";
@Input() simpleView: boolean = true;
@Input() onChangeNavigate: boolean = true;
@Output() selectionChange = new EventEmitter();
@Input() onlyresults: boolean = false;
@Input() matPanelClass = "matSelectionPanel";
@Input() disableSelect: boolean = false;
show = 0;
@ViewChild(MatSelect) matSelect: MatSelect;
subs: Subscription[] = [];
constructor(private _fb: FormBuilder, private config: ConfigurationService, private router: Router) {}
@Output() selectionChange = new EventEmitter();
@ViewChild('input') input: InputComponent;
public entities: Option[] = [];
public properties: EnvProperties = properties;
private subscriptions: Subscription[] = [];
constructor(private config: ConfigurationService, private router: Router) {
}
ngOnInit() {
this.show = 0;
if(!this.allEnable) {
if((this.customFilter && this.customFilter.queryFieldName == "communityId") || (this.properties.adminToolsCommunity !== "monitor")) {
//this.config.getCommunityInformation(this.properties, (this.customFilter && this.customFilter.queryFieldName == "communityId") ? this.customFilter.valueId : this.properties.adminToolsCommunity).subscribe(data => {
this.subs.push(this.config.communityInformationState.subscribe(data => {
if(data) {
let showEntity = {};
let showPage = {};
if(data['entities']) {
for (let i = 0; i < data['entities'].length; i++) {
showEntity["" + data['entities'][i]["pid"] + ""] = data['entities'][i]["isEnabled"];
}
}
if(data['pages']) {
for (let i = 0; i < data['pages'].length; i++) {
showPage["" + data['pages'][i]["route"] + ""] = data['pages'][i]["isEnabled"];
}
}
this.showResearchOutcomes = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && (showEntity["publication"] || showEntity["dataset"] || showEntity["software"] || showEntity["orp"]);
this.showPublications = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["publication"];
this.showDatasets = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["dataset"];
this.showSoftware = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["software"];
this.showOther = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["orp"];
this.showProjects = showPage[this.simpleView?this.properties.searchLinkToProjects:this.properties.searchLinkToAdvancedProjects] && showEntity["project"];
this.showOrganizations = showPage[this.simpleView?this.properties.searchLinkToOrganizations:this.properties.searchLinkToAdvancedOrganizations] && showEntity["organization"];
this.showDataProviders = showPage[this.simpleView?this.properties.searchLinkToDataProviders:this.properties.searchLinkToAdvancedDataProviders] && showEntity["datasource"];
if (this.customFilter && this.customFilter.queryFieldName == "communityId" || this.properties.adminToolsCommunity === "connect") {
//for community pages: no organization in simple search, only results in advanced
this.showAll = false;
this.showOrganizations = false;
if (!this.simpleView) {
this.showProjects = false;
this.showDataProviders = false;
}
}
if (this.showResearchOutcomes) {
this.show++;
}
if (this.showDataProviders) {
this.show++;
}
if (this.showOrganizations) {
this.show++;
}
if (this.showProjects) {
this.show++;
}
if (this.show == 1) {
this.disableSelect = true;
if ((this.customFilter && this.customFilter.queryFieldName == "communityId") || (this.properties.adminToolsCommunity !== "monitor")) {
//this.config.getCommunityInformation(this.properties, (this.customFilter && this.customFilter.queryFieldName == "communityId") ? this.customFilter.valueId : this.properties.adminToolsCommunity).subscribe(data => {
this.subscriptions.push(this.config.communityInformationState.subscribe(data => {
if (data) {
let showEntity = {};
let showPage = {};
if (data['entities']) {
for (let i = 0; i < data['entities'].length; i++) {
showEntity["" + data['entities'][i]["pid"] + ""] = data['entities'][i]["isEnabled"];
}
}
}));
} else if((this.customFilter && this.customFilter.queryFieldName == "community") && this.properties.adminToolsCommunity === "monitor") {
this.show = 1;
this.disableSelect = true;
} else if(this.customFilter && (this.customFilter.queryFieldName == "relfunder" || this.customFilter.queryFieldName == "funder")) {
/*this.showResearchOutcomes = true;
this.showPublications = true;
this.showDatasets = true;
this.showSoftware = true;
this.showOther = true;
this.showProjects = true;
this.showAll = false;
this.show = 2;*/
this.show = 1;
this.disableSelect = true;
} else if(this.customFilter && this.customFilter.queryFieldName == "relorganizationid") {
/*this.showResearchOutcomes = true;
this.showPublications = true;
this.showDatasets = true;
this.showSoftware = true;
this.showOther = true;
this.showProjects = true;
this.showDataProviders = true;
this.showAll = false;
this.show = 3;*/
this.show = 1;
this.disableSelect = true;
} else {
this.showResearchOutcomes = true;
this.showPublications = true;
this.showDatasets = true;
this.showSoftware = true;
this.showOther = true;
this.showProjects = true;
this.showOrganizations = true;
this.showDataProviders = true;
this.showAll = false;
this.show = 4;
}
if (data['pages']) {
for (let i = 0; i < data['pages'].length; i++) {
showPage["" + data['pages'][i]["route"] + ""] = data['pages'][i]["isEnabled"];
}
}
if(this.onlyresults) {
this.entities.push({label: 'All ' + OpenaireEntities.RESULTS.toLowerCase(), value: 'all'});
if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["publication"]) {
this.entities.push({label: OpenaireEntities.PUBLICATIONS, value: 'publications'});
}
if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["dataset"]) {
this.entities.push({label: OpenaireEntities.DATASETS, value: 'datasets'});
}
if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["software"]) {
this.entities.push({label: OpenaireEntities.SOFTWARE, value: 'software'});
}
if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["orp"]) {
this.entities.push({label: OpenaireEntities.OTHER, value: 'other'});
}
} else {
this.entities.push({label: 'All Content', value: 'all'});
if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults]
&& (showEntity["publication"] || showEntity["dataset"] || showEntity["software"] || showEntity["orp"])) {
this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'});
}
if(showPage[this.simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects] && showEntity["project"]) {
this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'});
}
if(showPage[this.simpleView ? this.properties.searchLinkToOrganizations : this.properties.searchLinkToAdvancedOrganizations] && showEntity["organization"]) {
this.entities.push({label: OpenaireEntities.ORGANIZATIONS, value: 'organization'});
}
if(showPage[this.simpleView ? this.properties.searchLinkToDataProviders : this.properties.searchLinkToAdvancedDataProviders] && showEntity["datasource"]) {
this.entities.push({label: OpenaireEntities.DATASOURCES, value: 'dataprovider'});
}
}
if (this.customFilter && this.customFilter.queryFieldName == "communityId" || this.properties.adminToolsCommunity === "connect") {
//for community pages: no organization in simple search, only results in advanced
this.entities = this.entities.filter(option => option.value !== 'organization' && option.value !== 'all');
if (!this.simpleView) {
this.entities = this.entities.filter(option => option.value !== 'project' && option.value !== 'dataprovider');
}
}
this.disableSelect = this.entities.length == 1;
}
}));
} else if ((this.customFilter && this.customFilter.queryFieldName == "community") && this.properties.adminToolsCommunity === "monitor") {
this.disableSelect = true;
} else if (this.customFilter && (this.customFilter.queryFieldName == "relfunder" || this.customFilter.queryFieldName == "funder")) {
this.disableSelect = true;
} else if (this.customFilter && this.customFilter.queryFieldName == "relorganizationid") {
this.disableSelect = true;
} else {
this.showResearchOutcomes = true;
this.showPublications = true;
this.showDatasets = true;
this.showSoftware = true;
this.showOther = true;
this.showProjects = true;
this.showOrganizations = true;
this.showDataProviders = true;
this.showAll = true;
this.show = 5;
if(this.onlyresults) {
this.entities.push({label: 'All ' + OpenaireEntities.RESULTS.toLowerCase(), value: 'all'});
this.entities.push({label: OpenaireEntities.PUBLICATIONS, value: 'publications'});
this.entities.push({label: OpenaireEntities.DATASETS, value: 'datasets'});
this.entities.push({label: OpenaireEntities.SOFTWARE, value: 'software'});
this.entities.push({label: OpenaireEntities.OTHER, value: 'other'});
} else {
this.entities.push({label: 'All Content', value: 'all'});
this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'});
this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'});
this.entities.push({label: OpenaireEntities.ORGANIZATIONS, value: 'organization'});
this.entities.push({label: OpenaireEntities.DATASOURCES, value: 'dataprovider'});
}
console.log(this.entities);
}
this.selectedEntity = this.currentEntity;
this.selectionChange.emit({
@ -209,16 +122,16 @@ export class EntitiesSelectionComponent {
advancedUrl: this.getUrl(false)
});
}
public ngOnDestroy() {
for (let sub of this.subs) {
sub.unsubscribe();
for (let subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
entityChanged() {
if (!this.simpleView || this.onChangeNavigate) {
this.router.navigate([this.getUrl(this.simpleView)], {queryParams: this.customFilter?this.customFilter.getParameters():{}});
this.router.navigate([this.getUrl(this.simpleView)], {queryParams: this.customFilter ? this.customFilter.getParameters() : {}});
} else {
this.selectionChange.emit({
entity: this.selectedEntity,
@ -229,36 +142,21 @@ export class EntitiesSelectionComponent {
}
getUrl(simpleView: boolean) {
let url = "";
getUrl(simpleView: boolean): string {
if (!this.onlyresults) {
if (this.selectedEntity == "all") {
url = (simpleView ? "/search/find/" : null);
return (simpleView ? "/search/find/" : null);
} else if (this.selectedEntity == "result") {
url = (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults);
return (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults);
} else if (this.selectedEntity == "project") {
url = (simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects);
return (simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects);
} else if (this.selectedEntity == "dataprovider") {
url = (simpleView ? this.properties.searchLinkToDataProviders : this.properties.searchLinkToAdvancedDataProviders);
return (simpleView ? this.properties.searchLinkToDataProviders : this.properties.searchLinkToAdvancedDataProviders);
} else if (this.selectedEntity == "organization") {
url = (simpleView ? this.properties.searchLinkToOrganizations : this.properties.searchLinkToAdvancedOrganizations);
return (simpleView ? this.properties.searchLinkToOrganizations : this.properties.searchLinkToAdvancedOrganizations);
}
} else {
url = (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults);
}
return url;
}
toggle() {
if (this.matSelect) {
this.matSelect.toggle();
return (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults);
}
}
open() {
if (this.matSelect && !this.matSelect.focused) {
this.matSelect.open();
}
}
}

View File

@ -4,11 +4,12 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {EntitiesSelectionComponent} from "./entitiesSelection.component";
import { MatSelectModule } from "@angular/material/select";
import {InputModule} from "../../sharedComponents/input/input.module";
@NgModule({
imports: [
CommonModule, FormsModule,
RouterModule, ReactiveFormsModule, MatSelectModule
RouterModule, ReactiveFormsModule, MatSelectModule, InputModule
],
declarations: [
EntitiesSelectionComponent,

View File

@ -9,7 +9,7 @@
</span>
</span>
</ng-container>
<ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0">
<ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0">
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
<ng-container *ngIf="type.selected">
<span class="uk-width-auto">
@ -71,8 +71,7 @@
class="uk-margin-top" role="alert">
<loading></loading>
</div>
<div
*ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
<div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
class="uk-margin-top uk-text-meta">
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
@ -85,12 +84,6 @@
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
[actionRoute]="true"></search-filter>
</li>
<li *ngIf="resultTypes && (filters.length > 0)">
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
[isDisabled]="disabled" [vertical]="true"
[properties]="properties" [actionRoute]="true">
</quick-selections>
</li>
<li *ngFor="let filter of rangeFilters">
<range-filter [isDisabled]="disabled" [filter]="filter"
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
@ -162,6 +155,11 @@
<div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div *ngIf="resultTypes" class="uk-flex uk-flex-center 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" class="uk-hidden@m uk-margin-top">
<a href="#mobile-filters" uk-toggle (click)="showOffCanvas=true;">
@ -195,15 +193,15 @@
</div>
</div>
</div>
<div *ngIf="includeOnlyResultsAndFilter" class="uk-margin-medium-top uk-margin-medium-bottom">
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
<div *ngIf="includeOnlyResultsAndFilter && showSwitchSearchLink && advancedSearchLink" class="uk-margin-medium-top uk-margin-medium-bottom">
<a routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +'uk-link uk-float-right '">Advanced
search
</a>
</div>
<div class="uk-grid uk-margin-large-bottom" uk-grid>
<div class="uk-grid uk-margin-medium-top uk-margin-large-bottom" uk-grid>
<div *ngIf="showRefine && (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|| (!hideFilters &&
@ -232,7 +230,7 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>.
</div>
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-bottom">
<!-- Total results, number of pages -->
<h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
@ -319,7 +317,7 @@
</div>
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
<p class="uk-alert uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
</div>
<div class="uk-margin-medium-top">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
@ -328,26 +326,18 @@
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING"
class="uk-margin-small-top uk-grid uk-child-width-1-2">
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING" class="uk-margin-small-top uk-grid uk-child-width-1-2">
<!-- Last Index Info-->
<div class="">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
alt="graph">
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a
href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
<div class="graph">
<icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">
Powered by <a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
</div>
<div class="uk-text-right">
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
<a *ngIf="properties.showLastIndexInformationLink"
class="uk-link"
[href]="properties.lastIndexInformationLink" target="_blank">
Last update
</a><span *ngIf="!(properties.showLastIndexInformationLink) ">
Last update
</span>
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
<a *ngIf="properties.showLastIndexInformationLink" class="uk-link" [href]="properties.lastIndexInformationLink" target="_blank">Last update</a>
<span *ngIf="!(properties.showLastIndexInformationLink)">Last update</span>
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
</div>

View File

@ -30,6 +30,8 @@ import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/sea
import {IconsModule} from "../../utils/icons/icons.module";
import {LoadingModule} from "../../utils/loading/loading.module";
import {InputModule} from '../../sharedComponents/input/input.module';
import {IconsService} from "../../utils/icons/icons.service";
import {graph} from "../../utils/icons/icons";
@NgModule({
imports: [
@ -40,17 +42,20 @@ import {InputModule} from '../../sharedComponents/input/input.module';
PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
SearchResultsInDepositModule, SearchResultsForOrcidModule,
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule,
InputModule
InputModule
],
declarations: [
NewSearchPageComponent
],
providers:[
],
providers: [
PreviousRouteRecorder
],
exports: [
NewSearchPageComponent
]
]
})
export class NewSearchPageModule { }
export class NewSearchPageModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([graph])
}
}

View File

@ -5,52 +5,35 @@ import {EnvProperties} from "../../utils/properties/env-properties";
import {ConfigurationService} from "../../utils/configuration/configuration.service";
import {Subscription} from "rxjs";
import {ActivatedRoute, Router} from "@angular/router";
import {properties} from "../../../../environments/environment";
@Component({
selector: 'quick-selections',
template: `
<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" 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>
<ng-container *ngFor="let value of resultTypes.values">
<span class="uk-margin-small-left">
<input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
<span class="space clickable" (click)="input.click()">{{value.name}}</span>
</span>
</ng-container>
</span>
</div>
<div class="uk-flex uk-flex-middle uk-text-small">
<div class="uk-text-meta">Include:</div>
<ng-container *ngFor="let value of resultTypes.values">
<div class="uk-margin-left">
<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 *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() resultTypes:Filter;
@Output() typeChange = new EventEmitter();
@Input() isDisabled;
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
@Input() actionRoute:boolean = false;
initialized = false;
@Input() properties: EnvProperties;
@Input() vertical: boolean=false;
properties: EnvProperties = properties;
showPublications:boolean= false;
showDatasets:boolean= false;
showSoftware: boolean = false;
showOrp: boolean = false;
showEntities = false;
@Input() actionRoute:boolean = false;
queryParams = {};
subs: Subscription[] = [];

View File

@ -9,14 +9,15 @@ import {
QueryList
} from "@angular/core";
import {InputComponent} from "../input/input.component";
import {EntitiesSelectionComponent} from "../../searchPages/searchUtils/entitiesSelection.component";
@Component({
selector: 'advanced-search-input',
template: `
<div *ngIf="inputs.length > 0" class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
<div *ngIf="inputs.length > 0" class="search-input" [class.dark]="dark" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand">
<div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + inputs.length" uk-grid>
<div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + length" uk-grid>
<ng-content></ng-content>
</div>
</div>
@ -31,17 +32,26 @@ import {InputComponent} from "../input/input.component";
})
export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy {
@ContentChildren(InputComponent) inputs: QueryList<InputComponent>;
@ContentChildren(EntitiesSelectionComponent) entities: QueryList<EntitiesSelectionComponent>;
@Input() disabled: boolean = false;
@Input() searchInputClass: string = 'inner'
@Input() searchInputClass: string = 'inner';
@Input() dark: boolean;
@Input() smallVertical: boolean = false;
@Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
let input = this.inputs.toArray().find(input => input.focused);
let input: InputComponent | EntitiesSelectionComponent = this.inputs.toArray().find(input => input.focused);
if(!input) {
input = this.entities.toArray().find(input => input.input.focused);
}
if(input) {
if(event.code === 'Enter') {
input.focus(false, event);
if(input instanceof EntitiesSelectionComponent) {
input.input.focus(false, event);
} else {
input.focus(false, event);
}
event.preventDefault();
this.searchEmitter.emit();
}
@ -59,4 +69,8 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
ngOnDestroy() {
}
get length() {
return this.inputs.length + this.entities.length;
}
}

View File

@ -142,7 +142,7 @@
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
aria-expanded="false">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left">
<div class="uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav">
<ng-container *ngFor="let submenu of menu.items">

View File

@ -8,7 +8,6 @@
[properties]="properties"
(selectionChange)=" entityChanged($event)"
[customFilter]="customFilter"
[onlyresults]="false" matPanelClass="navbarMatSelectPanelClass"
[onChangeNavigate]="false" ></entities-selection>
</div>

View File

@ -7,7 +7,7 @@ import {properties} from "../../../environments/environment";
selector: 'paging',
template: `
<ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) "
[class.uk-disabled]="isDisabled" class="uk-pagination" [ngClass]="'uk-flex-' + position">
[class.uk-disabled]="isDisabled" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">
<li *ngIf="currentPage > 1">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
[routerLink]=baseUrl aria-label="Previous">