Add language dropdown menu to My Preferences

app/assets/javascripts/preferences.js

@@ -0,0 +1,32 @@
+$(document).ready(function () {
+  $("#available_languages_menu").prop("hidden", false);
+  $("#user_languages, #available_languages").on("input", updateButtons);
+  updateButtons();
+
+  $("#add_preferred_language").click(function () {
+    var preferredLanguagesValue = $("#user_languages").val().trim();
+    var selectedLanguage = $("#available_languages").val();
+    $("#user_languages").val(selectedLanguage + " " + preferredLanguagesValue);
+    updateButtons();
+    $("#remove_preferred_language").trigger("focus");
+  });
+
+  $("#remove_preferred_language").click(function () {
+    var preferredLanguages = $("#user_languages").val().trim().split(/\s+/);
+    var selectedLanguage = $("#available_languages").val();
+    var updatedPreferredLanguages = preferredLanguages.filter(function (language) {
+      return language !== selectedLanguage;
+    });
+    $("#user_languages").val(updatedPreferredLanguages.join(" "));
+    updateButtons();
+    $("#add_preferred_language").trigger("focus");
+  });
+
+  function updateButtons() {
+    var preferredLanguages = $("#user_languages").val().trim().split(/\s+/);
+    var selectedLanguage = $("#available_languages").val();
+    var languageAlreadyAdded = preferredLanguages.includes(selectedLanguage);
+    $("#add_preferred_language").prop("hidden", languageAlreadyAdded);
+    $("#remove_preferred_language").prop("hidden", !languageAlreadyAdded);
+  }
+});

app/views/preferences/edit.html.erb

@@ -1,3 +1,7 @@
+<% content_for :head do %>
+  <%= javascript_include_tag "preferences" %>
+<% end %>
+
 <% content_for :heading do %>
   <h1><%= t ".title" %></h1>
 <% end %>
@@ -7,6 +11,19 @@
 
   <%= f.text_field :languages %>
 
+  <div class="row mb-3" id="available_languages_menu" hidden>
+    <div class="col-sm-auto align-self-end">
+      <label class="form-label" for="available_languages"><%= t ".available_languages" %></label>
+    </div>
+    <div class="col-sm mb-sm-0 mb-2">
+      <%= tag.select options_from_collection_for_select(Language.order(:english_name), :code, :name), :id => "available_languages", :class => "form-select" %>
+    </div>
+    <div class="col-sm-auto">
+      <button type="button" class="btn btn-outline-primary" id="add_preferred_language"><%= t ".add" %></button>
+      <button type="button" class="btn btn-outline-primary" id="remove_preferred_language"><%= t ".remove" %></button>
+    </div>
+  </div>
+
   <%= f.primary t(".save") %>
   <%= link_to t(".cancel"), preferences_path, :class => "btn btn-link" %>
 <% end %>

config/locales/en.yml

@@ -1773,6 +1773,9 @@ en:
       edit_preferences: Edit Preferences
     edit:
       title: Edit Preferences
+      available_languages: Available Languages
+      add: Add
+      remove: Remove
       save: Update Preferences
       cancel: Cancel
     update:

test/system/preferences_test.rb

@@ -1,6 +1,12 @@
 require "application_system_test_case"
 
 class PreferencesTest < ApplicationSystemTestCase
+  def setup
+    create(:language, :code => "en")
+    create(:language, :code => "fr", :english_name => "French", :native_name => "Français")
+    create(:language, :code => "de", :english_name => "German", :native_name => "Deutsch")
+  end
+
   def test_flash_message_shows_in_original_language
     sign_in_as(create(:user))
 
@@ -19,4 +25,30 @@ def test_flash_message_shows_in_new_language
 
     assert_content "Préférences mises à jour"
   end
+
+  def test_language_dropdown
+    user = create(:user, :languages => %w[en fr])
+    sign_in_as(user)
+
+    visit edit_preferences_path
+    assert_field "Preferred Languages", :with => "en fr"
+
+    select "French", :from => "Available Languages"
+    assert_no_button "Add"
+    assert_button "Remove"
+
+    click_on "Remove"
+    assert_field "Preferred Languages", :with => "en"
+    assert_button "Add"
+    assert_no_button "Remove"
+
+    click_on "Add"
+    assert_field "Preferred Languages", :with => "fr en"
+    assert_no_button "Add"
+    assert_button "Remove"
+
+    fill_in "Preferred Languages", :with => "de en"
+    assert_button "Add"
+    assert_no_button "Remove"
+  end
 end