From b9d46c5bd9357a7147abc294c9a85e43eabdbc28 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Sun, 28 Mar 2021 11:07:48 +0000 Subject: [PATCH] [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 --- .../role-users/role-users.component.html | 54 ++++++++++++++----- .../users/role-users/role-users.component.ts | 49 +++++++++++++++-- .../users/role-users/role-users.module.ts | 4 +- .../subscribers/subscribers.component.html | 10 ++-- .../subscribers/subscribers.component.ts | 4 +- 5 files changed, 96 insertions(+), 25 deletions(-) diff --git a/dashboard/users/role-users/role-users.component.html b/dashboard/users/role-users/role-users.component.html index 9f576468..bc472ecc 100644 --- a/dashboard/users/role-users/role-users.component.html +++ b/dashboard/users/role-users/role-users.component.html @@ -2,25 +2,31 @@
-
+
- + 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> +
+
+
+
+ -
-
-
No {{role}}s found
-
No pending {{role}} invitations found
+
No {{role}}s found
+
No pending {{role}} invitations found
-
+
+ + + +
+ *ngFor="let item of (showCurrent)?(showActive.slice((activePage - 1)*pageSize, activePage*pageSize)):(showPending.slice((pendingPage - 1)*pageSize, pendingPage*pageSize))">
Email: - {{(showActive) ? item.email : item}} + {{(showCurrent) ? item.email : item}}
-
+
+ + + +
diff --git a/dashboard/users/role-users/role-users.component.ts b/dashboard/users/role-users/role-users.component.ts index c4a0de43..dc690516 100644 --- a/dashboard/users/role-users/role-users.component.ts +++ b/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 + ' is no longer ' + 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 canceled', { 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; + } } diff --git a/dashboard/users/role-users/role-users.module.ts b/dashboard/users/role-users/role-users.module.ts index af01d69a..e3502093 100644 --- a/dashboard/users/role-users/role-users.module.ts +++ b/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] }) diff --git a/dashboard/users/subscribers/subscribers.component.html b/dashboard/users/subscribers/subscribers.component.html index 62851648..fa661d9c 100644 --- a/dashboard/users/subscribers/subscribers.component.html +++ b/dashboard/users/subscribers/subscribers.component.html @@ -3,8 +3,9 @@
-
+
+