src/app/audit/components/audit-record-list-bar/audit-record-list-bar.component.ts
Audit Record List Bar
changeDetection | ChangeDetectionStrategy.OnPush |
selector | app-list-bar-audit-record |
styleUrls | styles.scss |
templateUrl | ./audit-record-list-bar.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor()
|
actions
|
Actions
Type: |
actionTypes
|
Actions
Type: |
countSelected
|
Count selected checkbox
Default value: |
operationTypes
|
Operation Types |
page
|
Page
Type: |
params
|
Params
Type: |
action
|
Action $event type: EventEmitter
|
refresh
|
Refresh $event type: EventEmitter
|
search
|
Search $event type: EventEmitter
|
clearSearch |
clearSearch()
|
Reset the search parameters and run the search
Returns :
void
|
doRefresh |
doRefresh()
|
Returns :
void
|
doSearch |
doSearch()
|
Returns :
void
|
fire | ||||||||
fire(action: )
|
||||||||
Parameters :
Returns :
void
|
isEmpty |
isEmpty()
|
Determine if there is no audit record
Returns :
boolean
|
isSearchActive |
isSearchActive()
|
Used to determinate the state of the query parameters
Returns :
boolean
Search is active |
ngOnInit |
ngOnInit()
|
On Init
Returns :
void
|
splitControlDate |
splitControlDate()
|
Returns :
{ fromDate: any; toDate: any; }
|
form |
form:
|
Form |
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AuditRecordListParams } from '../audit.interface';
import { Page } from '../../../shared/model/page';
import { AuditOperationType, AuditActionType } from '../../../shared/model/audit-record.model';
import { Subject } from 'rxjs';
import { DateTime } from 'luxon';
/**
* Audit Record List Bar
*
* @author Gunnar Hillert
*/
@Component({
selector: 'app-list-bar-audit-record',
styleUrls: ['./styles.scss'],
templateUrl: './audit-record-list-bar.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AuditRecordListBarComponent implements OnInit {
/**
* Params
*/
@Input() params: AuditRecordListParams;
/**
* Page
*/
@Input() page: Page<any>;
/**
* Refresh
*/
@Output() refresh = new EventEmitter();
/**
* Search
*/
@Output() search = new EventEmitter<AuditRecordListParams>();
/**
* Action
*/
@Output() action = new EventEmitter<any>();
/**
* Count selected checkbox
*/
@Input() countSelected = 0;
/**
* Actions
*/
@Input() actions: Array<object>;
/**
* Operation Types
*/
@Input() operationTypes: Subject<AuditOperationType>;
/**
* Actions
*/
@Input() actionTypes: Subject<AuditActionType>;
/**
* Form
*/
form = {
q: '',
operation: null,
action: null,
dateRange: null
};
/**
* Constructor
*/
constructor() {
}
/**
* On Init
*/
ngOnInit() {
this.form.q = this.params.q;
this.form.operation = this.params.operation;
this.form.action = this.params.action;
if (this.params.fromDate && this.params.toDate) {
this.form.dateRange = [
this.params.fromDate.toJSDate(), this.params.toDate.toJSDate()
];
}
}
/**
* Determine if there is no audit record
*/
isEmpty(): boolean {
if (this.page && this.page.totalPages < 2 && this.page.totalElements < 1) {
return (this.params.q === '' || !this.params.q)
&& (!this.params.action) && (!this.params.operation) && (!this.params.toDate) && (!this.params.fromDate);
}
return false;
}
/**
* Used to determinate the state of the query parameters
* @returns {boolean} Search is active
*/
isSearchActive() {
let paramRange = '';
let formRange = '';
const values = this.splitControlDate();
if (values.fromDate && values.toDate) {
formRange = `${values.fromDate.toISO()}-${values.toDate.toISO()}`;
}
if (this.params.fromDate && this.params.toDate) {
paramRange = `${this.params.fromDate.toISO()}-${this.params.toDate.toISO()}`;
}
return (this.form.action !== this.params.action)
|| (this.form.operation !== this.params.operation)
|| (this.form.q !== this.params.q)
|| (paramRange !== formRange);
}
splitControlDate() {
let fromDate, toDate;
if (this.form.dateRange && Array.isArray(this.form.dateRange) && this.form.dateRange.length === 2) {
fromDate = DateTime.fromJSDate(this.form.dateRange[0]).startOf('day');
toDate = DateTime.fromJSDate(this.form.dateRange[1]).endOf('day');
}
return {
fromDate: fromDate,
toDate: toDate
};
}
/**
* Reset the search parameters and run the search
*/
clearSearch() {
this.form.q = '';
this.form.action = null;
this.form.operation = null;
this.form.dateRange = null;
this.doSearch();
}
doSearch() {
const values = this.splitControlDate();
const params: AuditRecordListParams = Object.assign(this.params, {
q: this.form.q,
action: this.form.action,
operation: this.form.operation,
fromDate: values.fromDate,
toDate: values.toDate,
page: 1
});
this.search.emit(params);
}
doRefresh() {
this.refresh.emit();
}
fire(action) {
this.action.emit({ action: action });
}
}
<form id="filters" class="list-bar list-bar-audit" *ngIf="page && params && !isEmpty()" #auditRecordsForm="ngForm"
name="auditRecordsForm" role="form" (ngSubmit)="doSearch()" novalidate>
<div class="list-bar-filter">
<span>
<input class="form-control" autocomplete="off" placeholder="Date Range"
name="daterange" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="form.dateRange">
</span>
<div class="list-bar-dropdown">
<div dropdown class="dropdown">
<a class="filter-dropdown-toggle" dropdownToggle>
<span *ngIf="form.operation == null">
All operations
</span>
<span *ngIf="form.operation != null">
Operation: <strong>{{ form.operation.name }}</strong>
</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" *dropdownMenu="">
<li [class.active]="form.operation == '' || form.operation == null"><a (click)="form.operation = null">All Operations</a></li>
<li *ngFor="let operationType of operationTypes | async"
[class.active]="form.operation != null && form.operation.key == operationType.key"><a (click)="form.operation = operationType">{{operationType.name}}</a></li>
</ul>
</div>
</div>
<div class="list-bar-dropdown">
<div dropdown class="dropdown">
<a class="filter-dropdown-toggle" dropdownToggle>
<span *ngIf="form.action == null">
All actions
</span>
<span *ngIf="form.action != null">
Action: <strong>{{ form.action.name }}</strong>
</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" *dropdownMenu="">
<li [class.active]="form.action == '' || form.action == null"><a (click)="form.action = null">All Actions</a></li>
<li *ngFor="let actionType of actionTypes | async"
[class.active]="form.action != null && form.action.key == actionType.key"><a (click)="form.action = actionType">{{actionType.name}}</a></li>
</ul>
</div>
</div>
<button id="search-submit" [disabled]="!isSearchActive()" type="submit" class="list-bar-submit btn btn-default">
<span class="fa fa-search"></span>
</button>
</div>
<div class="list-bar-divider"></div>
<div class="list-bar-right">
<button (click)="doRefresh()" name="app-refresh" type="button" class="btn btn-default btn-fa" title="Refresh">
<span class="fa fa-refresh"></span>
Refresh
</button>
</div>
</form>