fix(exchange): clearly show currency value

This commit clearly shows the value of the enterprise currency when
setting a new exchange rate.  It also hides the exchange rate select if
there is only a single currency to set a rate against.

client/src/partials/enterprises/exchange/exchange.modal.html

@@ -8,23 +8,17 @@
 
   <div class="modal-body">
 
-    <bh-date-editor
-      date-value="ModalCtrl.rate.date"
-      validation-trigger="ModalForm.$submitted"
-      max-date="ModalCtrl.timestamp">
-    </bh-date-editor>
-
     <div
       class="form-group"
-      ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.currency_id.$invalid }">
+      ng-show="ModalCtrl.hasMultipleCurrencies"
+      ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.currency.$invalid }">
       <label class="control-label">
         {{ "FORM.LABELS.CURRENCY" | translate }}
       </label>
 
       <ui-select
-        name="currency_id"
-        ng-model="ModalCtrl.rate.currency_id"
-        ng-disabled="ModalCtrl.currencies.length === 1"
+        name="currency"
+        ng-model="ModalCtrl.rate.currency"
         required>
         <ui-select-match placeholder="{{ 'FORM.PLACEHOLDERS.CURRENCY' | translate }}">
           <span>{{ ModalCtrl.format($select.selected.id) }}</span>
@@ -36,16 +30,34 @@
         </ui-select-choices>
       </ui-select>
 
-      <div class="help-block" ng-messages="ModalForm.currency_id.$error" ng-show="ModalForm.$submitted">
+      <div class="help-block" ng-messages="ModalForm.currency.$error" ng-show="ModalForm.$submitted">
         <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
       </div>
     </div>
 
+    <bh-date-editor
+      date-value="ModalCtrl.rate.date"
+      validation-trigger="ModalForm.$submitted"
+      max-date="ModalCtrl.timestamp">
+    </bh-date-editor>
+
     <div class="form-group"
       ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.rate.$invalid }"
       >
       <label class="control-label">{{ "FORM.LABELS.EXCHANGE_RATE" | translate }}</label>
-      <input class="form-control" type="number" name="rate" ng-model="ModalCtrl.rate.rate" required>
+      <div class="row">
+        <div class="col-xs-2">
+          <p class="form-control-static text-right" ng-class="{ 'text-danger' : ModalForm.$submitted && ModalForm.rate.$invalid }">
+            {{ 1 | currency:ModalCtrl.enterprise.currency_id }} <b>=</b>
+          </p>
+        </div>
+        <div class="col-xs-10">
+          <div class="input-group">
+            <input class="form-control" type="number" name="rate" ng-model="ModalCtrl.rate.rate" required>
+            <span class="input-group-addon">{{ ModalCtrl.symbol(ModalCtrl.rate.currency.id) }}</span>
+          </div>
+        </div>
+      </div>
       <div class="help-block" ng-messages="ModalForm.rate.$error" ng-show="ModalForm.$submitted">
         <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
       </div>

client/src/partials/enterprises/exchange/exchange.modal.js

@@ -24,8 +24,12 @@ function ExchangeRateModalController(ModalInstance, Exchange, Currencies, Sessio
 
   vm.submit = submit;
   vm.format = Currencies.format;
+  vm.symbol = Currencies.symbol;
   vm.cancel = function () { ModalInstance.dismiss(); };
 
+  // this turns on and off the currency select input
+  vm.hasMultipleCurrencies = false;
+
   Currencies.read()
     .then(function (currencies) {
       vm.currencies = currencies
@@ -34,20 +38,29 @@ function ExchangeRateModalController(ModalInstance, Exchange, Currencies, Sessio
         });
 
       // use the first currency in the list
-      vm.rate.currency_id = vm.currencies[0];
+      vm.rate.currency = vm.currencies[0];
+
+      // if there are more than a single other currency (besides the enterprise currency)
+      // show the currency selection input
+      if (vm.currencies.length > 1) {
+        vm.hasMultipleCurrencies = true;
+      }
     })
     .catch(Notify.handleError);
 
   function submit(form) {
     if (form.$invalid) { return; }
 
-    vm.rate.enterprise_id = Session.enterprise.id;
+    // gather form data for submission
+    var data = angular.copy(vm.rate);
+
+    data.enterprise_id = Session.enterprise.id;
 
-    // TODO clean this up with proper Ui-select syntax when internet available
-    var currency = vm.rate.currency_id;
-    vm.rate.currency_id = currency.id;
+    // TODO clean this up with proper ui-select syntax when internet available
+    var currency = vm.rate.currency;
+    data.currency_id = currency.id;
 
-    return Exchange.create(vm.rate)
+    return Exchange.create(data)
       .then(function () {
         ModalInstance.close();
       });