Merge pull request #3902 from gabrielbazan7/feat/searchBox2

Search box for transactions

public/views/walletHome.html

@@ -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">
+        <h4 class="title" ng-click="index.startSearch(); search=''" ng-show="!index.isSearching" translate>Activity
-          <span translate>Activity</span>
+          <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"
+        <div ng-show="index.isSearching" class="row searchBar">
-             fast-click callback-fn="home.openTxModal(btx)"
+          <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-show="index.historyShowMore"
-            ng-click="index.showMore()">
+             ng-click="index.showMore()">
-            <span translate>Show more</span> ({{index.completeHistory.length - index.txHistory.length}})
+            <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>

src/css/main.css

@@ -83,8 +83,10 @@ h4.title a {
   margin:0;
 }
 
-.walletHome h4 {
+.walletHome h4.title {
-  padding: 15px 0px 5px 10px;
+  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, 
+.copayers .spinner > div,
-.preferences-fee .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);
+      if (self.isSearching) {
-      $log.debug('Total txs: ', self.txHistory.length + '/' + self.completeHistory.length);
+           self.txHistorySearchResults = self.result.slice(0, self.nextTxHistory);
-      self.nextTxHistory += self.historyShowMoreLimit;
+           $log.debug('Total txs: ', self.txHistorySearchResults.length + '/' + self.result.length);
-      if (self.txHistory.length >= self.completeHistory.length)
+           if (self.txHistorySearchResults.length >= self.result.length)
-        self.historyShowMore = false;
+             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;