[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...'"
[searchInputClass]="'inner background'" (searchEmitter)="search()"></div>
<div class="uk-margin-top">
<div style="background: royalblue; height: 200px">
<div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured</div>
<div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
role="alert">Service not available
</div>
<div class="uk-section uk-container">
<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>
Orcid found:{{authors.length}} <br>
check for results: {{authorsRendered}} <br>
Authors found (with OpenAIRE results):{{authorsToShow.length}} <br>
page: {{page}}<br>
<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 class="uk-margin-top">
<div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<loading></loading>
</div>
</ng-container>
<button *ngIf="authorsToShow.length > page*size || authors.length > authorsRendered" class="uk-button uk-button-primary" (click)="loadMore()" >Load more</button>
<div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured</div>
<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 "
class="uk-alert uk-alert-primary "> No results found
</div>
<!-- Debug info -->
<!--<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><span class="uk-text-bold">Showing results for</span>
<a target="_blank" href="http://orcid.org/{{authorId}}"> <span
class="custom-external"></span> {{authorGivenName}} {{authorFamilyName}} - {{authorId}} </a> :
</span>
<div *ngIf="authors.length > 1" class=""> In Orcid you can search only by Author. Not the
author you are looking for?
<span class="uk-border uk-border-circle uk-padding-small uk-text-meta uk-margin-small-right" width="16px" height="16px">
<span uk-icon="user"></span></span>
{{author.authorGivenName}} {{author.authorFamilyName}}
</div>
<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"
(ngModelChange)="getOrcidResultsById(selectAuthorId)" class="matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="0">Choose another one:</mat-option>
<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>
{{properties.orcidURL + author.id}}</a></div>
<!-- <div>Research outcomes:{{author.resultsCount}}</div>-->
</a>
</div>
</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 *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 {forkJoin, Subscriber} from "rxjs";
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";
@Component({
selector: 'search-researcher',
templateUrl: './search-researcher.component.html',
})
export class SearchResearcherComponent implements OnInit {
export class SearchResearcherComponent extends BaseComponent implements OnInit {
page: number = 1;
size: number = 10;
public keyword: string = "";//"paolo manghi";//'0000-0001-7291-3210';
@ -20,17 +25,25 @@ export class SearchResearcherComponent implements OnInit {
public errorCodes: ErrorCodes = new ErrorCodes();
public warningMessage = "";
public infoMessage = "";
orcidStatus: number = this.errorCodes.NONE;
orcidStatus: number = null;
authors = [];
authorsToShow = [];
authorsRendered = 0;
subscriptions = [];
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() {
this.title = 'Researcher Monitors';
this.description = 'Researcher Monitors';
this.setMetadata();
if (this.keyword != null && this.keyword.length > 0) {
this.search();
}
@ -135,6 +148,8 @@ private getOpenaireResultsFor(start, end){
if (this.authorsToShow.length < this.page * this.size) {
this.getOpenaireResultsFor(end, end + (this.size));
}else{
this.orcidStatus = this.errorCodes.DONE;
}
}));
}else{
@ -154,6 +169,7 @@ private getOpenaireResultsFor(start, end){
}
loadMore(){
this.orcidStatus = this.errorCodes.LOADING;
let page = this.page + 1;
if(page*this.size>this.authorsToShow.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 {SearchOrcidServiceModule} from "../../openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
import {SearchResearchResultsServiceModule} from "../../openaireLibrary/services/searchResearchResultsService.module";
import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
@NgModule({
declarations: [SearchResearcherComponent],
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 = {
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",
monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-monitor-service",
// monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-irish-monitor-service/",
@ -17,7 +17,8 @@ let props: EnvProperties = {
piwikSiteId: "407",
enablePiwikTrack:false,
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 = {