Implement ticket selection with Stimulus controller and improve code documentation
- Add ticket selection functionality to event show page using Stimulus - Create ticket_selection_controller.js for handling ticket quantity changes - Update ticket card component and event show view to work with Stimulus - Add comprehensive comments to all JavaScript files for better maintainability - Remove dependent: :destroy from event ticket_types association
This commit is contained in:
@@ -35,18 +35,25 @@
|
||||
<div class="flex items-center space-x-2 order-1 sm:order-2">
|
||||
<button type="button"
|
||||
class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200"
|
||||
disabled>
|
||||
data-action="ticket-selection#decrement"
|
||||
data-target="<%= id %>">
|
||||
<span class="text-gray-600 font-bold">-</span>
|
||||
</button>
|
||||
<input type="number"
|
||||
id="ticket_quantity_<%= id %>"
|
||||
name="cart[<%= id %>][quantity]"
|
||||
min="0"
|
||||
max="<%= remaining %>"
|
||||
value="0"
|
||||
class="w-12 text-center border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-1"
|
||||
disabled>
|
||||
class="w-12 text-center border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-1 ticket-quantity-input"
|
||||
data-ticket-selection-target="quantityInput"
|
||||
data-action="change->ticket-selection#updateQuantity"
|
||||
data-price="<%= price_cents %>"
|
||||
data-target="<%= id %>">
|
||||
<button type="button"
|
||||
class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200"
|
||||
disabled>
|
||||
data-action="ticket-selection#increment"
|
||||
data-target="<%= id %>">
|
||||
<span class="text-gray-600 font-bold">+</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user