File

src/app/audit/components/audit-record-list-bar/audit-record-list-bar.component.ts

Description

Audit Record List Bar

Implements

OnInit

Example

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-list-bar-audit-record
styleUrls styles.scss
templateUrl ./audit-record-list-bar.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

actions

Actions

Type: Array<object>

actionTypes

Actions

Type: Subject<AuditActionType>

countSelected

Count selected checkbox

Default value: 0

operationTypes

Operation Types

Type: Subject<AuditOperationType>

page

Page

Type: Page<any>

params

Params

Type: AuditRecordListParams

Outputs

action

Action

$event type: EventEmitter
refresh

Refresh

$event type: EventEmitter
search

Search

$event type: EventEmitter

Methods

clearSearch
clearSearch()

Reset the search parameters and run the search

Returns : void
doRefresh
doRefresh()
Returns : void
doSearch
doSearch()
Returns : void
fire
fire(action: )
Parameters :
Name Type Optional Description
action
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; }

Properties

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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""