Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Filter by user

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-13 22:37:32 +02:00
parent 5eb79a03e4
commit b4e077bb18
4 changed files with 70 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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]="categoryForm">
<form [formGroup]="filterForm">
<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 }}

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

@ -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;

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

@ -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<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.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<void> {
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<string>([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);
}
}

3
apps/red-ui/src/assets/i18n/en.json
View File

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