Merge pull request #2562 from mroderick/feature/tom-select-member-search

Replace Chosen.js with TomSelect for member lookup

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/controllers/admin/members_controller.rb

@@ -2,7 +2,25 @@ class Admin::MembersController < Admin::ApplicationController
   before_action :set_member, only: %i[events update_subscriptions send_attendance_email send_eligibility_email]
 
   def index
-    @members = Member.all
+    # @members = Member.all removed - members loaded dynamically via search
+  end
+
+  def search
+    query = params[:q].to_s.strip
+
+    members = if query.length >= 3
+      Member.where(
+        "CONCAT(name, ' ', surname) ILIKE :q OR email ILIKE :q",
+        q: "%#{query}%"
+      ).select(:id, :name, :surname, :email, :pronouns).limit(50)
+    else
+      []
+    end
+
+    render json: members.as_json(
+      only: %i[id name surname email],
+      methods: [:full_name]
+    )
   end
 
   def show

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' }

config/routes.rb

@@ -96,6 +96,7 @@
     resources :announcements, only: %i[new index create edit update]
 
     resources :members, only: %i[show index] do
+      get :search, on: :collection
       get :events
       get :send_eligibility_email
       get :send_attendance_email

spec/controllers/admin/members_controller_spec.rb

@@ -0,0 +1,70 @@
+require 'rails_helper'
+
+RSpec.describe Admin::MembersController, type: :controller do
+  describe 'GET #search' do
+    let(:admin) { Fabricate(:member) }
+    let!(:member_jane) { Fabricate(:member, name: 'Jane', surname: 'Doe', email: 'jane@example.com', pronouns: nil) }
+    let!(:member_john) { Fabricate(:member, name: 'John', surname: 'Smith', email: 'john@test.com') }
+
+    before do
+      admin.add_role(:admin)
+      login_as_admin(admin)
+    end
+
+    context 'with query less than 3 characters' do
+      it 'returns empty array' do
+        get :search, params: { q: 'ab' }, format: :json
+
+        expect(response).to have_http_status(:ok)
+        expect(JSON.parse(response.body)).to eq([])
+      end
+    end
+
+    context 'with query 3 or more characters' do
+      it 'returns matching members by name' do
+        get :search, params: { q: 'Jan' }, format: :json
+
+        expect(response).to have_http_status(:ok)
+        results = JSON.parse(response.body)
+        expect(results.length).to eq(1)
+        expect(results.first['id']).to eq(member_jane.id)
+        expect(results.first['full_name']).to eq('Jane Doe')
+      end
+
+      it 'returns matching members by email' do
+        get :search, params: { q: 'john@tes' }, format: :json
+
+        expect(response).to have_http_status(:ok)
+        results = JSON.parse(response.body)
+        expect(results.length).to eq(1)
+        expect(results.first['id']).to eq(member_john.id)
+      end
+
+      it 'returns JSON with correct shape' do
+        get :search, params: { q: 'Jan' }, format: :json
+
+        results = JSON.parse(response.body)
+        expect(results.first.keys).to contain_exactly('id', 'name', 'surname', 'email', 'full_name')
+      end
+
+      it 'limits results to 50' do
+        51.times { |i| Fabricate(:member, name: "Test#{i}", surname: 'User', email: "test#{i}@example.com") }
+
+        get :search, params: { q: 'Test' }, format: :json
+
+        results = JSON.parse(response.body)
+        expect(results.length).to be <= 50
+      end
+    end
+
+    context 'when not authenticated' do
+      before { login(Fabricate(:member)) }
+
+      it 'redirects to login' do
+        get :search, params: { q: 'test' }, format: :json
+
+        expect(response).to have_http_status(:found)
+      end
+    end
+  end
+end

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