Merge 02c9c39 into 27199aa

src/app/core-ui/core-ui.module.ts

@@ -4,11 +4,15 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from './material/material.module';
 import { MainViewModule } from './main/main-view.module';
 
-import { MatDialogModule, MatDialogRef } from '@angular/material';
-import { MatDialog } from '@angular/material'; // TODO: move to material
+import { MatDialogModule } from '@angular/material';
+import { MatDialog } from '@angular/material';
+import { PaginatorComponent } from './paginator/paginator.component';
+// TODO: move to material
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    PaginatorComponent
+  ],
   imports: [
     CommonModule,
     MaterialModule,
@@ -17,7 +21,8 @@ import { MatDialog } from '@angular/material'; // TODO: move to material
   ],
   exports: [
     MaterialModule,
-    MainViewModule
+    MainViewModule,
+    PaginatorComponent
   ]
 })
 export class CoreUiModule {

src/app/core-ui/paginator/page-event-model.ts

@@ -0,0 +1,8 @@
+export class PageEvent {
+  /** The current page index. */
+  pageIndex: number;
+  /** The current page size */
+  pageSize: number;
+  /** The current total number of items being paged */
+  length: number;
+}

src/app/core-ui/paginator/paginator.component.html

@@ -0,0 +1,34 @@
+<div class="mat-paginator-page-size">
+  <div class="mat-paginator-page-size-label">{{_intl.itemsPerPageLabel}}</div>
+  <mat-form-field *ngIf="pageSizeOptions.length> 1" class="mat-paginator-page-size-select">
+    <mat-select [value]="pageSize" [aria-label]="_intl.itemsPerPageLabel"
+                (change)="_changePageSize($event.value)">
+      <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
+        {{pageSizeOption}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div *ngIf="pageSizeOptions.length <= 1">{{pageSize}}</div>
+</div>
+<div class="mat-paginator-range-label">{{getRangeLabel(pageIndex, pageSize, length)}}</div>
+<button mat-icon-button type="button" class="mat-paginator-navigation-previous" (click)="firstPage()"
+        [matTooltip]="_intl.firstPageLable"
+        [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="chevron-double-left"></mat-icon>
+</button>
+<button mat-icon-button type="button" class="mat-paginator-navigation-previous" (click)="previousPage()"
+        [matTooltip]="_intl.previousPageLabel"
+        [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="chevron-single-left"></mat-icon>
+</button>
+
+<button mat-icon-button type="button" class="mat-paginator-navigation-next" (click)="nextPage()"
+        [matTooltip]="_intl.nextPageLabel" [matTooltipPosition]="'above'"
+        [disabled]="!hasNextPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="chevron-single-next"></mat-icon>
+</button>
+<button mat-icon-button type="button" class="mat-paginator-navigation-next" (click)="lastPage()"
+        [matTooltip]="_intl.lastPageLable" [matTooltipPosition]="'above'"
+        [disabled]="!hasNextPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="chevron-double-right"></mat-icon>
+</button>

src/app/core-ui/paginator/paginator.component.scss

@@ -0,0 +1,54 @@
+.mat-paginator-page-size {
+  display: flex;
+  align-items: center
+}
+
+.mat-paginator-page-size-label {
+  margin: 0 4px
+}
+
+.mat-paginator-page-size-select {
+  margin: 0 4px;
+  width: 56px
+}
+
+.mat-paginator-range-label {
+  margin: 0 32px
+}
+
+.mat-paginator-increment-button + .mat-paginator-increment-button {
+  margin: 0 0 0 8px
+}
+
+[dir=rtl] .mat-paginator-increment-button + .mat-paginator-increment-button {
+  margin: 0 8px 0 0
+}
+
+.mat-paginator-decrement, .mat-paginator-increment {
+  width: 8px;
+  height: 8px
+}
+
+.mat-paginator-decrement, [dir=rtl] .mat-paginator-increment {
+  transform: rotate(45deg)
+}
+
+.mat-paginator-increment, [dir=rtl] .mat-paginator-decrement {
+  transform: rotate(225deg)
+}
+
+.mat-paginator-decrement {
+  margin-left: 12px
+}
+
+[dir=rtl] .mat-paginator-decrement {
+  margin-right: 12px
+}
+
+.mat-paginator-increment {
+  margin-left: 16px
+}
+
+[dir=rtl] .mat-paginator-increment {
+  margin-right: 16px
+}

src/app/core-ui/paginator/paginator.component.spec.ts

@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginatorComponent } from './paginator.component';
+import { MaterialModule } from '../material/material.module';
+
+describe('PaginatorComponent', () => {
+  let component: PaginatorComponent;
+  let fixture: ComponentFixture<PaginatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PaginatorComponent ],
+      imports: [
+        MaterialModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core-ui/paginator/paginator.component.ts

@@ -0,0 +1,119 @@
+import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';
+import { PageEvent } from './page-event-model';
+
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss']
+})
+
+
+
+export class PaginatorComponent implements OnInit {
+
+  pageIndex: number = 0;
+  @Input() length: number = 0;
+  @Input() pageSize: number = 0;
+  @Input() pageSizeOptions: number[] = [];
+  @Output() page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
+
+  @HostBinding('class.mat-paginator')
+
+  public _intl: Object = {
+    itemsPerPageLabel: 'Items per page:',
+    nextPageLabel: 'Next page',
+    previousPageLabel: 'Previous page',
+    firstPageLable: 'Fist Page',
+    lastPageLable: 'Last Page'
+  };
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  /** Advances to the next page if it exists. */
+  nextPage(): void {
+    if (!this.hasNextPage()) {
+      return;
+    }
+    this.pageIndex++;
+    this._emitPageEvent();
+  }
+
+  /** Move back to the previous page if it exists. */
+  previousPage(): void {
+    if (!this.hasPreviousPage()) {
+      return;
+    }
+    this.pageIndex--;
+    this._emitPageEvent();
+  }
+
+  /** Move back to the first page. */
+  firstPage(): void {
+    this.pageIndex = 0;
+    this._emitPageEvent();
+  }
+
+  /** go to the last page if it exists. */
+  lastPage(): void {
+    this.pageIndex = Math.ceil(this.length / this.pageSize) - 1;
+    this._emitPageEvent();
+  }
+
+  /**
+   * Whether there is a previous page.
+   * @return {?}
+   */
+  hasPreviousPage() {
+    return this.pageIndex >= 1 && this.pageSize !== 0;
+  };
+  /**
+   * Whether there is a next page.
+   * @return {?}
+   */
+  hasNextPage() {
+    const numberOfPages = Math.ceil(this.length / this.pageSize) - 1;
+    return this.pageIndex < numberOfPages && this.pageSize !== 0;
+  };
+
+  getRangeLabel(page: number, pageSize: number, length: number) {
+    if (length === 0 || pageSize === 0) {
+      return '0 of ' + length;
+    }
+    length = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    // If the start index exceeds the list length, do not try and fix the end index to the end.
+    const endIndex = startIndex < length ?
+      Math.min(startIndex + pageSize, length) :
+      startIndex + pageSize;
+    return startIndex + 1 + ' - ' + endIndex + ' of ' + length;
+  }
+
+  /**
+   * Changes the page size so that the first item displayed on the page will still be
+   * displayed using the new page size.
+   *
+   * For example, if the page size is 10 and on the second page (items indexed 10-19) then
+   * switching so that the page size is 5 will set the third page as the current page so
+   * that the 10th item will still be displayed.
+   * @param {?} pageSize
+   * @return {?}
+   */
+  _changePageSize(pageSize: number): void {
+    // Current page needs to be updated to reflect the new page size. Navigate to the page
+    // containing the previous page's first item.
+    const startIndex = this.pageIndex * this.pageSize;
+    this.pageIndex = Math.floor(startIndex / pageSize) || 0;
+    this.pageSize = pageSize;
+    this._emitPageEvent();
+  }
+
+  _emitPageEvent(): void {
+    this.page.next({
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      length: this.length
+    });
+  }
+}

src/app/modals/modals.service.spec.ts

@@ -2,18 +2,21 @@ import { TestBed, inject } from '@angular/core/testing';
 
 import { ModalsModule } from './modals.module';
 import { CoreModule } from '../core/core.module';
-import { SharedModule } from '../wallet/shared/shared.module';
 
 import { ModalsService } from './modals.service';
+import { MatDialogModule, MatDialogRef } from '@angular/material';
 
 
-describe('ModalsService', () => {
+  describe('ModalsService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        SharedModule,
+        MatDialogModule,
         ModalsModule,
         CoreModule.forRoot()
+      ],
+      providers: [
+        { provide: MatDialogRef},
       ]
     });
   });

src/app/wallet/shared/shared.module.ts

@@ -4,28 +4,19 @@ import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 
 import { ClipboardModule } from 'ngx-clipboard';
-
+import { MaterialModule } from '../../core-ui/material/material.module';
 import { AccordionModule } from './accordion/accordion.module';
 
 import { HeaderComponent } from './header/header.component';
 import { TableComponent } from './table/table.component';
 import { GridComponent } from './grid/grid.component';
-import { MatButtonModule, MatDialogModule, MatExpansionModule, MatIconModule, MatInputModule } from '@angular/material';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { DeleteConfirmationModalComponent } from './delete-confirmation-modal/delete-confirmation-modal.component';
-// import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   imports: [
     CommonModule,
     AccordionModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatInputModule,
-    MatIconModule,
-    // BrowserAnimationsModule,
-    MatButtonModule,
-    FlexLayoutModule
+    MaterialModule
   ],
   declarations: [
     HeaderComponent,

src/app/wallet/wallet/addresslookup/addresslookup.component.html

@@ -41,10 +41,9 @@
 
   </mat-list>
 
-  <mat-paginator
+  <app-paginator
     [length]="getTotalCountForPagination()"
     [pageSize]="MAX_ADDRESSES_PER_PAGE"
-    [pageSizeOptions]="PAGE_SIZE_OPTIONS"
     (page)="pageChanged($event)">
-  </mat-paginator>
+  </app-paginator>
 </div>

src/app/wallet/wallet/addresslookup/addresslookup.component.ts

@@ -29,7 +29,7 @@ export class AddressLookupComponent implements OnInit {
 
   // @TODO: Move static pagination prams into global variable
   MAX_ADDRESSES_PER_PAGE: number = 5;
-  PAGE_SIZE_OPTIONS: Array<number> = [5, 10, 20];
+  // PAGE_SIZE_OPTIONS: Array<number> = [5, 10, 20];
   current_page: number = 1;
   constructor(private _rpc: RpcService) {
   }

src/app/wallet/wallet/receive/receive.component.html

@@ -154,21 +154,21 @@
 
     <!-- use two paginator for reset pagination after tab change. -->
     <div class="receive-pagination">
-      <mat-paginator
+      <app-paginator
         *ngIf="type == 'private' && getSinglePage().length > 0"
         [length]="getTotalCountForPagination()"
         [pageSize]="MAX_ADDRESSES_PER_PAGE"
         [pageSizeOptions]="PAGE_SIZE_OPTIONS"
         (page)="pageChanged($event)">
-      </mat-paginator>
+      </app-paginator>
 
-      <mat-paginator
+      <app-paginator
         *ngIf="type == 'public' && getSinglePage().length > 0"
         [length]="getTotalCountForPagination()"
         [pageSize]="MAX_ADDRESSES_PER_PAGE"
         [pageSizeOptions]="PAGE_SIZE_OPTIONS"
         (page)="pageChanged($event)">
-      </mat-paginator>
+      </app-paginator>
     </div>
   </div>
 

src/app/wallet/wallet/shared/address-table/address-table.component.html

@@ -82,10 +82,10 @@
   </div>
 </div>
 
-<mat-paginator
+<app-paginator
   *ngIf="displayPagination && getSinglePage().length>0"
   [length]="getTotalAddressCount()"
   [pageSize]="getMaxAddressesPerPage()"
   [pageSizeOptions]="PAGE_SIZE_OPTIONS"
   (page)="pageChanged($event)">
-</mat-paginator>
+</app-paginator>