fix(console): ui issues (#1670)

* mark required fields

* membership overflow, deactivate btn

* app create show info

* remove padding

* lint scss

* fix count of results

* rm log

console/src/app/pages/users/user-create-machine/user-create-machine.component.html

@@ -5,7 +5,7 @@
     <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
         <div class="content">
             <cnsl-form-field class="formfield">
-                <cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}</cnsl-label>
+                <cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
                 <input cnslInput formControlName="userName" required />
                 <span cnsl-error *ngIf="userName?.invalid && userName?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
@@ -15,7 +15,7 @@
                 </span>
             </cnsl-form-field>
             <cnsl-form-field class="formfield">
-                <cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}</cnsl-label>
+                <cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
                 <input cnslInput formControlName="name" required />
                 <span cnsl-error *ngIf="name?.invalid && name?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}

console/src/app/pages/users/user-create/user-create.component.html

@@ -5,7 +5,7 @@
     <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
         <div class="content">
             <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
                 <input cnslInput matRipple formControlName="email" required />
                 <span cnsl-error *ngIf="email?.invalid && !email?.errors?.required">
@@ -15,7 +15,7 @@
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                 </span>
             </cnsl-form-field>
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
                 <input cnslInput formControlName="userName" required
                     [ngStyle]="{'padding-right': suffixPadding ? suffixPadding : '10px'}" />
@@ -30,21 +30,21 @@
             </cnsl-form-field>
         </div>
         <div class="content">
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
                 <input cnslInput formControlName="firstName" required />
                 <span cnsl-error *ngIf="firstName?.invalid && firstName?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                 </span>
             </cnsl-form-field>
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
                 <input cnslInput formControlName="lastName" required />
                 <span cnsl-error *ngIf="lastName?.invalid && lastName?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                 </span>
             </cnsl-form-field>
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
                 <input cnslInput formControlName="nickName" />
                 <span cnsl-error *ngIf="nickName?.invalid && nickName?.errors?.required">
@@ -54,7 +54,7 @@
 
             <p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
 
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
                 <mat-select formControlName="gender">
                     <mat-option *ngFor="let gender of genders" [value]="gender">
@@ -65,7 +65,7 @@
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                 </span>
             </cnsl-form-field>
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
                 <mat-select formControlName="preferredLanguage">
                     <mat-option *ngFor="let language of languages" [value]="language">
@@ -79,7 +79,7 @@
 
             <p class="section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
 
-            <cnsl-form-field class="formfield" appearance="fill">
+            <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
                 <input cnslInput formControlName="phone" />
                 <span cnsl-error *ngIf="phone?.invalid && phone?.errors?.required">

console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts

@@ -13,109 +13,111 @@ import { ManagementService } from '../../../../services/mgmt.service';
 import { ToastService } from '../../../../services/toast.service';
 
 @Component({
-    selector: 'app-external-idps',
-    templateUrl: './external-idps.component.html',
-    styleUrls: ['./external-idps.component.scss'],
+  selector: 'app-external-idps',
+  templateUrl: './external-idps.component.html',
+  styleUrls: ['./external-idps.component.scss'],
 })
 export class ExternalIdpsComponent implements OnInit {
-    @Input() service!: GrpcAuthService | ManagementService;
-    @Input() userId!: string;
-    @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
-    public totalResult: number = 0;
-    public viewTimestamp!: Timestamp.AsObject;
-    public dataSource: MatTableDataSource<IDPUserLink.AsObject>
-        = new MatTableDataSource<IDPUserLink.AsObject>();
-    public selection: SelectionModel<IDPUserLink.AsObject>
-        = new SelectionModel<IDPUserLink.AsObject>(true, []);
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    @Input() public displayedColumns: string[] = ['idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName', 'actions'];
+  @Input() service!: GrpcAuthService | ManagementService;
+  @Input() userId!: string;
+  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
+  public totalResult: number = 0;
+  public viewTimestamp!: Timestamp.AsObject;
+  public dataSource: MatTableDataSource<IDPUserLink.AsObject>
+    = new MatTableDataSource<IDPUserLink.AsObject>();
+  public selection: SelectionModel<IDPUserLink.AsObject>
+    = new SelectionModel<IDPUserLink.AsObject>(true, []);
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = ['idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName', 'actions'];
 
-    constructor(private toast: ToastService, private dialog: MatDialog) { }
+  constructor(private toast: ToastService, private dialog: MatDialog) { }
 
-    ngOnInit(): void {
-        this.getData(10, 0);
+  ngOnInit(): void {
+    this.getData(10, 0);
+  }
+
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  public changePage(event: PageEvent): void {
+    this.getData(event.pageSize, event.pageIndex * event.pageSize);
+  }
+
+  private async getData(limit: number, offset: number): Promise<void> {
+    this.loadingSubject.next(true);
+
+    let promise;
+    if (this.service instanceof ManagementService) {
+      promise = (this.service as ManagementService).listHumanLinkedIDPs(this.userId, limit, offset);
+    } else if (this.service instanceof GrpcAuthService) {
+      promise = (this.service as GrpcAuthService).listMyLinkedIDPs(limit, offset);
     }
 
-    public isAllSelected(): boolean {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.data.length;
-        return numSelected === numRows;
+    if (promise) {
+      promise.then(resp => {
+        this.dataSource.data = resp.resultList;
+        if (resp.details?.viewTimestamp) {
+          this.viewTimestamp = resp.details.viewTimestamp;
+        }
+        if (resp.details?.totalResult) {
+          this.totalResult = resp.details?.totalResult;
+        } else {
+          this.totalResult = 0;
+        }
+        this.loadingSubject.next(false);
+      }).catch((error: any) => {
+        this.toast.showError(error);
+        this.loadingSubject.next(false);
+      });
     }
+  }
 
-    public masterToggle(): void {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.dataSource.data.forEach(row => this.selection.select(row));
-    }
+  public refreshPage(): void {
+    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+  }
 
-    public changePage(event: PageEvent): void {
-        this.getData(event.pageSize, event.pageIndex * event.pageSize);
-    }
-
-    private async getData(limit: number, offset: number): Promise<void> {
-        this.loadingSubject.next(true);
+  public removeExternalIdp(idp: IDPUserLink.AsObject): void {
+    const dialogRef = this.dialog.open(WarnDialogComponent, {
+      data: {
+        confirmKey: 'ACTIONS.REMOVE',
+        cancelKey: 'ACTIONS.CANCEL',
+        titleKey: 'USER.EXTERNALIDP.DIALOG.DELETE_TITLE',
+        descriptionKey: 'USER.EXTERNALIDP.DIALOG.DELETE_DESCRIPTION',
+      },
+      width: '400px',
+    });
 
+    dialogRef.afterClosed().subscribe(resp => {
+      if (resp) {
         let promise;
         if (this.service instanceof ManagementService) {
-            promise = (this.service as ManagementService).listHumanLinkedIDPs(this.userId, limit, offset);
+          promise = (this.service as ManagementService)
+            .removeHumanLinkedIDP(idp.providedUserId, idp.idpId, idp.userId);
         } else if (this.service instanceof GrpcAuthService) {
-            promise = (this.service as GrpcAuthService).listMyLinkedIDPs(limit, offset);
+          promise = (this.service as GrpcAuthService)
+            .removeMyLinkedIDP(idp.providedUserId, idp.idpId);
         }
 
         if (promise) {
-            promise.then(resp => {
-                this.dataSource.data = resp.resultList;
-                if (resp.details?.viewTimestamp) {
-                    this.viewTimestamp = resp.details.viewTimestamp;
-                }
-                if (resp.details?.totalResult) {
-                    this.totalResult = resp.details?.totalResult;
-                }
-                this.loadingSubject.next(false);
-            }).catch((error: any) => {
-                this.toast.showError(error);
-                this.loadingSubject.next(false);
-            });
+          promise.then(_ => {
+            setTimeout(() => {
+              this.refreshPage();
+            }, 1000);
+          }).catch((error: any) => {
+            this.toast.showError(error);
+          });
         }
-    }
-
-    public refreshPage(): void {
-        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
-    }
-
-    public removeExternalIdp(idp: IDPUserLink.AsObject): void {
-        const dialogRef = this.dialog.open(WarnDialogComponent, {
-            data: {
-                confirmKey: 'ACTIONS.REMOVE',
-                cancelKey: 'ACTIONS.CANCEL',
-                titleKey: 'USER.EXTERNALIDP.DIALOG.DELETE_TITLE',
-                descriptionKey: 'USER.EXTERNALIDP.DIALOG.DELETE_DESCRIPTION',
-            },
-            width: '400px',
-        });
-
-        dialogRef.afterClosed().subscribe(resp => {
-            if (resp) {
-                let promise;
-                if (this.service instanceof ManagementService) {
-                    promise = (this.service as ManagementService)
-                        .removeHumanLinkedIDP(idp.providedUserId, idp.idpId, idp.userId);
-                } else if (this.service instanceof GrpcAuthService) {
-                    promise = (this.service as GrpcAuthService)
-                        .removeMyLinkedIDP(idp.providedUserId, idp.idpId);
-                }
-
-                if (promise) {
-                    promise.then(_ => {
-                        setTimeout(() => {
-                            this.refreshPage();
-                        }, 1000);
-                    }).catch((error: any) => {
-                        this.toast.showError(error);
-                    });
-                }
-            }
-        });
-    }
+      }
+    });
+  }
 }

console/src/app/pages/users/user-detail/memberships/memberships.component.ts

@@ -63,6 +63,7 @@ export class MembershipsComponent implements OnInit {
         } else {
             this.mgmtService.listUserMemberships(userId, 100, 0, []).then(resp => {
                 this.memberships = resp.resultList;
+                this.totalResult = resp.details?.totalResult || 0;
                 this.loading = false;
             });
         }

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -19,7 +19,7 @@
                     (click)="changeState(UserState.USER_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
                     translate}}</button>
                 <button class="state-button" mat-stroked-button color="warn"
-                    *ngIf="user?.state !== UserState.USER_STATE_ACTIVE"
+                    *ngIf="user?.state == UserState.USER_STATE_INACTIVE"
                     (click)="changeState(UserState.USER_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
             </ng-template>
         </div>

console/src/app/pages/users/user-list/user-table/user-table.component.ts

@@ -12,242 +12,244 @@ import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.com
 import { Timestamp } from 'src/app/proto/generated/google/protobuf/timestamp_pb';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import {
-    DisplayNameQuery,
-    EmailQuery,
-    FirstNameQuery,
-    LastNameQuery,
-    SearchQuery,
-    Type,
-    TypeQuery,
-    User,
-    UserNameQuery,
-    UserState,
+  DisplayNameQuery,
+  EmailQuery,
+  FirstNameQuery,
+  LastNameQuery,
+  SearchQuery,
+  Type,
+  TypeQuery,
+  User,
+  UserNameQuery,
+  UserState,
 } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 enum UserListSearchKey {
-    FIRST_NAME,
-    LAST_NAME,
-    DISPLAY_NAME,
-    USER_NAME,
-    EMAIL,
+  FIRST_NAME,
+  LAST_NAME,
+  DISPLAY_NAME,
+  USER_NAME,
+  EMAIL,
 }
 
 @Component({
-    selector: 'app-user-table',
-    templateUrl: './user-table.component.html',
-    styleUrls: ['./user-table.component.scss'],
-    animations: [
-        enterAnimations,
-    ],
+  selector: 'app-user-table',
+  templateUrl: './user-table.component.html',
+  styleUrls: ['./user-table.component.scss'],
+  animations: [
+    enterAnimations,
+  ],
 })
 export class UserTableComponent implements OnInit {
-    public userSearchKey: UserListSearchKey | undefined = undefined;
-    public Type: any = Type;
-    @Input() type: Type = Type.TYPE_HUMAN;
-    @Input() refreshOnPreviousRoutes: string[] = [];
-    @Input() disabled: boolean = false;
-    @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
-    @ViewChild('input') public filter!: Input;
+  public userSearchKey: UserListSearchKey | undefined = undefined;
+  public Type: any = Type;
+  @Input() type: Type = Type.TYPE_HUMAN;
+  @Input() refreshOnPreviousRoutes: string[] = [];
+  @Input() disabled: boolean = false;
+  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
+  @ViewChild('input') public filter!: Input;
 
-    public viewTimestamp!: Timestamp.AsObject;
-    public totalResult: number = 0;
-    public dataSource: MatTableDataSource<User.AsObject> = new MatTableDataSource<User.AsObject>();
-    public selection: SelectionModel<User.AsObject> = new SelectionModel<User.AsObject>(true, []);
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    @Input() public displayedColumns: string[] = ['select', 'displayName', 'username', 'email', 'state', 'actions'];
+  public viewTimestamp!: Timestamp.AsObject;
+  public totalResult: number = 0;
+  public dataSource: MatTableDataSource<User.AsObject> = new MatTableDataSource<User.AsObject>();
+  public selection: SelectionModel<User.AsObject> = new SelectionModel<User.AsObject>(true, []);
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = ['select', 'displayName', 'username', 'email', 'state', 'actions'];
 
-    @Output() public changedSelection: EventEmitter<Array<User.AsObject>> = new EventEmitter();
+  @Output() public changedSelection: EventEmitter<Array<User.AsObject>> = new EventEmitter();
 
-    public UserState: any = UserState;
-    public UserListSearchKey: any = UserListSearchKey;
+  public UserState: any = UserState;
+  public UserListSearchKey: any = UserListSearchKey;
 
-    constructor(
-        public translate: TranslateService,
-        private userService: ManagementService,
-        private toast: ToastService,
-        private dialog: MatDialog,
-        private route: ActivatedRoute,
-    ) {
-        this.selection.changed.subscribe(() => {
-            this.changedSelection.emit(this.selection.selected);
-        });
-    }
+  constructor(
+    public translate: TranslateService,
+    private userService: ManagementService,
+    private toast: ToastService,
+    private dialog: MatDialog,
+    private route: ActivatedRoute,
+  ) {
+    this.selection.changed.subscribe(() => {
+      this.changedSelection.emit(this.selection.selected);
+    });
+  }
 
-    ngOnInit(): void {
-        this.route.queryParams.pipe(take(1)).subscribe(params => {
-            this.getData(10, 0, this.type);
-            if (params.deferredReload) {
-                setTimeout(() => {
-                    this.getData(10, 0, this.type);
-                }, 2000);
-            }
-        });
-    }
-
-    public isAllSelected(): boolean {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.data.length;
-        return numSelected === numRows;
-    }
-
-    public masterToggle(): void {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.dataSource.data.forEach(row => this.selection.select(row));
-    }
-
-
-    public changePage(event: PageEvent): void {
-        this.selection.clear();
-        this.getData(event.pageSize, event.pageIndex * event.pageSize, this.type);
-    }
-
-    public deactivateSelectedUsers(): void {
-        Promise.all(this.selection.selected.map(value => {
-            return this.userService.deactivateUser(value.id);
-        })).then(() => {
-            this.toast.showInfo('USER.TOAST.SELECTEDDEACTIVATED', true);
-            this.selection.clear();
-            setTimeout(() => {
-                this.refreshPage();
-            }, 1000);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
-    }
-
-    public reactivateSelectedUsers(): void {
-        Promise.all(this.selection.selected.map(value => {
-            return this.userService.reactivateUser(value.id);
-        })).then(() => {
-            this.toast.showInfo('USER.TOAST.SELECTEDREACTIVATED', true);
-            this.selection.clear();
-            setTimeout(() => {
-                this.refreshPage();
-            }, 1000);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
-    }
-
-    private async getData(limit: number, offset: number, type: Type, searchValue?: string): Promise<void> {
-        this.loadingSubject.next(true);
-        const query = new SearchQuery();
-        const typeQuery = new TypeQuery();
-        typeQuery.setType(type);
-        query.setTypeQuery(typeQuery);
-
-        if (searchValue && this.userSearchKey !== undefined) {
-            switch (this.userSearchKey) {
-                case UserListSearchKey.DISPLAY_NAME:
-                    const dNQuery = new DisplayNameQuery();
-                    dNQuery.setDisplayName(searchValue);
-                    dNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-
-                    query.setDisplayNameQuery(dNQuery);
-                    break;
-                case UserListSearchKey.USER_NAME:
-                    const uNQuery = new UserNameQuery();
-                    uNQuery.setUserName(searchValue);
-                    uNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-
-                    query.setUserNameQuery(uNQuery);
-                    break;
-                case UserListSearchKey.FIRST_NAME:
-                    const fNQuery = new FirstNameQuery();
-                    fNQuery.setFirstName(searchValue);
-                    fNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-
-                    query.setFirstNameQuery(fNQuery);
-                    break;
-                case UserListSearchKey.FIRST_NAME:
-                    const lNQuery = new LastNameQuery();
-                    lNQuery.setLastName(searchValue);
-                    lNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-
-                    query.setLastNameQuery(lNQuery);
-                    break;
-                case UserListSearchKey.EMAIL:
-                    const eQuery = new EmailQuery();
-                    eQuery.setEmailAddress(searchValue);
-                    eQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-
-                    query.setEmailQuery(eQuery);
-                    break;
-            }
-        }
-
-        this.userService.listUsers(limit, offset, [query]).then(resp => {
-            if (resp.details?.totalResult) {
-                this.totalResult = resp.details?.totalResult;
-            }
-            if (resp.details?.viewTimestamp) {
-                this.viewTimestamp = resp.details?.viewTimestamp;
-            }
-            this.dataSource.data = resp.resultList;
-            this.loadingSubject.next(false);
-        }).catch(error => {
-            this.toast.showError(error);
-            this.loadingSubject.next(false);
-        });
-    }
-
-    public refreshPage(): void {
-        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize, this.type);
-    }
-
-    public applyFilter(event: Event): void {
-        this.selection.clear();
-        const filterValue = (event.target as HTMLInputElement).value;
-
-        this.getData(
-            this.paginator.pageSize,
-            this.paginator.pageIndex * this.paginator.pageSize,
-            this.type,
-            filterValue,
-        );
-    }
-
-    public setFilter(key: UserListSearchKey): void {
+  ngOnInit(): void {
+    this.route.queryParams.pipe(take(1)).subscribe(params => {
+      this.getData(10, 0, this.type);
+      if (params.deferredReload) {
         setTimeout(() => {
-            if (this.filter) {
-                (this.filter as any).nativeElement.focus();
-            }
-        }, 100);
+          this.getData(10, 0, this.type);
+        }, 2000);
+      }
+    });
+  }
 
-        if (this.userSearchKey !== key) {
-            this.userSearchKey = key;
-        } else {
-            this.userSearchKey = undefined;
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+
+  public changePage(event: PageEvent): void {
+    this.selection.clear();
+    this.getData(event.pageSize, event.pageIndex * event.pageSize, this.type);
+  }
+
+  public deactivateSelectedUsers(): void {
+    Promise.all(this.selection.selected.map(value => {
+      return this.userService.deactivateUser(value.id);
+    })).then(() => {
+      this.toast.showInfo('USER.TOAST.SELECTEDDEACTIVATED', true);
+      this.selection.clear();
+      setTimeout(() => {
+        this.refreshPage();
+      }, 1000);
+    }).catch(error => {
+      this.toast.showError(error);
+    });
+  }
+
+  public reactivateSelectedUsers(): void {
+    Promise.all(this.selection.selected.map(value => {
+      return this.userService.reactivateUser(value.id);
+    })).then(() => {
+      this.toast.showInfo('USER.TOAST.SELECTEDREACTIVATED', true);
+      this.selection.clear();
+      setTimeout(() => {
+        this.refreshPage();
+      }, 1000);
+    }).catch(error => {
+      this.toast.showError(error);
+    });
+  }
+
+  private async getData(limit: number, offset: number, type: Type, searchValue?: string): Promise<void> {
+    this.loadingSubject.next(true);
+    const query = new SearchQuery();
+    const typeQuery = new TypeQuery();
+    typeQuery.setType(type);
+    query.setTypeQuery(typeQuery);
+
+    if (searchValue && this.userSearchKey !== undefined) {
+      switch (this.userSearchKey) {
+        case UserListSearchKey.DISPLAY_NAME:
+          const dNQuery = new DisplayNameQuery();
+          dNQuery.setDisplayName(searchValue);
+          dNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+
+          query.setDisplayNameQuery(dNQuery);
+          break;
+        case UserListSearchKey.USER_NAME:
+          const uNQuery = new UserNameQuery();
+          uNQuery.setUserName(searchValue);
+          uNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+
+          query.setUserNameQuery(uNQuery);
+          break;
+        case UserListSearchKey.FIRST_NAME:
+          const fNQuery = new FirstNameQuery();
+          fNQuery.setFirstName(searchValue);
+          fNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+
+          query.setFirstNameQuery(fNQuery);
+          break;
+        case UserListSearchKey.FIRST_NAME:
+          const lNQuery = new LastNameQuery();
+          lNQuery.setLastName(searchValue);
+          lNQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+
+          query.setLastNameQuery(lNQuery);
+          break;
+        case UserListSearchKey.EMAIL:
+          const eQuery = new EmailQuery();
+          eQuery.setEmailAddress(searchValue);
+          eQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+
+          query.setEmailQuery(eQuery);
+          break;
+      }
+    }
+
+    this.userService.listUsers(limit, offset, [query]).then(resp => {
+      if (resp.details?.totalResult) {
+        this.totalResult = resp.details?.totalResult;
+      } else {
+        this.totalResult = 0;
+      }
+      if (resp.details?.viewTimestamp) {
+        this.viewTimestamp = resp.details?.viewTimestamp;
+      }
+      this.dataSource.data = resp.resultList;
+      this.loadingSubject.next(false);
+    }).catch(error => {
+      this.toast.showError(error);
+      this.loadingSubject.next(false);
+    });
+  }
+
+  public refreshPage(): void {
+    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize, this.type);
+  }
+
+  public applyFilter(event: Event): void {
+    this.selection.clear();
+    const filterValue = (event.target as HTMLInputElement).value;
+
+    this.getData(
+      this.paginator.pageSize,
+      this.paginator.pageIndex * this.paginator.pageSize,
+      this.type,
+      filterValue,
+    );
+  }
+
+  public setFilter(key: UserListSearchKey): void {
+    setTimeout(() => {
+      if (this.filter) {
+        (this.filter as any).nativeElement.focus();
+      }
+    }, 100);
+
+    if (this.userSearchKey !== key) {
+      this.userSearchKey = key;
+    } else {
+      this.userSearchKey = undefined;
+      this.refreshPage();
+    }
+  }
+
+  public deleteUser(user: User.AsObject): void {
+    const dialogRef = this.dialog.open(WarnDialogComponent, {
+      data: {
+        confirmKey: 'ACTIONS.DELETE',
+        cancelKey: 'ACTIONS.CANCEL',
+        titleKey: 'USER.DIALOG.DELETE_TITLE',
+        descriptionKey: 'USER.DIALOG.DELETE_DESCRIPTION',
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe(resp => {
+      if (resp) {
+        this.userService.removeUser(user.id).then(() => {
+          setTimeout(() => {
             this.refreshPage();
-        }
-    }
-
-    public deleteUser(user: User.AsObject): void {
-        const dialogRef = this.dialog.open(WarnDialogComponent, {
-            data: {
-                confirmKey: 'ACTIONS.DELETE',
-                cancelKey: 'ACTIONS.CANCEL',
-                titleKey: 'USER.DIALOG.DELETE_TITLE',
-                descriptionKey: 'USER.DIALOG.DELETE_DESCRIPTION',
-            },
-            width: '400px',
+          }, 1000);
+          this.toast.showInfo('USER.TOAST.DELETED', true);
+        }).catch(error => {
+          this.toast.showError(error);
         });
-
-        dialogRef.afterClosed().subscribe(resp => {
-            if (resp) {
-                this.userService.removeUser(user.id).then(() => {
-                    setTimeout(() => {
-                        this.refreshPage();
-                    }, 1000);
-                    this.toast.showInfo('USER.TOAST.DELETED', true);
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-            }
-        });
-    }
+      }
+    });
+  }
 }