Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

show keycloak username instead of id

Browse Source
This commit is contained in:
Dan Percic 2021-06-30 20:49:41 +03:00 committed by Adina Țeudan
parent d50d165e96
commit 29f16d020b
4 changed files with 73 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -49,22 +49,19 @@
}}
</span>
<ng-container *ngIf="areSomeEntitiesSelected && !loading">
<redaction-circle-button
(action)="bulkDelete()"
[disabled]="!canDeleteSelected"
[tooltip]="
canDeleteSelected
? 'user-listing.bulk.delete'
: 'user-listing.bulk.delete-disabled'
"
icon="red:trash"
tooltipPosition="after"
type="dark-bg"
></redaction-circle-button>
</ng-container>
<mat-spinner *ngIf="loading" diameter="15"></mat-spinner>
<redaction-circle-button
(action)="bulkDelete()"
*ngIf="areSomeEntitiesSelected"
[disabled]="!canDeleteSelected"
[tooltip]="
canDeleteSelected
? 'user-listing.bulk.delete'
: 'user-listing.bulk.delete-disabled'
"
icon="red:trash"
tooltipPosition="after"
type="dark-bg"
></redaction-circle-button>
</div>
<div class="table-header" redactionSyncWidth="table-item">
@ -99,7 +96,10 @@
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<!-- Table lines -->
<div *cdkVirtualFor="let user of displayedEntities" class="table-item">
<div
*cdkVirtualFor="let user of displayedEntities; trackBy: trackById"
class="table-item"
>
<div (click)="toggleEntitySelected($event, user)" class="selection-column">
<redaction-round-checkbox
[active]="isEntitySelected(user)"
@ -129,16 +129,14 @@
icon="red:edit"
tooltip="user-listing.action.edit"
type="dark-bg"
>
</redaction-circle-button>
></redaction-circle-button>
<redaction-circle-button
(action)="openDeleteUserDialog([user], $event)"
[disabled]="user.userId === userService.userId"
icon="red:trash"
tooltip="user-listing.action.delete"
type="dark-bg"
>
</redaction-circle-button>
></redaction-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>
@ -155,7 +153,3 @@
</div>
</div>
</section>
<redaction-full-page-loading-indicator
[displayed]="!viewReady"
></redaction-full-page-loading-indicator>

42
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
View File

@ -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<User> implements OnInit {
viewReady = false;
loading = false;
collapsedDetails = false;
chartData: DoughnutChartConfig[] = [];
protected readonly _selectionKey = 'userId';
@ -27,6 +25,7 @@ export class UserListingScreenComponent extends BaseListingComponent<User> 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<User> 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<User> 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<User> 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<User> imple
this.allEntities = await this._userControllerService.getAllUsers().toPromise();
this._executeSearchImmediately();
this._computeStats();
this.viewReady = true;
this.loading = false;
this._loadingService.stop();
}
private _computeStats() {

4
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
View File

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

86
apps/red-ui/src/app/services/user.service.ts
View File

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