diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 039fd548b..93bea091f 100644
--- a/frontend/src/app/app.module.ts
+++ b/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: [
diff --git a/frontend/src/app/assets/assets.component.html b/frontend/src/app/assets/assets.component.html
index 007bcb0b5..e2c97c400 100644
--- a/frontend/src/app/assets/assets.component.html
+++ b/frontend/src/app/assets/assets.component.html
@@ -4,6 +4,15 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/assets.component.ts b/frontend/src/app/assets/assets.component.ts
index 89da94135..48433c370 100644
--- a/frontend/src/app/assets/assets.component.ts
+++ b/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;
+ }
}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index a72bafa8a..b53685633 100644
--- a/frontend/src/styles.scss
+++ b/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;