Merge pull request #765 from cmgustavo/bug/number-filter-angularjs

Bug/angularjs-filter

index.html

@@ -36,7 +36,12 @@
                 <span ng-if="$root.updatingBalance">
                   <i class="fi-bitcoin-circle icon-rotate spinner"></i>
                 </span>
-                <span ng-if="!$root.updatingBalance" data-options="disable_for_touch:true" tooltip="{{totalBalanceBTC}} BTC" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{totalBalance || 0 |number}} {{$root.unitName}} 
+                <span ng-if="!$root.updatingBalance"
+                  data-options="disable_for_touch:true"
+                  tooltip="{{totalBalanceBTC || 0 |noFractionNumber:8}} BTC"
+                  tooltip-trigger="mouseenter"
+                  tooltip-placement="bottom">{{totalBalance || 0
+                  |noFractionNumber}} {{$root.unitName}} 
                 </span>
               </div>
               <div class="large-4 medium-4 columns">
@@ -44,7 +49,11 @@
                 <span ng-if="$root.updatingBalance">
                   <i class="fi-bitcoin-circle icon-rotate spinner"></i>
                 </span>
-                <span ng-show="!$root.updatingBalance" data-options="disable_for_touch:true" tooltip="{{availableBalanceBTC}} BTC" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{availableBalance || 0|number}} {{$root.unitName}} 
+                <span ng-show="!$root.updatingBalance"
+                  data-options="disable_for_touch:true"
+                  tooltip="{{availableBalanceBTC || 0 |noFractionNumber:8}} BTC"
+                  tooltip-trigger="mouseenter"
+                  tooltip-placement="bottom">{{availableBalance || 0|noFractionNumber}} {{$root.unitName}}
                 </span>
               </div>
 
@@ -413,11 +422,11 @@
                         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
                       </span>
                       <span ng-if="!$root.updatingBalance">
-                        {{$root.balanceByAddr[addr.address] || 0|number}} {{$root.unitName}} 
+                        {{$root.balanceByAddr[addr.address] || 0|noFractionNumber}} {{$root.unitName}}
                       </span>
                     </span>
                     <span ng-if="addrWithFund != addr.address">
-                      {{addr.balance || 0|number}} {{$root.unitName}}
+                      {{addr.balance || 0|noFractionNumber}} {{$root.unitName}}
                     </span>
                   </span>
                 </a>
@@ -435,12 +444,12 @@
                       <span ng-if="$root.updatingBalance">
                         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
                       </span>
-                      <span ng-if="!$root.updatingBalance">{{balanceByAddr[selectedAddr.address] || 0 | number}}
+                      <span ng-if="!$root.updatingBalance">{{balanceByAddr[selectedAddr.address] || 0 | noFractionNumber}}
                       </span>
                     </span>
                     <span ng-if="addrWithFund != selectedAddr.address" style="word-wrap: break-word;">
                       {{selectedAddr.address}}<br/>
-                      {{selectedAddr.balance || 0|number}} {{$root.unitName}}
+                      {{selectedAddr.balance || 0|noFractionNumber}} {{$root.unitName}}
                     </span>
                   </strong>
                 </p>
@@ -471,7 +480,8 @@
               <div class="txheader row m10">
                 <div class="large-8 medium-8 small-12 columns">
                   <div class="row" ng-repeat="out in tx.outs">
-                    <div class="large-3 medium-3 small-3 columns ellipsis"> {{out.value | number}} {{$root.unitName}}</div>
+                    <div class="large-3 medium-3 small-3 columns ellipsis">
+                      {{out.value | noFractionNumber}} {{$root.unitName}}</div>
                     <div class="large-1 medium-1 small-2 columns fi-arrow-right size-24"> </div>
                     <div class="large-8 medium-8 small-7 columns ellipsis">
                      <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
@@ -555,7 +565,7 @@
                   <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
                     {{tx.missingSignatures}} signatures missing</p>
                   <div class="ellipsis small text-gray">
-                    <strong>Fee:</strong> {{tx.fee|number}} {{$root.unitName}}
+                    <strong>Fee:</strong> {{tx.fee|noFractionNumber}} {{$root.unitName}}
                     <strong>Proposal ID:</strong> {{tx.ntxid}}
                   </div>
                 </div>
@@ -602,7 +612,7 @@
                   <div class="row">
                     <div class="large-5 medium-5 small-5 columns">
                       <div ng-repeat="vin in btx.vinSimple">
-                        <small class="right m5t">{{vin.value| number}} {{$root.unitName}}</small>
+                        <small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
                         <p class="ellipsis text-gray size-12">
                           <contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
                         </p>
@@ -613,7 +623,7 @@
                     </div>
                     <div class="large-6 medium-6 small-6 columns">
                       <div ng-repeat="vout in btx.voutSimple">
-                        <small class="right m5t">{{vout.value| number}} {{$root.unitName}}</small>
+                        <small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
                         <p class="ellipsis text-gray size-12">
                           <contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
                         </p>
@@ -623,9 +633,9 @@
                 </div>
                 <div class="m10 size-12 text-gray">
                   <div class="row">
-                    <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | number}} {{$root.unitName}}</div>
+                    <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
                     <div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
-                    <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| number}} {{$root.unitName}}</div>
+                    <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
                   </div>
                 </div>
               </div>
@@ -715,13 +725,13 @@
                   Total amount for this transaction:
                   </small>
                   <div class="totalAmount">
-                    <b>{{amount + defaultFee |number:4}}</b> {{$root.unitName}}
+                    <b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
                     <small>
-                    {{ ((amount + defaultFee) * unitToBtc) |number:4}} BTC
+                    {{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC
                     </small>
                   </div>
                   <small>
-                  Including fee of {{defaultFee |number:4}} {{$root.unitName}} 
+                    Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
                   </small>
                 </div>
               </div>

js/filters.js

@@ -30,4 +30,44 @@ angular.module('copayApp.filters', [])
 
       return addrs;
     };
-  });
+  })
+  .filter('noFractionNumber',
+  [ '$filter', '$locale',
+  function(filter, locale) {
+    var numberFilter = filter('number');
+    var formats = locale.NUMBER_FORMATS;
+    return function(amount, n) {
+      var fractionSize = (typeof(n) != 'undefined') ? n : config.unitToSatoshi.toString().length - 1;
+      var value = numberFilter(amount, fractionSize);
+      var sep = value.indexOf(formats.DECIMAL_SEP);
+      var group = value.indexOf(formats.GROUP_SEP);
+      if(amount >= 0) {
+        if (group > 0) {
+          if (sep < 0) {
+            return value;
+          }
+          var intValue = value.substring(0, sep);
+          var floatValue = parseFloat(value.substring(sep));
+          if (floatValue === 0) {
+            floatValue = '';
+          }
+          else {
+            if(floatValue % 1 === 0) {
+              floatValue = floatValue.toFixed(0);
+            }
+            floatValue = floatValue.toString().substring(1);
+          }
+          var finalValue = intValue + floatValue;
+          return finalValue;
+        }
+        else {
+          value = parseFloat(value);
+          if(value % 1 === 0) {
+            value = value.toFixed(0);
+          }
+          return value;
+        }
+      }
+      return 0;
+    };
+  } ]);

js/services/controllerUtils.js

@@ -193,9 +193,9 @@ angular.module('copayApp.services')
         var COIN = bitcore.util.COIN;
 
         $rootScope.totalBalance = balanceSat * satToUnit;
-        $rootScope.totalBalanceBTC = (balanceSat / COIN).toFixed(4);
+        $rootScope.totalBalanceBTC = (balanceSat / COIN);
         $rootScope.availableBalance = safeBalanceSat * satToUnit;
-        $rootScope.availableBalanceBTC = (safeBalanceSat / COIN).toFixed(4);
+        $rootScope.availableBalanceBTC = (safeBalanceSat / COIN);
         var balanceByAddr = {};
         for (var ii in balanceByAddrSat) {
           balanceByAddr[ii] = balanceByAddrSat[ii] * satToUnit;

test/unit/filters/filtersSpec.js

@@ -68,4 +68,69 @@ describe('Unit: Testing Filters', function() {
       expect(limitAddress(addresses, false).length).to.equal(4);
     }));
   });
+
+  describe('noFractionNumber bits', function() {
+    beforeEach(function() {
+      config.unitToSatoshi = 100;
+      config.unitName = 'bits';
+    });
+    it('should format number to display correctly', inject(function($filter) {
+      var noFraction = $filter('noFractionNumber');
+      expect(noFraction(3100)).to.equal('3,100');
+      expect(noFraction(3100200)).to.equal('3,100,200');
+      expect(noFraction(3)).to.equal('3');
+      expect(noFraction(0.3)).to.equal(0.3);
+      expect(noFraction(0.30000000)).to.equal(0.3);
+      expect(noFraction(3200.01)).to.equal('3,200.01');
+      expect(noFraction(3200890.010000)).to.equal('3,200,890.01');
+    }));
+  });
+
+  describe('noFractionNumber BTC', function() {
+    beforeEach(function() {
+      config.unitToSatoshi = 100000000;
+      config.unitName = 'BTC';
+    });
+    it('should format number to display correctly', inject(function($filter) {
+      var noFraction = $filter('noFractionNumber');
+      expect(noFraction(0.30000000)).to.equal(0.3);
+      expect(noFraction(0.00302000)).to.equal(0.00302);
+      expect(noFraction(1.00000001)).to.equal(1.00000001);
+      expect(noFraction(3.10000012)).to.equal(3.10000012);
+      expect(noFraction(0.00100000)).to.equal(0.001);
+      expect(noFraction(0.00100009)).to.equal(0.00100009);
+      expect(noFraction(2000.00312011)).to.equal('2,000.00312011');
+      expect(noFraction(2000998.00312011)).to.equal('2,000,998.00312011');
+    }));
+  });
+
+  describe('noFractionNumber mBTC', function() {
+    beforeEach(function() {
+      config.unitToSatoshi = 100000;
+      config.unitName = 'mBTC';
+    });
+    it('should format number to display correctly', inject(function($filter) {
+      var noFraction = $filter('noFractionNumber');
+      expect(noFraction(0.30000)).to.equal(0.3);
+      expect(noFraction(0.00302)).to.equal(0.00302);
+      expect(noFraction(1.00001)).to.equal(1.00001);
+      expect(noFraction(3.10002)).to.equal(3.10002);
+      expect(noFraction(0.00100000)).to.equal(0.001);
+      expect(noFraction(0.00100009)).to.equal(0.001);
+      expect(noFraction(2000.00312)).to.equal('2,000.00312');
+      expect(noFraction(2000998.00312)).to.equal('2,000,998.00312');
+    }));
+  });
+
+  describe('noFractionNumber:custom fractionSize', function() {
+    it('should format number to display correctly', inject(function($filter) {
+      var noFraction = $filter('noFractionNumber');
+      expect(noFraction(0.30000, 0)).to.equal('0');
+      expect(noFraction(1.00001, 0)).to.equal('1');
+      expect(noFraction(3.10002, 0)).to.equal('3');
+      expect(noFraction(2000.00312, 0)).to.equal('2,000');
+      expect(noFraction(2000998.00312, 0)).to.equal('2,000,998');
+    }));
+  });
+
 });

test/unit/services/servicesSpec.js

@@ -91,8 +91,8 @@ describe("Unit: controllerUtils", function() {
 
     //retuns values in DEFAULT UNIT(bits)
     controllerUtils.updateBalance(function() {
-      expect($rootScope.totalBalanceBTC).to.be.equal('1.0000');
-      expect($rootScope.availableBalanceBTC).to.be.equal('0.9000');
+      expect($rootScope.totalBalanceBTC).to.be.equal(1.00000001);
+      expect($rootScope.availableBalanceBTC).to.be.equal(0.90000002);
       expect($rootScope.totalBalance).to.be.equal(1000000.01);
       expect($rootScope.availableBalance).to.be.equal(900000.02);
       expect($rootScope.addrInfos).not.to.equal(null);