Skip to content
This repository has been archived by the owner on Jan 14, 2022. It is now read-only.

Pagination logic update - #850 #857

Merged
merged 5 commits into from
Dec 12, 2018
Merged

Pagination logic update - #850 #857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
322b8e2
Add URL-based pagination to transaction page
Dec 11, 2018
5c8816a
Pagination logic fix
Dec 11, 2018
f563b7f
Pagination support for new offset param
Dec 11, 2018
d4ba7f9
Remove not needed deps
Dec 11, 2018
2deb494
Transactions component loadPage() fix
Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions src/components/transactions/transactions.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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();
Expand Down
14 changes: 10 additions & 4 deletions src/services/pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down
8 changes: 4 additions & 4 deletions src/shared/transactions-list/transactions-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down