Improved Liquid Assets page with pagination and search filter.

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;
+  }
 }