Skip to content
Snippets Groups Projects
Commit 612ad693 authored by kbeyro's avatar kbeyro
Browse files

update user-list views

parent c597a51f
No related branches found
No related tags found
No related merge requests found
<div class="col-sm-12" *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']">
<nmaas-userslist *ngIf="!isInAddToDomainMode" [users]="allUsers" [allowedModes]="[ComponentMode.VIEW, ComponentMode.DELETE]"
<div class="col-sm-12" *roles="['ROLE_SYSTEM_ADMIN']">
<nmaas-userslist *ngIf="!isInAddToDomainMode" [users]="allUsers" [allowedModes]="[ComponentMode.VIEW, ComponentMode.DELETE]" (onUserRoleChange)="onUserRoleChange($event)"
(onView)="onUserView($event)" (onModeChange)="onModeChange($event)" (onDelete)="onUserDelete($event)" (onRemoveFromDomain)="onRemoveRole($event)">
</nmaas-userslist>
<nmaas-userslist *ngIf="isInAddToDomainMode" [users]="usersToAdd" [allowedModes]="[ComponentMode.VIEW, ComponentMode.EDIT]"
<nmaas-userslist *ngIf="isInAddToDomainMode" [users]="usersToAdd" [allowedModes]="[ComponentMode.VIEW, ComponentMode.EDIT]" (onUserRoleChange)="onUserRoleChange($event)"
(onView)="onUserView($event)" (onModeChange)="onModeChange($event)" (onAddToDomain)="onUserAddToDomain($event)">
</nmaas-userslist>
</div>
<div class="col-sm-12" *roles="['ROLE_DOMAIN_ADMIN']">
<nmaas-userslist *ngIf="!isInAddToDomainMode" [users]="allUsers" [allowedModes]="[ComponentMode.VIEW, ComponentMode.DELETE]" [domainMode]="true" (onUserRoleChange)="onUserRoleChange($event)"
(onView)="onUserView($event)" (onModeChange)="onModeChange($event)" (onDelete)="onUserDelete($event)" (onRemoveFromDomain)="onRemoveRole($event)">
</nmaas-userslist>
<nmaas-userslist *ngIf="isInAddToDomainMode" [users]="usersToAdd" [allowedModes]="[ComponentMode.VIEW, ComponentMode.EDIT]" [domainMode]="true"
(onView)="onUserView($event)" (onModeChange)="onModeChange($event)" (onAddToDomain)="onUserAddToDomain($event)" (onUserRoleChange)="onUserRoleChange($event)">
</nmaas-userslist>
</div>
......@@ -12,124 +12,123 @@ import {Observable, of} from 'rxjs';
import {map} from 'rxjs/operators';
@Component({
selector: 'app-userslist',
templateUrl: './userslist.component.html',
styleUrls: ['./userslist.component.css']
selector: 'app-userslist',
templateUrl: './userslist.component.html',
styleUrls: ['./userslist.component.css']
})
export class UsersListComponent implements OnInit {
public ComponentMode = ComponentMode;
public ComponentMode = ComponentMode;
private domainId: number;
private domainId: number;
public allUsers: User[] = [];
public usersToAdd: User[] = [];
// private domainUsers: Map<number, User[]> = new Map<number, User[]>();
public allUsers: User[] = [];
public usersToAdd: User[] = [];
public isInAddToDomainMode = false;
public isInAddToDomainMode = false;
constructor(protected authService: AuthService,
protected userService: UserService,
protected domainService: DomainService,
protected userDataService: UserDataService,
private router: Router,
private route: ActivatedRoute,
private location: Location) {}
ngOnInit() {
this.userDataService.selectedDomainId.subscribe((domainId) => this.update(domainId));
}
public update(domainId: number): void {
console.log('Update users for domainId=' + domainId);
if (domainId == null || domainId === 0) {
this.domainId = undefined;
} else {
this.domainId = domainId;
constructor(protected authService: AuthService,
protected userService: UserService,
protected domainService: DomainService,
protected userDataService: UserDataService,
private router: Router,
private route: ActivatedRoute,
private location: Location) {
}
let users: Observable<User[]> = null;
if (this.authService.hasRole(Role[Role.ROLE_SYSTEM_ADMIN])) {
users = this.userService.getAll(this.domainId);
} else if (this.domainId != null && this.authService.hasDomainRole(this.domainId, Role[Role.ROLE_DOMAIN_ADMIN])) {
users = this.userService.getAll(this.domainId);
} else {
users = of<User[]>([]);
ngOnInit() {
this.userDataService.selectedDomainId.subscribe((domainId) => this.update(domainId));
}
// sort default user list by username
users = users.pipe(
map(userList => {
userList.sort((a, b) => a.username.localeCompare(b.username));
return userList;
})
)
users.subscribe((all) => {
this.allUsers = all;
/* parse date strings to date objects */
for (const u of this.allUsers) {
if (u.firstLoginDate) {
u.firstLoginDate = new Date(u.firstLoginDate)
public update(domainId: number): void {
console.log('Update users for domainId= ' + domainId);
if (domainId == null || domainId === 0) {
this.domainId = undefined;
} else {
this.domainId = domainId;
}
if (u.lastSuccessfulLoginDate) {
u.lastSuccessfulLoginDate = new Date(u.lastSuccessfulLoginDate)
let users: Observable<User[]> = null;
if (this.authService.hasRole(Role[Role.ROLE_SYSTEM_ADMIN]) && this.domainId != null) {
users = this.userService.getDomainUsersAsAdmin(this.domainId);
} else if (this.authService.hasRole(Role[Role.ROLE_SYSTEM_ADMIN])) {
users = this.userService.getAll(this.domainId);
} else if (this.domainId != null && this.authService.hasDomainRole(this.domainId, Role[Role.ROLE_DOMAIN_ADMIN])) {
users = this.userService.getAll(this.domainId);
} else {
users = of<User[]>([]);
}
}
});
if (this.domainId !== this.domainService.getGlobalDomainId()) {
this.userService.getAll().subscribe(
all => {
this.usersToAdd = all.filter(
u => u.roles.filter(r => r.domainId === this.domainId).length === 0 && // user has no roles in current domain
u.roles.filter(r => this.userRoleAsEnum(r.role) === Role.ROLE_GUEST && // user has role guest in global domain
r.domainId === this.domainService.getGlobalDomainId()).length === 1);
for (const u of this.usersToAdd) {
if (u.firstLoginDate) {
u.firstLoginDate = new Date(u.firstLoginDate)
}
if (u.lastSuccessfulLoginDate) {
u.lastSuccessfulLoginDate = new Date(u.lastSuccessfulLoginDate)
}
// sort default user list by username
users = users.pipe(
map(userList => {
userList.sort((a, b) => a.username.localeCompare(b.username));
return userList;
})
)
console.warn("test in")
users.subscribe((all) => {
this.allUsers = all;
/* parse date strings to date objects */
for (const u of this.allUsers) {
if (u.firstLoginDate) {
u.firstLoginDate = new Date(u.firstLoginDate)
}
if (u.lastSuccessfulLoginDate) {
u.lastSuccessfulLoginDate = new Date(u.lastSuccessfulLoginDate)
}
}
}
);
});
}
}
public onUserView($event): void {
this.router.navigate(['/admin/users/view/', $event]);
}
public onUserView($event): void {
this.router.navigate(['/admin/users/view/', $event]);
}
public onRemoveRole($event): void {
this.userService.removeRole(
$event.id, $event.roles.find(value => value.domainId === this.domainId).role, this.domainId).subscribe(
public onRemoveRole($event): void {
this.userService.removeRole(
$event.id, $event.roles.find(value => value.domainId === this.domainId).role, this.domainId).subscribe(
() => this.update(this.domainId)
)
}
}
public onUserDelete($event): void {
this.userService.deleteOne($event.id).subscribe(
() => this.update(this.domainId)
)
}
public onUserDelete($event): void {
this.userService.deleteOne($event.id).subscribe(
() => this.update(this.domainId)
)
}
public onUserAddToDomain($event): void {
this.userService.addRole($event.id, Role.ROLE_USER, this.domainId).subscribe(() => this.update(this.domainId))
}
public onUserAddToDomain($event): void {
this.userService.addRole($event.id, Role.ROLE_USER, this.domainId).subscribe(() => this.update(this.domainId))
}
public onModeChange($event): void {
this.isInAddToDomainMode = !this.isInAddToDomainMode;
}
public onModeChange($event): void {
this.isInAddToDomainMode = !this.isInAddToDomainMode;
}
public userRoleAsEnum(role: string | Role): Role {
if (typeof role === 'string') {
return Role[role];
public userRoleAsEnum(role: string | Role): Role {
if (typeof role === 'string') {
return Role[role];
}
return role;
}
return role;
}
public onUserRoleChange(event: any) {
console.warn(event)
if (event.role !== null) {
this.userService.addRole(event.userId, event.role, event.domainId).subscribe(() => this.update(this.domainId))
} else {
const foundUser = this.allUsers.find(user => user.id === event.userId);
this.onRemoveRole({id: event.userId, roles: foundUser.roles})
// const role = foundUser.roles.find(roleS => roleS.domainId === event.domainId)
// console.warn('found role -', role)
// this.userService.removeRole(event.userId, role.role, event.domainId).subscribe(_ => {
// console.warn('test responsne');
// this.update(this.domainId)
// })
}
}
}
......@@ -55,6 +55,7 @@ import { ContactComponent } from './contact/contact.component';
import {FormioModule} from 'angular-formio';
import { PreferencesComponent } from './users/preferences/preferences.component';
import {TooltipModule} from 'primeng/tooltip';
import {DropdownModule} from 'primeng/dropdown';
@NgModule({
imports: [
......@@ -69,7 +70,8 @@ import {TooltipModule} from 'primeng/tooltip';
TranslateModule.forChild(),
NgxPaginationModule,
FormioModule,
TooltipModule
TooltipModule,
DropdownModule
],
declarations: [
RateComponent,
......
......@@ -22,3 +22,7 @@ tr.clickable {
flex-direction: row;
align-items: center;
}
:host ::ng-deep .p-dropdown {
width: 170px;
}
......@@ -25,7 +25,7 @@
<div class="form-group row col-sm-4 align-vertically">
<label for="searchText" class="col-form-label col-sm-3">Search:</label>
<div class="col-sm-9">
<input id="searchText" type="text" [formControl]="searchText" class="form-control">
<input id="searchText" type="text" [formControl]="searchText" class="form-control" (keyup)="searchUsers($event.target.value)">
</div>
</div>
......@@ -36,27 +36,28 @@
<tr>
<th scope="col" class="column-sortable" sortable-column="username">{{ 'USERS.USER_NAME' | translate }}</th>
<th scope="col" class="column-sortable" sortable-column="lastname">{{'USERS.NAME' | translate}}</th>
<th scope="col" class="column-sortable" sortable-column="email">{{'USERS.EMAIL' | translate}}</th>
<th *ngIf="!domainMode" scope="col" class="column-sortable" sortable-column="email">{{'USERS.EMAIL' | translate}}</th>
<th scope="col" class="column-sortable" sortable-column="domains"
*ngIf="domainId === domainService.getGlobalDomainId()">{{ 'USERS.DOMAINS' | translate }}</th>
<th scope="col" class="column-sortable" sortable-column="globalRole"
*ngIf="domainId === domainService.getGlobalDomainId()">{{ 'USERS.GLOBAL_ROLE' | translate }}</th>
<th scope="col" class="column-sortable" sortable-column="roles"
*ngIf="domainId !== domainService.getGlobalDomainId()">{{ 'USERS.ROLES' | translate }}</th>
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT)"
*ngIf="domainId !== domainService.getGlobalDomainId() && !isModeAllowed(ComponentMode.EDIT)">{{ 'USERS.ROLES' | translate }}</th>
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode"
sortable-column="firstLoginDate">{{ 'USERS.FIRST_LOGIN' | translate }}</th>
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT)"
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode"
sortable-column="lastSuccessfulLoginDate">{{ 'USERS.LAST_SUCCESSFUL_LOGIN' | translate }}</th>
<th scope="col" class="column-sortable" sortable-column="enabled">{{ 'USERS.ENABLED' | translate }}</th>
<th scope="col">&nbsp;</th>
<th *ngIf="!isModeAllowed(ComponentMode.EDIT)" scope="col">&nbsp;</th>
<th *ngIf="isModeAllowed(ComponentMode.EDIT)" scope="col">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of displayUsers | paginate: {itemsPerPage: maxItemsOnPage, currentPage: pageNumber, id: paginatorName}" class="clickable" (click)="view(user.id)">
<tr *ngFor="let user of displayUsers | paginate: {itemsPerPage: maxItemsOnPage, currentPage: pageNumber, id: paginatorName}" [ngClass]="{'clickable!' : domainMode}" (click)="view(user.id)">
<td>{{user.username}}</td>
<td>{{(user.firstname || '') + ' ' + (user.lastname || '')}}</td>
<td>{{user.email}}</td>
<td *ngIf="!domainMode">{{user.email}}</td>
<td *ngIf="domainId === domainService.getGlobalDomainId()">
<div *ngFor="let role of filterDomainNames(user); last as isLast">
<span *ngIf="!isLast" style="float:left;padding-right: 3px">
......@@ -71,18 +72,41 @@
<td *ngIf="domainId === domainService.getGlobalDomainId()">
<span>{{"ENUM.USER_ROLES." + getGlobalRole(user).toUpperCase() | translate}}</span>
</td>
<td *ngIf="domainId !== domainService.getGlobalDomainId()">
<span *ngFor="let role of getOnlyDomainRoles(user)">
{{"ENUM.USER_ROLES." + role.role.toUpperCase() | translate}}
</span>
<td *ngIf="domainId !== domainService.getGlobalDomainId() && !isModeAllowed(ComponentMode.EDIT)">
<div *roles="['ROLE_DOMAIN_ADMIN']">
<div *ngIf="!checkUserIfIsCurrentUser(user.username)">
<p-dropdown [options]="getAllowedRoles()" (onChange)="changeUserRole(user,domainId, $event)">
<ng-template pTemplate="selectedItem">
<span *ngFor="let roles of getOnlyDomainRoles(user)">
{{"ENUM.USER_ROLES." + roles.role.toUpperCase() | translate}}
</span>
</ng-template>
<ng-template let-role pTemplate="item">
{{"ENUM.USER_ROLES." + Role[role].toUpperCase() | translate}}
</ng-template>
</p-dropdown>
</div>
</div>
<div *roles="['ROLE_SYSTEM_ADMIN']">
<span *ngFor="let roles of getOnlyDomainRoles(user)">
{{"ENUM.USER_ROLES." + roles.role.toUpperCase() | translate}}
</span>
</div>
<div *roles="['ROLE_DOMAIN_ADMIN']">
<div *ngIf="checkUserIfIsCurrentUser(user.username)">
<span *ngFor="let roles of getOnlyDomainRoles(user)">
{{"ENUM.USER_ROLES." + roles.role.toUpperCase() | translate}}
</span>
</div>
</div>
</td>
<td *ngIf="!isModeAllowed(ComponentMode.EDIT)">{{user.firstLoginDate | date:'dd-MM-yyyy HH:mm'}}</td>
<td *ngIf="!isModeAllowed(ComponentMode.EDIT)">{{user.lastSuccessfulLoginDate | date:'dd-MM-yyyy HH:mm'}}</td>
<td *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode">{{user.firstLoginDate | date:'dd-MM-yyyy HH:mm'}}</td>
<td *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode">{{user.lastSuccessfulLoginDate | date:'dd-MM-yyyy HH:mm'}}</td>
<td>
<span class="glyphicon glyphicon-ok" *ngIf="user?.enabled"></span>
<span class="glyphicon glyphicon-remove" *ngIf="!(user?.enabled)"></span>
</td>
<td>
<td *ngIf="!domainMode && !isModeAllowed(ComponentMode.EDIT)">
<span class="dropdown">
<a style="display: inline-block" class="dropdown-toggle " aria-expanded="false"
aria-haspopup="true"
......@@ -122,6 +146,18 @@
</ul>
</span>
</td>
<td *ngIf="domainMode && !isModeAllowed(ComponentMode.EDIT)">
<span *ngIf="!checkUserIfIsCurrentUser(user.username)">
<a style="display: inline-block" class="" aria-expanded="false"
aria-haspopup="true"
href="#" role="button" (click)="onRemoveFromDomain.emit(user);$event.stopPropagation()">
<em class="fas fa-trash icon-black "></em>
</a>
</span>
</td>
<td *ngIf="isModeAllowed(ComponentMode.EDIT)" style="width: 170px">
<button class="btn btn-success" role="button" (click)="addToCurrentDomain(user)" > {{'USERS.ADD_TO_DOMAIN_BUTTON' | translate}}</button>
</td>
</tr>
</tbody>
</table>
......
......@@ -10,6 +10,8 @@ import {UserDataService} from '../../../service/userdata.service';
import {AuthService} from '../../../auth/auth.service';
import {map, shareReplay, take} from 'rxjs/operators';
import {FormControl} from '@angular/forms';
import {ComponentMode} from '../../common/componentmode';
import {Router} from '@angular/router';
function userMatches(u: User, term: string): boolean {
const t = term || ''
......@@ -31,6 +33,9 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
@Input()
public users: User[] = []; // provided list of users
@Input()
public domainMode = false;
public displayUsers: User[] = []; // list of users after transformations
public domainId: number;
......@@ -50,21 +55,28 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
@Output()
public onModeChange: EventEmitter<number> = new EventEmitter<number>();
@Output()
public onUserRoleChange: EventEmitter<any> = new EventEmitter<any>();
public domainCache: CacheService<number, Domain> = new CacheService<number, Domain>();
private lastSearchCriteria: CustomerSearchCriteria = undefined;
public pageNumber = 1;
public paginatorName = 'paginator-identifier';
public itemsPerPage: number[] = [15, 20, 25, 30, 50 ];
public itemsPerPage: number[] = [15, 20, 25, 30, 50];
public maxItemsOnPage = 15;
public filteredUsers: User[] = [];
public searchText = new FormControl('');
public Role = Role;
constructor(private userService: UserService,
public domainService: DomainService,
private userDataService: UserDataService,
public authService: AuthService) {
public authService: AuthService,
private router: Router) {
super();
userDataService.selectedDomainId.subscribe(domain => this.domainId = domain);
}
......@@ -72,7 +84,9 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
ngOnInit() {
// set stored value of maxElementsPerPage
const i = sessionStorage.getItem(this.users_item_number_key);
if (i) { this.maxItemsOnPage = +i; }
if (i) {
this.maxItemsOnPage = +i;
}
this.searchText.valueChanges.subscribe(
term => this.onSearch(term)
......@@ -90,7 +104,10 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
return of(this.domainCache.getData(domainId).name);
} else {
return this.domainService.getOne(domainId).pipe(
map((domain) => {this.domainCache.setData(domainId, domain); return domain.name}),
map((domain) => {
this.domainCache.setData(domainId, domain);
return domain.name
}),
shareReplay(1),
take(1));
}
......@@ -122,14 +139,18 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
}
public view(userId: number): void {
this.onView.emit(userId);
if (!this.domainMode) {
this.onView.emit(userId);
}
}
public changeUserStatus(user: User, enabled: boolean): void {
this.userService.changeUserStatus(user.id, enabled).subscribe();
user.enabled = enabled;
// sort after changing params
if (this.lastSearchCriteria) { this.handleSortEvent(this.lastSearchCriteria); }
if (this.lastSearchCriteria) {
this.handleSortEvent(this.lastSearchCriteria);
}
}
onSorted($event) {
......@@ -147,6 +168,9 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
}
handleSearchEvent(term: string) {
console.warn(this.displayUsers.filter(
u => userMatches(u, term)
))
this.displayUsers = this.displayUsers.filter(
u => userMatches(u, term)
)
......@@ -155,8 +179,12 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
handleSortEvent(criteria: CustomerSearchCriteria) {
this.lastSearchCriteria = criteria;
const baseSortFunc = (a: any, b: any): number => {
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;
};
......@@ -174,11 +202,16 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
if (criteria.sortColumn === 'domains') {
const ad = this.filterDomainNames(a);
const bd = this.filterDomainNames(b);
if (!ad) { console.log(ad); }
if (!bd) { console.log(bd); }
if (!ad) {
console.log(ad);
}
if (!bd) {
console.log(bd);
}
const ar = ad.length > 0 ? ad[0].domainId : 0;
const br = bd.length > 0 ? bd[0].domainId : 0;
p1 = ar; p2 = br;
p1 = ar;
p2 = br;
} else if (criteria.sortColumn === 'globalRole') {
p1 = this.getGlobalRole(a);
p2 = this.getGlobalRole(b);
......@@ -187,7 +220,8 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
const bd = this.getOnlyDomainRoles(b);
const ar = ad.length > 0 ? ad[0].role.toString() : '';
const br = bd.length > 0 ? bd[0].role.toString() : '';
p1 = ar; p2 = br;
p1 = ar;
p2 = br;
} else {
p1 = a[criteria.sortColumn];
p2 = b[criteria.sortColumn];
......@@ -222,6 +256,7 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
public addToCurrentDomain(user: User) {
this.onAddToDomain.emit(user);
this.changeMode();
}
public changeMode() {
......@@ -241,6 +276,48 @@ export class UsersListComponent extends BaseComponent implements OnInit, OnChang
return !result;
}
public searchUsers(search: string) {
if (search === '') {
this.filteredUsers = [];
} else {
if (this.allowedModes.find(v => v === ComponentMode.EDIT) !== undefined) {
this.userService.getUserBySearch(search, this.domainId).subscribe(data => {
this.filteredUsers = data;
this.displayUsers = this.filteredUsers;
})
} else {
// this.displayUsers = this.users;
}
}
}
public getAllowedRoles(): Role[] {
let roles: Role[];
if (this.authService.hasRole(Role[Role.ROLE_SYSTEM_ADMIN]) &&
Number(this.domainId === this.domainService.getGlobalDomainId())) {
// admin (global) role set
roles = [Role.ROLE_OPERATOR, Role.ROLE_TOOL_MANAGER, Role.ROLE_SYSTEM_ADMIN];
// roles = this.filterRoles(roles, this.domainId);
} else if (this.domainId != null) {
// default (domain) role set
roles = [Role.ROLE_GUEST, Role.ROLE_USER, Role.ROLE_DOMAIN_ADMIN];
} else {
// no roles
roles = [];
}
return roles;
}
public changeUserRole(user: User, domainId: number, event: any) {
console.warn(event);
this.onUserRoleChange.emit({userId: user.id, domainId: domainId, role: event.value})
}
public checkUserIfIsCurrentUser(userName: string) {
return this.authService.getUsername() === userName
}
}
function roleConvert(role: string | Role ): Role {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment