[Library | Trunk]: Add paging and search on role users

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

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

@@ -2,25 +2,31 @@
   <div header>
     <ng-content></ng-content>
     <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
-      <div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
+      <div class="uk-width-expand@m  uk-width-1-1 uk-flex uk-flex-left@m uk-flex-center">
         <ul class="uk-subnav uk-subnav-pill">
-          <li [class.uk-active]="showActive" (click)="showActive = true">
+          <li [class.uk-active]="showCurrent" (click)="showCurrent = true">
             <a class="uk-text-capitalize">{{role}}s</a>
           </li>
-          <li [class.uk-active]="!showActive" (click)="showActive = false">
+          <li [class.uk-active]="!showCurrent" (click)="showCurrent = false">
             <a>Pending {{role}}s</a>
           </li>
         </ul>
       </div>
       <div [class.uk-invisible]="loadActive || loadPending"
-           class="uk-width-1-5@l uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
+           class="uk-width-auto@m uk-width-1-1 uk-child-width-auto@m uk-child-width-1-1 uk-grid uk-flex-right@m uk-flex-center" uk-grid>
-        <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
+        <div *ngIf="showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search ' + role + 's'"
+             [bordered]="true" colorClass="uk-text-secondary">
+        </div>
+        <div *ngIf="!showCurrent" search-input [control]="filterForm.get('active')"  [showSearch]="false" [placeholder]="'Search invitations'"
+             [bordered]="true" colorClass="uk-text-secondary">
+        </div>
+        <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center" (click)="openInviteModal()">
           <button class="uk-icon-button large uk-button-secondary">
             <icon name="person_add"></icon>
           </button>
           <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Invite {{role}}</button>
         </a>
-        <a *ngIf="!exists && isPortalAdmin" class="uk-text-uppercase uk-flex uk-flex-middle"
+        <a *ngIf="!exists && isPortalAdmin" class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center"
            (click)="openCreateRoleModal()">
           <button class="uk-icon-button large uk-button-secondary">
             <icon name="person_add"></icon>
@@ -35,34 +41,54 @@
       <loading></loading>
     </div>
     <div *ngIf="!loadActive && !loadPending">
-      <div *ngIf="(showActive && active.length == 0) || (!showActive && pending.length == 0)"
+      <div *ngIf="(showCurrent && showActive.length == 0) || (!showCurrent && showPending.length == 0)"
            class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
-        <div *ngIf="showActive">No {{role}}s found</div>
+        <div *ngIf="showCurrent">No {{role}}s found</div>
-        <div *ngIf="!showActive">No pending {{role}} invitations found</div>
+        <div *ngIf="!showCurrent">No pending {{role}} invitations found</div>
       </div>
-      <div *ngIf="(showActive && active.length > 0) || (!showActive && pending.length > 0)">
+      <div *ngIf="(showCurrent && showActive.length > 0) || (!showCurrent && showPending.length > 0)">
+        <no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(role + 's'):role"
+                        (pageChange)="updateActivePage($event)"
+                        [page]="activePage" [pageSize]="pageSize"
+                        [totalResults]="showActive.length">
+        </no-load-paging>
+        <no-load-paging *ngIf="!showCurrent" [type]="role + ' ' + (showPending.length > 1?'invitations':'invitation')"
+                        (pageChange)="updatePendingPage($event)"
+                        [page]="pendingPage" [pageSize]="pageSize"
+                        [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 (showActive)?active:pending">
+             *ngFor="let item of (showCurrent)?(showActive.slice((activePage - 1)*pageSize, activePage*pageSize)):(showPending.slice((pendingPage - 1)*pageSize, pendingPage*pageSize))">
           <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">
                 <span class="uk-text-muted">Email: </span>
-                <span class="uk-text-bold">{{(showActive) ? item.email : item}}</span>
+                <span class="uk-text-bold">{{(showCurrent) ? item.email : item}}</span>
               </div>
             </div>
-            <div *ngIf="isCurator || !showActive" class="uk-width-auto@m uk-width-1-1">
+            <div *ngIf="isCurator || !showCurrent" class="uk-width-auto@m uk-width-1-1">
               <div class="uk-width-1-1 uk-flex uk-flex-center">
                 <div class="uk-padding-small uk-padding-remove-horizontal">
                   <button (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle"  [disabled]="role === 'member' && item.isManager"
                           [attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':null">
                     <icon name="remove_circle_outline" [flex]="true"></icon>
-                    <span class="uk-margin-small-left">{{showActive ? ('Remove ' + role) : 'Cancel invitation'}}</span>
+                    <span class="uk-margin-small-left">{{showCurrent ? ('Remove ' + role) : 'Cancel invitation'}}</span>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(role + 's'):role"
+                        (pageChange)="updateActivePage($event)"
+                        [page]="activePage" [pageSize]="pageSize"
+                        [totalResults]="showActive.length">
+        </no-load-paging>
+        <no-load-paging *ngIf="!showCurrent" [type]="role + ' ' + (showPending.length > 1?'invitations':'invitation')"
+                        (pageChange)="updatePendingPage($event)"
+                        [page]="pendingPage" [pageSize]="pageSize"
+                        [totalResults]="showPending.length">
+        </no-load-paging>
       </div>
     </div>
   </div>

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

@@ -37,9 +37,11 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   public notificationFn: Function;
   public user: User = null;
   public active: any[];
+  public showActive: any[] = [];
   public managers: any[];
   public pending: any[];
-  public showActive: boolean = true;
+  public showPending: any[] = [];
+  public showCurrent: boolean = true;
   public subs: any[] = [];
   public loadActive: boolean = true;
   public loadPending: boolean = true;
@@ -48,6 +50,12 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   public properties: EnvProperties = properties;
   public exists: boolean = true;
   public roleFb: FormGroup;
+  /** Paging */
+  activePage: number = 1;
+  pendingPage: number = 1;
+  pageSize: number = 5;
+  /** Search */
+  filterForm: FormGroup;
   @ViewChild('inviteModal') inviteModal: AlertModal;
   @ViewChild('deleteModal') deleteModal: AlertModal;
   @ViewChild('deletePendingModal') deletePendingModal: AlertModal;
@@ -61,6 +69,16 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   }
   
   ngOnInit() {
+    this.filterForm = this.fb.group({
+      active: this.fb.control(''),
+      pending: this.fb.control('')
+    });
+    this.subs.push(this.filterForm.get('active').valueChanges.subscribe(value => {
+      this.filterActiveBySearch(value);
+    }));
+    this.subs.push(this.filterForm.get('pending').valueChanges.subscribe(value => {
+      this.filterPendingBySearch(value);
+    }));
    this.updateLists();
    this.userManagementService.getUserInfo().subscribe(user => {
      this.user = user;
@@ -86,7 +104,6 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
   
-  
   updateLists() {
     this.loadActive = true;
     this.loadPending = true;
@@ -98,11 +115,13 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
           this.active.forEach(user => {
             user['isManager'] = this.managers.find(manager => manager.email === user.email);
           });
+          this.filterActiveBySearch(this.filterForm.value.active);
           this.loadActive = false;
           this.exists = true;
         }))
       } else {
         this.active = users;
+        this.filterActiveBySearch(this.filterForm.value.active);
         this.loadActive = false;
         this.exists = true;
       }
@@ -115,6 +134,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     }));
     this.subs.push(this.userRegistryService.getPending(this.type, this.id, this.role).subscribe(users => {
       this.pending = users;
+      this.filterPendingBySearch(this.filterForm.value.pending);
       this.loadPending = false;
     }, error => {
       this.pending = [];
@@ -123,7 +143,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   }
   
   openDeleteModal(item: any) {
-    if (this.showActive) {
+    if (this.showCurrent) {
       this.selectedUser = item.email;
       this.deleteModal.alertTitle = 'Delete ' + this.role;
       this.deleteModal.open();
@@ -160,6 +180,7 @@ 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);
+      this.filterActiveBySearch(this.filterForm.value.active);
       this.userManagementService.updateUserInfo();
       UIkit.notification(this.selectedUser + ' <b>is no longer</b> ' + this.role + ' of ' + this.name + ' Dashboard', {
         status: 'success',
@@ -181,6 +202,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     this.loadPending = true;
     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);
       UIkit.notification(StringUtils.capitalize(this.role) + ' invitation to ' + this.selectedUser + ' has been <b>canceled</b>', {
         status: 'success',
         timeout: 6000,
@@ -198,7 +220,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   }
   
   invite() {
-    this.showActive = false;
+    this.showCurrent = false;
     this.loadPending = true;
     this.selectedUser = this.invited.value;
     let details = {
@@ -208,6 +230,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.filterPendingBySearch(this.filterForm.value.pending);
       }
       if(this.notificationFn) {
         this.subs.push(this.notificationService.sendNotification(this.notificationFn(this.name, this.invited.value, this.role, invitation)).subscribe(notification => {
@@ -269,4 +292,22 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   public get isPortalAdmin(): boolean {
     return !!Session.isPortalAdministrator(this.user);
   }
+  
+  updateActivePage(event: any) {
+    this.activePage = event.value;
+  }
+  
+  updatePendingPage(event: any) {
+    this.pendingPage = event.value;
+  }
+  
+  private filterActiveBySearch(value: any) {
+    this.showActive = this.active.filter(active => !value || active.email.includes(value));
+    this.activePage = 1;
+  }
+  
+  private filterPendingBySearch(value: any) {
+    this.showPending = this.pending.filter(pending => !value || pending.includes(value));
+    this.pendingPage = 1;
+  }
 }

dashboard/users/role-users/role-users.module.ts

@@ -11,9 +11,11 @@ import {InputModule} from "../../../sharedComponents/input/input.module";
 import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
 import {SafeHtmlPipeModule} from "../../../utils/pipes/safeHTMLPipe.module";
 import {NotifyFormModule} from "../../../notifications/notify-form/notify-form.module";
+import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module";
+import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module";
 
 @NgModule({
-  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule, NotifyFormModule],
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule, NotifyFormModule, NoLoadPaging, SearchInputModule],
   declarations: [RoleUsersComponent],
   exports: [RoleUsersComponent]
 })

dashboard/users/subscribers/subscribers.component.html

@@ -3,8 +3,9 @@
     <ng-content></ng-content>
     <div [class.uk-invisible]="loading"
          class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-      <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search subscribers"
+      <div search-input [control]="filterForm.get('keyword')" [showSearch]="false" placeholder="Search subscribers"
-           [bordered]="true" colorClass="uk-text-secondary"></div>
+           [bordered]="true" colorClass="uk-text-secondary">
+      </div>
       <div>
         <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle"
            [class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()">
@@ -51,8 +52,9 @@
               <div class="uk-width-auto@m uk-width-1-1">
                 <div class="uk-width-1-1 uk-flex uk-flex-center">
                   <div class="uk-padding-small uk-padding-remove-horizontal">
-                    <button (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle" [disabled]="item.isManager"
+                    <button (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle"
-                       [attr.uk-tooltip]="item.isManager?'This user is a manager and cannot be removed.':null">
+                            [disabled]="item.isManager"
+                            [attr.uk-tooltip]="item.isManager?'This user is a manager and cannot be removed.':null">
                       <icon name="remove_circle_outline" [flex]="true"></icon>
                       <span class="uk-margin-small-left">Remove subscriber</span>
                     </button>

dashboard/users/subscribers/subscribers.component.ts

@@ -192,8 +192,8 @@ export class SubscribersComponent implements OnInit, OnDestroy, OnChanges {
     return Session.isPortalAdministrator(this.user) || Session.isCurator(this.type, this.user);
   }
   
-  public updatePage($event) {
+  public updatePage(event) {
-    this.page = $event.value;
+    this.page = event.value;
   }
   
   private filterBySearch(value: any) {