transfer-history.component.html 3.05 KB
<mat-expansion-panel>
  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-title>Transfer History</mat-panel-title>
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>
  </ng-template>
  <mat-form-field class="pr-1">
    <mat-select placeholder="Transaction Type">
      <mat-option>--</mat-option>
      <mat-option value="MW > PT">MW > PT</mat-option>
      <mat-option value="PT > MW">PT > MW</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]="historyDataSource" [columns]="columns">
    <ngx-datatable-column name="Transfer ID">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.transferId }}
      </ng-template>
    </ngx-datatable-column>

    <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="Transaction Type">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.transferType }}
      </ng-template>
    </ngx-datatable-column>

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

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

    <ngx-datatable-column name="After">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.newCredit }}
      </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>