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

151
app/templates/vendor/inventory.html vendored
View File

@@ -253,84 +253,85 @@
{{ pagination(show_condition="!loading && pagination.total > 0") }}
<!-- Adjust Stock Modal -->
{{ modal_simple(
show_var='showAdjustModal',
title='Adjust Stock',
icon='plus-minus',
icon_color='blue',
confirm_text='Adjust',
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
confirm_fn='executeAdjust()',
loading_var='saving'
) }}
<template x-if="showAdjustModal && selectedItem">
<div class="mb-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
<span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
</p>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
<input
type="number"
x-model.number="adjustForm.quantity"
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"
placeholder="e.g., 10 or -5"
/>
</div>
{% call modal_simple('adjustStockModal', 'Adjust Stock', show_var='showAdjustModal', size='sm') %}
<div class="space-y-4">
<template x-if="selectedItem">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
<input
type="text"
x-model="adjustForm.reason"
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"
placeholder="e.g., Restock, Damaged goods"
/>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
<span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
</p>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
<input
type="number"
x-model.number="adjustForm.quantity"
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"
placeholder="e.g., 10 or -5"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
<input
type="text"
x-model="adjustForm.reason"
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"
placeholder="e.g., Restock, Damaged goods"
/>
</div>
</div>
</template>
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showAdjustModal = 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="executeAdjust()"
: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"
>Adjust</button>
</div>
</template>
</div>
{% endcall %}
<!-- Set Quantity Modal -->
{{ modal_simple(
show_var='showSetModal',
title='Set Quantity',
icon='pencil',
icon_color='purple',
confirm_text='Set',
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
confirm_fn='executeSet()',
loading_var='saving'
) }}
<template x-if="showSetModal && selectedItem">
<div class="mb-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
</p>
{% call modal_simple('setQuantityModal', 'Set Quantity', show_var='showSetModal', size='sm') %}
<div class="space-y-4">
<template x-if="selectedItem">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Quantity</label>
<input
type="number"
x-model.number="setForm.quantity"
min="0"
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"
/>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
</p>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Quantity</label>
<input
type="number"
x-model.number="setForm.quantity"
min="0"
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"
/>
</div>
</div>
</template>
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showSetModal = 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="executeSet()"
: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"
>Set</button>
</div>
</template>
</div>
{% endcall %}
<!-- Bulk Adjust Modal -->
{{ modal_simple(
show_var='showBulkAdjustModal',
title='Bulk Adjust Stock',
icon='plus-minus',
icon_color='blue',
confirm_text='Adjust All',
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
confirm_fn='bulkAdjust()',
loading_var='saving'
) }}
<template x-if="showBulkAdjustModal">
<div class="mb-4">
{% call modal_simple('bulkAdjustModal', 'Bulk Adjust Stock', show_var='showBulkAdjustModal', size='sm') %}
<div class="space-y-4">
<div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Adjust stock for <span class="font-semibold" x-text="selectedItems.length"></span> selected item(s)
</p>
@@ -353,7 +354,19 @@
/>
</div>
</div>
</template>
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button
@click="showBulkAdjustModal = 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="bulkAdjust()"
: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"
>Adjust All</button>
</div>
</div>
{% endcall %}
{% endblock %}
{% block extra_scripts %}