kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(show): wip to checkout

Browse Source
This commit is contained in:
kbe
2025-08-28 21:20:33 +02:00
parent 3fa9249bc8
commit 2a2c249a54
6 changed files with 457 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/views/components/_ticket_card.html.erb
View File

@@ -1,4 +1,41 @@
<div class="bg-white rounded-xl border <%= sold_out ? "border-gray-200 opacity-75" : "border-purple-200" %> shadow-sm overflow-hidden">
<div class="bg-white rounded-xl border <%= sold_out ? "border-gray-200 opacity-75" : "border-purple-200" %> shadow-sm overflow-hidden"
x-data="{
quantity: 0,
max: <%= remaining %>,
ticketTypeId: <%= id %>,
name: '<%= name %>',
price: <%= price_cents %>
}"
x-init="
$watch('quantity', (value) => {
$dispatch('update-cart-item', {
ticketTypeId: ticketTypeId,
name: name,
price: price,
quantity: value,
max: max
});
});
$nextTick(() => {
$dispatch('cart-initialized', { ticketTypeId: ticketTypeId });
});
"
@update-cart-item.window="
if ($event.detail.ticketTypeId === ticketTypeId) {
quantity = $event.detail.quantity;
}
"
@cart-change.window="
if (!$event.detail.cart[ticketTypeId]) {
quantity = 0;
}
"
@restore-cart.window="
if ($event.detail.cart[ticketTypeId]) {
quantity = $event.detail.cart[ticketTypeId].quantity;
}
">
<div class="p-5">
<div class="flex justify-between items-start mb-3">
<div>
@@ -35,27 +72,19 @@
<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"
data-action="click->ticket-cart#decreaseQuantity"
data-ticket-cart-ticket-type-id-param="<%= id %>"
data-ticket-cart-max-param="<%= remaining %>">
@click="quantity = Math.max(0, quantity - 1)"
:disabled="quantity <= 0">
<span class="text-gray-600 font-bold">-</span>
</button>
<input type="number"
id="quantity_<%= id %>"
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"
data-ticket-cart-target="quantity"
data-ticket-type-id="<%= id %>"
data-name="<%= name %>"
data-price="<%= price_cents %>"
data-action="change->ticket-cart#updateQuantityFromInput">
:max="max"
x-model="quantity"
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">
<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"
data-action="click->ticket-cart#increaseQuantity"
data-ticket-cart-ticket-type-id-param="<%= id %>"
data-ticket-cart-max-param="<%= remaining %>">
@click="quantity = Math.min(max, quantity + 1)"
:disabled="quantity >= max">
<span class="text-gray-600 font-bold">+</span>
</button>
</div>