feat: integrate TomSelect for member lookup

- Add TomSelect to admin members index page (loaded from CDN)
- Search triggers after 3+ characters with 300ms debounce
- Display member name and email in dropdown options
- Update 'View Profile' link on member selection
- Initialize TomSelect before Chosen to avoid conflicts
- Exclude member_lookup_id from Chosen initialization

Author: mroderick

app/assets/javascripts/application.js

@@ -40,12 +40,43 @@ $(function() {
     format: "HH:i",
   });
 
+  // TomSelect for admin member lookup
+  if ($('#member_lookup_id').length) {
+    new TomSelect('#member_lookup_id', {
+      placeholder: 'Type to search members...',
+      valueField: 'id',
+      labelField: 'full_name',
+      searchField: ['full_name', 'email'],
+      create: false,
+      loadThrottle: 300,
+      shouldLoad: function(query) {
+        return query.length >= 3;
+      },
+      load: function(query, callback) {
+        fetch('/admin/members/search?q=' + encodeURIComponent(query))
+          .then(response => response.json())
+          .then(json => callback(json))
+          .catch(() => callback());
+      },
+      render: {
+        option: function(item, escape) {
+          return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
+        }
+      }
+    });
+
+    $('#member_lookup_id').on('change', function() {
+      $('#view_profile').attr('href', '/admin/members/' + $(this).val());
+    });
+  }
+
+  // Chosen for all other selects (exclude #member_lookup_id)
   // Chosen hides inputs and selects, which becomes problematic when they are
   // required: browser validation doesn't get shown to the user.
   // This fix places "the original input behind the Chosen input, matching the
   // height and width so that the warning appears in the correct position."
   // https://github.com/harvesthq/chosen/issues/515#issuecomment-474588057
-  $('select').on('chosen:ready', function () {
+  $('select').not('#member_lookup_id').on('chosen:ready', function () {
     var height = $(this).next('.chosen-container').height();
     var width = $(this).next('.chosen-container').width();
 
@@ -57,14 +88,10 @@ $(function() {
     }).show();
   });
 
-  $('select').chosen({
+  $('select').not('#member_lookup_id').chosen({
     allow_single_deselect: true,
     no_results_text: 'No results matched'
   });
 
-  $('#member_lookup_id').change(function(e) {
-    $('#view_profile').attr('href', '/admin/members/' + $(this).val())
-  });
-
   $('[data-bs-toggle="tooltip"]').tooltip();
 });

app/views/admin/members/index.html.haml

@@ -1,10 +1,14 @@
+- content_for :head do
+  %link{ href: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
+  %script{ src: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js' }
+
 .container.py-4.py-lg-5
   .row.mb-4
     .col
       %h1 Members Directory
   .row.mb-4
     .col-12.col-md-6
-      = select_tag 'member_lookup_id', options_for_select([['Select a member...', '']] + @members.collect{ |u| ["#{u.full_name} (#{u.email})", u.id] }), { class: 'chosen-select' }
+      = select_tag 'member_lookup_id', nil, class: 'form-control'
   .row
     .col
       = link_to 'View Profile', '#', { class: 'btn btn-primary', id: 'view_profile' }

spec/features/admin/tom_select_member_lookup_spec.rb

@@ -0,0 +1,46 @@
+require 'rails_helper'
+
+RSpec.describe 'Admin TomSelect Member Lookup', :js, type: :feature do
+  let(:admin) { Fabricate(:member) }
+  let!(:member_jane) { Fabricate(:member, name: 'Jane', surname: 'Doe', email: 'jane@example.com') }
+  let!(:member_john) { Fabricate(:member, name: 'John', surname: 'Smith', email: 'john@test.com') }
+
+  before do
+    admin.add_role(:admin)
+    login_as_admin(admin)
+  end
+
+  scenario 'searching for members with TomSelect' do
+    visit admin_members_path
+
+    expect(page).to have_css('.ts-wrapper', wait: 5)
+
+    find('.ts-control').click
+    find('.ts-control input').send_keys('Ja')
+    sleep 0.5
+
+    find('.ts-control input').send_keys('ne')
+
+    expect(page).to have_css('.ts-dropdown .option', wait: 5)
+
+    expect(page).to have_content('Jane Doe')
+    expect(page).to have_content('jane@example.com')
+
+    expect(page).not_to have_content('John Smith')
+  end
+
+  scenario 'selecting a member updates view profile link' do
+    visit admin_members_path
+
+    expect(page).to have_css('.ts-wrapper', wait: 5)
+
+    find('.ts-control').click
+    find('.ts-control input').send_keys('Jane Doe')
+
+    expect(page).to have_css('.ts-dropdown .option', wait: 5)
+
+    find('.ts-dropdown .option', text: 'Jane Doe').click
+
+    expect(find('#view_profile')[:href]).to include(admin_member_path(member_jane))
+  end
+end