[WIP] Search researcher: work on the page layout - add banner, basic component functionalities

This commit is contained in:
argirok 2023-10-30 17:09:59 +02:00
parent c6f46a3143
commit 6082e483ba
4 changed files with 76 additions and 62 deletions

View File

@ -1,64 +1,60 @@
<div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'" <div style="background: royalblue; height: 200px">
[searchInputClass]="'inner background'" (searchEmitter)="search()"></div>
<div class="uk-margin-top">
<div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured</div> </div>
<div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger" <div class="uk-section uk-container">
role="alert">Service not available <div class=" uk-flex uk-flex-center ">
<div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'"
[searchInputClass]="'inner background'" (searchEmitter)="search()" class="uk-width-xlarge@l uk-width-large@m"></div>
</div> </div>
Orcid found:{{authors.length}} <br>
check for results: {{authorsRendered}} <br> <div class="uk-margin-top">
Authors found (with OpenAIRE results):{{authorsToShow.length}} <br> <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
page: {{page}}<br> <loading></loading>
<ng-container *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)">
<div *ngIf="author.resultsCount > 0" class="uk-margin-top">{{author.authorGivenName}} {{author.authorFamilyName}} : {{author.id}} <br>
<div>Research outcomes:{{author.resultsCount}}</div>
</div> </div>
</ng-container> <div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured</div>
<button *ngIf="authorsToShow.length > page*size || authors.length > authorsRendered" class="uk-button uk-button-primary" (click)="loadMore()" >Load more</button> <div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
role="alert">Service not available
</div>
<div *ngIf="orcidStatus == errorCodes.NONE "
class="uk-alert uk-alert-primary "> No results found
</div>
<div *ngIf="!(orcidStatus == errorCodes.NONE ||
orcidStatus == errorCodes.ERROR || orcidStatus == errorCodes.NOT_AVAILABLE)">
<div *ngIf="orcidStatus == errorCodes.NONE " <!-- Debug info -->
class="uk-alert uk-alert-primary "> No results found <!--<div>
</div> Orcid found:{{authors.length}} <br>
check for results: {{authorsRendered}} <br>
Authors found (with OpenAIRE results):{{authorsToShow.length}} <br>
page: {{page}}<br>
</div>-->
<div class="uk-grid uk-child-width-1-3">
<div *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)" class="uk-padding-small">
<div *ngIf="author.resultsCount > 0" class="uk-card uk-card-default uk-card-hover uk-padding-small">
<a [routerLink]="['./',author.id]" class="uk-link-reset">
<div class="uk-margin-top uk-margin-bottom">
<!--<div *ngIf="orcidResultsNum >= 0" class="panel-body"> <span class="uk-border uk-border-circle uk-padding-small uk-text-meta uk-margin-small-right" width="16px" height="16px">
<span><span class="uk-text-bold">Showing results for</span> <span uk-icon="user"></span></span>
<a target="_blank" href="http://orcid.org/{{authorId}}"> <span {{author.authorGivenName}} {{author.authorFamilyName}}
class="custom-external"></span> {{authorGivenName}} {{authorFamilyName}} - {{authorId}} </a> : </div>
</span>
<div *ngIf="authors.length > 1" class=""> In Orcid you can search only by Author. Not the
author you are looking for?
<div class="dropdown"> <div class="uk-text-xsmall uk-text-secondary uk-margin-medium-top">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
<a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link uk-text-primary">
<mat-select [(ngModel)]="selectAuthorId" name="select_author" {{properties.orcidURL + author.id}}</a></div>
(ngModelChange)="getOrcidResultsById(selectAuthorId)" class="matSelection" <!-- <div>Research outcomes:{{author.resultsCount}}</div>-->
[disableOptionCentering]="true" </a>
panelClass="matSelectionPanel"> </div>
<mat-option value="0">Choose another one:</mat-option> </div>
<mat-option *ngFor=" let item of authors let i = index"
[value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
</mat-select>
</div> </div>
<div class="uk-flex uk-flex-center">
<button *ngIf="authorsToShow.length > page*size || authors.length > authorsRendered" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
</div>
</div> </div>
</div>
<div>
<div *ngIf="orcidResultsNum == 0" class="uk-alert uk-alert-primary uk-margin-top"> No results found</div>
</div>
<div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page && page <= totalPages )) "
class="uk uk-flex uk-flex-center">
&lt;!&ndash;
<paging-no-load [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
[term]="keyword" [size]="size"
(pageChange)="orcidPageChange($event)"></paging-no-load>
&ndash;&gt;
</div>
</div>-->
<div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span></div>
</div> </div>

View File

@ -6,13 +6,18 @@ import {SearchOrcidService} from "../../openaireLibrary/claims/claim-utils/servi
import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service"; import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service";
import {forkJoin, Subscriber} from "rxjs"; import {forkJoin, Subscriber} from "rxjs";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
import {Router} from "@angular/router";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {Meta, Title} from "@angular/platform-browser";
import {map} from "rxjs/operators"; import {map} from "rxjs/operators";
@Component({ @Component({
selector: 'search-researcher', selector: 'search-researcher',
templateUrl: './search-researcher.component.html', templateUrl: './search-researcher.component.html',
}) })
export class SearchResearcherComponent implements OnInit { export class SearchResearcherComponent extends BaseComponent implements OnInit {
page: number = 1; page: number = 1;
size: number = 10; size: number = 10;
public keyword: string = "";//"paolo manghi";//'0000-0001-7291-3210'; public keyword: string = "";//"paolo manghi";//'0000-0001-7291-3210';
@ -20,17 +25,25 @@ export class SearchResearcherComponent implements OnInit {
public errorCodes: ErrorCodes = new ErrorCodes(); public errorCodes: ErrorCodes = new ErrorCodes();
public warningMessage = ""; public warningMessage = "";
public infoMessage = ""; public infoMessage = "";
orcidStatus: number = this.errorCodes.NONE; orcidStatus: number = null;
authors = []; authors = [];
authorsToShow = []; authorsToShow = [];
authorsRendered = 0; authorsRendered = 0;
subscriptions = []; subscriptions = [];
constructor(private _searchOrcidService: SearchOrcidService, constructor(private _searchOrcidService: SearchOrcidService,
private _searchResearchResultsService: SearchResearchResultsService) { private _searchResearchResultsService: SearchResearchResultsService,
protected _router: Router,
} protected seoService: SEOService,
protected _piwikService: PiwikService,
protected _title: Title,
protected _meta: Meta) {
super();
}
ngOnInit() { ngOnInit() {
this.title = 'Researcher Monitors';
this.description = 'Researcher Monitors';
this.setMetadata();
if (this.keyword != null && this.keyword.length > 0) { if (this.keyword != null && this.keyword.length > 0) {
this.search(); this.search();
} }
@ -135,6 +148,8 @@ private getOpenaireResultsFor(start, end){
if (this.authorsToShow.length < this.page * this.size) { if (this.authorsToShow.length < this.page * this.size) {
this.getOpenaireResultsFor(end, end + (this.size)); this.getOpenaireResultsFor(end, end + (this.size));
}else{
this.orcidStatus = this.errorCodes.DONE;
} }
})); }));
}else{ }else{
@ -154,6 +169,7 @@ private getOpenaireResultsFor(start, end){
} }
loadMore(){ loadMore(){
this.orcidStatus = this.errorCodes.LOADING;
let page = this.page + 1; let page = this.page + 1;
if(page*this.size>this.authorsToShow.length) { if(page*this.size>this.authorsToShow.length) {
if (this.authorsRendered < this.authors.length) { if (this.authorsRendered < this.authors.length) {

View File

@ -6,13 +6,14 @@ import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-i
import {MatSelectModule} from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import {SearchOrcidServiceModule} from "../../openaireLibrary/claims/claim-utils/service/searchOrcidService.module"; import {SearchOrcidServiceModule} from "../../openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
import {SearchResearchResultsServiceModule} from "../../openaireLibrary/services/searchResearchResultsService.module"; import {SearchResearchResultsServiceModule} from "../../openaireLibrary/services/searchResearchResultsService.module";
import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
@NgModule({ @NgModule({
declarations: [SearchResearcherComponent], declarations: [SearchResearcherComponent],
imports: [ imports: [
CommonModule, SearchResearcherRoutingModule, SearchInputModule, MatSelectModule, SearchOrcidServiceModule, SearchResearchResultsServiceModule CommonModule, SearchResearcherRoutingModule, SearchInputModule, MatSelectModule, SearchOrcidServiceModule, SearchResearchResultsServiceModule, LoadingModule
] ]
}) })

View File

@ -9,7 +9,7 @@ import {common, commonDev} from "../app/openaireLibrary/utils/properties/environ
let props: EnvProperties = { let props: EnvProperties = {
environment: "development", environment: "development",
searchAPIURLLAst: "http://beta.services.openaire.eu/search/v2/api/ 19680", searchAPIURLLAst: "http://beta.services.openaire.eu/search/v2/api/",
searchResourcesAPIURL: "https://beta.services.openaire.eu/search/v2/api/resources", searchResourcesAPIURL: "https://beta.services.openaire.eu/search/v2/api/resources",
monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-monitor-service", monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-monitor-service",
// monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-irish-monitor-service/", // monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-irish-monitor-service/",
@ -17,7 +17,8 @@ let props: EnvProperties = {
piwikSiteId: "407", piwikSiteId: "407",
enablePiwikTrack:false, enablePiwikTrack:false,
piwikBaseUrl: 'https://beta.analytics.openaire.eu/piwik.php?idsite=', piwikBaseUrl: 'https://beta.analytics.openaire.eu/piwik.php?idsite=',
utilsService: 'http://mpagasas.di.uoa.gr:8000' utilsService: 'http://mpagasas.di.uoa.gr:8000',
orcidURL: 'https://orcid.org/'
} }
export let properties: EnvProperties = { export let properties: EnvProperties = {