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:
151
app/templates/vendor/inventory.html
vendored
151
app/templates/vendor/inventory.html
vendored
@@ -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 %}
|
||||
|
||||
98
app/templates/vendor/order-detail.html
vendored
98
app/templates/vendor/order-detail.html
vendored
@@ -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 %}
|
||||
|
||||
84
app/templates/vendor/orders.html
vendored
84
app/templates/vendor/orders.html
vendored
@@ -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 %}
|
||||
|
||||
66
app/templates/vendor/products.html
vendored
66
app/templates/vendor/products.html
vendored
@@ -319,40 +319,48 @@
|
||||
{{ pagination(show_condition="!loading && pagination.total > 0") }}
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
{{ modal_simple(
|
||||
show_var='showDeleteModal',
|
||||
title='Delete Product',
|
||||
icon='exclamation-triangle',
|
||||
icon_color='red',
|
||||
confirm_text='Delete',
|
||||
confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
|
||||
confirm_fn='deleteProduct()',
|
||||
loading_var='saving'
|
||||
) }}
|
||||
<template x-if="showDeleteModal && selectedProduct">
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Are you sure you want to delete <span class="font-semibold" x-text="selectedProduct.name"></span>?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</template>
|
||||
{% call modal_simple('deleteProductModal', 'Delete Product', show_var='showDeleteModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<template x-if="selectedProduct">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Are you sure you want to delete <span class="font-semibold" x-text="selectedProduct.name"></span>?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</template>
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showDeleteModal = 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="deleteProduct()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
|
||||
>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Bulk Delete Confirmation Modal -->
|
||||
{{ modal_simple(
|
||||
show_var='showBulkDeleteModal',
|
||||
title='Delete Selected Products',
|
||||
icon='exclamation-triangle',
|
||||
icon_color='red',
|
||||
confirm_text='Delete All',
|
||||
confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
|
||||
confirm_fn='bulkDelete()',
|
||||
loading_var='saving'
|
||||
) }}
|
||||
<template x-if="showBulkDeleteModal">
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
{% call modal_simple('bulkDeleteProductModal', 'Delete Selected Products', show_var='showBulkDeleteModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Are you sure you want to delete <span class="font-semibold" x-text="selectedProducts.length"></span> selected product(s)?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</template>
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showBulkDeleteModal = 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="bulkDelete()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
|
||||
>Delete All</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
|
||||
102
app/templates/vendor/team.html
vendored
102
app/templates/vendor/team.html
vendored
@@ -222,56 +222,66 @@
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
{{ modal_simple(
|
||||
show_var='showEditModal',
|
||||
title='Edit Team Member',
|
||||
icon='pencil',
|
||||
icon_color='blue',
|
||||
confirm_text='Save',
|
||||
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
|
||||
confirm_fn='updateMember()',
|
||||
loading_var='saving'
|
||||
) }}
|
||||
<template x-if="showEditModal && selectedMember">
|
||||
<div class="mb-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Edit <span class="font-semibold" x-text="selectedMember.email"></span>
|
||||
</p>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
|
||||
<select
|
||||
x-model="editForm.role_id"
|
||||
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="role in roles" :key="role.id">
|
||||
<option :value="role.id" x-text="role.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" x-model="editForm.is_active" id="is_active" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500" />
|
||||
<label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</label>
|
||||
{% call modal_simple('editTeamMemberModal', 'Edit Team Member', show_var='showEditModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<template x-if="selectedMember">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Edit <span class="font-semibold" x-text="selectedMember.email"></span>
|
||||
</p>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
|
||||
<select
|
||||
x-model="editForm.role_id"
|
||||
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="role in roles" :key="role.id">
|
||||
<option :value="role.id" x-text="role.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" x-model="editForm.is_active" id="is_active" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500" />
|
||||
<label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</label>
|
||||
</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="showEditModal = 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="updateMember()"
|
||||
: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"
|
||||
>Save</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Remove Confirmation Modal -->
|
||||
{{ modal_simple(
|
||||
show_var='showRemoveModal',
|
||||
title='Remove Team Member',
|
||||
icon='exclamation-triangle',
|
||||
icon_color='red',
|
||||
confirm_text='Remove',
|
||||
confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
|
||||
confirm_fn='removeMember()',
|
||||
loading_var='saving'
|
||||
) }}
|
||||
<template x-if="showRemoveModal && selectedMember">
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
|
||||
They will lose access to this vendor.
|
||||
</p>
|
||||
</template>
|
||||
{% call modal_simple('removeTeamMemberModal', 'Remove Team Member', show_var='showRemoveModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<template x-if="selectedMember">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
|
||||
They will lose access to this vendor.
|
||||
</p>
|
||||
</template>
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showRemoveModal = 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="removeMember()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
|
||||
>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
|
||||
Reference in New Issue
Block a user