React to form changes, compute unit price and display accurate values.

- Add method `processUnitPrice` which is responsible for computing the right unit price, that depends on `price`, `variant_unit_scale`, `variant_unit`, `unit_value` and `variant_unit_name`
 - Watch the needed model to compute the unit price: `product.price` and  `product.variant_unit_name`
 - Add dependencies : UnitPrices and localizeCurrencyFilter
 - Add currencyconfig to spec, as it's needed by localizeCurrencyFilter
 - Put `'ng-controller' => 'unitsCtrl'` to the relevant node.
 - Add new ng-model, as it's needed to watch it in order to compute unit price : `product.price`
 - Finally display the needed information: `product.unit_price_value` and `product.unit_price_unit`

app/assets/javascripts/admin/products/controllers/units_controller.js.coffee

@@ -1,12 +1,13 @@
 angular.module("admin.products")
-  .controller "unitsCtrl", ($scope, VariantUnitManager, OptionValueNamer) ->
+  .controller "unitsCtrl", ($scope, VariantUnitManager, OptionValueNamer, UnitPrices, localizeCurrencyFilter) ->
     $scope.product = { master: {} }
     $scope.product.master.product = $scope.product
     $scope.placeholder_text = ""
 
-    $scope.$watchCollection '[product.variant_unit_with_scale, product.master.unit_value_with_description]', ->
+    $scope.$watchCollection '[product.variant_unit_with_scale, product.master.unit_value_with_description, product.price, product.variant_unit_name]', ->
       $scope.processVariantUnitWithScale()
       $scope.processUnitValueWithDescription()
+      $scope.processUnitPrice()
       $scope.placeholder_text = new OptionValueNamer($scope.product.master).name()
 
     $scope.variant_unit_options = VariantUnitManager.variantUnitOptions()
@@ -32,6 +33,16 @@ angular.module("admin.products")
           $scope.product.master.unit_value *= $scope.product.variant_unit_scale if $scope.product.master.unit_value && $scope.product.variant_unit_scale
           $scope.product.master.unit_description = match[3]
 
+    $scope.processUnitPrice = ->
+      price = $scope.product.price
+      scale = $scope.product.variant_unit_scale
+      unit_type = $scope.product.variant_unit
+      unit_value = $scope.product.master.unit_value
+      variant_unit_name = $scope.product.variant_unit_name
+      if price && unit_type && unit_value
+        $scope.product.unit_price_value = localizeCurrencyFilter(UnitPrices.price(price, scale, unit_type, unit_value, variant_unit_name))
+        $scope.product.unit_price_unit = UnitPrices.unit(scale, unit_type, variant_unit_name)
+
     $scope.hasVariants = (product) ->
       Object.keys(product.variants).length > 0
 

app/views/spree/admin/products/new.html.haml

@@ -4,7 +4,7 @@
 
 = form_for [:admin, @product], :html => { :multipart => true } do |f|
   .twelve.columns.alpha
-    %fieldset.no-border-bottom{ id: "new_product" }
+    %fieldset.no-border-bottom{ id: "new_product", 'ng-controller' => 'unitsCtrl' }
       %legend{align: "center"}= t(".new_product")
       .sixteen.columns.alpha
         .eight.columns.alpha
@@ -20,7 +20,7 @@
             %br/
             = f.text_field :name, :class => 'fullwidth title'
             = f.error_message_on :name
-      .sixteen.columns.alpha{ 'ng-controller' => 'unitsCtrl' }
+      .sixteen.columns.alpha
         .eight.columns.alpha
           = f.field_container :units do
             = f.label :variant_unit_with_scale, t(".units")
@@ -50,7 +50,7 @@
             = f.label :price, t(".price")
             %span.required *
             %br/
-            = f.text_field :price, class: 'fullwidth'
+            = f.text_field :price, { "class" => "fullwidth", "ng-model" => "product.price" }
             = f.error_message_on :price
         - if feature? :unit_price, spree_current_user
           .four.columns{ ng: { app: 'ofn.admin'}}
@@ -62,9 +62,10 @@
                   "question-mark-with-tooltip-animation" => true, 
                   key: "'js.shopfront.unit_price_tooltip.admin'"}
               %br/
-              = f.text_field :price, class: '', disabled: true, value: "value"
-              %span{style: "color: #757575"}
-                unit
+              = f.text_field :price, {"class" =>  '', "disabled" =>  true, "ng-model" => "product.unit_price_value"}
+              %span
+                 / 
+                %span{style: "color: #757575", "ng-bind" => "product.unit_price_unit" }
               %div{style: "color: black"}
                 = t(".unit_price_legend")
       .sixteen.columns.alpha

spec/javascripts/unit/admin/products/units_controller_spec.js.coffee

@@ -2,11 +2,17 @@ describe "unitsCtrl", ->
   ctrl = null
   scope = null
   product = null
+  currencyconfig =
+    symbol: "$"
+    symbol_position: "before"
+    currency: "D"
+    hide_cents: "false"
 
   beforeEach ->
     module('admin.products')
     module ($provide)->
       $provide.value "availableUnits", "g,kg,T,mL,L,kL"
+      $provide.value "currencyConfig", currencyconfig
       null
     inject ($rootScope, $controller, VariantUnitManager) ->
       scope = $rootScope