MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
This commit is contained in:
k.triantafyllou 2021-03-28 11:07:48 +00:00
parent d856aadf61
commit b9d46c5bd9
5 changed files with 96 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
dashboard/users/role-users/role-users.component.html
View File

@ -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">
<a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
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>
<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="!showActive">No pending {{role}} invitations found</div>
<div *ngIf="showCurrent">No {{role}}s 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>

49
dashboard/users/role-users/role-users.component.ts
View File

@ -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;
}
}

4
dashboard/users/role-users/role-users.module.ts
View File

@ -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]
})

8
dashboard/users/subscribers/subscribers.component.html
View File

@ -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"
[bordered]="true" colorClass="uk-text-secondary"></div>
<div search-input [control]="filterForm.get('keyword')" [showSearch]="false" placeholder="Search subscribers"
[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,7 +52,8 @@
<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"
[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>

4
dashboard/users/subscribers/subscribers.component.ts
View File

@ -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) {
this.page = $event.value;
public updatePage(event) {
this.page = event.value;
}
private filterBySearch(value: any) {