Merge pull request #2542 from jhawthorn/stock_locations_states

Use backbone StateSelect view for stock locations form

backend/app/assets/javascripts/spree/backend.js

@@ -22,7 +22,6 @@
 //= require spree/backend/collections
 //= require spree/backend/views
 //
-//= require spree/backend/address_states
 //= require spree/backend/adjustments
 //= require spree/backend/admin
 //= require spree/backend/calculator
@@ -52,6 +51,7 @@
 //= require spree/backend/routes
 //= require spree/backend/shipments
 //= require spree/backend/spree-select2
+//= require spree/backend/stock_location
 //= require spree/backend/stock_management/index_add_forms
 //= require spree/backend/stock_management/index_update_forms
 //= require spree/backend/stock_management/stock_item

backend/app/assets/javascripts/spree/backend/stock_location.js

@@ -0,0 +1,23 @@
+//= require 'spree/backend/views/state_select'
+
+Spree.ready(function() {
+  "use strict";
+
+  _.each(document.querySelectorAll('.js-stock-locations-form'), function(el) {
+    var countrySelect = el.querySelector('.js-country_id');
+    var model = new Backbone.Model({
+      country_id: countrySelect.value
+    });
+
+    countrySelect.addEventListener('change', function() {
+      model.set({
+        country_id: countrySelect.value
+      });
+    });
+
+    new Spree.Views.StateSelect({
+      el: el,
+      model: model
+    });
+  });
+});

backend/app/assets/javascripts/spree/backend/views/state_select.js

@@ -34,15 +34,15 @@ Spree.Views.StateSelect = Backbone.View.extend({
     if (country_id) {
       this.states = Spree.Views.StateSelect.stateCache(country_id);
       this.listenTo(this.states, "sync", this.render);
-      this.render();
     }
+    this.render();
   },
 
   render: function() {
     this.$state_select.empty().hide().prop('disabled', true);
     this.$state_input.hide().prop('disabled', true);
 
-    if (!this.states.fetched) {
+    if (!this.model.get('country_id') || !this.states.fetched) {
       this.$state_select.show();
     } else if (this.states.length) {
       var $state_select = this.$state_select;

backend/app/views/spree/admin/stock_locations/_form.html.erb

@@ -1,4 +1,4 @@
-<div data-hook="admin_stock_locations_form_fields">
+<div data-hook="admin_stock_locations_form_fields" class="js-stock-locations-form">
   <fieldset class="no-border-bottom">
     <legend><%= t('.general') %></legend>
 
@@ -107,25 +107,16 @@
 
     <%= f.field_container :country_id do %>
       <%= f.label :country_id %>
-      <span id="country"><%= f.collection_select :country_id, available_countries, :id, :name, {}, { class: 'select2 fullwidth' } %></span>
+      <span id="country"><%= f.collection_select :country_id, available_countries, :id, :name, { include_blank: true }, { class: 'custom-select js-country_id fullwidth' } %></span>
     <% end %>
 
     <%= f.field_container :state do %>
-      <% if f.object.country %>
-        <%= f.label :state_id %>
-        <span id="state" class="region">
-          <%= f.text_field :state_name, style: "display: #{f.object.country.states.empty? ? 'block' : 'none' };", disabled: !f.object.country.states.empty?, class: 'fullwidth state_name' %>
-          <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, { include_blank: true }, {class: 'select2 fullwidth', style: "display: #{f.object.country.states.empty? ? 'none' : 'block' };", disabled: f.object.country.states.empty?} %>
-        </span>
-      <% end %>
+      <% country = f.object.country %>
+      <%= f.label :state_id %>
+      <span id="state" class="region">
+        <%= f.text_field :state_name, style: "display: none", class: 'fullwidth state_name js-state_name' %>
+        <%= f.collection_select :state_id, country ? country.states.sort : [], :id, :name, { include_blank: true }, {class: 'custom-select fullwidth js-state_id', style: "display: none" } %>
+      </span>
     <% end %>
   </fieldset>
 </div>
-
-<% content_for :head do %>
-  <%= javascript_tag do -%>
-    Spree.ready(function(){
-      $('span#country select.select2').on('change', function() { update_state(''); });
-    });
-  <% end -%>
-<% end %>