Merge pull request #9606 from binarygit/remove-angular-from-address

Remove Angular from Address Tab

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

@@ -1,20 +0,0 @@
-# Used in enterprise new and edit forms to reset the state when the country is changed
-angular.module("admin.enterprises").controller 'countryCtrl', ($scope, $timeout, availableCountries) ->
-  $scope.address_type = "address"
-  $scope.countries = availableCountries
-
-  $scope.countriesById = $scope.countries.reduce (obj, country) ->
-    obj[country.id] = country
-    obj
-  , {}
-
-  $timeout ->
-    $scope.$watch 'Enterprise.' + $scope.address_type + '.country_id', (newID, oldID) ->
-      $scope.clearState() unless $scope.addressStateMatchesCountry()
-
-  $scope.clearState = ->
-    $scope.Enterprise[$scope.address_type].state_id = null
-
-  $scope.addressStateMatchesCountry = ->
-    $scope.countriesById[$scope.Enterprise[$scope.address_type].country_id].states.some (state) ->
-      state.id == $scope.Enterprise[$scope.address_type].state_id

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

@@ -87,16 +87,16 @@
       = af.text_field :city, { placeholder: t(:city_placeholder)}
     .five.columns.omega
       = af.text_field :zipcode, { placeholder: t(:postcode_placeholder)}
-  %div{ "ng-controller" => "countryCtrl" }
+  %div{"data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
     .row
       .three.columns.alpha
         = af.label :state_id, t(:state)
         \/
         = af.label :country_id, t(:country)
       .four.columns
-        %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' } }
+        = af.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
       .five.columns.omega
-        %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' } }
+        = af.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "select", class: "primary" }
   .row
     .three.columns.alpha
       = af.label :latitude, t(:latitude)

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

@@ -25,24 +25,23 @@
     = af.text_field :city, { placeholder: t(:city_placeholder) }
   .four.columns.omega
     = af.text_field :zipcode, { placeholder: t(:postcode_placeholder) }
-.row
+.row{"data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
   .three.columns.alpha
     = af.label :state_id, t(:state)
     \/
     = af.label :country_id, t(:country)
     %span.required *
-  .four.columns{ "ng-controller" => "countryCtrl" }
-    %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{ "ng-controller" => "countryCtrl" }
-    %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' } }
+  .four.columns
+    = af.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
+  .four.columns.omega{ data: { controller: "primary-details" }}
+    = af.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
 .row
   .three.columns.alpha
     = af.label :latitude, t(:latitude)
     \/
     = af.label :longitude, t(:longitude)
     %span.required *
-    %div{'ofn-with-tip' => t('latitude_longitude_tip')}
-      %a= t('admin.whats_this')
+    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('latitude_longitude_tip')}
   .four.columns
     = af.text_field :latitude, { placeholder: t(:latitude_placeholder) }
   .four.columns.omega

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

@@ -29,12 +29,11 @@
     = bf.label :country_id, t(:country)
     \/
     = bf.label :state_id, t(:state)
-  %div{ "ng-controller": "countryCtrl", "ng-init": "address_type='business_address'" }
+  %div{"data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
     .four.columns
-      %input.ofn-select2.fullwidth#enterprise_business_address_attributes_country_id{ name: 'enterprise[business_address_attributes][country_id]', type: 'number', data: 'countries', placeholder: t('admin.choose'), ng: { model: 'Enterprise.business_address.country_id' } }
+      = bf.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
     .four.columns.omega
-      %input.ofn-select2.fullwidth#enterprise_business_address_attributes_state_id{ name: 'enterprise[business_address_attributes][state_id]', type: 'number', data: 'countriesById[Enterprise.address.country_id].states', placeholder: t('admin.choose'), ng: { model: 'Enterprise.business_address.state_id' } }
-
+      = bf.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "select", class: "primary" }
 
 .row
   .three.columns.alpha

app/views/spree/admin/orders/customer_details/_address_form.html.haml

@@ -29,17 +29,17 @@
   %div{class: "field"}
     = f.label :zipcode, Spree.t(:zip) + ':'
     = f.text_field :zipcode, class: 'fullwidth'
-  %div{"data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
+  %div{"data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
     %div{class: "field"}
       = f.label :country_id, Spree.t(:country) + ':'
       %span{id: "#{s_or_b}country"}
         = f.select :country_id, countries, { selected: @order.send("#{address_type}_address").country_id },
-        { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
+        { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
     %div{class: "field"}
       = f.label :state_id, Spree.t(:state) + ':'
       %span{id: "#{s_or_b}state"}
         = f.select :state_id, states_for_country(@order.send("#{address_type}_address").country), { selected: @order.send("#{address_type}_address").state_id },
-        { "data-controller": "tom-select", "data-dependant-select-target": "select", class: "primary" }
+        { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
 
   %div{class: "field"}
     = f.label :phone, Spree.t(:phone) + ':'

app/webpacker/controllers/dependent_select_controller.js

@@ -23,7 +23,7 @@ export default class extends Controller {
   }
 
   populateNewOptions(sourceId) {
-    const options = this.dependantOptionsFor(sourceId);
+    const options = this.dependentOptionsFor(sourceId);
 
     options.forEach((item) => {
       this.addOption(item[0], item[1]);
@@ -40,7 +40,7 @@ export default class extends Controller {
     this.selectTarget.appendChild(newOption);
   }
 
-  dependantOptionsFor(sourceId) {
+  dependentOptionsFor(sourceId) {
     return this.optionsValue.find((option) => option[0] === sourceId)[1];
   }
 }

spec/system/admin/enterprises_spec.rb

@@ -56,7 +56,8 @@ describe '
     fill_in 'enterprise_address_attributes_latitude', with: '-37.4713077'
     fill_in 'enterprise_address_attributes_longitude', with: '144.7851531'
     # default country (Australia in this test) should be selected by default
-    select2_select 'Victoria', from: 'enterprise_address_attributes_state_id'
+    page.find("#enterprise_address_attributes_country_id-ts-control").click
+    page.find(".option", text: "Australia").click
 
     click_button 'Create'
     expect(flash_message).to eq('Enterprise "Eaterprises" has been successfully created!')
@@ -186,7 +187,8 @@ describe '
     fill_in 'enterprise_address_attributes_latitude', with: '-37.4713077'
     fill_in 'enterprise_address_attributes_longitude', with: '144.7851531'
     # default country (Australia in this test) should be selected by default
-    select2_select 'Victoria', from: 'enterprise_address_attributes_state_id'
+    page.find("#enterprise_address_attributes_state_id-ts-control").click
+    page.find(".option", text: "Victoria").click
 
     accept_alert do
       click_link "Shop Preferences"
@@ -355,8 +357,12 @@ describe '
         fill_in 'enterprise_address_attributes_address1', with: 'z'
         fill_in 'enterprise_address_attributes_city', with: 'z'
         fill_in 'enterprise_address_attributes_zipcode', with: 'z'
-        select2_select 'Australia', from: 'enterprise_address_attributes_country_id'
-        select2_select 'Victoria', from: 'enterprise_address_attributes_state_id'
+
+        page.find("#enterprise_address_attributes_country_id-ts-control").click
+        page.find(".option", text: "Australia").click
+
+        page.find("#enterprise_address_attributes_state_id-ts-control").click
+        page.find(".option", text: "Victoria").click
       end
 
       it "without violating rules" do