Upgrading bisq transaction type filter with a multiselect dropdown

frontend/package-lock.json

@@ -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",

frontend/package.json

@@ -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",

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html

@@ -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">

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -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)])
       );
   }

frontend/src/app/bisq/bisq.module.ts

@@ -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,