[Library | Trunk]: Improve paging on users

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

dashboard/users/role-users/role-users.component.html

@@ -58,7 +58,7 @@
                         [totalResults]="showPending.length">
         </no-load-paging>
         <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"
-             *ngFor="let item of (showCurrent)?(showActive.slice((activePage - 1)*pageSize, activePage*pageSize)):(showPending.slice((pendingPage - 1)*pageSize, pendingPage*pageSize))">
+             *ngFor="let item of (showCurrent)?(currentActivePage):(currentPendingPage)">
           <div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid>
             <div class="uk-width-expand@m uk-width-1-1">
               <div class="uk-padding-small uk-padding-remove-horizontal">

dashboard/users/role-users/role-users.component.ts

@@ -10,6 +10,7 @@ import {UserManagementService} from "../../../services/user-management.service";
 import {Router} from "@angular/router";
 import {StringUtils} from "../../../utils/string-utils.class";
 import {NotificationService} from "../../../notifications/notification.service";
+import {Affiliation} from "../../../utils/entities/CuratorInfo";
 
 declare var UIkit;
 
@@ -147,6 +148,22 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     }));
   }
   
+  get currentActivePage(): any[] {
+    if (this.active) {
+      return this.active.slice((this.activePage - 1) * this.pageSize, this.activePage * this.pageSize);
+    } else {
+      return [];
+    }
+  }
+  
+  get currentPendingPage(): any[] {
+    if (this.pending) {
+      return this.pending.slice((this.pendingPage - 1) * this.pageSize, this.pendingPage * this.pageSize);
+    } else {
+      return [];
+    }
+  }
+  
   openDeleteModal(item: any) {
     if (this.showCurrent) {
       this.selectedUser = item.email;
@@ -185,6 +202,9 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     this.loadActive = true;
     this.subs.push(this.userRegistryService.remove(this.type, this.id, this.selectedUser, this.role).subscribe(() => {
       this.active = this.active.filter(user => user.email != this.selectedUser);
+      if(this.currentActivePage.length === 0) {
+        this.activePage = 1;
+      }
       this.filterActiveBySearch(this.filterForm.value.active);
       this.userManagementService.updateUserInfo();
       UIkit.notification(this.selectedUser + ' <b>is no longer</b> ' + this.role + ' of ' + this.name + ' Dashboard', {
@@ -208,6 +228,9 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     this.subs.push(this.userRegistryService.cancelInvitation(this.type, this.id, this.selectedUser, this.role).subscribe(() => {
       this.pending = this.pending.filter(user => user != this.selectedUser);
       this.filterPendingBySearch(this.filterForm.value.pending);
+      if(this.currentPendingPage.length === 0) {
+        this.pendingPage = 1;
+      }
       UIkit.notification(StringUtils.capitalize(this.role) + ' invitation to ' + this.selectedUser + ' has been <b>canceled</b>', {
         status: 'success',
         timeout: 6000,
@@ -235,6 +258,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     this.subs.push(this.userRegistryService.invite(this.type, this.id, details, this.role).subscribe(invitation => {
       if (!this.pending.includes(this.invited.value)) {
         this.pending.push(this.invited.value);
+        this.pendingPage =  Math.ceil(this.pending.length/this.pageSize);
         this.filterPendingBySearch(this.filterForm.value.pending);
       }
       if (this.notificationFn) {

dashboard/users/subscribers/subscribers.component.html

@@ -41,7 +41,7 @@
         </no-load-paging>
         <div class="uk-margin-top uk-margin-medium-bottom">
           <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"
-               *ngFor="let item of showSubscribers.slice((page - 1)*pageSize, page*pageSize)">
+               *ngFor="let item of currentPage">
             <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
               <div class="uk-width-expand@m uk-width-1-1">
                 <div class="uk-padding-small uk-padding-remove-horizontal">

dashboard/users/subscribers/subscribers.component.ts

@@ -9,7 +9,7 @@ import {
   ViewChild
 } from '@angular/core';
 import {Subscription} from 'rxjs/Rx';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {AlertModal} from "../../../utils/modal/alert";
 import {UserRegistryService} from "../../../services/user-registry.service";
 import {EnvProperties} from "../../../utils/properties/env-properties";
@@ -93,6 +93,14 @@ export class SubscribersComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
   
+  get currentPage(): any[] {
+    if (this.showSubscribers) {
+      return this.showSubscribers.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
+    } else {
+      return [];
+    }
+  }
+  
   updateList() {
     this.loading = true;
     let data = zip(this.userRegistryService.getActiveEmail(this.type, this.id, 'manager'),
@@ -151,6 +159,9 @@ export class SubscribersComponent implements OnInit, OnDestroy, OnChanges {
     this.userRegistryService.remove(this.type, this.id, this.selectedUser, 'member').subscribe(() => {
       this.subscribers = this.subscribers.filter(user => user.email != this.selectedUser);
       this.filterBySearch(this.filterForm.value.keyword);
+      if(this.currentPage.length === 0) {
+        this.page = 1;
+      }
       this.userManagementService.updateUserInfo();
       UIkit.notification(this.selectedUser + ' <b>is no longer</b> subscribed to ' + this.name + ' Dashboard', {
         status: 'success',