[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
parent
d856aadf61
commit
b9d46c5bd9
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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,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"
|
||||
[attr.uk-tooltip]="item.isManager?'This user is a manager and cannot be removed.':null">
|
||||
<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>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue