[Library]: Display Claims: Disable inputs and pages while data are loading

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57209 d315682c-612b-4755-9ff5-7f18f6832af3

claims/claim-utils/displayClaims/displayClaims.component.html

@@ -15,24 +15,30 @@
       </div>
       <div class="uk-margin-small-top ">
         <label class="uk-margin-small-right"> <input [(ngModel)]="projectCB" type="checkbox"
+                                                     [disabled]="pageLoading"
                                                      (ngModelChange)="changeType()" name="project"/>
 
           Projects </label>
         <label class="uk-margin-small-right"> <input [(ngModel)]="publicationCB" type="checkbox"
+                                                     [disabled]="pageLoading"
                                                      (ngModelChange)="changeType()" name="publication"/>
           Publications </label>
         <label class="uk-margin-small-right"> <input [(ngModel)]="datasetCB" type="checkbox"
+                                                     [disabled]="pageLoading"
                                                      (ngModelChange)="changeType()" name="dataset"/>
           Research Data </label>
         <label class="uk-margin-small-right"> <input [(ngModel)]="softwareCB" type="checkbox"
+                                                     [disabled]="pageLoading"
                                                      (ngModelChange)="changeType()" name="software"/>
           Software
         </label>
         <label class="uk-margin-small-right"> <input [(ngModel)]="otherCB" type="checkbox"
+                                                     [disabled]="pageLoading"
                                                      (ngModelChange)="changeType()" name="other"/>
           Other products
         </label>
         <label class="uk-margin-small-right"> <input [(ngModel)]="contextCB" type="checkbox"
+                                                     [disabled]="pageLoading"
                                                      (ngModelChange)="changeType()" name="context"/>
           Communities </label>
 
@@ -44,7 +50,8 @@
                                                                                             d="M14,14 L18,18 L14,14 Z"></path></svg>
           </span>
           <input type="text" class=" uk-input uk-width-medium form-control" placeholder="Search links"
-                 aria-describedby="sizing-addon2" [(ngModel)]="inputkeyword" (keyup)="changekeyword()"
+                 aria-describedby="sizing-addon2"
+                 [(ngModel)]="inputkeyword" (keyup)="changekeyword()"
                  name="claims-keyword">
           <span *ngIf="inputkeyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;"
                 (click)="inputkeyword=''; changekeyword();">
@@ -67,7 +74,7 @@
       <div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
         <span> Results per page
           <select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select" [(ngModel)]="size" name="select_size"
-                  (ngModelChange)="changeSize()">
+                  (ngModelChange)="changeSize()" [disabled]="pageLoading">
             <option *ngFor="let size of sizes" [value]="size">{{size}}</option>
           </select>
         </span>
@@ -81,6 +88,7 @@
         </div>
         <div *ngIf="resultsNum" class="uk-width-1-2 ">
           <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
+                          [loading]="pageLoading"
                           (pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
         </div>
       </div>
@@ -122,8 +130,6 @@
     <div *ngIf="userValidMessage.length > 0 " class="uk-alert uk-alert-danger ">
       User session is not valid. Please login again.
     </div>
-
-
     <div *ngIf="claims && claims.length == 0">
       <div class="uk-alert uk-alert-primary ">No entries found.</div>
     </div>
@@ -156,7 +162,9 @@
           <th>Status
             <span class="uk-icon"
                   [attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>Status declares if the link information is available in the portal and the APIs<br> If it is pending, the information will be added in the next content provision workflow.</div>'">
-              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
+              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="info" ratio="1"><path
+                d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
+                fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
             </span>
           </th>
         </tr>
@@ -196,8 +204,9 @@
         </tbody>
       </table>
     </div>
-    <div class="portal-hr uk-grid">
+    <div class="portal-hr uk-margin-top">
-      <div *ngIf="resultsNum>0" class="uk-width-1-2 uk-padding-remove-left">
+      <div class="uk-grid ">
+        <div *ngIf="resultsNum>0" class="uk-width-1-2">
           <span class="portal-color">{{resultsNum|number}}</span> links, page <span
           class="portal-color">{{page | number}}</span> of <span
           class="portal-color">{{totalPages(resultsNum)|number}}</span>
@@ -208,6 +217,7 @@
                           (pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
         </div>
       </div>
+    </div>
 
   </div>
   <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"

claims/claim-utils/displayClaims/displayClaims.component.ts

@@ -44,6 +44,7 @@ export class DisplayClaimsComponent {
   keyword: string; // the keyword string to give to the request as parameter
   inputkeyword: string; // the string written in the input field (keyword=inputkeyword when its length is bigger than 3 and the user stops typing)
   types = ["All", "Project", "Context", "Result", "User"];
+  pageLoading:boolean = false;
   @Input() fetchBy: string;
   @Input() fetchId: string;
   @Input() user: User;
@@ -157,7 +158,7 @@ export class DisplayClaimsComponent {
   }
 
   getClaims() {
-    if (!this.user) {
+    if (!Session.isLoggedIn()) {
       this.userValidMessage = "User session has expired. Please login again.";
       this._router.navigate(['/user-info'], {
         queryParams: {
@@ -173,10 +174,12 @@ export class DisplayClaimsComponent {
       for (let type of this.entityTypes) {
         types += (types.length > 0 ? '&' : '') + "types=" + type;
       }
+      this.pageLoading = true;
       if (this.fetchBy == "Project") {
         this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
           data => {
             this.manageAPIData(data);
+            this.pageLoading = false;
           },
           err => {
             this.handleErrors(err);
@@ -187,9 +190,11 @@ export class DisplayClaimsComponent {
         this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
           data => {
             this.manageAPIData(data);
+            this.pageLoading = false;
           },
           err => {
             this.handleErrors(err);
+            this.pageLoading = false;
             DisplayClaimsComponent.handleError("Error getting claims for user with id: " + this.fetchId, err);
           }
         );
@@ -197,9 +202,11 @@ export class DisplayClaimsComponent {
         this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
           data => {
             this.manageAPIData(data);
+            this.pageLoading = false;
           },
           err => {
             this.handleErrors(err);
+            this.pageLoading = false;
             DisplayClaimsComponent.handleError("Error getting claims for entity with id: " + this.fetchId, err);
           }
         );
@@ -207,9 +214,11 @@ export class DisplayClaimsComponent {
         this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
           data => {
             this.manageAPIData(data);
+            this.pageLoading = false;
           },
           err => {
             this.handleErrors(err);
+            this.pageLoading = false;
             DisplayClaimsComponent.handleError("Error getting claims for context with id: " + this.fetchId, err);
           }
         );
@@ -217,9 +226,11 @@ export class DisplayClaimsComponent {
         this._claimService.getClaims(this.size, this.page, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
           data => {
               this.manageAPIData(data);
+              this.pageLoading = false;
           },
           err => {
             this.handleErrors(err);
+            this.pageLoading = false;
             DisplayClaimsComponent.handleError("Error getting claims", err);
           }
         );

claims/myClaims/myClaims.component.ts

@@ -10,8 +10,8 @@ import {UserManagementService} from "../../services/user-management.service";
       <div class="uk-grid" >
         <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-          <div class="uk-container uk-margin-top">
+          <div class="uk-container">
-            <div class="uk-h5 uk-text-bold">
+            <div class="uk-article-title custom-article-title">
               My links
             </div>
 

utils/pagingFormatterNoLoad.component.ts

@@ -7,7 +7,7 @@ import{EnvProperties} from './properties/env-properties';
 @Component({
   selector: 'paging-no-load',
   template: `
-   <ul  *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " class="uk-pagination">
+   <ul disabled  *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " class="uk-pagination">
 
    <li *ngIf=" currentPage  > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
        <span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>
@@ -45,6 +45,8 @@ export class pagingFormatterNoLoad {
 
   private limit: number;
   properties:EnvProperties;
+  @Input()
+  public loading:boolean = false;
 
   constructor (private route: ActivatedRoute) {
    }
@@ -91,10 +93,11 @@ export class pagingFormatterNoLoad {
    });
   }
   onPage(pageNum: number){
-
+    if(!this.loading) {
       this.currentPage = pageNum;
       this.pageChange.emit({
         value: this.currentPage
       });
     }
   }
+}