diff --git a/apps/red-ui/src/app/models/audit-model-wrapper.model.ts b/apps/red-ui/src/app/models/audit-model-wrapper.model.ts new file mode 100644 index 000000000..f14207327 --- /dev/null +++ b/apps/red-ui/src/app/models/audit-model-wrapper.model.ts @@ -0,0 +1,38 @@ +import { AuditModel } from '@redaction/red-ui-http'; +import { Listable } from '@iqser/common-ui'; + +export class AuditModelWrapper implements Listable { + constructor(public auditModel: AuditModel) {} + + get category(): string { + return this.auditModel.category; + } + + get details(): any { + return this.auditModel.details; + } + + get message(): string { + return this.auditModel.message; + } + + get recordId(): string { + return this.auditModel.recordId; + } + + get recordDate(): string { + return this.auditModel.recordDate; + } + + get objectId(): string { + return this.auditModel.objectId; + } + + get userId(): string { + return this.auditModel.userId; + } + + get id() { + return this.auditModel.recordDate; + } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html index ef0a8a160..1acbb6518 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html @@ -20,115 +20,100 @@
-
- - {{ 'audit-screen.table-header.title' | translate: { length: logs?.totalHits || 0 } }} - -
- -
·
-
-
- - - - {{ translations[category] | translate }} - - - -
-
- - - - -
- - - -
- - - -
-
·
-
- - - - - -
- -
- -
- - - - - -
-
-
-
- -
- - - - -
-
- - - - -
-
- {{ log.message }} -
-
- {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }} -
-
- -
-
-
-
- + +
+ + +
+ +
·
+
+
+ + + + {{ translations[category] | translate }} + + + +
+
+ + + + +
+ + + +
+ + + +
+
·
+
+ + + + + +
+ +
+ +
+ + + + + +
+
+
+ + + +
+ {{ log.message }} +
+ + + +
+ {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }} +
+ + + +
+ +
+ + + +
+ diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss index 7d1dd7e64..2d70b41e7 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss @@ -1,44 +1,24 @@ -.content-container { - .header-item { - justify-content: space-between; +:host ::ng-deep iqser-table iqser-table-header .header-item { + justify-content: space-between; +} + +.actions-wrapper, +form { + display: flex; + align-items: center; + + .iqser-input-group { + margin-top: 0 !important; } - .actions-wrapper, - form { - display: flex; - align-items: center; - - .iqser-input-group { - margin-top: 0 !important; - } - - .separator { - margin: 0 20px; - font-weight: bold; - font-size: 16px; - opacity: 0.7; - } - - .mr-20 { - margin-right: 20px; - } + .separator { + margin: 0 20px; + font-weight: bold; + font-size: 16px; + opacity: 0.7; } - cdk-virtual-scroll-viewport { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: 1fr 1fr 1fr 1fr 11px; - - .table-item { - > div { - padding: 0 24px; - } - } - } - - &.has-scrollbar:hover { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - } + .mr-20 { + margin-right: 20px; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts index f2d195b81..5451a3c57 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts @@ -1,41 +1,49 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { AuditControllerService, AuditResponse, AuditSearchRequest } from '@redaction/red-ui-http'; +import { AuditControllerService, AuditModel, AuditResponse, AuditSearchRequest } from '@redaction/red-ui-http'; import { Moment } from 'moment'; import { applyIntervalConstraints } from '@utils/date-inputs-utils'; -import { AutoUnsubscribe, LoadingService } from '@iqser/common-ui'; +import { DefaultListingServices, KeysOf, ListingComponent, LoadingService, TableColumnConfig } from '@iqser/common-ui'; import { auditCategoriesTranslations } from '../../translations/audit-categories-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { UserService } from '@services/user.service'; +import { AuditModelWrapper } from '../../../../models/audit-model-wrapper.model'; const PAGE_SIZE = 50; @Component({ selector: 'redaction-audit-screen', templateUrl: './audit-screen.component.html', - styleUrls: ['./audit-screen.component.scss'] + styleUrls: ['./audit-screen.component.scss'], + providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => AuditScreenComponent) }] }) -export class AuditScreenComponent extends AutoUnsubscribe implements OnDestroy { +export class AuditScreenComponent extends ListingComponent implements OnDestroy, OnInit { readonly ALL_CATEGORIES = 'allCategories'; readonly ALL_USERS = _('audit-screen.all-users'); readonly translations = auditCategoriesTranslations; readonly currentUser = this._userService.currentUser; - + @ViewChild('messageTemplate', { static: true }) messageTemplate: TemplateRef; + @ViewChild('dateTemplate', { static: true }) dateTemplate: TemplateRef; + @ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef; + @ViewChild('categoryTemplate', { static: true }) categoryTemplate: TemplateRef; filterForm: FormGroup; categories: string[] = []; userIds: Set; logs: AuditResponse; - + tableColumnConfigs: TableColumnConfig[]; + readonly tableHeaderLabel = _('audit-screen.table-header.title'); + protected readonly _primaryKey: KeysOf = 'recordDate'; private _previousFrom: Moment; private _previousTo: Moment; constructor( private readonly _userService: UserService, + protected readonly _injector: Injector, private readonly _formBuilder: FormBuilder, private readonly _loadingService: LoadingService, private readonly _auditControllerService: AuditControllerService ) { - super(); + super(_injector); this.filterForm = this._formBuilder.group({ category: [this.ALL_CATEGORIES], userId: [this.ALL_USERS], @@ -43,13 +51,11 @@ export class AuditScreenComponent extends AutoUnsubscribe implements OnDestroy { to: [] }); - this.addSubscription = this.filterForm.valueChanges.subscribe(value => { + this.addSubscription = this.filterForm.valueChanges.subscribe(async value => { if (!this._updateDateFilters(value)) { - this._fetchData(); + await this._fetchData(); } }); - - this._fetchData(); } get totalPages(): number { @@ -59,8 +65,35 @@ export class AuditScreenComponent extends AutoUnsubscribe implements OnDestroy { return Math.ceil(this.logs.totalHits / PAGE_SIZE); } - pageChanged(page: number) { - this._fetchData(page); + async pageChanged(page: number) { + await this._fetchData(page); + } + + async ngOnInit() { + this._configureTableColumns(); + await this._fetchData(); + } + + private _configureTableColumns() { + this.tableColumnConfigs = [ + { + label: _('audit-screen.table-col-names.message'), + template: this.messageTemplate + }, + { + label: _('audit-screen.table-col-names.date'), + template: this.dateTemplate + }, + { + label: _('audit-screen.table-col-names.user'), + class: 'user-column', + template: this.userTemplate + }, + { + label: _('audit-screen.table-col-names.category'), + template: this.categoryTemplate + } + ]; } private _updateDateFilters(value): boolean { @@ -73,7 +106,7 @@ export class AuditScreenComponent extends AutoUnsubscribe implements OnDestroy { return false; } - private _fetchData(page?: number) { + private async _fetchData(page?: number) { this._loadingService.start(); const promises = []; const category = this.filterForm.get('category').value; @@ -96,15 +129,16 @@ export class AuditScreenComponent extends AutoUnsubscribe implements OnDestroy { promises.push(this._auditControllerService.getAuditCategories().toPromise()); promises.push(this._auditControllerService.searchAuditLog(logsRequestBody).toPromise()); - Promise.all(promises).then(data => { - this.categories = data[0].map(c => c.category); - 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._loadingService.stop(); - }); + const data = await Promise.all(promises); + this.categories = data[0].map(c => c.category); + this.categories.splice(0, 0, this.ALL_CATEGORIES); + this.logs = data[1]; + const entities = this.logs.data.map((log: AuditModel) => new AuditModelWrapper(log)); + this.entitiesService.setEntities(entities); + 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._loadingService.stop(); } } diff --git a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html index b8646c687..e1a7651a5 100644 --- a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html +++ b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html @@ -1,4 +1,4 @@ -
+
|
DISPLAYED_ITEMS; - } - selectPage(page: number | string) { if (page !== '...') { this.pageChanged.emit(page as number); diff --git a/libs/common-ui b/libs/common-ui index 08222bdae..d6764126b 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 08222bdaeb1e16b37c75b66a2a49b0b3b96d9de7 +Subproject commit d6764126b4ad7f94b977b4c0f4e7a6ec31e6f374