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:
kbe
2025-08-30 14:26:59 +02:00
parent 58dbcf3a6a
commit 56b0a45719
14 changed files with 428 additions and 284 deletions

View File

@@ -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>