From 3df35a640f6750ef9121fb6895a9d1daacbd895f Mon Sep 17 00:00:00 2001 From: Michal Tuleja Date: Wed, 12 Dec 2018 14:40:58 +0100 Subject: [PATCH 01/13] Pagination buttons update --- src/shared/transactions-list/transactions-list.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/transactions-list/transactions-list.html b/src/shared/transactions-list/transactions-list.html index 8f2794560..4b452041f 100644 --- a/src/shared/transactions-list/transactions-list.html +++ b/src/shared/transactions-list/transactions-list.html @@ -66,7 +66,7 @@

No transactions

  • - +
  • From 44f7404534b356c052ac70a6e11de13f461244ab Mon Sep 17 00:00:00 2001 From: Michal Tuleja Date: Wed, 12 Dec 2018 14:41:53 +0100 Subject: [PATCH 02/13] Add URL filter support to transaction page --- src/app/states.js | 2 +- .../transactions/transactions.component.js | 19 ++++++++++++++++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/app/states.js b/src/app/states.js index 7907dafb4..d2012bdd0 100644 --- a/src/app/states.js +++ b/src/app/states.js @@ -33,7 +33,7 @@ App.config(($stateProvider, $urlRouterProvider, $locationProvider) => { component: 'block', }) .state('transactions', { - url: '/txs/:page', + url: '/txs/:page?senderId&senderPublicKey&recipientId&recipientPublicKey&minAmount&maxAmount&type&height&blockId&fromTimestamp&toTimestamp&sort&limit&offset', parentDir: 'home', component: 'transactions', }) diff --git a/src/components/transactions/transactions.component.js b/src/components/transactions/transactions.component.js index 81770db12..639a7ef3e 100644 --- a/src/components/transactions/transactions.component.js +++ b/src/components/transactions/transactions.component.js @@ -18,19 +18,32 @@ import template from './transactions.html'; const TransactionsConstructor = function ($rootScope, $stateParams, $state, $http, $interval) { const vm = this; + + const filters = Object.keys($stateParams) + .filter(key => key !== 'page') + .filter(key => key !== '#') + .filter(key => typeof $stateParams[key] !== 'undefined') + .map(key => `${key}=${$stateParams[key]}`); + vm.getLastTransactions = (n) => { const limit = 20 + 1; let offset = 0; if (n) offset = (n - 1) * limit; - $http.get(`/api/getTransactions?limit=${limit}&offset=${offset}`).then((resp) => { + let requestUrl = `/api/getTransactions?limit=${limit}&offset=${offset}`; + requestUrl += filters.length ? `&${filters.join('&')}` : ''; + + $http.get(requestUrl).then((resp) => { if (resp.data.success) { - const removedTx = resp.data.transactions.splice(-1, 1); + let removedTx; + if (resp.data.transactions.length > limit - 1) { + removedTx = resp.data.transactions.splice(-1, 1); + } vm.txs = { results: resp.data.transactions }; vm.txs.hasPrev = !!offset; vm.txs.hasNext = !!removedTx; - vm.txs.page = $stateParams.page || 0; + vm.txs.page = $stateParams.page || 1; vm.txs.loadPageOffset = vm.loadPageOffset; vm.txs.loadPage = vm.loadPage; } else { From caeb20d94822362529f8ed3e2bc387adc8492c39 Mon Sep 17 00:00:00 2001 From: Michal Tuleja Date: Wed, 12 Dec 2018 20:26:50 +0100 Subject: [PATCH 03/13] New implementation of transaction filter --- src/components/transactions/transactions.html | 2 +- .../transactions-filter.directive.js | 144 +++++++----------- .../transactions-filter.html | 53 +++++-- 3 files changed, 101 insertions(+), 98 deletions(-) diff --git a/src/components/transactions/transactions.html b/src/components/transactions/transactions.html index 56b1940d3..b846ccad0 100644 --- a/src/components/transactions/transactions.html +++ b/src/components/transactions/transactions.html @@ -23,7 +23,7 @@

    Transactions

    - +
    diff --git a/src/shared/transactions-filter/transactions-filter.directive.js b/src/shared/transactions-filter/transactions-filter.directive.js index 863c93955..b0dde2c7d 100644 --- a/src/shared/transactions-filter/transactions-filter.directive.js +++ b/src/shared/transactions-filter/transactions-filter.directive.js @@ -16,108 +16,80 @@ import AppTools from '../../app/app-tools.module'; import template from './transactions-filter.html'; -const TransactionsConstructor = function ($rootScope, $scope, $timeout, allTxs) { +const TransactionsConstructor = function ($rootScope, $scope, $stateParams, $element, $state) { $scope.searchModel = []; $scope.searchParams = []; $scope.availableSearchParams = [ - { key: 'senderId', name: 'Sender ID', placeholder: 'Sender...' }, - { key: 'senderPublicKey', name: 'Sender Public Key', placeholder: 'Sender Public Key...' }, - { key: 'recipientId', name: 'Recipient ID', placeholder: 'Recipient...' }, - { key: 'recipientPublicKey', name: 'Recipient Public Key', placeholder: 'Recipient Public Key...' }, - { key: 'minAmount', name: 'Min Amount', placeholder: 'Min Amount...' }, - { key: 'maxAmount', name: 'Max Amount', placeholder: 'Max Amount...' }, - { key: 'type', name: 'Transaction Type', placeholder: 'Comma separated...' }, - { key: 'height', name: 'Block Height', placeholder: 'Block Height...' }, - { key: 'blockId', name: 'Block Id', placeholder: 'Block Id...' }, - { key: 'fromTimestamp', name: 'From Timestamp', placeholder: 'From Timestamp...' }, - { key: 'toTimestamp', name: 'To Timestamp', placeholder: 'To Timestamp...' }, - { key: 'limit', name: 'Limit', placeholder: 'Limit...' }, - { key: 'offset', name: 'Offset', placeholder: 'Offset...' }, - { - key: 'sort', - name: 'Order By', - placeholder: 'Order By...', - restrictToSuggestedValues: true, - suggestedValues: ['amount:asc', 'amount:desc', 'fee:asc', 'fee:desc', 'type:asc', 'type:desc', 'timestamp:asc', 'timestamp:desc'], - }, + { key: 'senderId', name: 'Sender ID', placeholder: 'Sender...', example: '12317412804123L' }, + { key: 'senderPublicKey', name: 'Sender Public Key', placeholder: 'Sender Public Key...', example: 'b550ede5...a26c78d8' }, + { key: 'recipientId', name: 'Recipient ID', placeholder: 'Recipient...', example: '12317412804123L' }, + { key: 'recipientPublicKey', name: 'Recipient Public Key', placeholder: 'Recipient Public Key...', example: 'b550ede5...a26c78d8' }, + { key: 'minAmount', name: 'Min Amount', placeholder: 'Min Amount...', example: '1.25' }, + { key: 'maxAmount', name: 'Max Amount', placeholder: 'Max Amount...', example: '1000.5' }, + { key: 'type', name: 'Comma separated transaction types', placeholder: 'Comma separated...', example: '1,3' }, + { key: 'height', name: 'Block height', placeholder: 'Block Height...', example: '2963014' }, + { key: 'blockId', name: 'Block Id', placeholder: 'Block Id...', example: '17238091754034756025' }, + { key: 'fromTimestamp', name: 'From Timestamp', placeholder: 'From Timestamp...', example: '17238091754034756025' }, + { key: 'toTimestamp', name: 'To Timestamp', placeholder: 'To Timestamp...', example: '12317412804123L' }, + // { key: 'limit', name: 'Limit', placeholder: 'Limit...', example: '12317412804123L' }, + // { key: 'offset', name: 'Offset', placeholder: 'Offset...', example: '12317412804123L' }, + // { + // key: 'sort', + // name: 'Order By', + // placeholder: 'Order By...', + // restrictToSuggestedValues: true, + // suggestedValues: + // ['amount:asc', 'amount:desc', 'fee:asc', 'fee:desc', 'type:asc', + // 'type:desc', 'timestamp:asc', 'timestamp:desc'], + // }, ]; - $scope.parametersDisplayLimit = $scope.availableSearchParams.length; + $scope.queryBoxActive = false; + // $scope.queryHelpActive = true; - const onSearchBoxCleaned = () => { - if ($scope.cleanByFilters) { - $scope.cleanByFilters = false; - } else { - $scope.invalidParams = false; - $scope.txs = allTxs(); - $scope.txs.loadData(); + const convertToUrl = (key, param) => { + switch (key) { + case 'minAmount': + case 'maxAmount': + return Number(param) * Math.pow(10, 8); + default: + return param; } }; - const searchByParams = (params) => { - if ($scope.direction !== 'search') { - $scope.lastDirection = $scope.direction; - $scope.direction = 'search'; + const convertFromUrl = (key, param) => { + switch (key) { + case 'minAmount': + case 'maxAmount': + return Number(param) / Math.pow(10, 8); + default: + return param; } - $scope.invalidParams = false; - $scope.txs = allTxs(params); - $scope.txs.loadData(); }; - const onSearchChange = () => { - const params = {}; - Object.keys($scope.searchModel).forEach((key) => { - if ($scope.searchModel[key] !== undefined && $scope.searchModel[key] !== '') { - params[key] = $scope.searchModel[key]; - } - if ((key === 'minAmount' || key === 'maxAmount') && params[key] !== '') { - params[key] = Math.floor(parseFloat(params[key]) * 1e8); - } - }); - - if (params.query) { - params.senderId = params.query; - params.recipientId = params.query; - } - - if (Object.keys(params).length > 0) { - searchByParams(params); - } else { - onSearchBoxCleaned(); - } + $scope.addToQueryText = (key) => { + $scope.queryText += ` ${key}=`; }; - $rootScope.$on('advanced-searchbox:modelUpdated', (event, model) => { - if ($scope.searchModel.query !== model.query) { - $scope.searchModel = Object.assign({}, model); - return onSearchChange(); - } - - return $scope.searchModel = Object.assign({}, model); - }); - - $rootScope.$on('advanced-searchbox:removedSearchParam', (event, searchParameter) => { - delete $scope.searchModel[searchParameter.key]; - onSearchChange(); - }); - - $rootScope.$on('advanced-searchbox:removedAllSearchParam', () => { - onSearchBoxCleaned(); - }); - - $rootScope.$on('advanced-searchbox:leavedEditMode', (event, searchParameter) => { - $scope.searchModel[searchParameter.key] = searchParameter.value; - onSearchChange(); - }); - - // Sets autocomplete attr off - const disableAutocomplete = () => { - $timeout(() => { - document.getElementsByClassName('search-parameter-input')[0].setAttribute('autocomplete', 'off'); - }, 0); + $scope.performSearch = () => { + const query = $scope.queryText.split(' ') + .map(param => param.split('=')) + .reduce((acc, param) => { + acc[param[0]] = convertToUrl(param[0], param[1]); + return acc; + }, {}); + $state.go($state.current.component, Object.assign({ page: 1 }, query), { inherit: false }); }; - disableAutocomplete(); + $scope.queryText = Object.keys($stateParams) + .filter(key => key !== 'page') + .filter(key => key !== 'address') + .filter(key => key !== '#') + .filter(key => typeof $stateParams[key] !== 'undefined') + .map(key => `${key}=${convertFromUrl(key, $stateParams[key])}`) + .join(' '); + + $scope.parametersDisplayLimit = $scope.availableSearchParams.length; }; const transactionsFilter = AppTools.directive('transactionsFilter', () => ({ diff --git a/src/shared/transactions-filter/transactions-filter.html b/src/shared/transactions-filter/transactions-filter.html index 2aecf281f..270322f34 100644 --- a/src/shared/transactions-filter/transactions-filter.html +++ b/src/shared/transactions-filter/transactions-filter.html @@ -15,16 +15,47 @@ * */ --> -
    - - -