-
{{ 'USER.PAGES.LIST' | translate }}
-
{{ 'USER.PAGES.DESCRIPTION' | translate }}
+
+
+ {{ 'USER.PAGES.LIST' | translate }}
+ {{ 'USER.PAGES.DESCRIPTION' | translate }}
-
-
-
-
-
- add{{ 'ACTIONS.NEW' | translate }}
-
-
+
+
-
-
-
- |
-
-
- |
-
-
-
-
-
- |
-
+
+ {{ 'USER.PAGES.LISTMACHINE' | translate }}
+ {{ 'USER.PAGES.DESCRIPTIONMACHINE' | translate }}
-
- {{ 'USER.PROFILE.FIRSTNAME' | translate }} |
- {{user.firstName}} |
-
-
-
- {{ 'USER.PROFILE.LASTNAME' | translate }} |
- {{user.lastName}} |
-
-
-
- {{ 'USER.PROFILE.USERNAME' | translate }} |
- {{user.userName}} |
-
-
-
- {{ 'USER.EMAIL' | translate }} |
- {{user.email}} |
-
-
- {{ 'USER.DATA.STATE' | translate }} |
- {{ 'USER.DATA.STATE'+user.state | translate }} |
-
-
- |
-
-
-
-
-
-
-
+
+
+
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-list/user-list.component.scss b/console/src/app/pages/users/user-list/user-list.component.scss
index 7132b5adc8..b0b77cc35b 100644
--- a/console/src/app/pages/users/user-list/user-list.component.scss
+++ b/console/src/app/pages/users/user-list/user-list.component.scss
@@ -6,42 +6,3 @@ h1 {
color: #8795a1;
margin-bottom: 2rem;
}
-
-.add-button {
- border-radius: .5rem;
-}
-
-.table-wrapper {
- overflow: auto;
-
- .table,
- .paginator {
- width: 100%;
-
- td,
- th {
- padding: 0 1rem;
-
- &:first-child {
- padding-left: 0;
- padding-right: 1rem;
- }
-
- &:last-child {
- padding-right: 0;
- }
- }
-
- .data-row {
- cursor: pointer;
-
- &:hover {
- background-color: #ffffff05;
- }
- }
- }
-}
-
-tr {
- outline: none;
-}
diff --git a/console/src/app/pages/users/user-list/user-list.component.ts b/console/src/app/pages/users/user-list/user-list.component.ts
index 5950622b1c..9372c42131 100644
--- a/console/src/app/pages/users/user-list/user-list.component.ts
+++ b/console/src/app/pages/users/user-list/user-list.component.ts
@@ -1,91 +1,24 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { User, UserSearchResponse } from 'src/app/proto/generated/management_pb';
-import { ManagementService } from 'src/app/services/mgmt.service';
-import { ToastService } from 'src/app/services/toast.service';
+import { take } from 'rxjs/operators';
+export enum UserType {
+ HUMAN = 'human',
+ MACHINE = 'machine',
+}
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.scss'],
})
-export class UserListComponent implements OnDestroy {
- @ViewChild(MatPaginator) public paginator!: MatPaginator;
- public dataSource: MatTableDataSource
= new MatTableDataSource();
- public userResult!: UserSearchResponse.AsObject;
- private loadingSubject: BehaviorSubject = new BehaviorSubject(false);
- public loading$: Observable = this.loadingSubject.asObservable();
- public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'state'];
- public selection: SelectionModel = new SelectionModel(true, []);
- @Output() public changedSelection: EventEmitter> = new EventEmitter();
-
- private subscription?: Subscription;
-
- constructor(public translate: TranslateService, private route: ActivatedRoute, private userService: ManagementService,
- private toast: ToastService) {
- this.subscription = this.route.params.subscribe(() => this.getData(10, 0));
-
- this.selection.changed.subscribe(() => {
- this.changedSelection.emit(this.selection.selected);
+export class UserListComponent {
+ public UserType: any = UserType;
+ public type: UserType = UserType.HUMAN;
+ constructor(public translate: TranslateService, activatedRoute: ActivatedRoute) {
+ activatedRoute.data.pipe(take(1)).subscribe(params => {
+ const { type } = params;
+ this.type = type;
});
}
-
- 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 ngOnDestroy(): void {
- this.subscription?.unsubscribe();
- }
-
- public changePage(event: PageEvent): void {
- this.getData(event.pageSize, event.pageIndex * event.pageSize);
- }
-
- 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.getData(10, 0);
- });
- }
-
- 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.getData(10, 0);
- });
- }
-
- private async getData(limit: number, offset: number): Promise {
- this.loadingSubject.next(true);
- this.userService.SearchUsers(limit, offset).then(resp => {
- this.userResult = resp.toObject();
- this.dataSource.data = this.userResult.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);
- }
}
diff --git a/console/src/app/pages/users/user-list/user-list.module.ts b/console/src/app/pages/users/user-list/user-list.module.ts
index 8504d54511..892d85171f 100644
--- a/console/src/app/pages/users/user-list/user-list.module.ts
+++ b/console/src/app/pages/users/user-list/user-list.module.ts
@@ -18,11 +18,13 @@ import { SharedModule } from 'src/app/modules/shared/shared.module';
import { UserListRoutingModule } from './user-list-routing.module';
import { UserListComponent } from './user-list.component';
+import { UserTableComponent } from './user-table/user-table.component';
@NgModule({
declarations: [
UserListComponent,
+ UserTableComponent,
],
imports: [
AvatarModule,
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.html b/console/src/app/pages/users/user-list/user-table/user-table.component.html
new file mode 100644
index 0000000000..6c4523fc2a
--- /dev/null
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+ add{{ 'ACTIONS.NEW' | translate }}
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+ {{ 'USER.PROFILE.FIRSTNAME' | translate }} |
+ {{user[userType]?.firstName}} |
+
+
+
+ {{ 'USER.PROFILE.LASTNAME' | translate }} |
+ {{user[userType]?.lastName}} |
+
+
+
+ {{ 'USER.MACHINE.NAME' | translate }} |
+ {{user[userType]?.name}} |
+
+
+
+ {{ 'USER.MACHINE.DESCRIPTION' | translate }} |
+ {{user[userType]?.description}} |
+
+
+
+ {{ 'USER.PROFILE.USERNAME' | translate }} |
+ {{user.userName}} |
+
+
+
+ {{ 'USER.EMAIL' | translate }} |
+ {{user[userType]?.email}} |
+
+
+ {{ 'USER.DATA.STATE' | translate }} |
+ {{ 'USER.DATA.STATE'+user.state | translate }} |
+
+
+ |
+
+
+
+
+
+