Add token list and details page.

src/app/pages/tokens/token-details/token-details.component.html

@@ -0,0 +1,36 @@
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid" appMenuSelection>
+      <div class="col-md-4">
+        <div class="card">
+          <mat-card-title class="card-header">
+            Token
+          </mat-card-title>
+          <div class="card-body">
+            <div>
+              <p>Name: {{token.name}}</p>
+              <p>Symbol: {{token.symbol}}</p>
+              <p>Details: A community inclusive currency for trading among lower to middle income societies.</p>
+              <p>Supply: 100000000</p>
+              <p>Circulation: 57000000</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <app-footer appMenuSelection></app-footer>
+  </div>
+  <!-- ============================================================== -->
+  <!-- End Page content -->
+  <!-- ============================================================== -->
+</div>
+

src/app/pages/tokens/token-details/token-details.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TokenDetailsComponent } from './token-details.component';
+import {ActivatedRouteStub, FooterStubComponent, SidebarStubComponent, TokenServiceStub, TopbarStubComponent} from '../../../../testing';
+import {ActivatedRoute} from '@angular/router';
+import {TokenService} from '../../../_services';
+import {TokensModule} from '../tokens.module';
+import {AppModule} from '../../../app.module';
+
+describe('TokenDetailsComponent', () => {
+  let component: TokenDetailsComponent;
+  let fixture: ComponentFixture<TokenDetailsComponent>;
+  let route: ActivatedRouteStub;
+
+  beforeEach(async () => {
+    route = new ActivatedRouteStub();
+    route.setParamMap({ id: 'test' });
+    await TestBed.configureTestingModule({
+      declarations: [
+        TokenDetailsComponent,
+        FooterStubComponent,
+        SidebarStubComponent,
+        TopbarStubComponent
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: route },
+        { provide: TokenService, useClass: TokenServiceStub }
+      ],
+      imports: [
+        AppModule,
+        TokensModule,
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TokenDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/tokens/token-details/token-details.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {TokenService} from '../../../_services';
+
+@Component({
+  selector: 'app-token-details',
+  templateUrl: './token-details.component.html',
+  styleUrls: ['./token-details.component.scss']
+})
+export class TokenDetailsComponent implements OnInit {
+  token: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private tokenService: TokenService
+  ) {
+    this.route.paramMap.subscribe((params: Params) => {
+      this.token = this.tokenService.getBySymbol(params.get('id'));
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/tokens/tokens-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TokensComponent } from './tokens.component';
+import {TokenDetailsComponent} from './token-details/token-details.component';
+
+const routes: Routes = [
+  { path: '', component: TokensComponent },
+  { path: ':id', component: TokenDetailsComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TokensRoutingModule { }

src/app/pages/tokens/tokens.component.html

@@ -0,0 +1,56 @@
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid" appMenuSelection>
+      <mat-form-field appearance="outline">
+        <mat-label> Filter </mat-label>
+        <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+      <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortDirection="asc" matSortDisableClear>
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+          <mat-cell *matCellDef="let token"> {{token.name}} </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="symbol">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
+          <mat-cell *matCellDef="let token"> {{token.symbol}} </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="select">
+          <mat-header-cell *matHeaderCellDef>
+            <mat-checkbox (change)="$event ? masterToggle() : null"
+                          [checked]="selection.hasValue() && isAllSelected()"
+                          [indeterminate]="selection.hasValue() && !isAllSelected">
+            </mat-checkbox>
+          </mat-header-cell>
+          <mat-cell *matCellDef="let token">
+            <mat-checkbox (click)="$event.stopPropagation()"
+                          (change)="$event ? selection.toggle(token) : null"
+                          [checked]="selection.isSelected(token)">
+            </mat-checkbox>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
+        <mat-row *matRowDef="let token; columns: columnsToDisplay" (click)="viewToken(token)"></mat-row>
+      </mat-table>
+
+      <mat-paginator [pageSize]="3" [pageSizeOptions]="[3, 5, 10]" showFirstLastButtons></mat-paginator>
+    </div>
+    <app-footer appMenuSelection></app-footer>
+  </div>
+  <!-- ============================================================== -->
+  <!-- End Page content -->
+  <!-- ============================================================== -->
+</div>
+

src/app/pages/tokens/tokens.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TokensComponent } from './tokens.component';
+import {FooterStubComponent, SidebarStubComponent, TopbarStubComponent} from '../../../testing';
+import {AppModule} from '../../app.module';
+import {TokensModule} from './tokens.module';
+
+describe('TokensComponent', () => {
+  let component: TokensComponent;
+  let fixture: ComponentFixture<TokensComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        TokensComponent,
+        FooterStubComponent,
+        SidebarStubComponent,
+        TopbarStubComponent
+      ],
+      imports: [
+        AppModule,
+        TokensModule
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TokensComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/tokens/tokens.component.ts

@@ -0,0 +1,56 @@
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {TokenService} from '../../_services';
+import {MatTableDataSource} from '@angular/material/table';
+import {SelectionModel} from '@angular/cdk/collections';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-tokens',
+  templateUrl: './tokens.component.html',
+  styleUrls: ['./tokens.component.scss']
+})
+export class TokensComponent implements OnInit, AfterViewInit {
+  dataSource: MatTableDataSource<any>;
+  columnsToDisplay = ['name', 'symbol', 'select'];
+  initialSelection = [];
+  allowMultiSelect = true;
+  selection: SelectionModel<any>;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(
+    private tokenService: TokenService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.dataSource = new MatTableDataSource(this.tokenService.data);
+    this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  masterToggle(): void {
+    this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  doFilter(value: string): void {
+    this.dataSource.filter = value.trim().toLocaleLowerCase();
+  }
+
+  viewToken(token): void {
+    this.router.navigateByUrl(`/tokens/${token.symbol}`).then();
+  }
+}

src/app/pages/tokens/tokens.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TokensRoutingModule } from './tokens-routing.module';
+import { TokensComponent } from './tokens.component';
+import { TokenDetailsComponent } from './token-details/token-details.component';
+import {SharedModule} from '../../shared/shared.module';
+import {MatTableModule} from '@angular/material/table';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatSortModule} from '@angular/material/sort';
+import {MatPseudoCheckboxModule} from '@angular/material/core';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatButtonModule} from '@angular/material/button';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatCardModule} from '@angular/material/card';
+
+
+@NgModule({
+  declarations: [TokensComponent, TokenDetailsComponent],
+  imports: [
+    CommonModule,
+    TokensRoutingModule,
+    SharedModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatPseudoCheckboxModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatCardModule
+  ]
+})
+export class TokensModule { }