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

[master] upload dois: add metadata, change styles for upload progress bar and icon, alert messages

This commit is contained in:
Alex Martzios 2023-12-12 13:50:19 +02:00
parent d7942231a4
commit cd0b8ec3e8
3 changed files with 71 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,8 @@ const routes: Routes = [
},
{
path: 'upload-dois',
loadChildren: () => import('./upload-dois/upload-dois.module').then(m => m.UploadDoisModule)
loadChildren: () => import('./upload-dois/upload-dois.module').then(m => m.UploadDoisModule),
data: {title: Irish.METADATA_PREFIX}
},
{
path: 'admin',

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

@ -4,10 +4,10 @@
<div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<h1 class="uk-h4 uk-margin-small-bottom">Title</h1>
<h1 class="uk-h4 uk-margin-small-bottom">Upload DOIs</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@l uk-width-large@m uk-width-1-1@s uk-margin-small-bottom">
<div *ngIf="filesToUpload && !loading" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1 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)"/>
@ -43,37 +43,48 @@
</div>
<!-- BEFORE UPLOADING -->
<div *ngIf="!filesToUpload || loading" class="uk-section uk-container uk-flex uk-flex-center">
<div class="uk-placeholder uk-text-center uk-width-xlarge" uk-form-custom>
<icon name="upload_file" [ratio]="2"></icon>
<div><span class="uk-text-large uk-text-bold">Drag and Drop your file here</span></div>
<div class="uk-text-meta uk-text-small">File supported: CSV</div>
<div class="uk-padding-small">or</div>
<div *ngIf="!filesToUpload || loading" class="uk-section uk-container uk-flex uk-flex-center" id="before_uploading">
<div class="uk-placeholder uk-width-xlarge@l uk-width-large@m uk-width-1-1 uk-text-center" uk-form-custom>
<div class="uk-flex uk-flex-center uk-flex-middle">
<icon [name]="'upload_file'" [flex]="true" [ratio]="2"></icon>
</div>
<div class="uk-text-large uk-text-bold uk-margin-top uk-margin-xsmall-bottom">
Drag and Drop your file here
</div>
<div class="uk-text-meta uk-text-small">
File supported: CSV
</div>
<div class="uk-text-bold uk-margin-top uk-margin-bottom">
or
</div>
<div class="uk-button uk-button-secondary">
<input id="exampleInputFile" class="" type="file" (change)="fileChangeEvent($event)"/>
<span>Choose File</span>
</div>
<div class="uk-text-meta uk-text-small uk-margin-small-top">Maximum size: 5 MB</div>
<div class="uk-text-meta uk-text-small uk-margin-small-top">
Maximum size: 5 MB
</div>
</div>
</div>
<!-- LOADING WHILE UPLOADING -->
<div *ngIf="loading" class="uk-section uk-container uk-flex uk-flex-center uk-padding-remove-vertical">
<div *ngIf="filesToUpload[0]" class="uk-grid">
<div class="uk-width-auto">
<span uk-icon="icon: file-text; ratio:3"></span>
</div>
<div class="uk-width-expand">
{{filesToUpload[0].name}}
<progress class="uk-progress" [value]="this.getercentage(this.foundIds.length + this.notFoundIds.length, false)" max="100"></progress>
<div><span *ngIf="loading">{{this.getercentage(this.foundIds.length + this.notFoundIds.length, false)}}% done</span>
<div *ngIf="loading" class="uk-container uk-flex uk-flex-center uk-margin-medium-bottom" id="loading_while_uploading">
<div *ngIf="filesToUpload[0]" class="uk-flex uk-flex-middle uk-width-xlarge@l uk-width-large@m uk-width-1-1">
<icon name="description" [ratio]="3" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
<div class="uk-width-expand uk-margin-left">
<div class="uk-margin-small-bottom uk-text-bold">
{{filesToUpload[0].name}}
</div>
<progress class="uk-progress uk-margin-remove" [value]="this.getercentage(this.foundIds.length + this.notFoundIds.length, false)" max="100"></progress>
<div *ngIf="loading" class="uk-text-xsmall uk-text-bold uk-margin-small-top">
{{this.getercentage(this.foundIds.length + this.notFoundIds.length, false)}}% done
</div>
</div>
</div>
</div>
<!-- LOADED -->
<div *ngIf="filesToUpload && !loading" class="uk-section uk-container uk-container-large">
<div *ngIf="filesToUpload && !loading" class="uk-section uk-container uk-container-large" id="loaded">
<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>
@ -90,7 +101,7 @@
<div *ngIf="!loading && showFound && allIds.length > 0">
<!-- Filters -->
<!-- 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-bottom" style="grid-gap: 10px;">
<div *ngIf="accessModeFilter">
<dropdown-filter [count]="accessModeFilter.countSelectedValues" [name]="accessModeFilter.title"
dropdownMinWidth="450">
@ -129,9 +140,9 @@
</div>-->
</div>
<!-- Search and paging -->
<div class="uk-flex uk-flex-middle uk-flex-right">
<div class="uk-flex uk-flex-middle uk-flex-right@m uk-flex-center uk-flex-wrap">
<div search-input [searchInputClass]="'flat'" [expandable]="true"
class="uk-width-medium@m uk-width-1-1@s"
class="uk-width-large@m uk-width-1-1"
placeholder="Search for DOIs" [value]="keyword" (valueChange)="updateKeyword($event)">
</div>
<div>
@ -201,24 +212,30 @@
</tr>
</tbody>
</table>
<div *ngIf="resultsToShow?.length == 0" class="uk-alert uk-alert-primary uk-margin-medium-top">No results found</div>
<div *ngIf="resultsToShow?.length == 0" class="uk-flex uk-flex-center uk-margin-medium-top">
<div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
No results found
</div>
</div>
</div>
<ng-container *ngIf="!loading && !showFound">
<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 *ngIf="notFoundIds.length > 0" class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-3@l" 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 *ngIf="notFoundIds.length == 0 && noValidIds.length > 0 && allIds.length == 0" class="uk-flex uk-flex-center">
<div class="uk-alert uk-alert-warning uk-text-center uk-width-2-3@m uk-width-1-1">
No valid DOIs extracted from the file. Please check the file format. The format should be one DOI per row.
</div>
</div>
</ng-container>
</div>
<!-- Sidebar (right-side) -->
<div class="uk-width-1-4@l uk-width-1-3@m uk-width-1-1" [class.uk-width-1-1]="!loading && resultsToShow.length == 0">
<div class="uk-margin-top">
<div>
<ng-container *ngIf="showFound">
<span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found
</ng-container>

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

@ -8,12 +8,18 @@ import {SearchResearchResultsService} from "../openaireLibrary/services/searchRe
import {map} from "rxjs/operators";
import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
import {LogService} from "../openaireLibrary/utils/log/log.service";
import {BaseComponent} from '../openaireLibrary/sharedComponents/base/base.component';
import {ActivatedRoute, 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';
@Component({
selector: 'upload-dois',
templateUrl: './upload-dois.component.html'
})
export class UploadDoisComponent implements OnInit {
export class UploadDoisComponent extends BaseComponent implements OnInit {
private static UPLOAD_TIMEOUT = 2000;
page: number = 1;
size: number = 100;
requestSize: number = 80;
@ -68,20 +74,21 @@ export class UploadDoisComponent implements OnInit {
keyword = "";
loading = false;
showFound = true;
constructor(private _searchResearchResultsService: SearchResearchResultsService, private _logService: LogService) {
constructor(private _searchResearchResultsService: SearchResearchResultsService,
private _logService: LogService,
protected _router: Router,
protected _route: ActivatedRoute,
protected seoService: SEOService,
protected _piwikService: PiwikService,
protected _title: Title,
protected _meta: Meta) {
super();
}
ngOnInit() {
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
this.title = 'Upload DOIs';
this.description = 'Upload DOIs';
this.setMetadata();
}
upload() {
@ -166,8 +173,10 @@ export class UploadDoisComponent implements OnInit {
}
if(this.allIds.length > 0) {
this.fetchAllResults();
}else{
this.loading = false;
} else {
setTimeout(() => {
this.loading = false;
}, UploadDoisComponent.UPLOAD_TIMEOUT);
}
}, (error) => {
this.enableUpload = true;
@ -220,7 +229,7 @@ export class UploadDoisComponent implements OnInit {
fetchAllResults() {
let page = 1;
let timerSubscription = timer(0, 1000).pipe(
let timerSubscription = timer(0, UploadDoisComponent.UPLOAD_TIMEOUT).pipe(
map(() => {
if ((page - 1) * this.requestSize <= this.allIds.length) {
this.fetchResultsByPage(page); // load data contains the http request
@ -410,7 +419,7 @@ export class UploadDoisComponent implements OnInit {
getercentage(number, foundIds = true){
if(!number){
return "";
return "0";
}
let from = foundIds?this.foundIds.length:this.allIds.length
var num = new Number((number/from)*100);