114 lines
4.2 KiB
Twig
114 lines
4.2 KiB
Twig
{{ form_start(form) }}
|
|
{{ form_row(form.status) }}
|
|
|
|
<h3>Order Items</h3> <div class="order-items-wrapper"
|
|
data-prototype="{{ form_widget(form.orderItems.vars.prototype)|e('html_attr') }}"
|
|
data-index="{{ form.orderItems|length }}">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Drink Type</th>
|
|
<th>Quantity</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="order-items-list">
|
|
{% for orderItemForm in form.orderItems %}
|
|
<tr class="order-item-row">
|
|
<td>{{ form_widget(orderItemForm.drinkType) }}</td>
|
|
<td>{{ form_widget(orderItemForm.quantity) }}</td>
|
|
<td>
|
|
<button type="button" class="btn btn-danger remove-order-item">Remove</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<button type="button" class="btn btn-success add-order-item">Add Item</button>
|
|
</div>
|
|
|
|
<button class="btn btn-primary mt-3">{{ button_label|default('Save') }}</button>
|
|
{{ form_end(form) }}
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add new item
|
|
document.querySelector('.add-order-item').addEventListener('click', function() {
|
|
const wrapper = document.querySelector('.order-items-wrapper');
|
|
const index = parseInt(wrapper.dataset.index);
|
|
|
|
// Get the prototype HTML
|
|
const prototype = wrapper.dataset.prototype;
|
|
|
|
// Create a new row
|
|
const row = document.createElement('tr');
|
|
row.className = 'order-item-row';
|
|
|
|
// Create cells for drink type, quantity, and actions
|
|
const drinkTypeCell = document.createElement('td');
|
|
const quantityCell = document.createElement('td');
|
|
const actionsCell = document.createElement('td');
|
|
|
|
// Extract the form elements from the prototype
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = prototype.replace(/__name__/g, index);
|
|
|
|
// Find the drink type and quantity inputs
|
|
const drinkTypeInput = tempDiv.querySelector('[name$="[drinkType]"]');
|
|
const quantityInput = tempDiv.querySelector('[name$="[quantity]"]');
|
|
|
|
// Move the inputs to their respective cells
|
|
if (drinkTypeInput) {
|
|
drinkTypeCell.appendChild(drinkTypeInput.parentNode);
|
|
}
|
|
|
|
if (quantityInput) {
|
|
quantityCell.appendChild(quantityInput.parentNode);
|
|
}
|
|
|
|
// Create remove button
|
|
const removeButton = document.createElement('button');
|
|
removeButton.type = 'button';
|
|
removeButton.className = 'btn btn-danger remove-order-item';
|
|
removeButton.textContent = 'Remove';
|
|
actionsCell.appendChild(removeButton);
|
|
|
|
// Add cells to the row
|
|
row.appendChild(drinkTypeCell);
|
|
row.appendChild(quantityCell);
|
|
row.appendChild(actionsCell);
|
|
|
|
// Add the row to the table
|
|
document.querySelector('.order-items-list').appendChild(row);
|
|
|
|
// Update the index
|
|
wrapper.dataset.index = index + 1;
|
|
|
|
// Add event listener to the new remove button
|
|
removeButton.addEventListener('click', function() {
|
|
row.remove();
|
|
});
|
|
});
|
|
|
|
// Remove existing items
|
|
document.querySelectorAll('.remove-order-item').forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
// Find the row
|
|
const row = this.closest('.order-item-row');
|
|
|
|
// Add a hidden input to mark this item for deletion
|
|
const orderItemId = row.querySelector('input[name$="[id]"]');
|
|
if (orderItemId) {
|
|
const hiddenInput = document.createElement('input');
|
|
hiddenInput.type = 'hidden';
|
|
hiddenInput.name = orderItemId.name.replace('[id]', '[_delete]');
|
|
hiddenInput.value = 1;
|
|
row.appendChild(hiddenInput);
|
|
}
|
|
|
|
// Hide the row instead of removing it
|
|
row.style.display = 'none';
|
|
});
|
|
});
|
|
});
|
|
</script>
|