/
transactions.component.html
59 lines (54 loc) · 2.22 KB
/
transactions.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div class="page-layout blank simple" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div fxLayout="row" fxLayoutAlign="start center">
<a [routerLink]="['/dashboard']">
<mat-icon class="secondary-text s-18">home</mat-icon>
</a>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">{{ 'transactions' | i18n }}</span>
</div>
<div class="h1 mt-16">{{ 'transactions' | i18n }}</div>
</div>
</div>
<!-- / HEADER -->
<div class="p-24 content">
<div fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="20px">
<div fxFlex="50">
<div class="transaction-filter">
<mat-form-field class="search-form">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" #query>
</mat-form-field>
</div>
</div>
<div>
<mat-form-field>
<input matInput
placeholder="{{ 'from' | i18n }}"
[matDatepicker]="pickerFrom"
[formControl]="pickerFromField"
(dateChange)="applyFilter(this.query.value)">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput
placeholder="{{ 'to' | i18n }}"
[matDatepicker]="pickerTo"
[formControl]="pickerToField"
(dateChange)="applyFilter(this.query.value)">
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="transactions-table">
<app-transaction-table [dataSource]="dataSource"
[account]="account"></app-transaction-table>
</div>
</div>
</div>