Browse Source

Improve filter search style

pull/85/head
Thomas 4 years ago
parent
commit
9aeb0d19ca
  1. 3
      apps/client/src/app/components/transactions-table/transactions-table.component.html
  2. 1
      apps/client/src/app/components/transactions-table/transactions-table.component.scss
  3. 20
      apps/client/src/app/components/transactions-table/transactions-table.component.ts

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

@ -3,6 +3,7 @@
<mat-chip-list #chipList aria-label="Search keywords">
<mat-chip
*ngFor="let searchKeyword of searchKeywords"
class="mx-1 my-0 px-2 py-0"
matChipRemove
[removable]="true"
(removed)="removeKeyword(searchKeyword)"
@ -13,7 +14,7 @@
<input
#searchInput
name="close-outline"
placeholder="Search for account, currency, symbol or type..."
[placeholder]="placeholder"
[formControl]="searchControl"
[matAutocomplete]="autocomplete"
[matChipInputFor]="chipList"

1
apps/client/src/app/components/transactions-table/transactions-table.component.scss

@ -11,6 +11,7 @@
.mat-chip {
cursor: pointer;
min-height: 1.5rem !important;
}
.mat-table {

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

@ -28,6 +28,7 @@ import { takeUntil } from 'rxjs/operators';
import { PositionDetailDialog } from '../position/position-detail-dialog/position-detail-dialog.component';
const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
const SEARCH_STRING_SEPARATOR = ',';
@Component({
@ -60,6 +61,7 @@ export class TransactionsTableComponent
string[]
> = this.filteredTransactions$.asObservable();
public isLoading = true;
public placeholder = '';
public routeQueryParams: Subscription;
public searchControl = new FormControl();
public searchKeywords: string[] = [];
@ -151,7 +153,7 @@ export class TransactionsTableComponent
if (this.transactions) {
this.dataSource = new MatTableDataSource(this.transactions);
this.dataSource.filterPredicate = (data, filter) => {
const dataString = TransactionsTableComponent.getFilterableValues(data)
const dataString = this.getFilterableValues(data)
.join(' ')
.toLowerCase();
let contains = true;
@ -232,26 +234,28 @@ export class TransactionsTableComponent
const lowercaseSearchKeywords = this.searchKeywords.map((keyword) =>
keyword.trim().toLowerCase()
);
this.allFilteredTransactions = TransactionsTableComponent.getSearchableFieldValues(
this.allFilteredTransactions = this.getSearchableFieldValues(
this.transactions
).filter((item) => {
return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
});
this.placeholder =
lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
this.filteredTransactions$.next(this.allFilteredTransactions);
}
private static getSearchableFieldValues(
transactions: OrderWithAccount[]
): string[] {
private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {
const fieldValues = new Set<string>();
for (const transaction of transactions) {
this.getFilterableValues(transaction, fieldValues);
}
return [...fieldValues].filter((item) => item != undefined).sort();
return [...fieldValues].filter((item) => item !== undefined).sort();
}
private static getFilterableValues(
private getFilterableValues(
transaction,
fieldValues: Set<string> = new Set<string>()
): string[] {
@ -260,6 +264,6 @@ export class TransactionsTableComponent
fieldValues.add(transaction.type);
fieldValues.add(transaction.Account?.name);
fieldValues.add(transaction.Account?.Platform?.name);
return [...fieldValues].filter((item) => item != undefined);
return [...fieldValues].filter((item) => item !== undefined);
}
}

Loading…
Cancel
Save