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

Filter by date

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-13 23:08:33 +02:00
parent b4e077bb18
commit a69f8d09da
4 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@
></redaction-pagination>
<div class="separator">·</div>
<form [formGroup]="filterForm">
<div class="red-input-group w-150">
<div class="red-input-group w-150 mr-20">
<mat-form-field class="no-label">
<mat-select formControlName="category">
<mat-option *ngFor="let category of categories" [value]="category">
@ -35,7 +35,6 @@
</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">
@ -60,6 +59,24 @@
</mat-select>
</mat-form-field>
</div>
<div class="separator">·</div>
<div class="red-input-group datepicker-wrapper mr-20">
<input placeholder="dd/mm/yy" [matDatepicker]="fromPicker" formControlName="from" />
<mat-datepicker-toggle matSuffix [for]="fromPicker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</div>
<div class="mr-20" translate="audit-screen.to"></div>
<div class="red-input-group datepicker-wrapper">
<input placeholder="dd/mm/yy" [matDatepicker]="toPicker" formControlName="to" />
<mat-datepicker-toggle matSuffix [for]="toPicker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker>
</div>
</form>
</div>
</div>
@ -77,11 +94,11 @@
<div>
{{ log.message }}
</div>
<div>
<div class="small-label">
{{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
</div>
<div>
{{ log.userId }}
<redaction-initials-avatar size="small" [userId]="log.userId" [withName]="true"></redaction-initials-avatar>
</div>
<div>
{{ log.category }}

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

@ -20,6 +20,10 @@
font-size: 16px;
opacity: 0.7;
}
.mr-20 {
margin-right: 20px;
}
}
cdk-virtual-scroll-viewport {

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

@ -3,6 +3,7 @@ import { PermissionsService } from '../../../common/service/permissions.service'
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuditControllerService, AuditResponse, AuditSearchRequest } from '@redaction/red-ui-http';
import { TranslateService } from '@ngx-translate/core';
import { Moment } from 'moment';
const PAGE_SIZE = 5;
@ -22,6 +23,9 @@ export class AuditScreenComponent {
public ALL_CATEGORIES = 'audit-screen.all-categories';
public ALL_USERS = 'audit-screen.all-users';
private _previousFrom: Moment;
private _previousTo: Moment;
constructor(
public readonly permissionsService: PermissionsService,
private readonly _formBuilder: FormBuilder,
@ -30,25 +34,57 @@ export class AuditScreenComponent {
) {
this.filterForm = this._formBuilder.group({
category: [this.ALL_CATEGORIES],
userId: [this.ALL_USERS]
userId: [this.ALL_USERS],
from: [],
to: []
});
this.filterForm.valueChanges.subscribe(() => this._fetchData());
this.filterForm.valueChanges.subscribe((value) => {
if (!this._updateDateFilters(value)) {
this._fetchData();
}
});
this._fetchData();
}
private _updateDateFilters(value): boolean {
if (!!value.to && !!value.from) {
if (this._previousFrom !== value.from) {
if (value.to.isBefore(value.from)) {
this.filterForm.patchValue({ to: value.from });
return true;
}
} else if (this._previousTo !== value.to) {
if (value.to.isBefore(value.from)) {
this.filterForm.patchValue({ from: value.to });
return true;
}
}
}
this._previousFrom = this.filterForm.get('from').value;
this._previousTo = this.filterForm.get('to').value;
return false;
}
private _fetchData(page?: number) {
this.viewReady = false;
const promises = [];
const category = this.filterForm.get('category').value;
const userId = this.filterForm.get('userId').value;
const from = this.filterForm.get('from').value;
let to = this.filterForm.get('to').value;
if (!!to) {
to = to.clone().add(1, 'd');
}
const logsRequestBody: AuditSearchRequest = {
pageSize: PAGE_SIZE,
withTotalHits: true,
page: page,
category: category === this.ALL_CATEGORIES ? undefined : category,
userId: userId === this.ALL_USERS ? undefined : userId
userId: userId === this.ALL_USERS ? undefined : userId,
from,
to
};
promises.push(this._auditControllerService.getAuditCategories().toPromise());

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

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