System views updated
This commit is contained in:
Jose Alberto Hernandez
@@ -39,6 +39,8 @@ export class AuditTrailsDataSource implements DataSource<any> {
|
||||
pageIndex: number = 0,
|
||||
limit: number = 10
|
||||
) {
|
||||
console.log(pageIndex);
|
||||
console.log(limit);
|
||||
this.auditTrailsSubject.next([]);
|
||||
this.systemService
|
||||
.getAuditTrails(filterBy, orderBy, sortOrder, pageIndex * limit, limit)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<div class="container m-b-20 layout-row align-end">
|
||||
<button mat-raised-button color="primary" (click)="downloadCSV()">
|
||||
<fa-icon icon="file" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Download CSV' | translate }}
|
||||
@@ -110,7 +110,10 @@
|
||||
</mat-autocomplete>
|
||||
|
||||
<div class="container mat-elevation-z8 table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<div *ngIf="isLoading">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<table *ngIf="!isLoading" mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trail ID' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let auditTrail">{{ auditTrail.id }}</td>
|
||||
@@ -166,6 +169,7 @@
|
||||
</table>
|
||||
|
||||
<mat-paginator
|
||||
*ngIf="!isLoading"
|
||||
[length]="dataSource?.records$ | async"
|
||||
[pageSize]="10"
|
||||
[pageSizeOptions]="[10, 25, 50, 100]"
|
||||
|
||||
@@ -129,10 +129,12 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
|
||||
/** Checker form control. */
|
||||
checker = new UntypedFormControl();
|
||||
|
||||
isLoading = false;
|
||||
|
||||
/** Paginator for audit trails table. */
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
/** Sorter for audit trails table. */
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
/**
|
||||
* Retrieves the audit trail search template data from `resolve`.
|
||||
@@ -161,6 +163,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
|
||||
this.setFilteredActions();
|
||||
this.setFilteredEntities();
|
||||
this.setFilteredCheckers();
|
||||
this.dataSource = new AuditTrailsDataSource(this.systemService);
|
||||
this.getAuditTrails();
|
||||
}
|
||||
|
||||
@@ -264,7 +267,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
|
||||
//this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
|
||||
|
||||
merge(this.sort.sortChange, this.paginator.page)
|
||||
.pipe(tap(() => this.loadAuditTrailsPage()))
|
||||
@@ -275,14 +278,14 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
|
||||
* Initializes the data source for audit trails table and loads the first page.
|
||||
*/
|
||||
getAuditTrails() {
|
||||
this.dataSource = new AuditTrailsDataSource(this.systemService);
|
||||
this.dataSource.getAuditTrails(
|
||||
this.filterAuditTrailsBy,
|
||||
this.sort.active,
|
||||
this.sort.direction,
|
||||
this.paginator.pageIndex,
|
||||
this.paginator.pageSize
|
||||
);
|
||||
this.isLoading = true;
|
||||
const isActive: string = this.sort ? this.sort.active : '';
|
||||
const direction: string = this.sort ? this.sort.direction : '';
|
||||
const pageIndex: number = this.paginator ? this.paginator.pageIndex : 0;
|
||||
const pageSize: any = this.paginator ? this.paginator.pageSize : 20;
|
||||
|
||||
this.dataSource.getAuditTrails(this.filterAuditTrailsBy, isActive, direction, pageIndex, pageSize);
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -292,13 +295,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
|
||||
if (!this.sort.direction) {
|
||||
delete this.sort.active;
|
||||
}
|
||||
this.dataSource.getAuditTrails(
|
||||
this.filterAuditTrailsBy,
|
||||
this.sort.active,
|
||||
this.sort.direction,
|
||||
this.paginator.pageIndex,
|
||||
this.paginator.pageSize
|
||||
);
|
||||
this.getAuditTrails();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,108 +1,116 @@
|
||||
<div class="container layout-row-wrap align-between responsive-column gap-4percent">
|
||||
<div class="flex-46">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap">
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.ID' | translate }}
|
||||
</div>
|
||||
<div class="container layout-row align-between responsive-column">
|
||||
<mat-card class="flex-100">
|
||||
<mat-card-content class="flex-100">
|
||||
<div class="layout-row flex-100">
|
||||
<div class="flex-46">
|
||||
<div class="layout-row-wrap">
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.ID' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.id }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.id }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Status' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Status' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.processingResult }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.processingResult }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.User' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.User' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.maker }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.maker }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Action' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Action' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.actionName }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.actionName }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Entity' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Entity' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.entityName }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.entityName }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Resource ID' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Resource ID' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.resourceId }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.resourceId }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Date' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Date' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.madeOnDate | dateFormat }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ auditTrailData.madeOnDate | dateFormat }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
|
||||
{{ 'labels.inputs.Office' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
|
||||
{{ 'labels.inputs.Office' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50" *ngIf="auditTrailData.officeName">
|
||||
{{ auditTrailData.officeName }}
|
||||
</div>
|
||||
<div class="flex-50" *ngIf="auditTrailData.officeName">
|
||||
{{ auditTrailData.officeName }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
|
||||
{{ 'labels.inputs.Savings Account No' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
|
||||
{{ 'labels.inputs.Savings Account No' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
|
||||
{{ auditTrailData.savingsAccountNo }}
|
||||
</div>
|
||||
<div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
|
||||
{{ auditTrailData.savingsAccountNo }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
|
||||
{{ 'labels.inputs.Group Level' | translate }}
|
||||
</div>
|
||||
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
|
||||
{{ 'labels.inputs.Group Level' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50" *ngIf="auditTrailData.groupLevelName">
|
||||
{{ auditTrailData.groupLevelName }}
|
||||
<div class="flex-50" *ngIf="auditTrailData.groupLevelName">
|
||||
{{ auditTrailData.groupLevelName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="flex-46">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="command">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
|
||||
</ng-container>
|
||||
<div class="flex-46 command">
|
||||
<table mat-table [dataSource]="dataSource" class="command-table" matSort>
|
||||
<ng-container matColumnDef="command">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="commandValue">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
|
||||
{{ auditTrailCommand.commandValue }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="commandValue">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
|
||||
{{ auditTrailCommand.commandValue }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-row layout-align-center m-t-20 column-on-mobile">
|
||||
<button type="button" mat-raised-button color="primary" [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -12,3 +12,11 @@ table {
|
||||
.column-value-wrapper {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.command {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.command-table {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user