[WIP] Search researcher: work on the page layout - add banner, basic component functionalities
This commit is contained in:
parent
c6f46a3143
commit
6082e483ba
|
@ -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">
|
|
||||||
|
|
||||||
<!–
|
|
||||||
<paging-no-load [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
|
|
||||||
[term]="keyword" [size]="size"
|
|
||||||
(pageChange)="orcidPageChange($event)"></paging-no-load>
|
|
||||||
|
|
||||||
–>
|
|
||||||
|
|
||||||
</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>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
Loading…
Reference in New Issue