Upgrading bisq transaction type filter with a multiselect dropdown
This commit is contained in:
softsimon
parent
8ff8e6dbb9
commit
7f669129e7
8
frontend/package-lock.json
generated
8
frontend/package-lock.json
generated
@ -8284,6 +8284,14 @@
|
||||
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
|
||||
"dev": true
|
||||
},
|
||||
"ngx-bootrap-multiselect": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-bootrap-multiselect/-/ngx-bootrap-multiselect-2.0.0.tgz",
|
||||
"integrity": "sha512-GV/2MigCS5oi6P+zWtFSmq1TLWW1kcKsJNAXLP3hHXxmY3HgMKeUPk57o3T+YHje73JRp5reXMhEIlYuoOmoRg==",
|
||||
"requires": {
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"ngx-infinite-scroll": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-9.0.0.tgz",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"main": "index.ts",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"serve": "ng serve --proxy-config proxy.conf.json",
|
||||
"start": "npm run generate-config && npm run sync-assets-dev && ng serve --proxy-config proxy.conf.json",
|
||||
"build": "npm run generate-config && ng build --prod && npm run sync-assets",
|
||||
"sync-assets": "node sync-assets.js",
|
||||
@ -49,6 +50,7 @@
|
||||
"bootstrap": "4.5.0",
|
||||
"chartist": "^0.11.4",
|
||||
"clipboard": "^2.0.4",
|
||||
"ngx-bootrap-multiselect": "^2.0.0",
|
||||
"ngx-infinite-scroll": "^9.0.0",
|
||||
"qrcode": "^1.4.4",
|
||||
"rxjs": "^6.6.0",
|
||||
|
||||
@ -1,59 +1,10 @@
|
||||
<div class="container-xl">
|
||||
<h1 style="float: left;">Transactions</h1>
|
||||
|
||||
<div ngbDropdown class="d-block float-right">
|
||||
<button class="btn btn-primary" id="dropdownForm1" ngbDropdownToggle>Filter</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownForm1">
|
||||
<form [formGroup]="radioGroupForm">
|
||||
<label>
|
||||
<input type="checkbox" formControlName="ASSET_LISTING_FEE"> Asset listing fee
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="BLIND_VOTE"> Blind vote
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="COMPENSATION_REQUEST"> Compensation request
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="GENESIS"> Genesis
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="LOCKUP"> Lockup
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="PAY_TRADE_FEE"> Pay trade fee
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="PROOF_OF_BURN"> Proof of burn
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="PROPOSAL"> Proposal
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="REIMBURSEMENT_REQUEST"> Reimbursement request
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="TRANSFER_BSQ"> Transfer BSQ
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="UNLOCK"> Unlock
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" formControlName="VOTE_REVEAL"> Vote reveal
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="d-block float-right">
|
||||
<form [formGroup]="radioGroupForm">
|
||||
<ngx-bootrap-multiselect [options]="txTypeOptions" [settings]="txTypeDropdownSettings" [texts]="txTypeDropdownTexts" formControlName="txTypes"></ngx-bootrap-multiselect>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
@ -65,10 +16,10 @@
|
||||
<table class="table table-borderless table-striped">
|
||||
<thead>
|
||||
<th style="width: 20%;">Transaction</th>
|
||||
<th class="d-none d-md-block" style="width: 20%;">Type</th>
|
||||
<th class="d-none d-md-block" style="width: 100%;">Type</th>
|
||||
<th style="width: 20%;">Amount</th>
|
||||
<th style="width: 20%;">Confirmed</th>
|
||||
<th class="d-none d-md-block" style="width: 20%;">Height</th>
|
||||
<th class="d-none d-md-block">Height</th>
|
||||
</thead>
|
||||
<tbody *ngIf="transactions.value; else loadingTmpl">
|
||||
<tr *ngFor="let tx of transactions.value[0]; trackBy: trackByFn">
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
|
||||
import { Subject, merge, Observable } from 'rxjs';
|
||||
import { merge, Observable } from 'rxjs';
|
||||
import { switchMap, map } from 'rxjs/operators';
|
||||
import { BisqApiService } from '../bisq-api.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { FormGroup, FormBuilder } from '@angular/forms';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from 'ngx-bootrap-multiselect';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bisq-transactions',
|
||||
@ -24,10 +25,41 @@ export class BisqTransactionsComponent implements OnInit {
|
||||
radioGroupForm: FormGroup;
|
||||
types: string[] = [];
|
||||
|
||||
txTypeOptions: IMultiSelectOption[] = [
|
||||
{ id: 1, name: 'Asset listing fee' },
|
||||
{ id: 2, name: 'Blind vote' },
|
||||
{ id: 3, name: 'Compensation request' },
|
||||
{ id: 4, name: 'Genesis' },
|
||||
{ id: 5, name: 'Lockup' },
|
||||
{ id: 6, name: 'Pay trade fee' },
|
||||
{ id: 7, name: 'Proof of burn' },
|
||||
{ id: 8, name: 'Proposal' },
|
||||
{ id: 9, name: 'Reimbursement request' },
|
||||
{ id: 10, name: 'Transfer BSQ' },
|
||||
{ id: 11, name: 'Unlock' },
|
||||
{ id: 12, name: 'Vote reveal' },
|
||||
];
|
||||
|
||||
txTypeDropdownSettings: IMultiSelectSettings = {
|
||||
buttonClasses: 'btn btn-primary btn-sm',
|
||||
displayAllSelectedText: true,
|
||||
showCheckAll: true,
|
||||
showUncheckAll: true,
|
||||
maxHeight: '500px',
|
||||
fixedTitle: true,
|
||||
};
|
||||
|
||||
txTypeDropdownTexts: IMultiSelectTexts = {
|
||||
defaultTitle: 'Filter',
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
paginationSize: 'sm' | 'lg' = 'md';
|
||||
paginationMaxSize = 10;
|
||||
|
||||
txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE',
|
||||
'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL'];
|
||||
|
||||
constructor(
|
||||
private bisqApiService: BisqApiService,
|
||||
private seoService: SeoService,
|
||||
@ -40,20 +72,7 @@ export class BisqTransactionsComponent implements OnInit {
|
||||
this.seoService.setTitle('Transactions', true);
|
||||
|
||||
this.radioGroupForm = this.formBuilder.group({
|
||||
UNVERIFIED: false,
|
||||
INVALID: false,
|
||||
GENESIS: false,
|
||||
TRANSFER_BSQ: false,
|
||||
PAY_TRADE_FEE: false,
|
||||
PROPOSAL: false,
|
||||
COMPENSATION_REQUEST: false,
|
||||
REIMBURSEMENT_REQUEST: false,
|
||||
BLIND_VOTE: false,
|
||||
VOTE_REVEAL: false,
|
||||
LOCKUP: false,
|
||||
UNLOCK: false,
|
||||
ASSET_LISTING_FEE: false,
|
||||
PROOF_OF_BURN: false,
|
||||
txTypes: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],
|
||||
});
|
||||
|
||||
this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
|
||||
@ -78,13 +97,10 @@ export class BisqTransactionsComponent implements OnInit {
|
||||
this.radioGroupForm.valueChanges
|
||||
.pipe(
|
||||
map((data) => {
|
||||
const types: string[] = [];
|
||||
for (const i in data) {
|
||||
if (data[i]) {
|
||||
types.push(i);
|
||||
}
|
||||
this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
|
||||
if (this.types.length === this.txTypes.length) {
|
||||
this.types = [];
|
||||
}
|
||||
this.types = types;
|
||||
if (this.page !== 1) {
|
||||
this.pageChange(1);
|
||||
}
|
||||
@ -93,7 +109,7 @@ export class BisqTransactionsComponent implements OnInit {
|
||||
)
|
||||
)
|
||||
.pipe(
|
||||
switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
|
||||
switchMap(() => this.bisqApiService.listTransactions$((this.page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
|
||||
map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)])
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BisqRoutingModule } from './bisq.routing.module';
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
import { NgxBootstrapMultiselectModule } from 'ngx-bootrap-multiselect';
|
||||
|
||||
import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
|
||||
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
|
||||
@ -38,6 +40,7 @@ import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
|
||||
SharedModule,
|
||||
NgbPaginationModule,
|
||||
FontAwesomeModule,
|
||||
NgxBootstrapMultiselectModule,
|
||||
],
|
||||
providers: [
|
||||
BisqApiService,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user