[develop | DONE | CHANGED] Upload dois: add loggedin guard, improvements for smaller screens, improvements when there are no found results or valid dois

This commit is contained in:
argirok 2023-12-05 14:51:29 +02:00
parent 7bf424a04f
commit 78a70b56bf
3 changed files with 54 additions and 34 deletions

View File

@ -1,13 +1,14 @@
import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {UploadDoisComponent} from "./upload-dois.component";
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: UploadDoisComponent
component: UploadDoisComponent, canActivate: [LoginGuard]
}
])
]

View File

@ -7,7 +7,7 @@
<h1 class="uk-h4 uk-margin-small-bottom">Title</h1>
<div class="uk-margin-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</div>
</div>
<div *ngIf="filesToUpload && !loading" class="uk-width-xlarge">
<div *ngIf="filesToUpload && !loading" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1@s uk-margin-small-bottom">
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle" uk-form-custom>
<input id="upload-new" type="file" (change)="fileChangeEvent($event)"/>
@ -76,21 +76,17 @@
<div *ngIf="filesToUpload && !loading" class="uk-section uk-container uk-container-large">
<div class="uk-grid" uk-grid>
<!-- Not Found -->
<div *ngIf="!showFound" class="uk-width-1-1 uk-grid uk-grid-small uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid>
<!--<div *ngIf="!showFound" class="uk-width-1-1 uk-grid uk-grid-small uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid>
<div *ngFor="let id of notFoundIds">
<a [href]="properties.doiURL+id" class="custom-external" target="_blank">
{{id}}
</a>
</div>
</div>
<!-- Found -->
<ng-container *ngIf="showFound">
</div>-->
<!-- Main content (left-side) -->
<div class="uk-width-3-4">
<modal-loading
[message]="'Uploading, reading your document and fetching results. Please give us a moment..'">
</modal-loading>
<div>
<div class="uk-width-3-4@l uk-width-2-3@m uk-width-1-1@s" [class.uk-hidden]="!loading && resultsToShow.length ==0 && showFound">
<div *ngIf="!loading && resultsToShow.length >0 && showFound">
<!-- Filters -->
<!-- Actions -->
<div class="uk-flex uk-flex-middle uk-margin-small-bottom" style="grid-gap: 10px;">
@ -181,12 +177,12 @@
</td>
<!-- TODO: make the labels dynamic-->
<td class="uk-text-xsmall">
<div>
<div class="uk-flex">
<span class="uk-label uk-text-capitalize uk-background-default custom-access-route-label">
<span class="dot green"></span>
green
</span>
<span class="uk-label uk-text-capitalize uk-background-default custom-access-route-label">
<span class="uk-label uk-text-capitalize uk-background-default custom-access-route-label uk-margin-xsmall-left">
<span class="dot {{result.accessRoute}}"></span>
{{result.accessRoute}}
</span>
@ -202,12 +198,26 @@
</tbody>
</table>
</div>
<ng-container *ngIf="!showFound && !loading">
<div *ngIf="notFoundIds.length > 0" class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-3@l uk-margin-top" uk-grid>
<div *ngFor="let id of notFoundIds">
<a [href]="properties.doiURL+id" class="custom-external uk-text-break" target="_blank">
{{id}}
</a>
</div>
</div>
<div *ngIf="notFoundIds.length == 0 && noValidIds.length > 0 && allIds.length == 0" class="uk-alert uk-alert-warning">
No valid DOIs extracted from the file. Please check the file format. The format should be one DOI per row.
</div>
</ng-container>
<!-- <div *ngIf="!loading && resultsToShow.length == 0" class="uk-alert uk-alert-primary"> No results found</div>-->
</div>
<!-- Sidebar (right-side) -->
<div class="uk-width-1-4">
<div class="uk-width-1-4@l uk-width-1-3@m uk-width-1-1@s" [class.uk-width-1-1]="!loading && resultsToShow.length ==0">
<div class="uk-margin-top">
<span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found
</div>
<ng-container *ngIf="resultsToShow.length > 0 && showFound">
<div class="uk-card uk-card-default uk-padding-small uk-margin-small-top uk-margin-small-bottom">
<!-- <div class="uk-margin-top uk-margin-bottom uk-text-large">Access Rights</div>-->
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot open"></span> Open Access</div><div class="uk-text-right uk-width-auto"> {{stats['open']}} <span *ngIf="getercentage(stats['open'])">({{getercentage(stats['open'])}}%)</span></div></div>
@ -225,11 +235,12 @@
<hr>
<div class="uk-grid uk-margin-remove-top" title="Published in a Diamond OA journal"><div class="uk-width-expand"><span class="dot diamond"></span> Diamond OA</div><div class="uk-text-right uk-width-auto"> {{stats['diamond']}} <span *ngIf="getercentage(stats['diamond'])">({{getercentage(stats['diamond'])}}%)</span></div></div>
</div>
</ng-container>
<div class="uk-card uk-card-default uk-padding-small uk-margin-small-top uk-margin-small-bottom">
<div class="uk-grid uk-child-width-1-2" uk-grid>
<div *ngIf="allIds.length > 0" class="uk-flex uk-flex-middle">
<div class="uk-grid uk-child-width-1-2 uk-grid-small" uk-grid>
<div class="uk-flex uk-flex-middle">
<div class="uk-margin-small-right">
<icon name="check_box" [ratio]="2.2" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
<icon name="check_box" [ratio]="1.8" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
</div>
<div>
<div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Valid</div>
@ -245,7 +256,7 @@
</div>-->
<div *ngIf="duplicateIds.length > 0" class="uk-flex uk-flex-middle">
<div class="uk-margin-small-right">
<icon name="fiber_smart_record" [ratio]="2.2" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
<icon name="fiber_smart_record" [ratio]="1.8" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
</div>
<div>
<div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Duplicates</div>
@ -262,7 +273,7 @@
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>

View File

@ -135,22 +135,26 @@ export class UploadDoisComponent implements OnInit {
}
for (let i = 0; i < (rows.length); i++) {
if (rows[i] && rows[i] != null && rows[i] != "") {
const values = rows[i].split(',');
try {
const values = rows[i].split(',');
let id = this.removeDoubleQuotes(values[0]);
if (DOI.isValidDOI(id)) {
id = Identifier.getRawDOIValue(id);
// console.log(id, id.split("\r")[0]);
id = id.split("\r")[0]
if (this.allIds.indexOf(id) > -1) {
this.duplicateIds.push(id);
this.duplicateIdsRow.push(i + 1);
let id = this.removeDoubleQuotes(values[0]);
if (DOI.isValidDOI(id)) {
id = Identifier.getRawDOIValue(id);
// console.log(id, id.split("\r")[0]);
id = id.split("\r")[0]
if (this.allIds.indexOf(id) > -1) {
this.duplicateIds.push(id);
this.duplicateIdsRow.push(i + 1);
} else {
this.allIds.push(id);
}
} else {
this.allIds.push(id);
this.noValidIds.push(id);
this.noValidIdsRow.push(i + 1);
}
} else {
this.noValidIds.push(id);
this.noValidIdsRow.push(i + 1);
}catch (e){
invalid_rows++;
}
} else {
invalid_rows++;
@ -161,7 +165,11 @@ export class UploadDoisComponent implements OnInit {
if(properties.logServiceUrl) {
this.subscriptions.push(this._logService.logUploadDOIs(properties, this.allIds.length).subscribe(res => { }));
}
this.fetchAllResults();
if(this.allIds.length > 0) {
this.fetchAllResults();
}else{
this.loading = false;
}
}, (error) => {
this.enableUpload = true;
this.errorMessage = "An error occured.";
@ -251,7 +259,7 @@ export class UploadDoisComponent implements OnInit {
};
this.results.push(showRes)
this.addStatsPerResult(showRes)
console.log(showRes, this.stats)
// console.log(showRes, this.stats)
}
if (data[0] < dois.length) {
for (let doi of dois) {