fix(console): refresh tables, auto refresh emitter, avatar colors (#487)

* refreshtable component * project grant refresh table * project role refresh, user grant, i18n * lint * auth user mfa table * auth mfa table * rm unused 404 page, add mgmt mfa table * change light accent color * add actions to mfa table * user detail mfa table * clear selection on refresh, bind data length * member table * fix padding mfa table * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * z-index, new colors * new senf color Co-authored-by: Florian Forster <[email protected]>
2026-11-07 22:55:12 +00:00 · 2020-07-20 15:23:29 +02:00
parent 933193855a
commit 117a0d7b19
57 changed files with 789 additions and 711 deletions
@@ -126,7 +126,7 @@
            </div>
        </app-card>

-        <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
+        <app-auth-user-mfa *ngIf="user" #mfaComponent></app-auth-user-mfa>
    </div>

    <div *ngIf="user" class="side" metainfo>
@@ -1,19 +1,37 @@
 <app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
-    <div class="col">
-        <div class="row" *ngFor="let mfa of mfaSubject | async">
-            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
-            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}" *ngIf="mfa.state === MFAState.MFASTATE_READY"
-                class="verified las la-check-circle"></i>
-            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}"
-                *ngIf="mfa.state === MFAState.MFASTATE_NOT_READY || mfa.state === MFAState.MFASTATE_REMOVED"
-                class="primary las la-ban"></i>
-            <button mat-icon-button (click)="deleteMFA(mfa.type)" color="warn"
-                matTooltip="{{'ACTIONS.DELETE' | translate}}">
-                <i class="las la-trash"></i>
-            </button>
-        </div>
-        <p class="row" *ngIf="error">{{error}}</p>
-    </div>
+    <app-refresh-table (refreshed)="getOTP()" [dataSize]="dataSource?.data?.length">
+        <table class="background-style" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa"> {{'USER.MFA.TYPE.'+ mfa.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa"><span class="centered">
+                        {{'USER.MFA.STATE.'+ mfa.state | translate}}
+                        <i matTooltip="verified" *ngIf="mfa.state === MFAState.MFASTATE_READY"
+                            class="verified las la-check-circle"></i>
+                    </span>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLEACTIONS' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa">
+                    <button matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
+                        (click)="deleteMFA(mfa.type)">
+                        <i class="las la-trash"></i>
+                    </button>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                [routerLink]="['/users', row.id]">
+            </tr>
+        </table>
+    </app-refresh-table>
    <div class="add-row">
        <button *ngIf="otpAvailable" (click)="addOTP()" mat-stroked-button color="primary"
            matTooltip="{{'ACTIONS.NEW' | translate}}">
@@ -1,22 +1,4 @@

-.col {
-    display: flex;
-    flex-direction: column;
-    border-bottom: 1px solid #ffffff20;
-    margin-bottom: 1rem;
-
-    .row {
-        display: flex;
-        justify-content: space-between;
-        padding: .5rem 0;
-        align-items: center;
-
-        span {
-            flex: 1;
-        }
-    }
-}
-
  .add-row {
      display: flex;
      margin: -.5rem;
@@ -24,9 +6,35 @@
      button {
          border-radius: .5rem;
          margin: .5rem;
+          margin-top: 1rem;

          mat-icon {
              margin-right: .5rem;
          }
      }
+  }
+
+  .centered {
+      display: flex;
+      align-items: center;
+
+      i {
+          margin-left: 1rem;
+          color: #5282c1;
+      }
+  }
+
+  table {
+    width: 100%;
+
+    td, th {
+        &:first-child {
+            padding-left: 0;
+            padding-right: 1rem;
+        }
+
+        &:last-child {
+            padding-right: 0;
+        }
+    }
  }
@@ -1,5 +1,7 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MfaOtpResponse, MFAState, MfaType, MultiFactor } from 'src/app/proto/generated/auth_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
@@ -13,28 +15,31 @@ import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
    styleUrls: ['./auth-user-mfa.component.scss'],
 })
 export class AuthUserMfaComponent implements OnInit, OnDestroy {
-    public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
+    public displayedColumns: string[] = ['type', 'state', 'actions'];
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();

+    @ViewChild(MatTable) public table!: MatTable<MultiFactor.AsObject>;
+    @ViewChild(MatSort) public sort!: MatSort;
+    public dataSource!: MatTableDataSource<MultiFactor.AsObject>;
+
    public MfaType: any = MfaType;
    public MFAState: any = MFAState;

    public error: string = '';
    public otpAvailable: boolean = false;
-    constructor(private userService: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }
+    constructor(private service: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }

    public ngOnInit(): void {
        this.getOTP();
    }

    public ngOnDestroy(): void {
-        this.mfaSubject.complete();
        this.loadingSubject.complete();
    }

    public addOTP(): void {
-        this.userService.AddMfaOTP().then((otpresp) => {
+        this.service.AddMfaOTP().then((otpresp) => {
            const otp: MfaOtpResponse.AsObject = otpresp.toObject();
            const dialogRef = this.dialog.open(DialogOtpComponent, {
                data: otp.url,
@@ -43,7 +48,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {

            dialogRef.afterClosed().subscribe((code) => {
                if (code) {
-                    this.userService.VerifyMfaOTP(code).then((res) => {
+                    (this.service as AuthUserService).VerifyMfaOTP(code).then(() => {
                        // TODO: show state
                    });
                }
@@ -54,28 +59,28 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
    }

    public getOTP(): void {
-        this.userService.GetMyMfas().then(mfas => {
-            this.mfaSubject.next(mfas.toObject().mfasList);
+        this.service.GetMyMfas().then(mfas => {
+            console.log(mfas.toObject().mfasList);
+            this.dataSource = new MatTableDataSource(mfas.toObject().mfasList);
+            this.dataSource.sort = this.sort;
+
            const index = mfas.toObject().mfasList.findIndex(mfa => mfa.type === MfaType.MFATYPE_OTP);
            if (index === -1) {
                this.otpAvailable = true;
            }
        }).catch(error => {
-            console.error(error);
            this.error = error.message;
        });
    }

    public deleteMFA(type: MfaType): void {
        if (type === MfaType.MFATYPE_OTP) {
-            this.userService.RemoveMfaOTP().then(() => {
+            this.service.RemoveMfaOTP().then(() => {
                this.toast.showInfo('USER.TOAST.OTPREMOVED', true);

-                const index = this.mfaSubject.value.findIndex(mfa => mfa.type === type);
+                const index = this.dataSource.data.findIndex(mfa => mfa.type === type);
                if (index > -1) {
-                    const newValues = this.mfaSubject.value;
-                    newValues.splice(index, 1);
-                    this.mfaSubject.next(newValues);
+                    this.dataSource.data.splice(index, 1);
                }

            }).catch(error => {
@@ -17,6 +17,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -68,6 +69,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
        MatTableModule,
        MatPaginatorModule,
        SharedModule,
+        RefreshTableModule,
    ],
 })
 export class UserDetailModule { }
@@ -1,12 +1,28 @@
-<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}"
-    *ngIf="mfaSubject && (mfaSubject | async)?.length > 0">
-    <div class="col">
-        <div class="row" *ngFor="let mfa of mfaSubject | async">
-            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
-            <span>{{'USER.MFA.STATE.'+ mfa.state | translate}}</span>
-        </div>
-        <p class="row" *ngIf="error">{{error}}</p>
-    </div>
+<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
+    <app-refresh-table (refreshed)="getOTP()" [dataSize]="dataSource?.data?.length">
+        <table class="background-style" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa"> {{'USER.MFA.TYPE.'+ mfa.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa">
+                    <span class="centered">
+                        {{'USER.MFA.STATE.'+ mfa.state | translate}}
+                        <i matTooltip="verified" *ngIf="mfa.state === MFAState.MFASTATE_READY"
+                            class="verified las la-check-circle"></i>
+                    </span>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                [routerLink]="['/users', row.id]">
+            </tr>
+        </table>
+    </app-refresh-table>
    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
@@ -15,4 +15,29 @@
            flex: 1;
        }
    }
+}
+
+.centered {
+    display: flex;
+    align-items: center;
+
+    i {
+        margin-left: 1rem;
+        color: #5282c1;
+    }
+}
+
+table {
+    width: 100%;
+
+    td, th {
+        &:first-child {
+            padding-left: 0;
+            padding-right: 1rem;
+        }
+
+        &:last-child {
+            padding-right: 0;
+        }
+    }
 }
@@ -1,4 +1,6 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MFAState, MfaType, MultiFactor, UserView } from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
@@ -15,11 +17,16 @@ export interface MFAItem {
    styleUrls: ['./user-mfa.component.scss'],
 })
 export class UserMfaComponent implements OnInit, OnDestroy {
+    public displayedColumns: string[] = ['type', 'state'];
    @Input() private user!: UserView.AsObject;
    public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();

+    @ViewChild(MatTable) public table!: MatTable<MultiFactor.AsObject>;
+    @ViewChild(MatSort) public sort!: MatSort;
+    public dataSource!: MatTableDataSource<MultiFactor.AsObject>;
+
    public MfaType: any = MfaType;
    public MFAState: any = MFAState;

@@ -37,10 +44,10 @@ export class UserMfaComponent implements OnInit, OnDestroy {

    public getOTP(): void {
        this.mgmtUserService.getUserMfas(this.user.id).then(mfas => {
-            this.mfaSubject.next(mfas.toObject().mfasList);
-            this.error = '';
+            console.log(mfas.toObject().mfasList);
+            this.dataSource = new MatTableDataSource(mfas.toObject().mfasList);
+            this.dataSource.sort = this.sort;
        }).catch(error => {
-            console.error(error);
            this.error = error.message;
        });
    }
@@ -2,19 +2,8 @@
    <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
    <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>

-    <div class="table-header-row">
-        <div class="col">
-            <ng-container *ngIf="!selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-                <span class="count">{{dataSource?.data?.length}}</span>
-            </ng-container>
-            <ng-container *ngIf="selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                <span class="count">{{selection?.selected?.length}}</span>
-            </ng-container>
-        </div>
-        <span class="fill-space"></span>
-        <ng-template appHasRole [appHasRole]="['user.write']">
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.data.length">
+        <ng-template appHasRole [appHasRole]="['user.write']" actions>
            <button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
                class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
                <mat-icon svgIcon="mdi_account_cancel"></mat-icon>
@@ -27,60 +16,61 @@
                <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
            </a>
        </ng-template>
-    </div>
-    <div class="table-wrapper">
-        <div class="spinner-container" *ngIf="loading$ | async">
-            <mat-spinner diameter="50"></mat-spinner>
+
+        <div class="table-wrapper">
+            <div class="spinner-container" *ngIf="loading$ | async">
+                <mat-spinner diameter="50"></mat-spinner>
+            </div>
+            <table class="background-style" mat-table [dataSource]="dataSource">
+                <ng-container matColumnDef="select">
+                    <th mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                            [checked]="selection.hasValue() && isAllSelected()"
+                            [indeterminate]="selection.hasValue() && !isAllSelected()">
+                        </mat-checkbox>
+                    </th>
+                    <td mat-cell *matCellDef="let user">
+                        <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                            (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
+                            <app-avatar *ngIf="user && user.displayName" class="avatar" [name]="user.displayName"
+                                [size]="32">
+                            </app-avatar>
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="firstname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="lastname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.email}} </td>
+                </ng-container>
+                <ng-container matColumnDef="state">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                    [routerLink]="['/users', row.id]">
+                </tr>
+
+            </table>
+            <mat-paginator #paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
        </div>
-        <table class="background-style" mat-table [dataSource]="dataSource">
-            <ng-container matColumnDef="select">
-                <th mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-                    </mat-checkbox>
-                </th>
-                <td mat-cell *matCellDef="let user">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
-                        <app-avatar *ngIf="user && user.displayName" class="avatar" [name]="user.displayName"
-                            [size]="32">
-                        </app-avatar>
-                    </mat-checkbox>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="firstname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="lastname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="email">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.email}} </td>
-            </ng-container>
-            <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/users', row.id]">
-            </tr>
-
-        </table>
-        <mat-paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-    </div>
+    </app-refresh-table>
 </div>
@@ -7,34 +7,8 @@ h1 {
    margin-bottom: 2rem;
 }

-.table-header-row {
-    display: flex;
-    align-items: center;
-
-    .col {
-        display: flex;
-        flex-direction: column;
-
-        .desc {
-            font-size: .8rem;
-            color: #8795a1;
-        }
-        .count {
-            font-size: 2rem;
-        }
-    }
-
-    .fill-space {
-        flex: 1;
-    }
-
-    .icon-button {
-        margin-right: .5rem;
-    }
-
-    .add-button {
-        border-radius: .5rem;
-    }
+.add-button {
+    border-radius: .5rem;
 }

 .table-wrapper {
@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { PageEvent } from '@angular/material/paginator';
+import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -15,6 +15,7 @@ import { ToastService } from 'src/app/services/toast.service';
    styleUrls: ['./user-list.component.scss'],
 })
 export class UserListComponent implements OnDestroy {
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
    public dataSource: MatTableDataSource<User.AsObject> = new MatTableDataSource<User.AsObject>();
    public userResult!: UserSearchResponse.AsObject;
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@@ -83,4 +84,8 @@ export class UserListComponent implements OnDestroy {
            this.loadingSubject.next(false);
        });
    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
 }
@@ -13,13 +13,13 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';

 import { UserListRoutingModule } from './user-list-routing.module';
 import { UserListComponent } from './user-list.component';


-
@NgModule({
    declarations: [
        UserListComponent,
@@ -41,6 +41,7 @@ import { UserListComponent } from './user-list.component';
        MatTooltipModule,
        TranslateModule,
        SharedModule,
+        RefreshTableModule,
    ],
    exports: [
        UserListComponent,