Merge pull request #3902 from gabrielbazan7/feat/searchBox2

Search box for transactions

src/css/main.css

@@ -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;
 }

src/js/controllers/index.js

@@ -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);
           });

src/js/controllers/walletHome.js

@@ -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;