Brunchie

User Selection Modal Demo

This page demonstrates the reusable user selection modal for expenses, events, and surveys.

Basic User Selection

Select users for a basic expense or event.

Selected users will appear here after confirmation

Limited User Selection

Select up to 3 users for a small group activity.

Maximum of 3 users allowed

Pre-selected Users

Modal with pre-selected users (first 2 friends).

Pre-populated with first 2 friends

Custom Styling

Modal with custom button styling and icon.

Custom button styling and icon

Implementation Guide

Basic Usage

= user_selection_modal_with_trigger(modal_id: 'myModal', available_users: current_user.friends, button_text: 'Select Users')

Advanced Usage

= user_selection_modal_with_trigger(modal_id: 'advancedModal', available_users: @available_users, selected_users: @pre_selected_users, max_users: 5, callback: 'handleUserSelection', button_text: 'Custom Button', button_class: 'btn btn-primary btn-lg')

JavaScript Event Handling

document.addEventListener('userSelectionConfirmed', (event) => {
  const { selectedUserIds, selectedUsers } = event.detail;
  console.log('Selected User IDs:', selectedUserIds);
  console.log('Selected Users:', selectedUsers);

  // Update your form or handle the selection
  updateFormWithSelectedUsers(selectedUserIds);
});

CSS Customization

The modal uses Bootstrap classes and custom SCSS. You can override styles inapp/assets/stylesheets/components/_user_selection_modal.scss