fix: update vendor templates to use new modal_simple macro API

The modal_simple macro was simplified to use {% call %}...{% endcall %}
syntax with content passed as the caller block. Updated 5 vendor templates:

- products.html (2 modals: delete, bulk delete)
- orders.html (2 modals: status update, bulk status update)
- inventory.html (3 modals: adjust, set quantity, bulk adjust)
- order-detail.html (2 modals: status update, ship all)
- team.html (2 modals: edit member, remove member)

The new pattern provides more flexibility by allowing custom content
including buttons to be placed inside the modal body.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-02 22:39:23 +01:00
parent 842aa983e1
commit 9ab743e43d
5 changed files with 272 additions and 229 deletions

View File

@@ -354,18 +354,9 @@
</div>
<!-- Status Update Modal -->
{{ modal_simple(
show_var='showStatusModal',
title='Update Order Status',
icon='pencil-square',
icon_color='blue',
confirm_text='Update',
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
confirm_fn='confirmStatusUpdate()',
loading_var='saving'
) }}
<template x-if="showStatusModal">
<div class="mb-4">
{% call modal_simple('updateOrderStatusModal', 'Update Order Status', show_var='showStatusModal', size='sm') %}
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
<select
x-model="newStatus"
@@ -400,44 +391,57 @@
</div>
</template>
</div>
</template>
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showStatusModal = false"
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
>Cancel</button>
<button
@click="confirmStatusUpdate()"
:disabled="saving"
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
>Update</button>
</div>
</div>
{% endcall %}
<!-- Ship All Modal -->
{{ modal_simple(
show_var='showShipAllModal',
title='Ship All Items',
icon='truck',
icon_color='indigo',
confirm_text='Ship All',
confirm_class='bg-indigo-600 hover:bg-indigo-700 focus:shadow-outline-indigo',
confirm_fn='shipAllItems()',
loading_var='saving'
) }}
<template x-if="showShipAllModal">
<div class="mb-4 space-y-3">
<p class="text-sm text-gray-600 dark:text-gray-400">
This will ship all remaining items and mark the order as shipped.
</p>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tracking Number</label>
<input
type="text"
x-model="trackingNumber"
placeholder="Enter tracking number"
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
<input
type="text"
x-model="trackingProvider"
placeholder="e.g., DHL, PostNL"
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
/>
</div>
{% call modal_simple('shipAllModal', 'Ship All Items', show_var='showShipAllModal', size='sm') %}
<div class="space-y-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
This will ship all remaining items and mark the order as shipped.
</p>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tracking Number</label>
<input
type="text"
x-model="trackingNumber"
placeholder="Enter tracking number"
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
/>
</div>
</template>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
<input
type="text"
x-model="trackingProvider"
placeholder="e.g., DHL, PostNL"
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
/>
</div>
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showShipAllModal = false"
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
>Cancel</button>
<button
@click="shipAllItems()"
:disabled="saving"
class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
>Ship All</button>
</div>
</div>
{% endcall %}
{% endblock %}
{% block extra_scripts %}