Browse Source

feat: add account filter with chips on transactions

pull/71/head
mantovanig 4 years ago
parent
commit
2eac4122c2
  1. 21
      apps/client/src/app/components/transactions-table/transactions-table.component.html
  2. 26
      apps/client/src/app/components/transactions-table/transactions-table.component.ts
  3. 2
      apps/client/src/app/components/transactions-table/transactions-table.module.ts

21
apps/client/src/app/components/transactions-table/transactions-table.component.html

@ -1,3 +1,24 @@
<div *ngIf="chipsAccount.length > 1">
<mat-chip-list aria-label="Account selection" class="d-block mb-4">
<mat-chip
[selected]="true"
#c="matChip"
(click)="!c.selected && c.toggleSelected()"
(selectionChange)="applyAccountFilter($event)"
>
All
</mat-chip>
<mat-chip
#c="matChip"
*ngFor="let account of chipsAccount"
(click)="!c.selected && c.toggleSelected()"
(selectionChange)="applyAccountFilter($event)"
>
{{ account }}
</mat-chip>
</mat-chip-list>
</div>
<mat-form-field appearance="outline" class="w-100">
<input
#input

26
apps/client/src/app/components/transactions-table/transactions-table.component.ts

@ -11,6 +11,11 @@ import {
} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import {
MatChipList,
MatChip,
MatChipSelectionChange
} from '@angular/material/chips';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
@ -39,6 +44,7 @@ export class TransactionsTableComponent
@Output() transactionToUpdate = new EventEmitter<OrderModel>();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatChipList) chipsList: MatChipList;
public dataSource: MatTableDataSource<OrderModel> = new MatTableDataSource();
public defaultDateFormat = DEFAULT_DATE_FORMAT;
@ -46,6 +52,8 @@ export class TransactionsTableComponent
public isLoading = true;
public routeQueryParams: Subscription;
chipsAccount: string[] = [];
private unsubscribeSubject = new Subject<void>();
public constructor(
@ -89,10 +97,28 @@ export class TransactionsTableComponent
this.dataSource = new MatTableDataSource(this.transactions);
this.dataSource.sort = this.sort;
this.chipsAccount = [
...new Set(this.transactions.map((t) => t.Account?.name))
];
this.isLoading = false;
}
}
public applyAccountFilter(event: MatChipSelectionChange) {
if (event.selected) {
const selectedAccount = event.source.value.trim();
if (selectedAccount === 'All') {
this.dataSource.data = this.transactions;
} else {
const filtered = this.transactions.filter(
(f) => f.Account.name === selectedAccount
);
this.dataSource.data = filtered;
}
}
}
public applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();

2
apps/client/src/app/components/transactions-table/transactions-table.module.ts

@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatChipsModule } from '@angular/material/chips';
import { RouterModule } from '@angular/router';
import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@ -29,6 +30,7 @@ import { TransactionsTableComponent } from './transactions-table.component';
MatSortModule,
MatTableModule,
NgxSkeletonLoaderModule,
MatChipsModule,
RouterModule
],
providers: [],

Loading…
Cancel
Save