Filter by user

apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html

@@ -25,13 +25,37 @@
                         (pageChanged)="pageChanged($event)"
                     ></redaction-pagination>
                     <div class="separator">·</div>
-                    <!--                    <div class="small-label" translate="audit-screen.table-header.category"></div>-->
+                    <form [formGroup]="filterForm">
-                    <form [formGroup]="categoryForm">
                         <div class="red-input-group w-150">
                             <mat-form-field class="no-label">
                                 <mat-select formControlName="category">
                                     <mat-option *ngFor="let category of categories" [value]="category">
-                                        {{ category }}
+                                        {{ category | translate }}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
+                        <div class="separator">·</div>
+                        <div class="red-input-group w-150">
+                            <mat-form-field class="no-label">
+                                <mat-select formControlName="userId">
+                                    <mat-select-trigger>
+                                        <redaction-initials-avatar
+                                            *ngIf="filterForm.get('userId').value !== ALL_USERS"
+                                            size="small"
+                                            [userId]="filterForm.get('userId').value"
+                                            [withName]="true"
+                                        ></redaction-initials-avatar>
+                                        <div *ngIf="filterForm.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
+                                    </mat-select-trigger>
+                                    <mat-option *ngFor="let userId of userIds" [value]="userId">
+                                        <redaction-initials-avatar
+                                            *ngIf="userId !== ALL_USERS"
+                                            size="small"
+                                            [userId]="userId"
+                                            [withName]="true"
+                                        ></redaction-initials-avatar>
+                                        <div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
                                     </mat-option>
                                 </mat-select>
                             </mat-form-field>
@@ -54,7 +78,7 @@
                         {{ log.message }}
                     </div>
                     <div>
-                        {{ log.recordDate }}
+                        {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
                     </div>
                     <div>
                         {{ log.userId }}

apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.scss

@@ -5,10 +5,15 @@
         justify-content: space-between;
     }
 
-    .actions-wrapper {
+    .actions-wrapper,
+    form {
         display: flex;
         align-items: center;
 
+        .red-input-group {
+            margin-top: 0 !important;
+        }
+
         .separator {
             margin: 0 20px;
             font-weight: bold;

apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.ts

@@ -1,71 +1,67 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { PermissionsService } from '../../../common/service/permissions.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { debounce } from '../../../utils/debounce';
+import { AuditControllerService, AuditResponse, AuditSearchRequest } from '@redaction/red-ui-http';
-import { AuditControllerService, AuditModel, AuditResponse, AuditSearchRequest } from '@redaction/red-ui-http';
 import { TranslateService } from '@ngx-translate/core';
 
 const PAGE_SIZE = 5;
-let ALL_CATEGORIES: string;
 
 @Component({
     selector: 'redaction-audit-screen',
     templateUrl: './audit-screen.component.html',
     styleUrls: ['./audit-screen.component.scss']
 })
-export class AuditScreenComponent implements OnInit {
+export class AuditScreenComponent {
-    public categoryForm: FormGroup;
+    public filterForm: FormGroup;
     public viewReady = false;
     public categories: string[] = [];
+    public userIds: Set<string>;
     public logs: AuditResponse;
     public currentPage = 1;
 
+    public ALL_CATEGORIES = 'audit-screen.all-categories';
+    public ALL_USERS = 'audit-screen.all-users';
+
     constructor(
         public readonly permissionsService: PermissionsService,
         private readonly _formBuilder: FormBuilder,
         private readonly _auditControllerService: AuditControllerService,
         private readonly _translateService: TranslateService
     ) {
-        ALL_CATEGORIES = this._translateService.instant('audit-screen.all-categories');
+        this.filterForm = this._formBuilder.group({
-
+            category: [this.ALL_CATEGORIES],
-        this.categoryForm = this._formBuilder.group({
+            userId: [this.ALL_USERS]
-            category: [ALL_CATEGORIES]
         });
 
-        this.categoryForm.valueChanges.subscribe((value) => this._filterByCategories(value));
+        this.filterForm.valueChanges.subscribe(() => this._fetchData());
+
+        this._fetchData();
     }
 
-    ngOnInit(): void {
+    private _fetchData(page?: number) {
-        this._fetchAllData().then(() => {
+        this.viewReady = false;
-            this.viewReady = true;
-        });
-    }
-
-    private _getAuditLogRequestBody(config?: { page: number }) {
-        const category = this.categoryForm.get('category').value;
-        return { pageSize: PAGE_SIZE, withTotalHits: true, page: config?.page, category: category === ALL_CATEGORIES ? undefined : category };
-    }
-
-    private _fetchAllData(): Promise<void> {
         const promises = [];
+        const category = this.filterForm.get('category').value;
+        const userId = this.filterForm.get('userId').value;
+        const logsRequestBody: AuditSearchRequest = {
+            pageSize: PAGE_SIZE,
+            withTotalHits: true,
+            page: page,
+            category: category === this.ALL_CATEGORIES ? undefined : category,
+            userId: userId === this.ALL_USERS ? undefined : userId
+        };
 
         promises.push(this._auditControllerService.getAuditCategories().toPromise());
-        promises.push(this._auditControllerService.searchAuditLog(this._getAuditLogRequestBody()).toPromise());
+        promises.push(this._auditControllerService.searchAuditLog(logsRequestBody).toPromise());
 
-        return Promise.all(promises).then((data) => {
+        Promise.all(promises).then((data) => {
             this.categories = data[0].map((c) => c.category);
-            this.categories.splice(0, 0, ALL_CATEGORIES);
+            this.categories.splice(0, 0, this.ALL_CATEGORIES);
             this.logs = data[1];
-        });
+            this.userIds = new Set<string>([this.ALL_USERS]);
+            for (const id of this.logs.data.map((log) => log.userId).filter((uid) => !!uid)) {
+                this.userIds.add(id);
             }
-
-    private _filterByCategories(value: { category: string }) {
-        this.viewReady = false;
-        this._auditControllerService
-            .searchAuditLog(this._getAuditLogRequestBody())
-            .toPromise()
-            .then((data) => {
-                this.logs = data;
             this.viewReady = true;
         });
     }
@@ -78,13 +74,6 @@ export class AuditScreenComponent implements OnInit {
     }
 
     public pageChanged(page: number) {
-        this.viewReady = false;
+        this._fetchData(page);
-        this._auditControllerService
-            .searchAuditLog(this._getAuditLogRequestBody({ page }))
-            .toPromise()
-            .then((data) => {
-                this.logs = data;
-                this.viewReady = true;
-            });
     }
 }

apps/red-ui/src/assets/i18n/en.json

@@ -801,7 +801,8 @@
             "date": "Date",
             "category": "Category"
         },
-        "all-categories": "All Categories"
+        "all-categories": "All Categories",
+        "all-users": "All Users"
     },
     "pagination": {
         "previous": "Prev",