[develop | DONE | FIXED]: orcid-work.component.ts: [Bug fix] Show tooltip when button is disabled & When in beta environment, do not call query to get put codes, always disable buttons and show tooltip about not available feature on beta.

orcid/orcid-work.component.ts

@@ -22,88 +22,54 @@ declare var UIkit: any;
   template: `
     <ng-container *ngIf="pageType == 'landing' || pageType == 'search'">
       <span *ngIf="!putCodes || putCodes.length == 0"
-            (click)="currentAction='add'; saveWorkPreparation();"
+                  [ngClass]="isMobile && pageType == 'landing' ? ' uk-width-1-1' : ''"
-            [class.uk-disabled]="showLoading || !isLoggedIn || (!pids && (!identifiers || identifiers.size == 0))"
+                  [attr.uk-tooltip]="isMobile? 'cls: uk-invisible' : 'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
-            [class.clickable]="!showLoading && isLoggedIn && (pids || (identifiers && identifiers.size > 0))"
+                  [title]="(noPids || !isLoggedIn)  ? ((noPids) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd">
-            [ngClass]="isMobile && pageType == 'landing' ? ' uk-width-1-1' : ''"
+        <span (click)="currentAction='add'; saveWorkPreparation();"
-            [attr.uk-tooltip]="isMobile? 'cls: uk-invisible' : 'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
+              [class.uk-disabled]="isDisabled"
-            [title]="((!pids && (!identifiers || identifiers.size == 0)) || !isLoggedIn)  ? ((!pids && (!identifiers || identifiers.size == 0)) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd">
+              [class.clickable]="!isDisabled">
-        <a class="uk-flex uk-flex-middle uk-button-link"
+          <a class="uk-flex uk-flex-middle uk-button-link"
-           [ngClass]="isMobile && !(pageType == 'landing') ? 'uk-margin-left' : ''"
+             [ngClass]="isMobile && !(pageType == 'landing') ? 'uk-margin-left' : ''"
-           [class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
+             [class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
-           [class.uk-text-muted]="showLoading || !isLoggedIn || (!pids && (!identifiers || identifiers.size == 0))"
+             [class.uk-text-muted]="isDisabled">
-           (mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)">
+            <icon *ngIf="!showLoading" [class.text-orcid]="properties.environment != 'beta' && !showLoading && isLoggedIn && (pids || identifiers?.size > 0)"
-          <icon *ngIf="!showLoading" [class.text-orcid]="!showLoading && isLoggedIn && (pids || identifiers?.size > 0)"
+                  [class.uk-text-muted]="isDisabled"
-                [class.uk-text-muted]="showLoading || !isLoggedIn || (!pids && (!identifiers || identifiers.size == 0))"
+                  name="orcid_add" [ratio]="(isMobile && pageType == 'search') ? 0.7 : 1" visuallyHidden="add"></icon>
-                name="orcid_add" [ratio]="(isMobile && pageType == 'search') ? 0.7 : 1" visuallyHidden="add"></icon>
+            <span *ngIf="showLoading" class="uk-icon"><loading
-          <span *ngIf="showLoading" class="uk-icon"><loading
+              [top_margin]="false" [size]="'small'"></loading></span>
-            [top_margin]="false" [size]="'small'"></loading></span>
+            <span [ngClass]="(isMobile && pageType == 'landing') ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Claim</span>
-					<span [ngClass]="(isMobile && pageType == 'landing') ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Claim</span>
+          </a>
-        </a>
+          <div *ngIf="isMobile && pageType == 'landing'" class="uk-margin-xsmall-top uk-padding uk-padding-remove-vertical uk-text-meta uk-text-xsmall"
-        <div *ngIf="isMobile && pageType == 'landing'" class="uk-margin-xsmall-top uk-padding uk-padding-remove-vertical uk-text-meta uk-text-xsmall"
+               [innerHTML]="(noPids || !isLoggedIn)  ? ((noPids) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd"></div>
-             [innerHTML]="((!pids && (!identifiers || identifiers.size == 0)) || !isLoggedIn)  ? ((!pids && (!identifiers || identifiers.size == 0)) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd"></div>
+        </span>
       </span>
 
-      <span *ngIf="putCodes && putCodes.length > 0"
+      <span *ngIf="putCodes && putCodes.length > 0" [ngClass]="isMobile && pageType == 'landing' ? ' uk-width-1-1' : ''"
-            (click)="currentAction='delete'; deleteWorks();"
-            [class.uk-disabled]="showLoading || !isLoggedIn || (!pids && (!identifiers || identifiers.size == 0))"
-            [class.clickable]="!showLoading && isLoggedIn && (pids || (identifiers && identifiers.size > 0))"
-            [ngClass]="isMobile && pageType == 'landing' ? ' uk-width-1-1' : ''"
             [attr.uk-tooltip]="isMobile? 'cls: uk-invisible' : 'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
-            [title]="((!pids && (!identifiers || identifiers.size == 0)) || !isLoggedIn)  ? ((!pids && (!identifiers || identifiers.size == 0)) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
+            [title]="(noPids || !isLoggedIn)  ? ((noPids) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
-        <a class="uk-flex uk-flex-middle uk-button-link"
+        <span (click)="currentAction='delete'; deleteWorks();"
-           [ngClass]="isMobile && !(pageType == 'landing') ? 'uk-margin-left' : ''"
+              [class.uk-disabled]="isDisabled"
-           [class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
+              [class.clickable]="!isDisabled">
-           [class.uk-text-muted]="showLoading || !isLoggedIn || (!pids && (!identifiers || identifiers.size == 0))"
+          <a class="uk-flex uk-flex-middle uk-button-link"
-           (mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
+             [ngClass]="isMobile && !(pageType == 'landing') ? 'uk-margin-left' : ''"
-          <icon *ngIf="!showLoading" [class.text-orcid]="!showLoading && isLoggedIn && (pids || identifiers?.size > 0)"
+             [class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
-                [class.uk-text-muted]="showLoading || !isLoggedIn || (!pids && (!identifiers || identifiers.size == 0))" 
+             [class.uk-text-muted]="isDisabled">
-                name="orcid_bin" [ratio]="(isMobile && pageType == 'search') ? 0.7 : 1" visuallyHidden="delete"></icon>
+            <icon *ngIf="!showLoading" [class.text-orcid]="!showLoading && isLoggedIn && (pids || identifiers?.size > 0)"
-          <span *ngIf="showLoading" class="uk-icon"><loading
+                  [class.uk-text-muted]="isDisabled" 
-                [top_margin]="false" [size]="'small'"></loading></span>
+                  name="orcid_bin" [ratio]="(isMobile && pageType == 'search') ? 0.7 : 1" visuallyHidden="delete"></icon>
-					<span [ngClass]="(isMobile && pageType == 'landing') ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Remove</span>
+            <span *ngIf="showLoading" class="uk-icon"><loading
-        </a>
+                  [top_margin]="false" [size]="'small'"></loading></span>
-        <div *ngIf="isMobile && pageType == 'landing'" class="uk-margin-xsmall-top uk-padding uk-padding-remove-vertical uk-text-meta uk-text-xsmall"
+            <span [ngClass]="(isMobile && pageType == 'landing') ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Remove</span>
-             [innerHTML]="((!pids && (!identifiers || identifiers.size == 0)) || !isLoggedIn)  ? ((!pids && (!identifiers || identifiers.size == 0)) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete"></div>
+          </a>
+          <div *ngIf="isMobile && pageType == 'landing'" class="uk-margin-xsmall-top uk-padding uk-padding-remove-vertical uk-text-meta uk-text-xsmall"
+               [innerHTML]="(noPids || !isLoggedIn)  ? ((noPids) ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete"></div>
+        </span>
       </span>
-
-      <!-- Old 'remove' code -->
-      <!-- <span *ngIf="putCodes && putCodes.length > 0"
-				[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
-				[title]="(!pids || !isLoggedIn)  ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
-        <a *ngIf="!showLoading" (click)="currentAction='delete'; deleteWorks();"
-					class="uk-icon-button uk-icon landing-action-button landing-action-button-orcid"
-					[class.uk-disabled]="showLoading || !isLoggedIn || !pids"
-					(mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
-          <icon *ngIf="!hoverDelete" name="orcid_bin" ratio="1.1" visuallyHidden="delete"></icon>
-          <icon *ngIf="hoverDelete" name="delete_outline" class="uk-text-danger" visuallyHidden="delete"></icon>
-        </a>
-        <span *ngIf="showLoading" class="uk-icon icon-button uk-icon-button-small"><loading
-          [top_margin]="false" [size]="'small'"></loading></span>
-      </span> -->
     </ng-container>
 
     <modal-alert *ngIf="!isMobile" #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()">
       <div>
         <div>{{requestGrantMessage}}</div>
-
-        <!--        <div class="uk-margin-medium-top uk-align-right">-->
-        <!--          <button (click)="closeGrantModal()" type="submit"-->
-        <!--                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
-        <!--            <span>Cancel</span>-->
-        <!--          </button>-->
-
-        <!--          <button (click)="openGrantWindow()" type="submit"-->
-        <!--                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
-        <!--            <span>Grant OpenAIRE</span>-->
-        <!--          </button>-->
-
-        <!--&lt;!&ndash;          <button (click)="openGrantWindow()" type="submit"&ndash;&gt;-->
-        <!--&lt;!&ndash;                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left orcid-button">&ndash;&gt;-->
-        <!--&lt;!&ndash;            <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}&ndash;&gt;-->
-        <!--&lt;!&ndash;            <span>Create or Connect your ORCID iD</span>&ndash;&gt;-->
-        <!--&lt;!&ndash;          </button>&ndash;&gt;-->
-        <!--        </div>-->
       </div>
     </modal-alert>
     
@@ -292,18 +258,6 @@ declare var UIkit: any;
           instead.
         </div>
       </div>
-
-      <!--      <div class="uk-margin-medium-top uk-align-right">-->
-      <!--        <button (click)="closePropagationModal()" type="submit"-->
-      <!--                class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
-      <!--          <span>Cancel</span>-->
-      <!--        </button>-->
-
-      <!--        <button (click)="confirmedPropagation()" type="submit"-->
-      <!--                class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
-      <!--          <span>Continue</span>-->
-      <!--        </button>-->
-      <!--      </div>-->
     </modal-alert>
     
     <fs-modal #propagationFsModal classTitle="uk-tile-default uk-border-bottom">
@@ -369,9 +323,6 @@ export class OrcidWorkComponent {
   public hasConsent: boolean = false;
   public currentAction: string = "";
   
-  public hoverAdd: boolean = false;
-  public hoverDelete: boolean = false;
-  
   public properties: EnvProperties = properties;
   public openaireEntities = OpenaireEntities;
   
@@ -391,24 +342,26 @@ export class OrcidWorkComponent {
   }
   
   ngOnInit() {
-    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
+    if(this.properties.environment != 'beta') {
-      if (user) {
+      this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
-        this.isLoggedIn = true;
+        if (user) {
-        if (!this.givenPutCode) {
+          this.isLoggedIn = true;
-          this.getPutCode();
+          if (!this.givenPutCode) {
+            this.getPutCode();
+          }
+        } else {
+          this.isLoggedIn = false;
         }
-      } else {
+      }, error => {
         this.isLoggedIn = false;
+      }));
+      if (properties.dashboard == 'irish') {
+        this.subscriptions.push(this._userProfileService.getUserProfile().subscribe(userProfile => {
+          this.hasConsent = userProfile.consent;
+        }, error => {
+          this.hasConsent = false;
+        }));
       }
-    }, error => {
-      this.isLoggedIn = false;
-    }));
-    if(properties.dashboard == 'irish'){
-      this.subscriptions.push(this._userProfileService.getUserProfile().subscribe(userProfile => {
-        this.hasConsent = userProfile.consent;
-      }, error =>{
-        this.hasConsent = false;
-     }));
     }
   }
   
@@ -894,13 +847,18 @@ export class OrcidWorkComponent {
     }
     this.showLoading = false;
   }
-  
+
+  get tooltipBETA() {
+    // return "Login to the production environment to add works to your <span class=\"text-orcid\">ORCID</span> record";
+    return "Add or delete a work from your <span class=\"text-orcid\">ORCID</span> record. This feature is not available on BETA.";
+  }
+
   get tooltipAdd() {
-    return "Add this work to your <span class=\"text-orcid\">ORCID</span> record" + ((properties.environment == "beta") ? ". The action will affect your real ORCID iD." : "");
+    return (properties.environment == "beta") ? this.tooltipBETA : ("Add this work to your <span class=\"text-orcid\">ORCID</span> record" + ((properties.environment == "test") ? ". The action will affect your real ORCID iD." : ""));
   }
   
   get tooltipDelete() {
-    return "Delete this work from your <span class=\"text-orcid\">ORCID</span> record" + ((properties.environment == "beta") ? ". The action will affect your real ORCID iD." : "");
+    return "Delete this work from your <span class=\"text-orcid\">ORCID</span> record" + ((properties.environment == "test") ? ". The action will affect your real ORCID iD." : "");
   }
   
   get tooltipNoPid() {
@@ -908,16 +866,14 @@ export class OrcidWorkComponent {
   }
   
   get tooltipNoLoggedInUser() {
-    return "Add or delete a work from your <span class=\"text-orcid\">ORCID</span> record. Please log in first."
+    return (properties.environment == "beta") ? this.tooltipBETA : "Add or delete a work from your <span class=\"text-orcid\">ORCID</span> record. Please log in first."
   }
-  
+
-  hoverEvent($event, action: string = "add") {
+  get isDisabled() {
-    if (action == "add") {
+    return (this.properties.environment == 'beta' || this.showLoading || !this.isLoggedIn || (!this.pids && (!this.identifiers || this.identifiers.size == 0)));
-      this.hoverAdd = $event.type == "mouseover";
+  }
-      this.hoverDelete = false;
+
-    } else if (action == "delete") {
+  get noPids() {
-      this.hoverDelete = $event.type == "mouseover";
+    return (!this.pids && (!this.identifiers || this.identifiers.size == 0));
-      this.hoverAdd = false;
-    }
   }
 }