Improved Liquid Assets page with pagination and search filter.

frontend/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbButtonsModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -101,6 +101,7 @@ import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
     BrowserAnimationsModule,
     NgbButtonsModule,
     NgbTooltipModule,
+    NgbPaginationModule,
     InfiniteScrollModule,
   ],
   providers: [

frontend/src/app/assets/assets.component.html

@@ -4,6 +4,15 @@
 
   <div class="clearfix"></div>
 
+  <form [formGroup]="searchForm" class="form-inline">
+    <div class="input-group m-2">
+      <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" placeholder="Search asset">
+      <div class="input-group-append">
+        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off">Clear</button>
+      </div>
+    </div>
+  </form>
+
   <ng-template [ngIf]="!isLoading && !error">
     <table class="table table-borderless table-striped">
       <thead>
@@ -14,7 +23,7 @@
         <th class="d-none d-lg-block">Issuance TX</th>
       </thead>
       <tbody>
-        <tr *ngFor="let asset of assets">
+        <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
           <td class="td-name">{{ asset.name }}</td>
           <td>{{ asset.ticker }}</td>
           <td class="d-none d-md-block"><a *ngIf="asset.entity" target="_blank" href="{{ 'http://' + asset.entity.domain }}">{{ asset.entity.domain }}</a></td>
@@ -23,6 +32,11 @@
         </tr> 
       </tbody>
     </table>
+
+    <br>
+
+    <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
+
   </ng-template>
 
   <ng-template [ngIf]="isLoading && !error">

frontend/src/app/assets/assets.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { AssetsService } from '../services/assets.service';
 import { environment } from 'src/environments/environment';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { filter, distinctUntilChanged } from 'rxjs/operators';
 
 @Component({
   selector: 'app-assets',
@@ -9,18 +11,45 @@ import { environment } from 'src/environments/environment';
 })
 export class AssetsComponent implements OnInit {
   nativeAssetId = environment.nativeAssetId;
+  assets: any[];
+  assetsCache: any[];
+  filteredAssets: any[];
+  searchForm: FormGroup;
 
   isLoading = true;
   error: any;
 
-  assets: any;
+  page = 1;
+  itemsPerPage = 15;
 
   constructor(
     private assetsService: AssetsService,
+    private formBuilder: FormBuilder,
   ) { }
 
   ngOnInit() {
     setTimeout(() => this.getAssets());
+
+    this.searchForm = this.formBuilder.group({
+      searchText: ['', Validators.required],
+    });
+
+    this.searchForm.controls.searchText.valueChanges
+      .pipe(
+        distinctUntilChanged(),
+      )
+      .subscribe((searchText) => {
+        this.page = 1;
+        if (searchText.length ) {
+          this.filteredAssets = this.assetsCache.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
+            || asset.ticker.toLowerCase().indexOf(searchText.toLowerCase()) > -1);
+          this.assets = this.filteredAssets;
+          this.filteredAssets = this.filteredAssets.slice(0, this.itemsPerPage);
+        } else {
+          this.assets = this.assetsCache;
+          this.filteredAssets = this.assets.slice(0, this.itemsPerPage);
+        }
+      });
   }
 
   getAssets() {
@@ -33,6 +62,8 @@ export class AssetsComponent implements OnInit {
           asset_id: this.nativeAssetId,
         });
         this.assets = this.assets.sort((a: any, b: any) => a.name.localeCompare(b.name));
+        this.assetsCache = this.assets;
+        this.filteredAssets = this.assets.slice(0, this.itemsPerPage);
         this.isLoading = false;
       },
       (error) => {
@@ -40,6 +71,14 @@ export class AssetsComponent implements OnInit {
         this.error = error;
         this.isLoading = false;
       });
-    }
+  }
 
+  pageChange(page: number) {
+    const start = (page - 1) * this.itemsPerPage;
+    this.filteredAssets = this.assets.slice(start, this.itemsPerPage + start);
+  }
+
+  trackByAsset(index: number, asset: any) {
+    return asset.asset_id;
+  }
 }

frontend/src/styles.scss

@@ -11,6 +11,16 @@ $primary: #105fb0;
 $secondary: #2d3348;
 $success: #1a9436;
 
+$pagination-bg: $body-bg;
+$pagination-border-color: $gray-800;
+$pagination-disabled-bg:           #FFF;
+$pagination-disabled-border-color: #1d1f31;
+$pagination-active-color:          #fff;
+$pagination-active-bg:             #653b9c;
+$pagination-hover-bg:              #12131e;
+$pagination-hover-border-color:     #1d1f31;
+$pagination-disabled-bg:          #1d1f31;
+
 $link-color:                #1bd8f4;
 $link-decoration:           none !default;
 $link-hover-color:          darken($link-color, 15%) !default;