alerts.component.html

<page-header id="alertsheader_id">Alerts</page-header>

<div class="selectionCriteria">
  <mat-card>
    <mat-card-content>
      <div class="panel">
        <form name="filterForm" #filterForm="ngForm" (ngSubmit)="search()">
          <!-- Processed -->
          <mat-select placeholder="Processed" [(ngModel)]="filter.processed" name="processed" id="processed_id">
            <mat-option [value]="''"></mat-option>
            <mat-option *ngFor="let aprocessed of aProcessedValues" [value]="aprocessed">
              {{aprocessed}}
            </mat-option>
          </mat-select>
          <!-- Alert Type (Basic) -->
          <mat-select placeholder="Alert Type" [(ngModel)]="filter.alertType" name="alertType"
                     id="alerttype_id" (change)="onAlertTypeChanged(filter.alertType)">
            <mat-option [value]="''"></mat-option>
            <mat-option *ngFor="let atype of aTypes" [value]="atype">
              {{atype}}
            </mat-option>
          </mat-select>
          <!-- Alert Id (Advanced) -->
          <mat-form-field *ngIf="advancedSearch">
            <input matInput placeholder="Alert Id" name="alertId" [(ngModel)]="filter.alertId"
                   #alertId="ngModel" id="alertid_id">
          </mat-form-field>
          <!-- Alert Level (Basic) -->
          <mat-select placeholder="Alert Level" [(ngModel)]="filter.alertLevel" name="alertLevel"
                     id="alertlevel_id">
            <mat-option [value]="''">
            </mat-option>
            <mat-option *ngFor="let alevel of aLevels" [value]="alevel">
              {{alevel}}
            </mat-option>
          </mat-select>
          <!-- Creation From (Basic) -->
          <input [matDatepicker]="creationFromDatePicker"
                 placeholder="Creation From:"
                 appClearInvalid
                 [(ngModel)]="filter.creationFrom"
                 name="creationFrom"
                 [max]="timestampCreationFromMaxDate"
                 (dateChange)='onTimestampCreationFromChange($event)'
                 [type]="'datetime'" #timestampControl="ngModel" id="creationfrom_id" />
          <mat-datepicker #creationFromDatePicker></mat-datepicker>

          <!-- Creation To (Basic) -->
          <input [matDatepicker]="creationToDatePicker"
                 placeholder="Creation To:" appClearInvalid
                 [(ngModel)]="filter.creationTo"
                 name="creationTo"
                 [min]="timestampCreationToMinDate"
                 [max]="timestampCreationToMaxDate"
                 (dateChange)='onTimestampCreationToChange($event)'
                 [type]="'datetime'"
                 #timestampControl="ngModel" id="creationto_id"/>
          <mat-datepicker #creationToDatePicker></mat-datepicker>

          <!-- Reporting From -->
          <input [matDatepicker]="reportingFromDatePicker"
                 placeholder="Reporting From:" appClearInvalid
                 [(ngModel)]="filter.reportingFrom"
                 name="reportingFrom"
                 [max]="timestampReportingFromMaxDate"
                 (dateChange)='onTimestampReportingFromChange($event)'
                 [type]="'datetime'"
                 #timestampControl="ngModel" id="reportingfrom_id" *ngIf="advancedSearch" />
          <mat-datepicker #reportingFromDatePicker></mat-datepicker>

          <!-- Reporting To -->
          <input [matDatepicker]="reportingToDatePicker"
                 placeholder="Reporting To:" appClearInvalid
                 [(ngModel)]="filter.reportingTo"
                 name="reportingTo"
                 [min]="timestampReportingToMinDate"
                 [max]="timestampReportingToMaxDate"
                 (dateChange)='onTimestampReportingToChange($event)'
                 [type]="'datetime'"
                 #timestampControl="ngModel" id="reportingto_id" *ngIf="advancedSearch" />
          <mat-datepicker #reportingToDatePicker></mat-datepicker>

          <!-- Alert Type Criteria -->
          <div class="panel" *ngIf="isAlertTypeDefined()">
            <mat-card>
              <div>
              <mat-card-title>
                {{filter.alertType}}
              </mat-card-title>
              </div>
              <mat-card-content>
                <mat-form-field *ngFor="let item of items; let i = index">
                  <input matInput placeholder={{item}} name={{item}} [(ngModel)]="dynamicFilters[i]"
                     #{{item}}="ngModel" id={{item}}_id>
                </mat-form-field>
              </mat-card-content>
            </mat-card>
          </div>

          <!-- Search Button and Basic/Advanced Search-->
          <div class="searchArea">
            <button mat-raised-button color="primary" [disabled]="!filterForm.form.valid" id="searchbutton_id">
              <mat-icon>search</mat-icon>
              <span>Search</span>
            </button>
            <a href="#" *ngIf="!advancedSearch" (click)="toggleAdvancedSearch()" id="advancedlink_id">Advanced</a>
            <a href="#" *ngIf="advancedSearch" (click)="toggleAdvancedSearch()" id="basiclink_id">Basic</a>
          </div>
        </form>
      </div>
    </mat-card-content>
  </mat-card>

  <ng-template #rowProcessed let-row="row" let-value="value" ngx-datatable-cell-template>
    <input autofocus type="checkbox" [checked]="value" id="processed{{row.$$index}}_id" (click)="setProcessedValue(row)"/>
  </ng-template>

</div>

<div class="panel">
  <div class="group-filter-button">
    <span class="row-button">
      <app-row-limiter [pageSizes]="rowLimiter.pageSizes"
                       (onPageSizeChanged)="changePageSize($event.value)"></app-row-limiter>
    </span>
    <span class="column-filter-button">
      <app-column-picker [allColumns]="columnPicker.allColumns" [selectedColumns]="columnPicker.selectedColumns"
                         (onSelectedColumnsChanged)="columnPicker.changeSelectedColumns($event)"></app-column-picker>
    </span>
    <button mat-icon-button color="primary" [disabled]="!isSaveAsCSVButtonEnabled()" (click)="saveAsCSV()"
            id="saveascsvbutton_id" matTooltip="Export as CSV">
      <img src="assets/images/exportCSV.svg" width="30" height="30">
    </button>
  </div>

<!-- Data Table -->
  <ngx-datatable
    id="alertsTable"
    class="material striped"
    [rows]="rows"
    [columns]="columnPicker.selectedColumns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    [externalPaging]="true"
    [externalSorting]="true"
    [loadingIndicator]="loading"
    [count]="count"
    [offset]="offset"
    [limit]="rowLimiter.pageSize"
    [sorts]="[{prop: 'Creation Time', dir: 'desc'}]"
    (page)='onPage($event)'
    (sort)="onSort($event)"
    (activate)="onActivate($event)">
  </ngx-datatable>

  <div class="group-action-button">
    <button id="alertsCancelButton" mat-raised-button color="primary" (click)="cancel()"
            [disabled]="buttonsDisabled">
      <mat-icon>cancel</mat-icon>
      <span>Cancel</span>
    </button>
    <button id="alertsSaveButton" mat-raised-button color="primary" (click)="save(false)"
            [disabled]="buttonsDisabled">
      <mat-icon>save</mat-icon>
      <span>Save</span>
    </button>
  </div>
</div>