operation-log.component.html 2.52 KB
<mat-expansion-panel>
  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-title> Operation Filters</mat-panel-title>
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>
  </ng-template>
  <mat-form-field class="pr-1">
    <mat-select placeholder="Action Type">
      <mat-option>--</mat-option>
      <mat-option value="Login">Login</mat-option>
      <mat-option value="Change-Password">Change-Password</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
    <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
    <mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
  </mat-form-field>
  <mat-form-field>
    <input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
    <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
    <mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Username">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Remark">
  </mat-form-field>
  <button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>

<div class="mat-box-shadow">
  <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
    [rowHeight]="50" [limit]="10" [rows]="operationDataSource" [columns]="columns">

    <ngx-datatable-column name="Username">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.userName }}
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Action Type">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.action }}
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Remote Ip">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.remoteIp }}
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Create Time">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.createTime }}
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Remark">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.remark }}
      </ng-template>
    </ngx-datatable-column>

  </ngx-datatable>
</div>