Ui pagination hide mining (#227)

* fixed icon disappear on retina screens

* added error case FAILED and throw it to console with message:
Error: (${error}) was triggered by command: ${command}`

* pagination for hide mining transactions

* files

src/gui/qt-daemon/html/polyfills.js

@@ -5800,8 +5800,8 @@ __webpack_require__.r(__webpack_exports__);
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! /var/www/zano-project/zano/src/gui/qt-daemon/html_source/src/polyfills.ts */"./src/polyfills.ts");
-module.exports = __webpack_require__(/*! /var/www/zano-project/zano/src/gui/qt-daemon/html_source/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js */"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js");
+__webpack_require__(/*! /Users/mekasan/Projects/Projects/zano/src/gui/qt-daemon/html_source/src/polyfills.ts */"./src/polyfills.ts");
+module.exports = __webpack_require__(/*! /Users/mekasan/Projects/Projects/zano/src/gui/qt-daemon/html_source/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js */"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js");
 
 
 /***/ })

src/gui/qt-daemon/html_source/package.json

@@ -32,6 +32,7 @@
     "highcharts": "^7.0.3",
     "idlejs": "^2.0.1",
     "json-bignumber": "^1.0.1",
+    "lodash": "^4.17.20",
     "ngx-contextmenu": "^5.1.1",
     "ngx-papaparse": "^3.0.3",
     "qrcode": "^1.3.0",

src/gui/qt-daemon/html_source/src/app/_helpers/services/pagination.service.ts

@@ -1,14 +1,17 @@
 import { Injectable, NgZone } from '@angular/core';
 import { VariablesService } from './variables.service';
+import { PaginationStore } from './pagination.store';
+import * as _ from 'lodash';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PaginationService {
 
   constructor(
     private variables: VariablesService,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private paginationStore: PaginationStore
   ) { }
 
   paginate(currentPage = 1) {
@@ -44,4 +47,23 @@ export class PaginationService {
       this.variables.currentWallet.pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);
     });
   }
+
+  getOffset() {
+    const mining = this.variables.currentWallet.exclude_mining_txs;
+    const currentPage = (this.variables.currentWallet.currentPage);
+    let offset = (currentPage * this.variables.count);
+    if (!mining) { return offset; }
+    const pages = this.paginationStore.value;
+    if (pages && pages.length) {
+      const max = _.maxBy(pages, 'page');
+      const isForward = this.paginationStore.isForward(pages, currentPage);
+      if (isForward) {
+        offset = max.offset;
+      } else {
+        const index = pages.findIndex(item => item.page === (currentPage));
+          offset = pages[index].offset;
+      }
+    }
+    return offset;
+  }
 }

src/gui/qt-daemon/html_source/src/app/_helpers/services/pagination.store.ts

@@ -0,0 +1,41 @@
+import {Injectable} from '@angular/core';
+import {Observable, BehaviorSubject} from 'rxjs';
+import {VariablesService} from './variables.service';
+import * as _ from 'lodash';
+
+export interface Pages {
+   page: number;
+  offset: number;
+}
+@Injectable({
+  providedIn: 'root'
+})
+export class PaginationStore {
+  constructor(
+    private variablesService: VariablesService
+  ) {
+  }
+  private subject = new BehaviorSubject<Pages[]>(null);
+  pages$: Observable<Pages[]> = this.subject.asObservable();
+
+  isForward(pages, currentPage) {
+    const max = _.maxBy(pages, 'page');
+    return !max || max.page < currentPage || max.page === currentPage;
+  }
+  setPage(pageNumber: number, offset: number) {
+    const pages = this.subject.getValue();
+    const current = (this.variablesService.currentWallet.currentPage);
+    const isForward = this.isForward(pages, current);
+    let newPages: Pages[] = [];
+    if (pages && pages.length) {
+      newPages = pages.slice(0);
+    }
+    isForward ? newPages.push({page: pageNumber, offset}) : newPages.pop();
+    this.subject.next(newPages);
+  }
+
+  get value() {
+    return this.subject.value;
+  }
+
+}

src/gui/qt-daemon/html_source/src/app/app.module.ts

@@ -32,9 +32,11 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
-
+// SERVICES
 import { BackendService } from './_helpers/services/backend.service';
 import { ModalService } from './_helpers/services/modal.service';
+import { PaginationStore } from './_helpers/services/pagination.store';
+// SERVICES
 import { MoneyToIntPipe } from './_helpers/pipes/money-to-int.pipe';
 import { IntToMoneyPipe } from './_helpers/pipes/int-to-money.pipe';
 import { HistoryTypeMessagesPipe } from './_helpers/pipes/history-type-messages.pipe';
@@ -146,6 +148,7 @@ export function highchartsFactory() {
   providers: [
     BackendService,
     ModalService,
+    PaginationStore,
     MoneyToIntPipe,
     IntToMoneyPipe,
     { provide: HIGHCHARTS_MODULES, useFactory: highchartsFactory }

src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.ts

@@ -9,11 +9,12 @@ import { LOCKED_BALANCE_HELP_PAGE } from '../_shared/constants';
 
 import icons from '../../assets/icons/icons.json';
 import { PaginationService } from '../_helpers/services/pagination.service';
+import { PaginationStore } from '../_helpers/services/pagination.store';
 
 @Component({
   selector: 'app-wallet',
   templateUrl: './wallet.component.html',
-  styleUrls: ['./wallet.component.scss']
+  styleUrls: ['./wallet.component.scss'],
 })
 export class WalletComponent implements OnInit, OnDestroy {
   subRouting1;
@@ -96,7 +97,8 @@ export class WalletComponent implements OnInit, OnDestroy {
     private ngZone: NgZone,
     private translate: TranslateService,
     private intToMoneyPipe: IntToMoneyPipe,
-    private pagination: PaginationService
+    private pagination: PaginationService,
+    private paginationStore: PaginationStore
   ) { }
 
   ngOnInit() {
@@ -207,12 +209,23 @@ export class WalletComponent implements OnInit, OnDestroy {
   }
 
   getRecentTransfers () {
+    const offset = this.pagination.getOffset();
+    const pages = this.paginationStore.value;
+    if (!pages) {
+      this.paginationStore.setPage(1, 40); // add back page for the first page
+    }
+
     this.backend.getRecentTransfers(
       this.walletID,
-      (this.variablesService.currentWallet.currentPage - 1) * this.variablesService.count,
+      offset,
       this.variablesService.count, this.variablesService.currentWallet.exclude_mining_txs, (status, data) => {
+        const page = (this.variablesService.currentWallet.currentPage + 1);
+        this.paginationStore.setPage(page, data.last_item_index); // add back page for current page
+        if (data.history.length < this.variablesService.count) {
+          this.variablesService.currentWallet.totalPages = (page - 1); // stop paginate
+        }
         if (status && data.total_history_items) {
-          this.variablesService.currentWallet.history.splice(0, this.variablesService.currentWallet.history.length);
+            this.variablesService.currentWallet.history.splice(0, this.variablesService.currentWallet.history.length);
           this.ngZone.run(() => {
             this.pagination.paginate(this.variablesService.currentWallet.currentPage);
             if (data.history.length !== 0) {

src/gui/qt-daemon/html_source/src/main.ts

@@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import 'lodash';
 
 if (environment.production) {
   enableProdMode();