fix UI search transactions
This commit is contained in:
parent
9e810466b7
commit
9c024aebf6
5 changed files with 83 additions and 105 deletions
|
|
@ -1,23 +1,20 @@
|
||||||
<ion-modal-view>
|
<ion-modal-view>
|
||||||
<ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
|
<ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
|
||||||
<div class="left-small">
|
<div class="left-small">
|
||||||
<a ng-click="cancel()" class="p10">
|
<a ng-click="close()" class="p10">
|
||||||
<span class="text-close" translate>Close</span>
|
<span class="text-close" translate>Close</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title ellipsis" translate>Search Transactions</h1>
|
<h1 class="title ellipsis" translate>Search Transactions</h1>
|
||||||
</ion-header-bar>
|
</ion-header-bar>
|
||||||
|
|
||||||
<ion-content ng-controller="searchController">
|
<ion-content ng-controller="searchController" ng-init="search = ''">
|
||||||
<div class="bar bar-header item-input-inset">
|
<div class="bar bar-header item-input-inset">
|
||||||
<label class="item-input-wrapper">
|
<label class="item-input-wrapper">
|
||||||
<i class="icon ion-ios-search placeholder-icon"></i>
|
<i class="icon ion-ios-search placeholder-icon"></i>
|
||||||
<input type="search" ng-model="search" ng-init="search = ''" ng-change="updateSearchInput(search)"
|
<input type="search" ng-model="search" ng-init="search = ''" ng-change="updateSearchInput(search)"
|
||||||
placeholder="{{'Search transactions' | translate}}">
|
placeholder="{{'Search transactions' | translate}}">
|
||||||
</label>
|
</label>
|
||||||
<button class="button button-stable" ng-click="cancelSearch()">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="list">
|
<div class="list">
|
||||||
|
|
@ -83,13 +80,11 @@
|
||||||
|
|
||||||
<i class="icon-arrow-down4"></i>
|
<i class="icon-arrow-down4"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ion-infinite-scroll
|
<ion-infinite-scroll
|
||||||
ng-if="txHistoryShowMore"
|
ng-if="txHistoryShowMore"
|
||||||
on-infinite="moreSearchResults()"
|
on-infinite="moreSearchResults()"
|
||||||
distance="1%">
|
distance="1%">
|
||||||
</ion-infinite-scroll>
|
</ion-infinite-scroll>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-modal-view>
|
</ion-modal-view>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<ion-view id="walletDetails">
|
<ion-view id="walletDetails" ng-controller="walletDetailsController" ng-init="init()">
|
||||||
<ion-header-bar ng-style="{'background-color': walletDetailsColor}">
|
<ion-header-bar ng-style="{'background-color': walletDetailsColor}">
|
||||||
<button class="button back-button" ng-click="$ionicGoBack()">
|
<button class="button back-button" ng-click="$ionicGoBack()">
|
||||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||||
</button>
|
</button>
|
||||||
<h1 class="title">{{walletDetailsName}}</h1>
|
<h1 class="title">{{walletDetailsName}}</h1>
|
||||||
<button class="button search-button">
|
<button class="button search-button" ng-click="startSearch(); openSearchModal()">
|
||||||
<i class="icon ion-ios-search-strong"></i>
|
<i class="icon ion-ios-search-strong"></i>
|
||||||
</button>
|
</button>
|
||||||
</ion-header-bar>
|
</ion-header-bar>
|
||||||
|
|
||||||
<ion-content ng-controller="walletDetailsController" ng-init="init()" delegate-handle="my-handle">
|
<ion-content delegate-handle="my-handle">
|
||||||
<div ng-show="!wallet" translate>
|
<div ng-show="!wallet" translate>
|
||||||
No Wallet
|
No Wallet
|
||||||
<a href ui-sref="tabs.home" class="button" translate>
|
<a href ui-sref="tabs.home" class="button" translate>
|
||||||
|
|
@ -119,9 +119,8 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- Transactions -->
|
<!-- Transactions -->
|
||||||
<h4 class="title" ng-click="startSearch(); openSearchModal()" ng-show="!notAuthorized">
|
<h4 class="title" ng-show="!notAuthorized">
|
||||||
<span translate>Activity</span>
|
<span translate>Activity</span>
|
||||||
<i class="icon ion-ios-search-strong"></i>
|
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<div class="oh pr m20t text-gray size-12 text-center"
|
<div class="oh pr m20t text-gray size-12 text-center"
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,77 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('copayApp.controllers').controller('searchController', function($scope) {
|
angular.module('copayApp.controllers').controller('searchController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $ionicNavBarDelegate, $state, $stateParams, $ionicScrollDelegate, bwcError, profileService, lodash, configService, gettext, gettextCatalog, platformInfo, walletService) {
|
||||||
var self = $scope.self;
|
|
||||||
$scope.search = '';
|
|
||||||
|
|
||||||
$scope.cancel = function() {
|
var HISTORY_SHOW_LIMIT = 10;
|
||||||
$scope.searchModal.hide();
|
var currentTxHistoryPage = 0;
|
||||||
|
var wallet;
|
||||||
|
var isCordova = platformInfo.isCordova;
|
||||||
|
$scope.txHistorySearchResults = [];
|
||||||
|
$scope.filteredTxHistory = [];
|
||||||
|
|
||||||
|
$scope.updateSearchInput = function(search) {
|
||||||
|
if (isCordova)
|
||||||
|
window.plugins.toast.hide();
|
||||||
|
currentTxHistoryPage = 0;
|
||||||
|
throttleSearch(search);
|
||||||
|
$ionicScrollDelegate.resize();
|
||||||
|
}
|
||||||
|
|
||||||
|
var throttleSearch = lodash.throttle(function(search) {
|
||||||
|
|
||||||
|
function filter(search) {
|
||||||
|
$scope.filteredTxHistory = [];
|
||||||
|
|
||||||
|
function computeSearchableString(tx) {
|
||||||
|
var addrbook = '';
|
||||||
|
if (tx.addressTo && self.addressbook && self.addressbook[tx.addressTo]) addrbook = self.addressbook[tx.addressTo] || '';
|
||||||
|
var searchableDate = computeSearchableDate(new Date(tx.time * 1000));
|
||||||
|
var message = tx.message ? tx.message : '';
|
||||||
|
var comment = tx.note ? tx.note.body : '';
|
||||||
|
var addressTo = tx.addressTo ? tx.addressTo : '';
|
||||||
|
return ((tx.amountStr + message + addressTo + addrbook + searchableDate + comment).toString()).toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeSearchableDate(date) {
|
||||||
|
var day = ('0' + date.getDate()).slice(-2).toString();
|
||||||
|
var month = ('0' + (date.getMonth() + 1)).slice(-2).toString();
|
||||||
|
var year = date.getFullYear();
|
||||||
|
return [month, day, year].join('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (lodash.isEmpty(search)) {
|
||||||
|
$scope.txHistoryShowMore = false;
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.filteredTxHistory = lodash.filter($scope.completeTxHistory, function(tx) {
|
||||||
|
if (!tx.searcheableString) tx.searcheableString = computeSearchableString(tx);
|
||||||
|
return lodash.includes(tx.searcheableString, search.toLowerCase());
|
||||||
|
});
|
||||||
|
|
||||||
|
if ($scope.filteredTxHistory.length > HISTORY_SHOW_LIMIT) $scope.txHistoryShowMore = true;
|
||||||
|
else $scope.txHistoryShowMore = false;
|
||||||
|
|
||||||
|
return $scope.filteredTxHistory;
|
||||||
|
};
|
||||||
|
$scope.txHistorySearchResults = filter(search).slice(0, HISTORY_SHOW_LIMIT);
|
||||||
|
if (isCordova)
|
||||||
|
window.plugins.toast.showShortBottom(gettextCatalog.getString('Matches: ' + $scope.filteredTxHistory.length));
|
||||||
|
$timeout(function() {
|
||||||
|
$rootScope.$apply();
|
||||||
|
});
|
||||||
|
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
$scope.moreSearchResults = function() {
|
||||||
|
currentTxHistoryPage++;
|
||||||
|
$scope.showHistory();
|
||||||
|
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$scope.showHistory = function() {
|
||||||
|
$scope.txHistorySearchResults = $scope.filteredTxHistory ? $scope.filteredTxHistory.slice(0, (currentTxHistoryPage + 1) * HISTORY_SHOW_LIMIT) : [];
|
||||||
|
$scope.txHistoryShowMore = $scope.filteredTxHistory.length > $scope.txHistorySearchResults.length;
|
||||||
|
};
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
angular.module('copayApp.controllers').controller('searchController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $ionicNavBarDelegate, $state, $stateParams, $ionicScrollDelegate, bwcError, profileService, lodash, configService, gettext, gettextCatalog, platformInfo, walletService) {
|
|
||||||
|
|
||||||
var HISTORY_SHOW_LIMIT = 10;
|
|
||||||
var currentTxHistoryPage = 0;
|
|
||||||
var wallet;
|
|
||||||
var isCordova = platformInfo.isCordova;
|
|
||||||
$scope.txHistorySearchResults = [];
|
|
||||||
$scope.filteredTxHistory = [];
|
|
||||||
|
|
||||||
$scope.cancel = function() {
|
|
||||||
$scope.searchModal.hide();
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.cancelSearch = function() {
|
|
||||||
$scope.txHistorySearchResults = [];
|
|
||||||
$scope.filteredTxHistory = [];
|
|
||||||
$scope.search = '';
|
|
||||||
$scope.currentTxHistoryPage = 0;
|
|
||||||
$ionicScrollDelegate.resize();
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.updateSearchInput = function(search) {
|
|
||||||
if (isCordova)
|
|
||||||
window.plugins.toast.hide();
|
|
||||||
throttleSearch(search);
|
|
||||||
$ionicScrollDelegate.resize();
|
|
||||||
}
|
|
||||||
|
|
||||||
var throttleSearch = lodash.throttle(function(search) {
|
|
||||||
|
|
||||||
function filter(search) {
|
|
||||||
$scope.filteredTxHistory = [];
|
|
||||||
|
|
||||||
function computeSearchableString(tx) {
|
|
||||||
var addrbook = '';
|
|
||||||
if (tx.addressTo && self.addressbook && self.addressbook[tx.addressTo]) addrbook = self.addressbook[tx.addressTo] || '';
|
|
||||||
var searchableDate = computeSearchableDate(new Date(tx.time * 1000));
|
|
||||||
var message = tx.message ? tx.message : '';
|
|
||||||
var comment = tx.note ? tx.note.body : '';
|
|
||||||
var addressTo = tx.addressTo ? tx.addressTo : '';
|
|
||||||
return ((tx.amountStr + message + addressTo + addrbook + searchableDate + comment).toString()).toLowerCase();
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeSearchableDate(date) {
|
|
||||||
var day = ('0' + date.getDate()).slice(-2).toString();
|
|
||||||
var month = ('0' + (date.getMonth() + 1)).slice(-2).toString();
|
|
||||||
var year = date.getFullYear();
|
|
||||||
return [month, day, year].join('/');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (lodash.isEmpty(search)) {
|
|
||||||
$scope.txHistoryShowMore = false;
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.filteredTxHistory = lodash.filter($scope.completeTxHistory, function(tx) {
|
|
||||||
if (!tx.searcheableString) tx.searcheableString = computeSearchableString(tx);
|
|
||||||
return lodash.includes(tx.searcheableString, search.toLowerCase());
|
|
||||||
});
|
|
||||||
|
|
||||||
if ($scope.filteredTxHistory.length > HISTORY_SHOW_LIMIT) $scope.txHistoryShowMore = true;
|
|
||||||
else $scope.txHistoryShowMore = false;
|
|
||||||
|
|
||||||
return $scope.filteredTxHistory;
|
|
||||||
};
|
|
||||||
$scope.txHistorySearchResults = filter(search).slice(0, HISTORY_SHOW_LIMIT);
|
|
||||||
if (isCordova)
|
|
||||||
window.plugins.toast.showShortBottom(gettextCatalog.getString('Matches: ' + $scope.filteredTxHistory.length));
|
|
||||||
$timeout(function() {
|
|
||||||
$rootScope.$apply();
|
|
||||||
});
|
|
||||||
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
$scope.moreSearchResults = function() {
|
|
||||||
currentTxHistoryPage++;
|
|
||||||
$scope.showHistory();
|
|
||||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.showHistory = function() {
|
|
||||||
$scope.txHistorySearchResults = $scope.filteredTxHistory ? $scope.filteredTxHistory.slice(0, (currentTxHistoryPage + 1) * HISTORY_SHOW_LIMIT) : [];
|
|
||||||
$scope.txHistoryShowMore = $scope.filteredTxHistory.length > $scope.txHistorySearchResults.length;
|
|
||||||
};
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -77,6 +77,11 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
||||||
$scope.searchModal = modal;
|
$scope.searchModal = modal;
|
||||||
$scope.searchModal.show();
|
$scope.searchModal.show();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$scope.close = function() {
|
||||||
|
$scope.searchModal.hide();
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.openTxModal = function(btx) {
|
$scope.openTxModal = function(btx) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue