Merge pull request #3902 from gabrielbazan7/feat/searchBox2
Search box for transactions
This commit is contained in:
Gustavo Maximiliano Cortez
commit
4aa4d9f769
4 changed files with 174 additions and 22 deletions
|
|
@ -72,7 +72,7 @@
|
|||
-->
|
||||
|
||||
<div id="walletHome" class="walletHome tab-view tab-in">
|
||||
<div class="oh pr">
|
||||
<div class="oh pr" ng-show="!index.isSearching">
|
||||
<div class="amount" ng-style="{'background-color':index.backgroundColor}">
|
||||
<div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
|
||||
<div class="m15t" ng-show="index.updateError" ng-click='index.updateAll({triggerTxUpdate: true})'>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="oh pr" ng-if="index.txps[0]">
|
||||
<div class="oh pr" ng-if="index.txps[0]" ng-show="!index.isSearching">
|
||||
<h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
|
||||
<h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
|
||||
<div class="last-transactions pr" ng-repeat="tx in index.txps">
|
||||
|
|
@ -159,8 +159,8 @@
|
|||
</div>
|
||||
|
||||
<div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
|
||||
<h4 class="title m0">
|
||||
<span translate>Activity</span>
|
||||
<h4 class="title" ng-click="index.startSearch(); search=''" ng-show="!index.isSearching" translate>Activity
|
||||
<i class="dib m5l size-16 pointer fi-magnifying-glass"></i>
|
||||
</h4>
|
||||
|
||||
<div ng-show="index.updatingTxHistory && index.txProgress > 5">
|
||||
|
|
@ -195,8 +195,26 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="btx in index.txHistory track by btx.txid"
|
||||
fast-click callback-fn="home.openTxModal(btx)"
|
||||
<div ng-show="index.isSearching" class="row searchBar">
|
||||
<div class="small-11 columns">
|
||||
<div class="searchLabel">
|
||||
<i class="fi-magnifying-glass size-14"></i>
|
||||
<form>
|
||||
<input name="search"
|
||||
type="search"
|
||||
ng-change="index.updateSearchInput(search)"
|
||||
placeholder="{{'Search transactions' | translate}}"
|
||||
ng-model="search">
|
||||
</input>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-1 columns">
|
||||
<a ng-click="index.cancelSearch()" translate>Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-repeat="btx in index.txHistorySearchResults track by btx.txid"
|
||||
fast-click callback-fn="home.openTxModal(btx)"
|
||||
class="row collapse last-transactions-content">
|
||||
<div class="large-6 medium-6 small-6 columns size-14">
|
||||
<div class="m10r left">
|
||||
|
|
@ -244,7 +262,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t text-center" ng-show="index.historyRendering">
|
||||
<div class="row m20t text-center" ng-show="index.historyRendering && !index.isSearching">
|
||||
<div class="columns large-12 medium-12 small-12">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
|
|
@ -258,9 +276,15 @@
|
|||
|
||||
<div class="m20t text-center">
|
||||
<a class="text-gray size-12"
|
||||
ng-show="index.historyShowMore"
|
||||
ng-click="index.showMore()">
|
||||
<span translate>Show more</span> ({{index.completeHistory.length - index.txHistory.length}})
|
||||
ng-show="index.historyShowMore"
|
||||
ng-click="index.showMore()">
|
||||
<span translate>Show more</span>
|
||||
<span ng-if="!index.isSearching">
|
||||
({{index.completeHistory.length - index.txHistory.length}})
|
||||
</span>
|
||||
<span ng-if="index.isSearching">
|
||||
({{index.result.length - index.txHistorySearchResults.length}})
|
||||
</span>
|
||||
<i class="icon-arrow-down4"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -83,8 +83,10 @@ h4.title a {
|
|||
margin:0;
|
||||
}
|
||||
|
||||
.walletHome h4 {
|
||||
padding: 15px 0px 5px 10px;
|
||||
.walletHome h4.title {
|
||||
padding: 0 0 10px 15px;
|
||||
margin: 5px 0 5px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -525,6 +527,7 @@ ul.manage li {
|
|||
.m40b {margin-bottom: 40px;}
|
||||
.m50b {margin-bottom: 50px;}
|
||||
.m10r {margin-right: 10px;}
|
||||
.m5l {margin-left: 5px;}
|
||||
.m15l {margin-left: 15px;}
|
||||
.m15t {margin-top: 15px;}
|
||||
.m20r {margin-right: 20px;}
|
||||
|
|
@ -782,7 +785,52 @@ table tbody tr:last-child td {
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
/*//////////////////////////// SEARCH INPUT ////////////////////////////*/
|
||||
|
||||
.searchBar {
|
||||
display: table;
|
||||
}
|
||||
.searchBar .columns {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.searchBar .columns,
|
||||
.searchBar [class*="column"] + [class*="column"]:last-child {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.searchBar form{
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.searchBar input{
|
||||
margin-bottom: auto;
|
||||
border-bottom: 0px solid #E9EDF0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.searchBar i{
|
||||
position: absolute;
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
.searchBar .small-11{
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.searchBar .small-1{
|
||||
padding-left: 2px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.searchLabel {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
/*//////////////////////////// BUTTON OUTLINE ////////////////////////////*/
|
||||
|
||||
.button.outline,
|
||||
|
|
@ -1477,8 +1525,8 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
|
||||
#history .spinner > div,
|
||||
#receive .spinner > div,
|
||||
.copayers .spinner > div,
|
||||
.preferences-fee .spinner > div
|
||||
.copayers .spinner > div,
|
||||
.preferences-fee .spinner > div
|
||||
{
|
||||
background-color: #7A8C9E;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
ret.onGoingProcess = {};
|
||||
ret.historyShowLimit = 10;
|
||||
ret.historyShowMoreLimit = 100;
|
||||
ret.isSearching = false;
|
||||
ret.prevState = 'walletHome';
|
||||
|
||||
ret.menu = [{
|
||||
|
|
@ -915,14 +916,89 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
|
||||
self.showMore = function() {
|
||||
$timeout(function() {
|
||||
self.txHistory = self.completeHistory.slice(0, self.nextTxHistory);
|
||||
$log.debug('Total txs: ', self.txHistory.length + '/' + self.completeHistory.length);
|
||||
self.nextTxHistory += self.historyShowMoreLimit;
|
||||
if (self.txHistory.length >= self.completeHistory.length)
|
||||
self.historyShowMore = false;
|
||||
if (self.isSearching) {
|
||||
self.txHistorySearchResults = self.result.slice(0, self.nextTxHistory);
|
||||
$log.debug('Total txs: ', self.txHistorySearchResults.length + '/' + self.result.length);
|
||||
if (self.txHistorySearchResults.length >= self.result.length)
|
||||
self.historyShowMore = false;
|
||||
} else {
|
||||
self.txHistory = self.completeHistory.slice(0, self.nextTxHistory);
|
||||
self.txHistorySearchResults = self.txHistory;
|
||||
$log.debug('Total txs: ', self.txHistorySearchResults.length + '/' + self.completeHistory.length);
|
||||
if (self.txHistorySearchResults.length >= self.completeHistory.length)
|
||||
self.historyShowMore = false;
|
||||
}
|
||||
self.nextTxHistory += self.historyShowMoreLimit;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
self.startSearch = function(){
|
||||
self.isSearching = true;
|
||||
self.txHistorySearchResults = [];
|
||||
self.result = [];
|
||||
self.historyShowMore = false;
|
||||
self.nextTxHistory = self.historyShowMoreLimit;
|
||||
}
|
||||
|
||||
self.cancelSearch = function(){
|
||||
self.isSearching = false;
|
||||
self.result = [];
|
||||
self.setCompactTxHistory();
|
||||
}
|
||||
|
||||
self.updateSearchInput = function(search){
|
||||
self.search = search;
|
||||
if (isCordova)
|
||||
window.plugins.toast.hide();
|
||||
self.throttleSearch();
|
||||
}
|
||||
|
||||
self.throttleSearch = lodash.throttle(function() {
|
||||
|
||||
function filter(search) {
|
||||
self.result = [];
|
||||
|
||||
function computeSearchableString(tx){
|
||||
var addrbook = '';
|
||||
if(tx.addressTo && self.addressbook[tx.addressTo]!= 'undefined') addrbook = self.addressbook[tx.addressTo] || '';
|
||||
var searchableDate = computeSearchableDate(new Date(tx.time * 1000));
|
||||
var message = tx.message ? tx.message : '';
|
||||
var addressTo = tx.addressTo ? tx.addressTo : '';
|
||||
return ((tx.amountStr+message+addressTo+addrbook+searchableDate).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)) {
|
||||
self.historyShowMore = false;
|
||||
return [];
|
||||
}
|
||||
self.result = lodash.filter(self.completeHistory, function(tx) {
|
||||
if (!tx.searcheableString) tx.searcheableString = computeSearchableString(tx);
|
||||
return lodash.includes(tx.searcheableString, search.toLowerCase());
|
||||
});
|
||||
|
||||
if (self.result.length > self.historyShowLimit) self.historyShowMore = true;
|
||||
else self.historyShowMore = false;
|
||||
|
||||
return self.result;
|
||||
};
|
||||
|
||||
self.txHistorySearchResults = filter(self.search).slice(0, self.historyShowLimit);
|
||||
if (isCordova)
|
||||
window.plugins.toast.showShortBottom(gettextCatalog.getString('Matches: ' + self.result.length));
|
||||
|
||||
$timeout(function() {
|
||||
$rootScope.$apply();
|
||||
});
|
||||
|
||||
},1000);
|
||||
|
||||
self.getTxsFromServer = function(client, skip, endingTxid, limit, cb) {
|
||||
var res = [];
|
||||
|
||||
|
|
@ -974,8 +1050,10 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
};
|
||||
|
||||
self.setCompactTxHistory = function() {
|
||||
self.isSearching = false;
|
||||
self.nextTxHistory = self.historyShowMoreLimit;
|
||||
self.txHistory = self.completeHistory.slice(0, self.historyShowLimit);
|
||||
self.txHistorySearchResults = self.txHistory;
|
||||
self.historyShowMore = self.completeHistory.length > self.historyShowLimit;
|
||||
};
|
||||
|
||||
|
|
@ -1171,7 +1249,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
|
||||
$rootScope.$on('Local/ClearHistory', function(event) {
|
||||
$log.debug('The wallet transaction history has been deleted');
|
||||
self.txHistory = self.completeHistory = [];
|
||||
self.txHistory = self.completeHistory = self.txHistorySearchResults = [];
|
||||
self.debounceUpdateHistory();
|
||||
});
|
||||
|
||||
|
|
@ -1312,7 +1390,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
$log.debug('Backup done stored');
|
||||
addressService.expireAddress(walletId, function(err) {
|
||||
$timeout(function() {
|
||||
self.txHistory = self.completeHistory = [];
|
||||
self.txHistory = self.completeHistory = self.txHistorySearchResults = [];
|
||||
storageService.removeTxHistory(walletId, function() {
|
||||
self.startScan(walletId);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
var disableFocusListener = $rootScope.$on('Local/NewFocusedWallet', function() {
|
||||
self.addr = null;
|
||||
self.resetForm();
|
||||
$scope.search = '';
|
||||
|
||||
if (profileService.focusedClient) {
|
||||
self.setAddress();
|
||||
self.setSendFormInputs();
|
||||
|
|
@ -831,7 +833,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
}, 1);
|
||||
};
|
||||
|
||||
// subscription
|
||||
// subscription
|
||||
this.setOngoingProcess = function(name) {
|
||||
var self = this;
|
||||
self.blockUx = !!name;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue