diff --git a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html index 651646ca9..d9b0fd6b8 100644 --- a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html @@ -25,13 +25,37 @@ (pageChanged)="pageChanged($event)" >
·
- -
+
- {{ category }} + {{ category | translate }} + + + +
+
·
+
+ + + + +
+
+ + +
@@ -54,7 +78,7 @@ {{ log.message }}
- {{ log.recordDate }} + {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
{{ log.userId }} diff --git a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.scss b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.scss index 03177cc29..c48b744be 100644 --- a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.scss +++ b/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; diff --git a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.ts b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.ts index 524a52280..e7ab08841 100644 --- a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.ts @@ -1,75 +1,71 @@ -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, AuditModel, AuditResponse, AuditSearchRequest } from '@redaction/red-ui-http'; +import { AuditControllerService, 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 { - public categoryForm: FormGroup; +export class AuditScreenComponent { + public filterForm: FormGroup; public viewReady = false; public categories: string[] = []; + public userIds: Set; 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.categoryForm = this._formBuilder.group({ - category: [ALL_CATEGORIES] + this.filterForm = this._formBuilder.group({ + category: [this.ALL_CATEGORIES], + userId: [this.ALL_USERS] }); - this.categoryForm.valueChanges.subscribe((value) => this._filterByCategories(value)); + this.filterForm.valueChanges.subscribe(() => this._fetchData()); + + this._fetchData(); } - ngOnInit(): void { - this._fetchAllData().then(() => { - 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 { + private _fetchData(page?: number) { + this.viewReady = false; 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([this.ALL_USERS]); + for (const id of this.logs.data.map((log) => log.userId).filter((uid) => !!uid)) { + this.userIds.add(id); + } + this.viewReady = true; }); } - private _filterByCategories(value: { category: string }) { - this.viewReady = false; - this._auditControllerService - .searchAuditLog(this._getAuditLogRequestBody()) - .toPromise() - .then((data) => { - this.logs = data; - this.viewReady = true; - }); - } - public get totalPages(): number { if (!this.logs) { return 0; @@ -78,13 +74,6 @@ export class AuditScreenComponent implements OnInit { } public pageChanged(page: number) { - this.viewReady = false; - this._auditControllerService - .searchAuditLog(this._getAuditLogRequestBody({ page })) - .toPromise() - .then((data) => { - this.logs = data; - this.viewReady = true; - }); + this._fetchData(page); } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 47543d156..3e3f618f4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/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",