diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html index a23e1ff7d..4a80a9e5e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html @@ -49,22 +49,19 @@ }} - - - - - +
@@ -99,7 +96,10 @@ -
+
- + > - + >
@@ -155,7 +153,3 @@
- - diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts index 0c4e8cc6f..6ae4a6376 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts @@ -7,15 +7,13 @@ import { TranslateService } from '@ngx-translate/core'; import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; import { TranslateChartService } from '@services/translate-chart.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; +import { LoadingService } from '../../../../services/loading.service'; @Component({ - selector: 'redaction-user-listing-screen', templateUrl: './user-listing-screen.component.html', styleUrls: ['./user-listing-screen.component.scss'] }) export class UserListingScreenComponent extends BaseListingComponent implements OnInit { - viewReady = false; - loading = false; collapsedDetails = false; chartData: DoughnutChartConfig[] = []; protected readonly _selectionKey = 'userId'; @@ -27,6 +25,7 @@ export class UserListingScreenComponent extends BaseListingComponent imple private readonly _adminDialogService: AdminDialogService, private readonly _userControllerService: UserControllerService, private readonly _translateChartService: TranslateChartService, + private readonly _loadingService: LoadingService, protected readonly _injector: Injector ) { super(_injector); @@ -44,25 +43,27 @@ export class UserListingScreenComponent extends BaseListingComponent imple $event.stopPropagation(); this._adminDialogService.openAddEditUserDialog(user, async result => { if (result === 'DELETE') { - this.openDeleteUserDialog([user]); - } else { - this.loading = true; - if (result.action === 'CREATE') { - await this._userControllerService.createUser(result.user).toPromise(); - } else if (result.action === 'UPDATE') { - await this._userControllerService - .updateProfile(result.user, user.userId) - .toPromise(); - } - await this._loadData(); + return this.openDeleteUserDialog([user]); } + + this._loadingService.start(); + + if (result.action === 'CREATE') { + await this._userControllerService.createUser(result.user).toPromise(); + } else if (result.action === 'UPDATE') { + await this._userControllerService + .updateProfile(result.user, user.userId) + .toPromise(); + } + + await this._loadData(); }); } openDeleteUserDialog(users: User[], $event?: MouseEvent) { $event?.stopPropagation(); this._adminDialogService.openConfirmDeleteUsersDialog(users, async () => { - this.loading = true; + this._loadingService.start(); await this._userControllerService.deleteUsers(users.map(u => u.userId)).toPromise(); await this._loadData(); }); @@ -76,7 +77,7 @@ export class UserListingScreenComponent extends BaseListingComponent imple } async toggleActive(user: User) { - this.loading = true; + this._loadingService.start(); user.roles = this.userService.isActive(user) ? [] : ['RED_USER']; await this._userControllerService.addRoleToUsers(user.roles, user.userId).toPromise(); await this._loadData(); @@ -87,7 +88,11 @@ export class UserListingScreenComponent extends BaseListingComponent imple } async bulkDelete() { - this.openDeleteUserDialog(this.allEntities.filter(u => this.isEntitySelected(u))); + this.openDeleteUserDialog(this.allEntities.filter(u => this.isSelected(u))); + } + + trackById(index: number, user: User) { + return user.userId; } protected _searchField(user: any): string { @@ -98,8 +103,7 @@ export class UserListingScreenComponent extends BaseListingComponent imple this.allEntities = await this._userControllerService.getAllUsers().toPromise(); this._executeSearchImmediately(); this._computeStats(); - this.viewReady = true; - this.loading = false; + this._loadingService.stop(); } private _computeStats() { diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts index 65635feaf..0771321a9 100644 --- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts @@ -68,9 +68,7 @@ export class InitialsAvatarComponent implements OnChanges { } private _getInitials(): string { - if (!this.user) { - return '?'; - } + if (!this.user) return '?'; return this._userService .getName(this.user) diff --git a/apps/red-ui/src/app/services/user.service.ts b/apps/red-ui/src/app/services/user.service.ts index 624f90dc1..b1eba0bee 100644 --- a/apps/red-ui/src/app/services/user.service.ts +++ b/apps/red-ui/src/app/services/user.service.ts @@ -18,13 +18,11 @@ export class UserWrapper { constructor(private _currentUser: KeycloakProfile, public roles: string[], public id: string) { this.name = - this._currentUser.firstName && this._currentUser.lastName - ? `${this._currentUser.firstName} ${this._currentUser.lastName}` - : this._currentUser.username; + this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : this.username; } get username() { - return this.email || this.userId; + return this._currentUser.username || this.email; } get userId() { @@ -69,14 +67,22 @@ export class UserWrapper { }) export class UserService { private _currentUser: UserWrapper; + private _allUsers: User[]; constructor( - @Inject(BASE_HREF) readonly baseHref: string, + @Inject(BASE_HREF) private readonly _baseHref: string, private readonly _keycloakService: KeycloakService, private readonly _userControllerService: UserControllerService ) {} - private _allUsers: User[]; + private static _hasAnyRedRole(user: User) { + return ( + user.roles.indexOf('RED_USER') >= 0 || + user.roles.indexOf('RED_MANAGER') >= 0 || + user.roles.indexOf('RED_ADMIN') >= 0 || + user.roles.indexOf('RED_USER_ADMIN') >= 0 + ); + } get allUsers(): User[] { return this._allUsers; @@ -101,8 +107,8 @@ export class UserService { } logout() { - wipeCaches(); - this._keycloakService.logout(window.location.origin + this.baseHref); + wipeCaches().then(); + this._keycloakService.logout(window.location.origin + this._baseHref).then(); } async loadAllUsersIfNecessary() { @@ -113,7 +119,7 @@ export class UserService { async loadAllUsers() { const allUsers = await this._userControllerService.getUsers().toPromise(); - this._allUsers = allUsers.filter(u => this._hasAnyRedRole(u)); + this._allUsers = allUsers.filter(u => UserService._hasAnyRedRole(u)); return allUsers; } @@ -137,70 +143,38 @@ export class UserService { } getName(user?: User) { - return user - ? user.firstName && user.lastName - ? `${user.firstName} ${user.lastName}` - : user.username - : undefined; + return user?.firstName && user?.lastName + ? `${user.firstName} ${user.lastName}` + : user?.username; } - isManager(user?: User): boolean { - if (!user) { - user = this.user; - } + isManager(user: User | UserWrapper = this.user): boolean { return user.roles.indexOf('RED_MANAGER') >= 0; } - isUser(user?: User): boolean { - if (!user) { - user = this.user; - } + isUser(user: User | UserWrapper = this.user): boolean { return user.roles?.indexOf('RED_USER') >= 0; } - isUserAdmin(user?: User): boolean { - if (!user) { - user = this.user; - } + isUserAdmin(user: User | UserWrapper = this.user): boolean { return user.roles?.indexOf('RED_USER_ADMIN') >= 0; } - isAdmin(user?: User): boolean { - if (!user) { - user = this.user; - } + isAdmin(user: User | UserWrapper = this.user): boolean { return user.roles?.indexOf('RED_ADMIN') >= 0; } - isActive(user?: User): boolean { - if (!user) { - user = this.user; - } + isActive(user: User | UserWrapper = this.user): boolean { return user.roles?.length > 0; } - hasAnyRole(requiredRoles: string[], user?: User) { - if (!user) { - user = this.user; - } - if (requiredRoles && requiredRoles.length > 0) { - for (const role of requiredRoles) { - if (user.roles.indexOf(role) >= 0) { - return true; - } - } - return false; - } else { - return true; - } - } + hasAnyRole(requiredRoles: string[], user: User | UserWrapper = this.user) { + if (requiredRoles?.length > 0) { + for (const role of requiredRoles) if (user.roles.indexOf(role) >= 0) return true; - private _hasAnyRedRole(u: User) { - return ( - u.roles.indexOf('RED_USER') >= 0 || - u.roles.indexOf('RED_MANAGER') >= 0 || - u.roles.indexOf('RED_ADMIN') >= 0 || - u.roles.indexOf('RED_USER_ADMIN') >= 0 - ); + return false; + } + + return true; } }