sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

102
app/templates/vendor/team.html vendored
View File

@@ -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 %}