From 014b7310f47f022cb079e2f538c570c4d72e9e12 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Wed, 23 Apr 2014 13:16:20 -0300
Subject: [PATCH] AngularJS directives to handle notification and form
 validation.

1) Checking enough amount at real-time when typing value.
2) Common notifications disappear after 5 seconds.
---
 index.html             |  7 ++++---
 js/controllers/send.js |  5 -----
 js/directives.js       | 41 ++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index bedc3b4ac..811af1b2f 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
       
     </div>
 
-  <div class="row" ng-if='$root.flashMessage.message'>
+  <div class="row" ng-if='$root.flashMessage.message' notification>
     <div class="small-8 large-centered columns">
       <div data-alert class="alert-box round {{$root.flashMessage.type}}">
         {{$root.flashMessage.message}}
@@ -393,10 +393,11 @@
                       <small ng-hide="!sendForm.amount.$pristine">required</small>
                       <small class="is-valid" ng-show="!sendForm.amount.$invalid && !sendForm.amount.$pristine">valid!</small>
                       <small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine">
-                      not valid</small>
+                      not valid.</small> 
+                      <small ng-show="notEnoughAmount">{{notEnoughAmount}}</small>
                     </label>
                     <div class="small-9 columns">
-                      <input type="number" id="amount" name="amount" placeholder="Amount" ng-model="amount" min="0.0001" max="10000000" required>
+                      <input type="number" id="amount" name="amount" placeholder="Amount" ng-model="amount" min="0.0001" max="10000000" enough-amount required>
                     </div>
                     <div class="small-3 columns">
                       <span class="postfix">BTC</span>
diff --git a/js/controllers/send.js b/js/controllers/send.js
index 276468464..d453ad01b 100644
--- a/js/controllers/send.js
+++ b/js/controllers/send.js
@@ -13,11 +13,6 @@ angular.module('copay.send').controller('SendController',
         return;
       }
 
-      if ($rootScope.availableBalance <= form.amount.$modelValue) {
-        $rootScope.flashMessage = { message: 'You have not enough amount to send', type: 'error'};
-        return;
-      }
-
       var address = form.address.$modelValue;
       var amount = (form.amount.$modelValue * 100000000).toString(); // satoshi to string
 
diff --git a/js/directives.js b/js/directives.js
index bfb68782e..ddfa4bb48 100644
--- a/js/directives.js
+++ b/js/directives.js
@@ -19,5 +19,44 @@ angular.module('copay')
         ctrl.$formatters.unshift(validator);
       }
     };
-  }]);
+  }])
+  .directive('notification', ['$rootScope', function($rootScope){
+    return {
+      restrict: 'A',
+      link: function(scope, element, attrs, ctrl) {
+        setTimeout(function(){
+          scope.$apply(function() {
+            $rootScope.flashMessage = {};
+          });
+        }, 5000);
+      }
+    };
+  }])
+  .directive('enoughAmount', ['$rootScope', function($rootScope){
+    return {
+      require: 'ngModel',
+      link: function(scope, element, attrs, ctrl) {
+        var val = function(value) {
+          var vStr = new String(value);
+          var vNum = Number(vStr);
+          if (typeof vNum == "number" && vNum > 0) {
+            if ($rootScope.availableBalance <= vNum) {
+              ctrl.$setValidity('enoughAmount', false);
+              $rootScope.notEnoughAmount = 'Insufficient funds!';
+            }
+            else {
+              ctrl.$setValidity('enoughAmount', true);
+              $rootScope.notEnoughAmount = null;
+            }
+          } else {
+            $rootScope.notEnoughAmount = null;
+          }
+          return value;
+        }
+        ctrl.$parsers.unshift(val);
+        ctrl.$formatters.unshift(val);
+      }
+    };
+  }])
+;