From 099a282fb930c7d079e31147281217b86df17d2b Mon Sep 17 00:00:00 2001
From: Yemel Jardi <angel.jardi@gmail.com>
Date: Mon, 23 Jun 2014 17:34:54 -0300
Subject: [PATCH] Add directive to render address from the book with a tooltip

---
 index.html                             | 14 ++++++++++----
 js/directives.js                       | 17 +++++++++++++++++
 test/unit/directives/directivesSpec.js | 25 +++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index f3f2a79a7..f0dc4934b 100644
--- a/index.html
+++ b/index.html
@@ -372,7 +372,7 @@
                   ng-click="selectAddress(addr)"
                   ng-class="{selected : addr.address == selectedAddr.address}">
 
-                  <span>{{addr.address}}</span>
+                  <span><contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/></span>
                   <small ng-if="addr.isChange">change</small>
 
                   <span class="right">
@@ -441,7 +441,9 @@
                   <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-1 medium-1 small-2 columns fi-arrow-right size-24"> </div>
-                    <div class="large-8 medium-8 small-7 columns ellipsis"> {{out.address}} </div>
+                    <div class="large-8 medium-8 small-7 columns ellipsis">
+                     <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+                    </div>
                   </div>
                 </div>
                 <div class="large-4 medium-4 small-12 columns text-right">
@@ -566,7 +568,9 @@
                     <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>
-                        <p class="ellipsis text-gray size-12"> {{vin.addr}} </p>
+                        <p class="ellipsis text-gray size-12">
+                          <contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+                        </p>
                       </div>
                     </div>
                     <div class="large-1 medium-1 small-1 columns text-center">
@@ -575,7 +579,9 @@
                     <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>
-                        <p class="ellipsis text-gray size-12"> {{vout.addr}} </p>
+                        <p class="ellipsis text-gray size-12">
+                          <contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+                        </p>
                       </div>
                     </div>
                   </div>
diff --git a/js/directives.js b/js/directives.js
index c8ef3c573..c72ffc970 100644
--- a/js/directives.js
+++ b/js/directives.js
@@ -122,6 +122,23 @@ angular.module('copayApp.directives')
       }
     }
   })
+  .directive('contact', function() {
+    return {
+      restrict: 'E',
+      link:function(scope, element, attrs) {
+        if (!scope.wallet) return;
+
+        var address = attrs.address;
+        var contact = scope.wallet.addressBook[address];
+        if (contact) {
+          element.append(contact.label);
+          attrs['tooltip'] = attrs.address;
+        } else {
+          element.append(address);
+        }
+      }
+   };
+  })
   .directive('highlightOnChange', function() {
     return {
       restrict: 'A',
diff --git a/test/unit/directives/directivesSpec.js b/test/unit/directives/directivesSpec.js
index d7186c41f..755281893 100644
--- a/test/unit/directives/directivesSpec.js
+++ b/test/unit/directives/directivesSpec.js
@@ -80,6 +80,31 @@ describe("Unit: Testing Directives", function() {
     });
   });
 
+  describe('Contact directive', function() {
+    var element1, element2;
+
+    beforeEach(inject(function($compile, $rootScope) {
+      $rootScope.wallet = {
+        addressBook: {'2MtBXKLtZuXGDshUcyH6yq7aZ33Snbb49pT': {label: ':)'}}
+      }
+      element1 = angular.element(
+        '<contact address="2MtBXKLtZuXGDshUcyH6yq7aZ33Snbb49pT" />'
+      );
+      element2 = angular.element(
+        '<contact address="2MvCKdnwEMiaexi247gi738U6pwUFZxbhXn" />'
+      );
+      $compile(element1)($rootScope);
+      $compile(element2)($rootScope);
+      $rootScope.$digest();
+    }));
+
+    it('should replace the content', function() {
+      expect(element1.html()).to.equal(':)');
+      expect(element2.html()).to.equal('2MvCKdnwEMiaexi247gi738U6pwUFZxbhXn');
+    });
+
+  });
+
   describe('Password strength', function() {
     beforeEach(inject(function($compile, $rootScope) {
       $scope = $rootScope;