MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/upload-dois/upload-dois-routing.module.ts
View File

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

47
src/app/upload-dois/upload-dois.component.html
View File

@ -7,7 +7,7 @@
<h1 class="uk-h4 uk-margin-small-bottom">Title</h1> <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 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>
<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"> <div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle" uk-form-custom> <button class="uk-button uk-button-secondary uk-flex uk-flex-middle" uk-form-custom>
<input id="upload-new" type="file" (change)="fileChangeEvent($event)"/> <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 *ngIf="filesToUpload && !loading" class="uk-section uk-container uk-container-large">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<!-- Not Found --> <!-- 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"> <div *ngFor="let id of notFoundIds">
<a [href]="properties.doiURL+id" class="custom-external" target="_blank"> <a [href]="properties.doiURL+id" class="custom-external" target="_blank">
{{id}} {{id}}
</a> </a>
</div> </div>
</div> </div>-->
<!-- Found -->
<ng-container *ngIf="showFound">
<!-- Main content (left-side) --> <!-- Main content (left-side) -->
<div class="uk-width-3-4"> <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">
<modal-loading <div *ngIf="!loading && resultsToShow.length >0 && showFound">
[message]="'Uploading, reading your document and fetching results. Please give us a moment..'">
</modal-loading>
<div>
<!-- Filters --> <!-- Filters -->
<!-- Actions --> <!-- Actions -->
<div class="uk-flex uk-flex-middle uk-margin-small-bottom" style="grid-gap: 10px;"> <div class="uk-flex uk-flex-middle uk-margin-small-bottom" style="grid-gap: 10px;">
@ -181,12 +177,12 @@
</td> </td>
<!-- TODO: make the labels dynamic--> <!-- TODO: make the labels dynamic-->
<td class="uk-text-xsmall"> <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="uk-label uk-text-capitalize uk-background-default custom-access-route-label">
<span class="dot green"></span> <span class="dot green"></span>
green green
</span> </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> <span class="dot {{result.accessRoute}}"></span>
{{result.accessRoute}} {{result.accessRoute}}
</span> </span>
@ -202,12 +198,26 @@
</tbody> </tbody>
</table> </table>
</div> </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> </div>
<!-- Sidebar (right-side) --> <!-- 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"> <div class="uk-margin-top">
<span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found <span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found
</div> </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-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-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> <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> <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 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> </div>
</ng-container>
<div class="uk-card uk-card-default uk-padding-small uk-margin-small-top uk-margin-small-bottom"> <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 class="uk-grid uk-child-width-1-2 uk-grid-small" uk-grid>
<div *ngIf="allIds.length > 0" class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<div class="uk-margin-small-right"> <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> <div>
<div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Valid</div> <div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Valid</div>
@ -245,7 +256,7 @@
</div>--> </div>-->
<div *ngIf="duplicateIds.length > 0" class="uk-flex uk-flex-middle"> <div *ngIf="duplicateIds.length > 0" class="uk-flex uk-flex-middle">
<div class="uk-margin-small-right"> <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> <div>
<div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Duplicates</div> <div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Duplicates</div>
@ -262,7 +273,7 @@
</div> </div>
</div> </div>
</div> </div>
</ng-container>
</div> </div>
</div> </div>
</div> </div>

38
src/app/upload-dois/upload-dois.component.ts
View File

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