Pagination enhancement

src/components/controls/Pagination.vue

@@ -1,45 +1,47 @@
 <template>
 	<div class="pagination-wrapper">
-		<div v-if="!canFetchPrevious && !canFetchNext">
+		<div>
 			<b-button-group>
-				<b-button variant="outline-info" size="sm" disabled>
-					<IconArrowLeft />
-				</b-button>
-				<b-button variant="outline-info" size="sm" disabled>
-					<IconArrowRight />
+				<b-button v-if="advance" variant="outline-info" size="sm" @click="goFirstPage" :class="{'disabled': isFirstPageDisable}" >
+					{{ getNameByKey('first') }}
 				</b-button>
-			</b-button-group>
-		</div>
-		<ButtonMore v-else-if="!canFetchPrevious" @click="nextPage">{{getNameByKey('more')}}</ButtonMore>
-		<ButtonLess v-else-if="!canFetchNext" @click="previousPage">{{getNameByKey('less')}}</ButtonLess>
-		<div v-else :nextPageAction="nextPageAction" :previousPageAction="previousPageAction">
-			<b-button-group>
-				<b-button variant="outline-info" size="sm" @click="previousPage">
+				<b-button variant="outline-info" size="sm" @click="previousPage" :class="{'disabled': !canFetchPrevious}">
 					<IconArrowLeft />
 				</b-button>
-				<b-button variant="outline-info" size="sm" @click="nextPage">
+
+				<div v-if="advance" class="pageNumberHolder">
+					<input v-model="pageNumber" @keyup.enter="fetchPage" type="number" min="1" :disabled="isDisableInputPage"> {{ displayLastPageNumber }}
+				</div>
+
+				<b-button variant="outline-info" size="sm" @click="nextPage" :class="{'disabled': !canFetchNext}">
 					<IconArrowRight />
 				</b-button>
+
+				<b-button v-if="advance" variant="outline-info" size="sm" @click="goLastPage" :class="{'disabled': isLastPageDisable}">
+					{{ getNameByKey('last') }}
+				</b-button>
 			</b-button-group>
 		</div>
 	</div>
 </template>
 
 <script>
-import ButtonLess from './ButtonLess.vue';
-import ButtonMore from './ButtonMore.vue';
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue';
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue';
 
 export default {
 	components: {
 		IconArrowLeft,
-		IconArrowRight,
-		ButtonLess,
-		ButtonMore
+		IconArrowRight
 	},
 
 	props: {
+		advance: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+
 		canFetchPrevious: {
 			type: Boolean,
 			required: true
@@ -64,13 +66,50 @@ export default {
 			type: Boolean,
 			required: false,
 			default: true
+		},
+
+		lastPageNumber: {
+			type: [Number],
+			required: false,
+			default: undefined
+		},
+
+		currentPageNumber: {
+			type: Number,
+			required: false,
+			default: 1
+		}
+	},
+
+	data() {
+		return {
+			pageNumber: this.currentPageNumber
+		};
+	},
+
+	computed: {
+		isFirstPageDisable() {
+			return this.currentPageNumber === 1;
+		},
+		isLastPageDisable() {
+			return this.currentPageNumber === this.lastPageNumber || this.lastPageNumber === undefined;
+		},
+		isDisableInputPage() {
+			return this.lastPageNumber === undefined;
+		},
+		displayLastPageNumber() {
+			if (this.lastPageNumber !== undefined)
+				return `of ${this.lastPageNumber}`;
+
+			return '';
 		}
 	},
 
 	methods: {
 		nextPage() {
 			if (this.nextPageAction)
 				this.$store.dispatch(this.nextPageAction);
+
 			this.$emit('next');
 			if (this.goUp)
 				this.goToTop();
@@ -84,6 +123,29 @@ export default {
 				this.goToTop();
 		},
 
+		goFirstPage() {
+			if (!this.isFirstPageDisable) {
+				this.$emit('firstPage');
+				if (this.goUp)
+					this.goToTop();
+			}
+		},
+
+		goLastPage() {
+			if (!this.isLastPageDisable) {
+				this.$emit('lastPage');
+				if (this.goUp)
+					this.goToTop();
+			}
+		},
+
+		fetchPage() {
+			this.$emit('fetchPage', this.pageNumber);
+
+			if (this.goUp)
+				this.goToTop();
+		},
+
 		goToTop() {
 			document.body.scrollTop = 0;
 			document.documentElement.scrollTop = 0;
@@ -92,11 +154,36 @@ export default {
 		getNameByKey(e) {
 			return this.$store.getters['ui/getNameByKey'](e);
 		}
+	},
+
+	watch: {
+		currentPageNumber(value) {
+			this.pageNumber = value;
+		}
 	}
 };
 </script>
 
 <style lang="scss" scoped>
+.pageNumberHolder {
+    padding: 1px 5px;
+
+    input {
+        border: solid 1px var(--clickable-text);
+        color: var(--clickable-text);
+        background-color: transparent;
+        width: 50px;
+        text-align: center;
+    }
+
+    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+}
+
 .disabled {
     cursor: not-allowed;
     color: var(--clickable-text);
@@ -110,6 +197,7 @@ export default {
     float: right;
 
     .btn-outline-info {
+        margin: 0 3px;
         color: var(--clickable-text);
         border-color: var(--clickable-text);
     }

src/components/tables/TableListView.vue

@@ -76,16 +76,19 @@
 				</tbody>
 			</table>
 			<div v-if="pagination || timelinePagination" class="bottom">
-				<div v-if="pagination">{{ pageIndex + 1 }}/{{ getPageNumber(lastPage) }}</div>
-				<div v-else>{{ getPageNumber(timeline.index, timeline.pageNumber) }}/ {{ getPageNumber() }}</div>
 				<div class="pagination-wrapper">
 					<Pagination
 						:canFetchPrevious="prevPageExist"
 						:canFetchNext="nextPageExist"
 						:goUp="false"
+						:currentPageNumber="pageNumber"
+						:lastPageNumber="lastPage"
 						class="pagination"
 						@next="nextPage"
 						@previous="prevPage"
+						@firstPage="goFirstPage"
+						@lastPage="goLastPage"
+						@fetchPage="fetchPage($event)"
 					/>
 					<Loading small v-if="paginationLoading" />
 				</div>
@@ -204,7 +207,21 @@ export default {
 			else return this.pageIndex > 0;
 		},
 
+		pageNumber() {
+			if (this.timelinePagination)
+				return this.timeline.pageNumber;
+
+			return this.pageIndex + 1;
+		},
+
 		lastPage() {
+			if (this.timelinePagination) {
+				if (!this.timeline?.totalRecords)
+					return undefined;
+
+				return Math.ceil(this.timeline.totalRecords / this.timeline.pageSize);
+			}
+
 			return Math.ceil(this.data.length / this.pageSize);
 		},
 
@@ -233,31 +250,53 @@ export default {
 			this.$store.dispatch(this.nextPageAction);
 		},
 
+		fetchPage(number) {
+			const pageNumber = parseInt(number) || 1;
+
+			// handle input number over range
+			if (this.lastPage !== undefined) {
+				if (pageNumber > this.lastPage || pageNumber <= 0) {
+					console.error('number out of range');
+					return;
+				}
+			}
+
+			if (this.timelinePagination)
+				return this.timeline.fetchPage({ pageNumber });
+
+			else this.pageIndex = pageNumber;
+		},
+
 		nextPage() {
 			if (this.nextPageExist) {
 				if (this.timelinePagination)
-				// this.$store.dispatch(this.timelineNextAction)
 					this.timeline.fetchNext();
+
 				else this.pageIndex++;
 			}
 		},
 
 		prevPage() {
 			if (this.prevPageExist) {
 				if (this.timelinePagination)
-				// this.$store.dispatch(this.timelinePreviousAction)
 					this.timeline.fetchPrevious();
+
 				else this.pageIndex--;
 			}
 		},
 
-		getPageNumber() {
-			const args = [...arguments];
-			const number = args.find(arg => typeof arg === 'number');
+		goFirstPage() {
+			if (this.timelinePagination)
+				this.fetchPage(1);
+
+			else this.pageIndex = 0;
+		},
+
+		goLastPage() {
+			if (this.timelinePagination)
+				this.fetchPage(this.lastPage);
 
-			return typeof number === 'number'
-				? number
-				: '..';
+			else this.pageIndex = this.lastPage;
 		},
 
 		onRowClick(row) {

src/config/i18n/en-us.json

@@ -406,5 +406,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }

src/config/i18n/es.json

@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "actualidad",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }

src/config/i18n/ja.json

@@ -406,5 +406,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch 情報",
     "current": "現在",
+    "reclaimed": "回収",
+    "first": "最初",
+    "last": "最後",
     "mosaicFlags": "フラグ"
 }

src/config/i18n/pt.json

@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }

src/config/i18n/ru.json

@@ -407,5 +407,7 @@
     "epochInfo": "Информация об эпохе",
     "current": "В данный момент",
     "reclaimed": "Возвращенная",
+    "first": "Первая",
+    "last": "Последняя",
     "mosaicFlags": "Флаги"
 }

src/config/i18n/ua.json

@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }

src/config/i18n/zh.json

@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }

src/config/pages/block-detail.json

@@ -21,7 +21,8 @@
                     "nextPageAction": "block/nextBlock",
                     "previousPageAction": "block/previousBlock",
                     "canFetchPrevious": true,
-                    "canFetchNext": true
+                    "canFetchNext": true,
+                    "advance": false
                 },
                 "fields": [
                     "version",

src/infrastructure/AccountService.js

@@ -22,6 +22,7 @@ import http from './http';
 import { Constants } from '../config';
 import { NamespaceService, TransactionService, ChainService, MetadataService, LockService, ReceiptService, MosaicService, BlockService } from '../infrastructure';
 import helper from '../helper';
+import NodeService from './NodeService';
 
 class AccountService {
 	/**
@@ -89,8 +90,11 @@ class AccountService {
 
 		const accountNames = await NamespaceService.getAccountsNames(addresses);
 
+		const { numAccounts } = await NodeService.getStorageInfo();
+
 		return {
 			...accountInfos,
+			totalRecords: numAccounts,
 			data: accountInfos.data.map((account) => ({
 				...account,
 				balance: helper.getNetworkCurrencyBalance(account.mosaics) !== Constants.Message.UNAVAILABLE ? helper.getNetworkCurrencyBalance(account.mosaics) : helper.toNetworkCurrency(0),