sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update vendor templates to use new modal_simple macro API

Browse Source 
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:
Samir Boulahtit
2026-01-02 22:39:23 +01:00
parent 842aa983e1
commit 9ab743e43d
5 changed files with 272 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/templates/vendor/orders.html vendored
View File

@@ -265,46 +265,42 @@
{{ pagination(show_condition="!loading && pagination.total > 0") }}
<!-- 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='updateStatus()',
loading_var='saving'
) }}
<template x-if="showStatusModal && selectedOrder">
<div class="mb-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Update status for order <span class="font-semibold" x-text="selectedOrder.order_number || `#${selectedOrder.id}`"></span>
</p>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
<select
x-model="newStatus"
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
>
<template x-for="status in statuses" :key="status.value">
<option :value="status.value" x-text="status.label"></option>
</template>
</select>
{% call modal_simple('updateStatusModal', 'Update Order Status', show_var='showStatusModal', size='sm') %}
<div class="space-y-4">
<template x-if="selectedOrder">
<div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Update status for order <span class="font-semibold" x-text="selectedOrder.order_number || `#${selectedOrder.id}`"></span>
</p>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
<select
x-model="newStatus"
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
>
<template x-for="status in statuses" :key="status.value">
<option :value="status.value" x-text="status.label"></option>
</template>
</select>
</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="updateStatus()"
: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>
</template>
</div>
{% endcall %}
<!-- Bulk Status Update Modal -->
{{ modal_simple(
show_var='showBulkStatusModal',
title='Bulk Update Status',
icon='pencil-square',
icon_color='blue',
confirm_text='Update All',
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
confirm_fn='bulkUpdateStatus()',
loading_var='saving'
) }}
<template x-if="showBulkStatusModal">
<div class="mb-4">
{% call modal_simple('bulkUpdateStatusModal', 'Bulk Update Status', show_var='showBulkStatusModal', size='sm') %}
<div class="space-y-4">
<div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Update status for <span class="font-semibold" x-text="selectedOrders.length"></span> selected order(s)
</p>
@@ -319,7 +315,19 @@
</template>
</select>
</div>
</template>
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showBulkStatusModal = 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="bulkUpdateStatus()"
:disabled="saving || !bulkStatus"
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 All</button>
</div>
</div>
{% endcall %}
{% endblock %}
{% block extra_scripts %}