Add person search functionality for new event invitations

- Implemented a new Stimulus controller for person search, allowing users to search and select people from a dropdown.
- Updated the invitations controller to handle person invitations by ID and added a new action to fetch available people.
- Created a new invitations.scss file for styling invitation-related components.
- Enhanced the event invitations mailer to include the inviter's name in the invitation email.
- Refactored event and event invitation models to support new invitation types and ensure uniqueness for event invitations.
- Updated views to include tabs for inviting members and inviting by email, along with a new table for displaying invitations.
- Improved localization for invitation-related texts in English, Spanish, and French.
- Added routes for fetching available people for invitations.

Author: rsmithlal

app/assets/javascripts/better_together/controllers/person_search_controller.js

@@ -0,0 +1,154 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["select", "input"]
+  static values = {
+    searchUrl: String,
+    searchDelay: { type: Number, default: 300 }
+  }
+
+  connect() {
+    this.setupPersonSearch()
+  }
+
+  setupPersonSearch() {
+    const select = this.selectTarget
+
+    // Convert select to a searchable input
+    this.createSearchInput(select)
+
+    // Hide the original select
+    select.style.display = 'none'
+  }
+
+  createSearchInput(select) {
+    const searchContainer = select.parentElement
+
+    // Create search input
+    const searchInput = document.createElement('input')
+    searchInput.type = 'text'
+    searchInput.className = 'form-control person-search-input'
+    searchInput.placeholder = select.options[0]?.text || 'Search for people...'
+    searchInput.setAttribute('data-person-search-target', 'input')
+
+    // Create results dropdown
+    const resultsDropdown = document.createElement('div')
+    resultsDropdown.className = 'person-search-results'
+    resultsDropdown.style.cssText = `
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: white;
+      border: 1px solid #ced4da;
+      border-top: none;
+      border-radius: 0 0 0.375rem 0.375rem;
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 1000;
+      display: none;
+    `
+
+    // Insert elements
+    searchContainer.style.position = 'relative'
+    searchContainer.insertBefore(searchInput, select)
+    searchContainer.appendChild(resultsDropdown)
+
+    // Setup event listeners
+    let searchTimeout
+    searchInput.addEventListener('input', (e) => {
+      clearTimeout(searchTimeout)
+      searchTimeout = setTimeout(() => {
+        this.performSearch(e.target.value, resultsDropdown, select)
+      }, this.searchDelayValue)
+    })
+
+    searchInput.addEventListener('focus', () => {
+      if (searchInput.value) {
+        this.performSearch(searchInput.value, resultsDropdown, select)
+      }
+    })
+
+    // Hide dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!searchContainer.contains(e.target)) {
+        resultsDropdown.style.display = 'none'
+      }
+    })
+  }
+
+  async performSearch(query, resultsDropdown, select) {
+    if (query.length < 2) {
+      resultsDropdown.style.display = 'none'
+      return
+    }
+
+    try {
+      const response = await fetch(`${this.searchUrlValue}?search=${encodeURIComponent(query)}`, {
+        headers: {
+          'Accept': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      })
+
+      if (!response.ok) throw new Error('Search failed')
+
+      const people = await response.json()
+      this.displayResults(people, resultsDropdown, select)
+    } catch (error) {
+      console.error('Person search error:', error)
+      resultsDropdown.innerHTML = '<div class="p-2 text-danger">Search failed</div>'
+      resultsDropdown.style.display = 'block'
+    }
+  }
+
+  displayResults(people, resultsDropdown, select) {
+    if (people.length === 0) {
+      resultsDropdown.innerHTML = '<div class="p-2 text-muted">No people found</div>'
+      resultsDropdown.style.display = 'block'
+      return
+    }
+
+    const resultsHtml = people.map(person => `
+      <div class="person-result p-2 border-bottom"
+           style="cursor: pointer; display: flex; align-items: center;"
+           data-person-id="${person.id}"
+           data-person-name="${person.name}">
+        <div class="me-2" style="width: 32px; height: 32px; background-color: #dee2e6; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
+          <i class="fas fa-user text-muted"></i>
+        </div>
+        <div>
+          <div class="fw-medium">${person.name}</div>
+          <small class="text-muted">@${person.slug}</small>
+        </div>
+      </div>
+    `).join('')
+
+    resultsDropdown.innerHTML = resultsHtml
+    resultsDropdown.style.display = 'block'
+
+    // Add click handlers to results
+    resultsDropdown.querySelectorAll('.person-result').forEach(result => {
+      result.addEventListener('click', () => {
+        this.selectPerson(result, select)
+        resultsDropdown.style.display = 'none'
+      })
+    })
+  }
+
+  selectPerson(resultElement, select) {
+    const personId = resultElement.dataset.personId
+    const personName = resultElement.dataset.personName
+
+    // Update the hidden select
+    select.innerHTML = `<option value="${personId}" selected>${personName}</option>`
+    select.value = personId
+
+    // Update the search input
+    const searchInput = this.inputTarget
+    searchInput.value = personName
+
+    // Trigger change event for form handling
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+}

app/assets/stylesheets/better_together/application.scss

@@ -31,6 +31,7 @@
 @use 'conversations';
 @use 'forms';
 @use 'image-galleries';
+@use 'invitations';
 @use 'maps';
 @use 'metrics';
 @use 'navigation';

app/assets/stylesheets/better_together/invitations.scss

@@ -0,0 +1,5 @@
+
+.profile-image.invitee {
+  width: 32px;
+  height: 32px;
+}

app/controllers/better_together/events/invitations_controller.rb

@@ -5,7 +5,8 @@ module Events
     class InvitationsController < ApplicationController # rubocop:todo Style/Documentation
       before_action :set_event
       before_action :set_invitation, only: %i[destroy resend]
-      after_action :verify_authorized
+      after_action :verify_authorized, except: %i[available_people]
+      after_action :verify_policy_scoped, only: %i[available_people]
 
       def create # rubocop:todo Metrics/MethodLength
         @invitation = BetterTogether::EventInvitation.new(invitation_params)
@@ -14,6 +15,14 @@ def create # rubocop:todo Metrics/MethodLength
         @invitation.status = 'pending'
         @invitation.valid_from ||= Time.zone.now
 
+        # Handle person invitation by ID
+        if params.dig(:invitation, :invitee_id).present?
+          @invitation.invitee = BetterTogether::Person.find(params[:invitation][:invitee_id])
+          # Use the person's email address and locale
+          @invitation.invitee_email = @invitation.invitee.email
+          @invitation.locale = @invitation.invitee.locale || I18n.default_locale
+        end
+
         authorize @invitation
 
         if @invitation.save
@@ -26,8 +35,21 @@ def create # rubocop:todo Metrics/MethodLength
 
       def destroy
         authorize @invitation
+        invitation_dom_id = helpers.dom_id(@invitation)
         @invitation.destroy
-        respond_success(@invitation, :ok)
+
+        respond_to do |format|
+          format.html { redirect_to @event, notice: t('flash.generic.destroyed', resource: t('resources.invitation')) }
+          format.turbo_stream do
+            flash.now[:notice] = t('flash.generic.destroyed', resource: t('resources.invitation'))
+            render turbo_stream: [
+              turbo_stream.remove(invitation_dom_id),
+              turbo_stream.replace('flash_messages', partial: 'layouts/better_together/flash_messages',
+                                                     locals: { flash: })
+            ]
+          end
+          format.json { render json: { id: @invitation.id }, status: :ok }
+        end
       end
 
       def resend
@@ -36,6 +58,40 @@ def resend
         respond_success(@invitation, :ok)
       end
 
+      def available_people
+        # Get IDs of people who are already invited to this event
+        # We use EventInvitation directly to avoid the default scope with includes(:invitee)
+        invited_person_ids = BetterTogether::EventInvitation
+                             .where(invitable: @event, invitee_type: 'BetterTogether::Person')
+                             .pluck(:invitee_id)
+
+        # Search for people excluding those already invited and those without email
+        # People have email through either user.email or contact_detail.email_addresses (association)
+        people = policy_scope(BetterTogether::Person)
+                 .left_joins(:user, contact_detail: :email_addresses)
+                 .where.not(id: invited_person_ids)
+                 .where(
+                   'better_together_users.email IS NOT NULL OR ' \
+                   'better_together_email_addresses.email IS NOT NULL'
+                 )
+
+        # Apply search filter if provided
+        if params[:search].present?
+          search_term = "%#{params[:search]}%"
+          people = people.joins(:string_translations)
+                         .where('mobility_string_translations.value ILIKE ? AND mobility_string_translations.key = ?',
+                                search_term, 'name')
+                         .distinct
+        end
+
+        # Format for SlimSelect
+        formatted_people = people.limit(20).map do |person|
+          { value: person.id, text: person.name }
+        end
+
+        render json: formatted_people
+      end
+
       private
 
       def set_event
@@ -49,7 +105,7 @@ def set_invitation
       end
 
       def invitation_params
-        params.require(:invitation).permit(:invitee_email, :valid_from, :valid_until, :locale, :role_id)
+        params.require(:invitation).permit(:invitee_id, :invitee_email, :valid_from, :valid_until, :locale, :role_id)
       end
 
       def notify_invitee(invitation) # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
@@ -59,10 +115,12 @@ def notify_invitee(invitation) # rubocop:todo Metrics/AbcSize, Metrics/MethodLen
           return
         end
 
-        if invitation.invitee.present?
+        if invitation.for_existing_user? && invitation.invitee.present?
+          # Send notification to existing user through the notification system
           BetterTogether::EventInvitationNotifier.with(invitation:).deliver_later(invitation.invitee)
           invitation.update_column(:last_sent, Time.zone.now)
-        elsif invitation.respond_to?(:invitee_email) && invitation[:invitee_email].present?
+        elsif invitation.for_email?
+          # Send email directly to external email address (bypassing notification system)
           BetterTogether::EventInvitationsMailer.invite(invitation).deliver_later
           invitation.update_column(:last_sent, Time.zone.now)
         end
@@ -72,11 +130,13 @@ def respond_success(invitation, status) # rubocop:todo Metrics/MethodLength
         respond_to do |format|
           format.html { redirect_to @event, notice: t('flash.generic.queued', resource: t('resources.invitation')) }
           format.turbo_stream do
+            flash.now[:notice] = t('flash.generic.queued', resource: t('resources.invitation'))
             render turbo_stream: [
               turbo_stream.replace('flash_messages', partial: 'layouts/better_together/flash_messages',
                                                      locals: { flash: }),
               turbo_stream.replace('event_invitations_table_body',
-                                   partial: 'better_together/events/pending_invitation_rows', locals: { event: @event })
+                                   partial: 'better_together/events/invitation_row',
+                                   collection: @event.invitations.order(:status, :created_at))
             ], status:
           end
           format.json { render json: { id: invitation.id }, status: }

app/mailers/better_together/event_invitations_mailer.rb

@@ -7,12 +7,16 @@ def invite(invitation)
       @event = invitation.invitable
       @invitation_url = invitation.url_for_review
 
-      to_email = invitation[:invitee_email].to_s
+      to_email = invitation.invitee_email.to_s
       return if to_email.blank?
 
-      mail(to: to_email,
-           subject: I18n.t('better_together.event_invitations_mailer.invite.subject',
-                           default: 'You are invited to an event'))
+      # Use the invitation's locale for proper internationalization
+      I18n.with_locale(invitation.locale) do
+        mail(to: to_email,
+             subject: I18n.t('better_together.event_invitations_mailer.invite.subject',
+                             event_name: @event&.name,
+                             default: 'You are invited to %<event_name>s'))
+      end
     end
   end
 end

app/models/better_together/event.rb

@@ -17,7 +17,10 @@ class Event < ApplicationRecord
 
     attachable_cover_image
 
-    has_many :event_attendances, class_name: 'BetterTogether::EventAttendance', dependent: :destroy
+    has_many :event_attendances, class_name: 'BetterTogether::EventAttendance',
+                                 foreign_key: :event_id, inverse_of: :event, dependent: :destroy
+    has_many :invitations, -> { includes(:invitee, :inviter) }, class_name: 'BetterTogether::EventInvitation',
+                                                                foreign_key: :invitable_id, inverse_of: :invitable, dependent: :destroy
     has_many :attendees, through: :event_attendances, source: :person
 
     has_many :calendar_entries, class_name: 'BetterTogether::CalendarEntry', dependent: :destroy