From 78a70b56bff97f398fc6f106f652d1f40ed445e4 Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Tue, 5 Dec 2023 14:51:29 +0200
Subject: [PATCH] [develop | DONE | CHANGED]  Upload dois: add loggedin guard,
 improvements for smaller screens, improvements when there are no found
 results or valid dois

---
 .../upload-dois/upload-dois-routing.module.ts |  3 +-
 .../upload-dois/upload-dois.component.html    | 47 ++++++++++++-------
 src/app/upload-dois/upload-dois.component.ts  | 38 +++++++++------
 3 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/app/upload-dois/upload-dois-routing.module.ts b/src/app/upload-dois/upload-dois-routing.module.ts
index 1acd0b3..4b99430 100644
--- a/src/app/upload-dois/upload-dois-routing.module.ts
+++ b/src/app/upload-dois/upload-dois-routing.module.ts
@@ -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]
       }
     ])
   ]
diff --git a/src/app/upload-dois/upload-dois.component.html b/src/app/upload-dois/upload-dois.component.html
index 3e370ef..5588e6f 100644
--- a/src/app/upload-dois/upload-dois.component.html
+++ b/src/app/upload-dois/upload-dois.component.html
@@ -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>
diff --git a/src/app/upload-dois/upload-dois.component.ts b/src/app/upload-dois/upload-dois.component.ts
index 031cd7d..cd180bc 100644
--- a/src/app/upload-dois/upload-dois.component.ts
+++ b/src/app/upload-dois/upload-dois.component.ts
@@ -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) {