Use Select2 for service areas field.

Since the list of valid service areas is defined in settings.yml, it
should be used to populate the choices in the select field in the admin
interface. That way, it won’t be possible to submit an invalid value,
and users won’t have to guess what to enter.

app/assets/javascripts/admin/service_areas.js

@@ -0,0 +1,5 @@
+$(document).ready(function() {
+  $('#service_service_areas').select2({
+    placeholder: 'Select one or more service areas'
+  });
+});

app/views/admin/services/forms/_service_areas.html.haml

@@ -4,16 +4,6 @@
       Service Areas
     %p.desc
       What city or county does the location serve?
-      %em
-        Can either be city names or county names. Each word must be capitalized.
-
-  - if @service.service_areas.present?
-    - @service.service_areas.each_with_index do |service_area, i|
-      = field_set_tag do
-        .row
-          %div{ class: "col-sm-6 #{error_class_for(@service, :service_areas, service_area)}" }
-            = text_field_tag 'service[service_areas][]', service_area, class: 'form-control', id: "service_service_areas_#{i}"
-        = link_to 'Delete this service area permanently', '#', class: 'btn btn-danger delete_attribute'
-        %hr
-  = link_to_add_array_fields 'Add a new service area', :services, :service_area
 
+  = field_set_tag do
+    = f.select :service_areas, SETTINGS.try(:[], :valid_service_areas), {}, multiple: true, class: 'form-control'

config/settings.example.yml

@@ -211,8 +211,8 @@ tld_length: 2
 ###########################################
 test:
   valid_service_areas:
-  - Belmont
   - Atherton
+  - Belmont
 
   bounds: [[37.1074, -122.521], [37.7084, -122.085]]
 

config/settings.yml

@@ -211,8 +211,8 @@ tld_length: 2
 ###########################################
 test:
   valid_service_areas:
-  - Belmont
   - Atherton
+  - Belmont
 
   bounds: [[37.1074, -122.521], [37.7084, -122.085]]
 

spec/features/admin/services/create_service_spec.rb

@@ -99,12 +99,11 @@
   scenario 'when adding a service area', :js do
     fill_in 'service_name', with: 'New VRS Services service'
     fill_in 'service_description', with: 'new description'
-    click_link 'Add a new service area'
-    fill_in find(:xpath, "//input[@name='service[service_areas][]']")[:id], with: 'Belmont'
+    select2('Belmont', 'service_service_areas', multiple: true)
     click_button 'Create service'
     click_link 'New VRS Services service'
 
-    expect(find_field('service[service_areas][]').value).to eq 'Belmont'
+    expect(find(:css, 'select#service_service_areas').value).to eq(['Belmont'])
   end
 
   scenario 'when adding categories', :js do

spec/features/admin/services/update_service_areas_spec.rb

@@ -9,66 +9,28 @@
   end
 
   scenario 'when no service areas exist' do
-    expect(page).to have_no_xpath("//input[@name='service[service_areas][]']")
+    expect(page).to have_no_css('.select2-search-choice-close')
   end
 
-  scenario 'by adding 2 new service areas', :js do
-    add_two_service_areas
-    expect(find_field('service_service_areas_0').value).to eq 'Belmont'
-    delete_all_service_areas
-    expect(page).to have_no_xpath("//input[@name='service[service_areas][]']")
-  end
-
-  scenario 'with 2 service_areas but one is empty', :js do
-    @service.update!(service_areas: ['Belmont'])
-    visit '/admin/locations/vrs-services'
-    click_link 'Literacy Program'
-    click_link 'Add a new service area'
-    click_button 'Save changes'
-    total_service_areas = all(:xpath, "//input[@name='service[service_areas][]']")
-    expect(total_service_areas.length).to eq 1
-  end
-
-  scenario 'with 2 service_areas but only one is invalid', :js do
-    @service.update!(service_areas: ['Belmont'])
-    visit '/admin/locations/vrs-services'
-    click_link 'Literacy Program'
-    click_link 'Add a new service area'
-    service_areas = page.
-        all(:xpath, "//input[@name='service[service_areas][]']")
-    fill_in service_areas[-1][:id], with: 'Alexandria'
-    click_button 'Save changes'
-    total_fields_with_errors = page.all(:css, '.field_with_errors')
-    expect(total_fields_with_errors.length).to eq 1
-  end
-
-  scenario 'with invalid service area' do
-    @service.update!(service_areas: ['Belmont'])
-    visit '/admin/locations/vrs-services'
-    click_link 'Literacy Program'
-    fill_in 'service_service_areas_0', with: 'Fairfax'
+  scenario 'with one service area', :js do
+    select2('Belmont', 'service_service_areas', multiple: true)
     click_button 'Save changes'
-    expect(page).
-      to have_content 'Fairfax is not a valid service area'
-    expect(page).to have_css('.field_with_errors')
+    expect(@service.reload.service_areas).to eq ['Belmont']
   end
 
-  scenario 'with valid service area' do
-    @service.update!(service_areas: ['Belmont'])
-    visit '/admin/locations/vrs-services'
-    click_link 'Literacy Program'
-    fill_in 'service_service_areas_0', with: 'Atherton'
+  scenario 'with two service areas', :js do
+    select2('Belmont', 'service_service_areas', multiple: true)
+    select2('Atherton', 'service_service_areas', multiple: true)
     click_button 'Save changes'
-    expect(find_field('service_service_areas_0').value).
-      to eq 'Atherton'
+    expect(@service.reload.service_areas).to eq %w(Atherton Belmont)
   end
 
-  scenario 'clearing out existing service area' do
-    @service.update!(service_areas: ['Belmont'])
+  scenario 'removing a service area', :js do
+    @service.update!(service_areas: %w(Atherton Belmont))
     visit '/admin/locations/vrs-services'
     click_link 'Literacy Program'
-    fill_in 'service_service_areas_0', with: ''
+    first('.select2-search-choice-close').click
     click_button 'Save changes'
-    expect(page).not_to have_field('service_service_areas_0')
+    expect(@service.reload.service_areas).to eq ['Belmont']
   end
 end