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

refactor(templates): migrate 5 admin pages to shared entity selector macros
Some checks failed
CI / ruff (push) Successful in 12s
Details
CI / validate (push) Has been cancelled
Details
CI / dependency-scanning (push) Has been cancelled
Details
CI / docs (push) Has been cancelled
Details
CI / deploy (push) Has been cancelled
Details
CI / pytest (push) Has been cancelled
Details

Browse Source 
Remove duplicate Tom Select dark mode CSS (~280 lines) from customers,
orders, store-product-create, marketplace-letzshop, and marketplace-products
pages. Replace inline store select elements and selected badges with
entity_selector() and entity_selected_badge() macros.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-03-06 23:11:58 +01:00
parent 45260b6b82
commit 802cc6b137
5 changed files with 14 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/modules/catalog/templates/catalog/admin/store-product-create.html
View File

@@ -3,6 +3,7 @@
{% from 'shared/macros/headers.html' import detail_page_header %}
{% from 'shared/macros/modals.html' import media_picker_modal %}
{% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}
{% from 'shared/macros/inputs.html' import entity_selector %}
{% block title %}Create Store Product{% endblock %}
@@ -16,48 +17,6 @@
{{ quill_js() }}
{% endblock %}
{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
/>
<style>
/* Tom Select dark mode overrides */
.dark .ts-wrapper .ts-control {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input {
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input::placeholder {
color: rgb(156 163 175);
}
.dark .ts-dropdown {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-dropdown .option {
color: rgb(209 213 219);
}
.dark .ts-dropdown .option.active {
background-color: rgb(147 51 234);
color: white;
}
.dark .ts-dropdown .option:hover {
background-color: rgb(75 85 99);
}
.dark .ts-wrapper.focus .ts-control {
border-color: rgb(147 51 234);
box-shadow: 0 0 0 1px rgb(147 51 234);
}
</style>
{% endblock %}
{% block content %}
{% call detail_page_header("'Create Store Product'", '/admin/store-products') %}
<span>Add a new product to a store's catalog</span>
@@ -72,8 +31,7 @@
</h3>
<div class="max-w-md">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Store <span class="text-red-500">*</span></label>
<select id="store-select" x-ref="storeSelect" placeholder="Search store...">
</select>
{{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Search store...', width='w-full') }}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">The store whose catalog this product will be added to</p>
</div>
</div>

66
app/modules/customers/templates/customers/admin/customers.html
View File

@@ -5,84 +5,24 @@
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
{% block title %}Customers{% endblock %}
{% block alpine_data %}adminCustomers(){% endblock %}
{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
/>
<style>
/* Tom Select dark mode overrides */
.dark .ts-wrapper .ts-control {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input {
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input::placeholder {
color: rgb(156 163 175);
}
.dark .ts-dropdown {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-dropdown .option {
color: rgb(209 213 219);
}
.dark .ts-dropdown .option.active {
background-color: rgb(147 51 234);
color: white;
}
.dark .ts-dropdown .option:hover {
background-color: rgb(75 85 99);
}
.dark .ts-wrapper.focus .ts-control {
border-color: rgb(147 51 234);
box-shadow: 0 0 0 1px rgb(147 51 234);
}
</style>
{% endblock %}
{% block content %}
<!-- Page Header with Store Selector -->
{% call page_header_flex(title='Customer Management', subtitle='Manage customers across all stores') %}
<div class="flex items-center gap-4">
<!-- Store Autocomplete (Tom Select) -->
<div class="w-80">
<select id="store-select" x-ref="storeSelect" placeholder="Filter by store...">
</select>
</div>
{{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Filter by store...') }}
{{ refresh_button(loading_var='loading', onclick='resetAndLoad()', variant='secondary') }}
</div>
{% endcall %}
<!-- Selected Store Info -->
<div x-show="selectedStore" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedStore?.name?.charAt(0).toUpperCase()"></span>
</div>
<div>
<span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedStore?.name"></span>
<span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedStore?.store_code"></span>
</div>
</div>
<button @click="clearStoreFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
<span x-html="$icon('x', 'w-4 h-4')"></span>
Clear filter
</button>
</div>
</div>
{{ entity_selected_badge(entity_var='selectedStore', clear_fn='clearStoreFilter()', code_field='store_code', color='purple') }}
{{ loading_state('Loading customers...') }}

48
app/modules/marketplace/templates/marketplace/admin/marketplace-letzshop.html
View File

@@ -5,61 +5,17 @@
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{# Import modals macro - custom modals below use inline definition for specialized forms #}
{% from 'shared/macros/modals.html' import modal_simple, confirm_modal %}
{% from 'shared/macros/inputs.html' import entity_selector %}
{% block title %}Letzshop Management{% endblock %}
{% block alpine_data %}adminMarketplaceLetzshop(){% endblock %}
{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
/>
<style>
/* Tom Select dark mode overrides */
.dark .ts-wrapper .ts-control {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input {
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input::placeholder {
color: rgb(156 163 175);
}
.dark .ts-dropdown {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-dropdown .option {
color: rgb(209 213 219);
}
.dark .ts-dropdown .option.active {
background-color: rgb(147 51 234);
color: white;
}
.dark .ts-dropdown .option:hover {
background-color: rgb(75 85 99);
}
.dark .ts-wrapper.focus .ts-control {
border-color: rgb(147 51 234);
box-shadow: 0 0 0 1px rgb(147 51 234);
}
</style>
{% endblock %}
{% block content %}
<!-- Page Header with Store Selector -->
{% call page_header_flex(title='Letzshop Management', subtitle='Manage Letzshop integration for stores') %}
<div class="flex items-center gap-4">
<!-- Store Autocomplete (Tom Select) -->
<div class="w-80">
<select id="store-select" x-ref="storeSelect" placeholder="Search store...">
</select>
</div>
{{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Search store...') }}
{{ refresh_button(loading_var='loading', onclick='refreshData()', variant='secondary') }}
</div>
{% endcall %}

66
app/modules/marketplace/templates/marketplace/admin/marketplace-products.html
View File

@@ -5,84 +5,24 @@
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/modals.html' import modal_simple %}
{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
{% block title %}Marketplace Products{% endblock %}
{% block alpine_data %}adminMarketplaceProducts(){% endblock %}
{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
/>
<style>
/* Tom Select dark mode overrides */
.dark .ts-wrapper .ts-control {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input {
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input::placeholder {
color: rgb(156 163 175);
}
.dark .ts-dropdown {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-dropdown .option {
color: rgb(209 213 219);
}
.dark .ts-dropdown .option.active {
background-color: rgb(147 51 234);
color: white;
}
.dark .ts-dropdown .option:hover {
background-color: rgb(75 85 99);
}
.dark .ts-wrapper.focus .ts-control {
border-color: rgb(147 51 234);
box-shadow: 0 0 0 1px rgb(147 51 234);
}
</style>
{% endblock %}
{% block content %}
<!-- Page Header with Store Selector -->
{% call page_header_flex(title='Marketplace Products', subtitle='Master product repository - Browse all imported products from external sources') %}
<div class="flex items-center gap-4">
<!-- Store Autocomplete (Tom Select) -->
<div class="w-80">
<select id="store-select" x-ref="storeSelect" placeholder="Filter by store...">
</select>
</div>
{{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Filter by store...') }}
{{ refresh_button(loading_var='loading', onclick='refresh()', variant='secondary') }}
</div>
{% endcall %}
<!-- Selected Store Info -->
<div x-show="selectedStore" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedStore?.name?.charAt(0).toUpperCase()"></span>
</div>
<div>
<span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedStore?.name"></span>
<span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedStore?.store_code"></span>
</div>
</div>
<button @click="clearStoreFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
<span x-html="$icon('x', 'w-4 h-4')"></span>
Clear filter
</button>
</div>
</div>
{{ entity_selected_badge(entity_var='selectedStore', clear_fn='clearStoreFilter()', code_field='store_code', color='purple') }}
{{ loading_state('Loading products...') }}

69
app/modules/orders/templates/orders/admin/orders.html
View File

@@ -5,85 +5,24 @@
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper %}
{% from 'shared/macros/modals.html' import modal_simple %}
{% from 'shared/macros/inputs.html' import store_selector %}
{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
{% block title %}Orders{% endblock %}
{% block alpine_data %}adminOrders(){% endblock %}
{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
/>
<style>
/* Tom Select dark mode overrides */
.dark .ts-wrapper .ts-control {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input {
color: rgb(209 213 219);
}
.dark .ts-wrapper .ts-control input::placeholder {
color: rgb(156 163 175);
}
.dark .ts-dropdown {
background-color: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
}
.dark .ts-dropdown .option {
color: rgb(209 213 219);
}
.dark .ts-dropdown .option.active {
background-color: rgb(147 51 234);
color: white;
}
.dark .ts-dropdown .option:hover {
background-color: rgb(75 85 99);
}
.dark .ts-wrapper.focus .ts-control {
border-color: rgb(147 51 234);
box-shadow: 0 0 0 1px rgb(147 51 234);
}
</style>
{% endblock %}
{% block content %}
<!-- Page Header with Store Selector -->
{% call page_header_flex(title='Orders', subtitle='Manage orders across all stores') %}
<div class="flex items-center gap-4">
<!-- Store Autocomplete (Tom Select) -->
<div class="w-80">
<select id="store-select" x-ref="storeSelect" placeholder="Search store...">
</select>
</div>
{{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Search store...') }}
{{ refresh_button(loading_var='loading', onclick='refresh()', variant='secondary') }}
</div>
{% endcall %}
<!-- Selected Store Info (optional display) -->
<div x-show="selectedStore" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedStore?.name?.charAt(0).toUpperCase()"></span>
</div>
<div>
<span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedStore?.name"></span>
<span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedStore?.store_code"></span>
</div>
</div>
<button @click="clearStoreFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
<span x-html="$icon('x', 'w-4 h-4')"></span>
Clear filter
</button>
</div>
</div>
<!-- Selected Store Info -->
{{ entity_selected_badge(entity_var='selectedStore', clear_fn='clearStoreFilter()', code_field='store_code', color='purple') }}
{{ loading_state('Loading orders...') }}