Filter by date

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

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

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

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

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

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

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

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