Merge pull request #857 from LiskHQ/850-pagination-fix

Pagination logic update - #850
LiskArchive · Dec 12, 2018 · 7a4b6d4 · 7a4b6d4
2 parents 8678081 + 2deb494
commit 7a4b6d4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/src/components/transactions/transactions.component.js b/src/components/transactions/transactions.component.js
@@ -16,15 +16,12 @@
 import AppTransactions from './transactions.module';
 import template from './transactions.html';
 
-const TransactionsConstructor = function ($rootScope, $stateParams, $location, $http, $interval) {
+const TransactionsConstructor = function ($rootScope, $stateParams, $state, $http, $interval) {
 	const vm = this;
 	vm.getLastTransactions = (n) => {
 		const limit = 20 + 1;
 		let offset = 0;
-
-		if (n) {
-			offset = (n - 1) * limit;
-		}
+		if (n) offset = (n - 1) * limit;
 
 		$http.get(`/api/getTransactions?limit=${limit}&offset=${offset}`).then((resp) => {
 			if (resp.data.success) {
@@ -33,18 +30,25 @@ const TransactionsConstructor = function ($rootScope, $stateParams, $location, $
 				vm.txs = { results: resp.data.transactions };
 				vm.txs.hasPrev = !!offset;
 				vm.txs.hasNext = !!removedTx;
+				vm.txs.page = $stateParams.page || 0;
+				vm.txs.loadPageOffset = vm.loadPageOffset;
+				vm.txs.loadPage = vm.loadPage;
 			} else {
 				vm.txs = {};
 			}
 		});
 	};
 
+	vm.loadPageOffset = (offset) => {
+		$state.go($state.current.component, { page: Number(vm.txs.page || 1) + offset });
+	};
+
+	vm.loadPage = (pageNumber) => {
+		$state.go($state.current.component, { page: pageNumber });
+	};
+
 	const update = () => {
-		if ($stateParams.page) {
-			vm.getLastTransactions($stateParams.page);
-		} else {
-			vm.getLastTransactions();
-		}
+		vm.getLastTransactions($stateParams.page || 1);
 	};
 
 	update();

diff --git a/src/services/pagination.js b/src/services/pagination.js
@@ -98,13 +98,19 @@ Pagination.prototype.loadPrev = function () {
 	this.loadData();
 };
 
-Pagination.prototype.nextOffset = function () {
-	this.currentPage += 1;
+Pagination.prototype.loadPageOffset = function (offset) {
+	if (offset > 0) this.nextOffset(offset);
+	if (offset < 0) this.prevOffset(offset);
+	this.loadData();
+};
+
+Pagination.prototype.nextOffset = function (offset) {
+	this.currentPage += offset || 1;
 	return this.offset += this.limit;
 };
 
-Pagination.prototype.prevOffset = function () {
-	this.currentPage -= 1;
+Pagination.prototype.prevOffset = function (offset) {
+	this.currentPage -= offset || 1;
 	return this.offset -= this.limit;
 };
 

diff --git a/src/shared/transactions-list/transactions-list.html b/src/shared/transactions-list/transactions-list.html
@@ -62,14 +62,14 @@ <h2>No transactions</h2>
 
 	<nav>
 		<ul class="nav nav-pills nav-justified">
-			<li role="presentation" data-ng-disabled="!txs.hasPrev" data-ng-click="txs.loadPrev()">
-				<button class="btn btn-default less-button bordered-button" data-ng-disabled="!txs.hasPrev" data-ng-click="txs.loadPrev()">Prev</button>
+			<li role="presentation" data-ng-disabled="!txs.hasPrev">
+				<button class="btn btn-default less-button bordered-button" data-ng-disabled="!txs.hasPrev" data-ng-click="txs.loadPageOffset(-1)">Prev</button>
 			</li>
 			<li role="presentation">
 				<button class="btn btn-default more-button bordered-button">Pagination</button>
 			</li>
-			<li role="presentation" data-ng-disabled="!txs.hasNext" data-ng-click="txs.loadNext()">
-				<button class="btn btn-default more-button bordered-button" data-ng-disabled="!txs.hasNext" data-ng-click="txs.loadNext()">Next</button>
+			<li role="presentation" data-ng-disabled="!txs.hasNext">
+				<button class="btn btn-default more-button bordered-button" data-ng-disabled="!txs.hasNext" data-ng-click="txs.loadPageOffset(1)">Next</button>
 			</li>
 		</ul>
 	</nav>