Implement event hover card feature with AJAX support and relationship icons

Author: rsmithlal

app/controllers/better_together/events_controller.rb

@@ -17,6 +17,14 @@ def index
     end
 
     def show
+      # Handle AJAX requests for card format - only our specific hover card requests
+      card_request = request.headers['X-Card-Request'] == 'true' || request.headers['HTTP_X_CARD_REQUEST'] == 'true'
+
+      if request.xhr? && card_request
+        render partial: 'better_together/events/event', locals: { event: @event }, layout: false
+        return
+      end
+
       super
     end
 

app/helpers/better_together/application_helper.rb

@@ -204,5 +204,21 @@ def main_app_url_helper?(method)
     def better_together_url_helper?(method)
       method.to_s.end_with?('_path', '_url') && BetterTogether::Engine.routes.url_helpers.respond_to?(method)
     end
+
+    # Returns the appropriate icon and color for an event based on the person's relationship to it
+    def event_relationship_icon(person, event)
+      relationship = person.event_relationship_for(event)
+      
+      case relationship
+      when :created
+        { icon: 'fas fa-user-edit', color: '#28a745', tooltip: t('better_together.events.relationship.created', default: 'Created by you') }
+      when :going
+        { icon: 'fas fa-check-circle', color: '#007bff', tooltip: t('better_together.events.relationship.going', default: 'You\'re going') }
+      when :interested
+        { icon: 'fas fa-heart', color: '#e91e63', tooltip: t('better_together.events.relationship.interested', default: 'You\'re interested') }
+      else
+        { icon: 'fas fa-circle', color: '#6c757d', tooltip: t('better_together.events.relationship.calendar', default: 'Calendar event') }
+      end
+    end
   end
 end

app/javascript/controllers/better_together/event_hover_card_controller.js

@@ -0,0 +1,271 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="better_together--event-hover-card"
+export default class extends Controller {
+  static values = {
+    eventId: String,
+    eventUrl: String
+  }
+
+  connect() {
+    this.popover = null
+    this.isPopoverVisible = false
+    this.isNavigating = false
+    this.showTimeout = null
+    this.hideTimeout = null
+    this.eventCardContent = null
+    this.contentLoaded = false
+    
+    // Pre-fetch the event card content immediately
+    this.prefetchEventCard()
+    this.setupPopover()
+  }
+
+  disconnect() {
+    this.cleanupPopover()
+  }
+
+  async setupPopover() {
+    // Setup popover with initial loading content
+    this.popover = new bootstrap.Popover(this.element, {
+      content: this.getPopoverContent(),
+      html: true,
+      placement: 'auto',
+      fallbackPlacements: ['top', 'bottom', 'right', 'left'],
+      trigger: 'manual', // Use manual trigger for better control
+      delay: { show: 0, hide: 100 }, // No delay for show since content is pre-fetched
+      customClass: 'event-hover-card-popover',
+      sanitize: false,
+      container: 'body', // Render in body to avoid positioning issues
+      boundary: 'viewport',
+      offset: [0, 8] // Add some offset from the trigger element
+    })
+
+    // Setup manual hover events
+    this.setupHoverEvents()
+  }
+
+  getPopoverContent() {
+    if (this.contentLoaded && this.eventCardContent) {
+      return this.eventCardContent
+    } else {
+      return '<div class="text-center py-3"><div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div><div class="small text-muted mt-2">Loading event details...</div></div>'
+    }
+  }
+
+  async prefetchEventCard() {
+    const requestUrl = `${this.eventUrlValue}?format=card`
+
+    try {
+      const response = await fetch(`${this.eventUrlValue}?format=card`, {
+        headers: {
+          'Accept': 'text/html',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-Card-Request': 'true'
+        }
+      })
+
+      if (response.ok) {
+        const cardHtml = await response.text()
+        this.eventCardContent = cardHtml
+        this.contentLoaded = true
+        
+        // Update popover content if it exists and is already shown
+        if (this.popover && this.isPopoverVisible) {
+          this.updatePopoverContent(cardHtml)
+        }
+      } else {
+        this.eventCardContent = this.generateFallbackContent()
+        this.contentLoaded = true
+      }
+    } catch (error) {
+      console.error('Error pre-fetching event card:', error)
+      this.eventCardContent = this.generateFallbackContent()
+      this.contentLoaded = true
+    }
+  }
+
+  setupHoverEvents() {
+    const showPopover = () => {
+      // Don't show popover if we're navigating
+      if (this.isNavigating) return
+      
+      clearTimeout(this.hideTimeout)
+      this.showTimeout = setTimeout(() => {
+        if (!this.isNavigating) {
+          this.isPopoverVisible = true
+          
+          // Update content if it's been loaded since popover creation
+          if (this.contentLoaded) {
+            this.popover.setContent({
+              '.popover-body': this.eventCardContent
+            })
+          }
+          
+          this.popover.show()
+        }
+      }, 300) // Reduced delay since content is pre-fetched
+    }
+
+    const hidePopover = () => {
+      clearTimeout(this.showTimeout)
+      
+      // Don't hide if we're navigating (cleanup will handle it)
+      if (this.isNavigating) return
+      
+      this.hideTimeout = setTimeout(() => {
+        if (!this.isNavigating) {
+          this.isPopoverVisible = false
+          this.popover.hide()
+        }
+      }, 100)
+    }
+
+    // Show on hover
+    this.element.addEventListener('mouseenter', showPopover)
+    this.element.addEventListener('focus', showPopover)
+
+    // Hide when leaving the trigger element
+    this.element.addEventListener('mouseleave', hidePopover)
+    this.element.addEventListener('blur', hidePopover)
+
+    // Keep popover open when hovering over it
+    this.element.addEventListener('shown.bs.popover', () => {
+      const popoverElement = document.querySelector('.event-hover-card-popover')
+      if (popoverElement) {
+        popoverElement.addEventListener('mouseenter', () => {
+          clearTimeout(this.hideTimeout)
+        })
+        popoverElement.addEventListener('mouseleave', hidePopover)
+        
+        // Intercept link clicks within the popover
+        this.setupPopoverLinkInterception(popoverElement)
+      }
+    })
+
+    // Handle popover hiding
+    this.element.addEventListener('hidden.bs.popover', () => {
+      this.isPopoverVisible = false
+    })
+  }
+
+  setupPopoverLinkInterception(popoverElement) {
+    // Find all links within the popover
+    const links = popoverElement.querySelectorAll('a[href]')
+    
+    links.forEach(link => {
+      link.addEventListener('click', (event) => {
+        // Set a flag to prevent any hover events from interfering
+        this.isNavigating = true
+        
+        // Hide the popover gracefully without disposing immediately
+        if (this.popover) {
+          this.popover.hide()
+        }
+        
+        // Schedule cleanup after Bootstrap's hide animation completes
+        setTimeout(() => {
+          this.safeCleanup()
+        }, 200)
+        
+        // Note: We don't preventDefault() here to allow normal navigation
+      })
+    })
+  }
+
+  safeCleanup() {
+    // Clear all timeouts
+    if (this.showTimeout) clearTimeout(this.showTimeout)
+    if (this.hideTimeout) clearTimeout(this.hideTimeout)
+    
+    // Reset state
+    this.isPopoverVisible = false
+    this.isNavigating = false
+    
+    // Only dispose if popover still exists and is not in transition
+    if (this.popover) {
+      try {
+        this.popover.dispose()
+        this.popover = null
+      } catch (error) {
+        console.warn('Error disposing popover:', error)
+        this.popover = null
+      }
+    }
+    
+    // Clean up any remaining popover DOM elements
+    const remainingPopovers = document.querySelectorAll('.event-hover-card-popover')
+    remainingPopovers.forEach(popover => {
+      try {
+        popover.remove()
+      } catch (error) {
+        console.warn('Error removing popover element:', error)
+      }
+    })
+  }
+
+  cleanupPopover() {
+    // Clear all timeouts
+    if (this.showTimeout) clearTimeout(this.showTimeout)
+    if (this.hideTimeout) clearTimeout(this.hideTimeout)
+    
+    // Reset state
+    this.isPopoverVisible = false
+    
+    // Hide and dispose popover safely
+    if (this.popover) {
+      try {
+        this.popover.hide()
+        // Delay disposal to allow hide animation to complete
+        setTimeout(() => {
+          if (this.popover) {
+            try {
+              this.popover.dispose()
+              this.popover = null
+            } catch (error) {
+              console.warn('Error disposing popover:', error)
+              this.popover = null
+            }
+          }
+        }, 150)
+      } catch (error) {
+        console.warn('Error hiding popover:', error)
+        this.popover = null
+      }
+    }
+    
+    // Clean up any remaining popover DOM elements
+    setTimeout(() => {
+      const remainingPopovers = document.querySelectorAll('.event-hover-card-popover')
+      remainingPopovers.forEach(popover => {
+        try {
+          popover.remove()
+        } catch (error) {
+          console.warn('Error removing popover element:', error)
+        }
+      })
+    }, 200)
+  }
+
+  updatePopoverContent(content) {
+    if (this.popover) {
+      this.popover.setContent({
+        '.popover-body': content
+      })
+    }
+  }
+
+  generateFallbackContent() {
+    return `
+      <div class="event-hover-card">
+        <div class="text-center">
+          <i class="fas fa-exclamation-triangle text-warning"></i>
+          <p class="mb-0 small">Unable to load event details</p>
+          <a href="${this.eventUrlValue}" class="btn btn-sm btn-outline-primary mt-2">
+            <i class="fas fa-eye me-1"></i> View Event
+          </a>
+        </div>
+      </div>
+    `
+  }
+}

app/models/better_together/event.rb

@@ -35,6 +35,8 @@ class Event < ApplicationRecord
     translates :name
     translates :description, backend: :action_text
 
+    slugged :name
+
     validates :name, presence: true
     validates :registration_url, format: { with: URI::DEFAULT_PARSER.make_regexp(%w[http https]) }, allow_blank: true,
                                  allow_nil: true

app/models/better_together/person.rb

@@ -162,6 +162,40 @@ def after_record_created
       community.update!(creator_id: id)
     end
 
+    # Returns all events relevant to this person's calendar view
+    # Combines events they're going to, created, and interested in
+    def all_calendar_events
+      @all_calendar_events ||= begin
+        # Events from primary calendar (going)
+        calendar_events = primary_calendar.events.includes(:string_translations)
+        
+        # Events they created 
+        created_events = Event.includes(:string_translations).where(creator_id: id)
+        
+        # Events they're interested in (but not going)
+        interested_event_ids = event_attendances.where(status: 'interested').pluck(:event_id)
+        interested_events = Event.includes(:string_translations).where(id: interested_event_ids)
+        
+        # Combine all events, removing duplicates by ID
+        all_events = (calendar_events.to_a + created_events.to_a + interested_events.to_a)
+        all_events.uniq(&:id)
+      end
+    end
+
+    # Determines the relationship type for an event
+    # Returns: :going, :created, :interested, or :calendar
+    def event_relationship_for(event)
+      return :created if event.creator_id == id
+      
+      attendance = event_attendances.find_by(event: event)
+      return attendance.status.to_sym if attendance
+      
+      # Check if it's in their calendar (fallback)
+      return :going if primary_calendar.events.include?(event)
+      
+      :calendar # Default for calendar events
+    end
+
     include ::BetterTogether::RemoveableAttachment
   end
 end

app/views/better_together/events/show.html.erb

@@ -54,7 +54,7 @@
       <% attendance = BetterTogether::EventAttendance.find_by(event: @event, person: current_person) %>
       <div class="container my-3">
         <div class="d-flex gap-2">
-          <%= button_to rsvp_interested_event_path(@event), method: :post, class: "btn btn-outline-primary #{'active' if attendance&.status == 'interested'}" do %>
+          <%= button_to rsvp_interested_event_path(@event), method: :post, class: "btn btn-outline-danger #{'active' if attendance&.status == 'interested'}", style: "#{attendance&.status == 'interested' ? '--bs-btn-active-bg: #e91e63; --bs-btn-active-border-color: #e91e63;' : '--bs-btn-color: #e91e63; --bs-btn-border-color: #e91e63; --bs-btn-hover-bg: #e91e63; --bs-btn-hover-border-color: #e91e63;'}" do %>
             <i class="fas fa-heart me-2" aria-hidden="true"></i><%= t('better_together.events.rsvp_interested', default: 'Interested') %>
           <% end %>
           <%= button_to rsvp_going_event_path(@event), method: :post, class: "btn btn-primary #{'active' if attendance&.status == 'going'}" do %>