Use ofn-select2 directive for country and state selectors on enterprise forms

app/assets/javascripts/admin/enterprises/controllers/country_controller.js.coffee

@@ -1,5 +1,5 @@
+# Used in enterprise new and edit forms to reset the state when the country is changed
 angular.module("admin.enterprises").controller 'countryCtrl', ($scope, availableCountries) ->
-
   $scope.countries = availableCountries
 
   $scope.countriesById = $scope.countries.reduce (obj, country) ->
@@ -7,19 +7,12 @@ angular.module("admin.enterprises").controller 'countryCtrl', ($scope, available
     obj
   , {}
 
-  $scope.countryOnChange = (stateSelectElemId) ->
+  $scope.$watch 'Enterprise.address.country_id', (newID, oldID) ->
     $scope.clearState() unless $scope.addressStateMatchesCountry()
-    $scope.refreshStateSelector(stateSelectElemId)
 
   $scope.clearState = ->
-    $scope.enterprise_address_attributes_state = {}
+    $scope.Enterprise.address.state_id = null
 
   $scope.addressStateMatchesCountry = ->
-    $scope.countriesById[$scope.enterprise_address_attributes_country.id].states.some (state) -> state.id == $scope.enterprise_address_attributes_state?.id
-
-  $scope.refreshStateSelector = (stateSelectElemId) ->
-  	# workaround select2 (using jQuery and setTimeout) to force a refresh of the selected value
-    setTimeout ->
-      selectedState = jQuery('#' + stateSelectElemId)
-      jQuery('#' + stateSelectElemId).select2("val", selectedState)
-    , 500
+    $scope.countriesById[$scope.Enterprise.address.country_id].states.some (state) ->
+      state.id == $scope.Enterprise.address.state_id

app/assets/javascripts/admin/enterprises/controllers/new_enterprise_controller.js.coffee

@@ -0,0 +1,5 @@
+angular.module("admin.enterprises").controller 'NewEnterpriseController', ($scope, defaultCountryID) ->
+  $scope.Enterprise =
+    address:
+      country_id: defaultCountryID
+      state_id: null

app/serializers/api/admin/enterprise_serializer.rb

@@ -5,10 +5,10 @@ class Api::Admin::EnterpriseSerializer < ActiveModel::Serializer
   attributes :preferred_product_selection_from_inventory_only
   attributes :owner, :contact, :users, :tag_groups, :default_tag_group
   attributes :require_login, :allow_guest_orders, :allow_order_changes
-  attributes :address
 
   has_one :owner, serializer: Api::Admin::UserSerializer
   has_many :users, serializer: Api::Admin::UserSerializer
+  has_one :address, serializer: Api::AddressSerializer
 
   def tag_groups
     object.tag_rules.prioritised.reject(&:is_default).each_with_object([]) do |tag_rule, tag_groups|

app/views/admin/enterprises/_new_form.html.haml

@@ -94,9 +94,9 @@
         \/
         = af.label :country_id, t(:country)
       .four.columns
-        = af.collection_select :state_id, {}, :id, :name, {}, :class => "select2 fullwidth", "ng-options" => "s as s.name for s in countriesById[enterprise_address_attributes_country.id].states track by s.id", "ng-model" => "enterprise_address_attributes_state"
+        %input.ofn-select2.fullwidth#enterprise_address_attributes_state_id{ name: 'enterprise[address_attributes][state_id]', type: 'number', data: 'countriesById[Enterprise.address.country_id].states', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.state_id' } }
       .five.columns.omega
-        = af.collection_select :country_id, {}, :id, :name, {}, :class => "select2 fullwidth", "ng-options" => "c as c.name for c in countries track by c.id", "ng-model" => "enterprise_address_attributes_country", "ng-init" => "enterprise_address_attributes_country = { id: \"#{Spree::Config[:default_country_id]}\" }", "ng-change" => "countryOnChange('s2id_enterprise_address_attributes_state_id')"
+        %input.ofn-select2.fullwidth#enterprise_address_attributes_country_id{ name: 'enterprise[address_attributes][country_id]', type: 'number', data: 'countries', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.country_id' } }
 
 .row
   .twelve.columns.alpha

app/views/admin/enterprises/form/_address.html.haml

@@ -33,6 +33,6 @@
     %span.required *
   %div{ "ng-controller" => "countryCtrl" }
     .four.columns
-      = af.collection_select :state_id, {}, :id, :name, {}, :class => "select2 fullwidth", "ng-init" => "enterprise_address_attributes_state.id = Enterprise.address.address.state_id", "ng-options" => "s as s.name for s in countriesById[enterprise_address_attributes_country.id || Enterprise.address.address.country_id].states track by s.id", "ng-model" => "enterprise_address_attributes_state"
+      %input.ofn-select2.fullwidth#enterprise_address_attributes_state_id{ name: 'enterprise[address_attributes][state_id]', type: 'number', data: 'countriesById[Enterprise.address.country_id].states', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.state_id' } }
     .four.columns.omega
-      = af.collection_select :country_id, {}, :id, :name, {}, :class => "select2 fullwidth", "ng-init" => "enterprise_address_attributes_country.id = Enterprise.address.address.country_id", "ng-options" => "c as c.name for c in countries track by c.id", "ng-model" => "enterprise_address_attributes_country", "ng-change" => "countryOnChange('s2id_enterprise_address_attributes_state_id')"
+      %input.ofn-select2.fullwidth#enterprise_address_attributes_country_id{ name: 'enterprise[address_attributes][country_id]', type: 'number', data: 'countries', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.country_id' } }

app/views/admin/enterprises/new.html.haml

@@ -10,10 +10,11 @@
   = "ng-app='admin.enterprises'"
 
 = admin_inject_available_countries(module: 'admin.enterprises')
+= admin_inject_json "admin.enterprises", "defaultCountryID", Spree::Config[:default_country_id]
 
 -# Form
 
 = form_for [main_app, :admin, @enterprise], html: { "nav-check" => '', "nav-callback" => '' } do |f|
   .row
-    .twelve.columns.fullwidth_inputs{ ng: { app: "admin.users" } }
+    .twelve.columns.fullwidth_inputs{ ng: { controller: "NewEnterpriseController" } }
       = render 'new_form', f: f