Samir Boulahtit
45260b6b82
Some checks failed
- Move platforms menu from CMS to Platform Admin section with create/edit - Add platform create page, API endpoint, and service method - Remove CMS-specific content from platform list and detail pages - Create shared entity_selector + entity_selected_badge Jinja macros - Create entity-selector.js generalizing store-selector.js for any entity - Add Tom Select merchant filter to stores page with localStorage persistence - Migrate store-products page to use shared macros (remove 53 lines of duped CSS) - Fix broken icons: puzzle→puzzle-piece, building-storefront→store, language→translate, server→cube Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
442 lines
17 KiB
HTML
442 lines
17 KiB
HTML
{#
|
|
Input Macros
|
|
============
|
|
Reusable input components with Alpine.js integration.
|
|
|
|
Usage:
|
|
{% from 'shared/macros/inputs.html' import search_autocomplete %}
|
|
|
|
{{ search_autocomplete(
|
|
search_var='userSearchQuery',
|
|
results_var='userSearchResults',
|
|
show_dropdown_var='showUserDropdown',
|
|
loading_var='searchingUsers',
|
|
disabled_var='transferring',
|
|
select_action='selectUser(user)',
|
|
display_field='username',
|
|
secondary_field='email',
|
|
placeholder='Search by name or email...'
|
|
) }}
|
|
#}
|
|
|
|
|
|
{#
|
|
Search Autocomplete
|
|
===================
|
|
A search input with dropdown results for autocomplete functionality.
|
|
|
|
Parameters:
|
|
- search_var: Alpine.js variable for search query (required)
|
|
- results_var: Alpine.js variable containing search results array (required)
|
|
- show_dropdown_var: Alpine.js variable controlling dropdown visibility (required)
|
|
- loading_var: Alpine.js variable for loading state (default: 'searching')
|
|
- disabled_var: Alpine.js variable for disabled state (default: none)
|
|
- search_action: Alpine.js action on input (default: 'search()')
|
|
- select_action: Alpine.js action when item selected, receives 'item' (required)
|
|
- selected_check: Alpine.js expression to check if item is selected (optional)
|
|
- display_field: Field name for primary display text (default: 'name')
|
|
- secondary_field: Field name for secondary text (optional)
|
|
- id_field: Field name for item ID (default: 'id')
|
|
- placeholder: Input placeholder text (default: 'Search...')
|
|
- min_chars: Minimum characters before showing results (default: 2)
|
|
- no_results_text: Text when no results found (default: 'No results found')
|
|
- loading_text: Text while loading (default: 'Searching...')
|
|
#}
|
|
{% macro search_autocomplete(
|
|
search_var,
|
|
results_var,
|
|
show_dropdown_var,
|
|
loading_var='searching',
|
|
disabled_var=none,
|
|
search_action='search()',
|
|
select_action='selectItem(item)',
|
|
selected_check=none,
|
|
display_field='name',
|
|
secondary_field=none,
|
|
id_field='id',
|
|
placeholder='Search...',
|
|
min_chars=2,
|
|
no_results_text='No results found',
|
|
loading_text='Searching...'
|
|
) %}
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
x-model="{{ search_var }}"
|
|
@input="{{ search_action }}"
|
|
@focus="{{ show_dropdown_var }} = true"
|
|
{% if disabled_var %}:disabled="{{ disabled_var }}"{% endif %}
|
|
placeholder="{{ placeholder }}"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
>
|
|
|
|
{# Search Results Dropdown #}
|
|
<div
|
|
x-show="{{ show_dropdown_var }} && {{ results_var }}.length > 0"
|
|
x-cloak
|
|
@click.away="{{ show_dropdown_var }} = false"
|
|
class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"
|
|
>
|
|
<template x-for="item in {{ results_var }}" :key="item.{{ id_field }}">
|
|
<button
|
|
type="button"
|
|
@click="{{ select_action }}"
|
|
class="w-full px-4 py-2 text-left text-sm hover:bg-purple-50 dark:hover:bg-gray-600 focus:outline-none"
|
|
{% if selected_check %}:class="{ 'bg-purple-50 dark:bg-gray-600': {{ selected_check }} }"{% endif %}
|
|
>
|
|
<div class="font-medium text-gray-700 dark:text-gray-200" x-text="item.{{ display_field }}"></div>
|
|
{% if secondary_field %}
|
|
<div class="text-xs text-gray-500 dark:text-gray-400" x-text="item.{{ secondary_field }}"></div>
|
|
{% endif %}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
{# No Results #}
|
|
<div
|
|
x-show="{{ show_dropdown_var }} && {{ search_var }}.length >= {{ min_chars }} && {{ results_var }}.length === 0 && !{{ loading_var }}"
|
|
class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
|
|
>
|
|
{{ no_results_text }}
|
|
</div>
|
|
|
|
{# Loading #}
|
|
<div
|
|
x-show="{{ loading_var }}"
|
|
class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
|
|
>
|
|
<span x-html="$icon('spinner', 'w-4 h-4 inline mr-2')"></span>
|
|
{{ loading_text }}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Selected Item Display
|
|
=====================
|
|
A display component for showing the currently selected item with clear button.
|
|
|
|
Parameters:
|
|
- selected_var: Alpine.js variable containing selected item (required)
|
|
- display_field: Field name for primary display text (default: 'name')
|
|
- secondary_field: Field name for secondary text (optional)
|
|
- clear_action: Alpine.js action to clear selection (required)
|
|
- label: Label text before the selection (default: 'Selected:')
|
|
#}
|
|
{% macro selected_item_display(
|
|
selected_var,
|
|
display_field='name',
|
|
secondary_field=none,
|
|
clear_action='clearSelection()',
|
|
label='Selected:'
|
|
) %}
|
|
<div x-show="{{ selected_var }}" class="mt-2 p-2 bg-purple-50 dark:bg-purple-900 rounded-lg text-sm">
|
|
<span class="text-purple-700 dark:text-purple-300">
|
|
{{ label }} <strong x-text="{{ selected_var }}?.{{ display_field }}"></strong>
|
|
{% if secondary_field %}
|
|
(<span x-text="{{ selected_var }}?.{{ secondary_field }}"></span>)
|
|
{% endif %}
|
|
</span>
|
|
<button type="button" @click="{{ clear_action }}" class="ml-2 text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
|
<span x-html="$icon('x', 'w-4 h-4 inline')"></span>
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Number Stepper
|
|
==============
|
|
A number input with +/- buttons for incrementing/decrementing values.
|
|
Useful for quantity selectors in carts, product pages, batch sizes, etc.
|
|
|
|
Parameters:
|
|
- model: Alpine.js x-model variable (required)
|
|
- min: Minimum allowed value (default: 1)
|
|
- max: Maximum allowed value (default: none - unlimited)
|
|
- step: Increment/decrement step (default: 1)
|
|
- size: 'sm' | 'md' | 'lg' (default: 'md')
|
|
- disabled_var: Alpine.js variable for disabled state (optional)
|
|
- name: Input name for form submission (optional)
|
|
- id: Input id attribute (optional)
|
|
- label: Accessible label for screen readers (default: 'Quantity')
|
|
|
|
Usage:
|
|
{{ number_stepper(model='quantity', min=1, max=99) }}
|
|
{{ number_stepper(model='cart.items[index].qty', min=1, max='item.stock', size='sm') }}
|
|
{{ number_stepper(model='batchSize', min=100, max=5000, step=100, size='lg') }}
|
|
#}
|
|
{% macro number_stepper(
|
|
model,
|
|
min=1,
|
|
max=none,
|
|
step=1,
|
|
size='md',
|
|
disabled_var=none,
|
|
name=none,
|
|
id=none,
|
|
label='Quantity'
|
|
) %}
|
|
{% set sizes = {
|
|
'sm': {
|
|
'btn': 'px-2 py-1',
|
|
'input': 'px-2 py-1 text-xs w-12',
|
|
'icon': 'w-3 h-3'
|
|
},
|
|
'md': {
|
|
'btn': 'px-3 py-2',
|
|
'input': 'px-3 py-2 text-sm w-16',
|
|
'icon': 'w-4 h-4'
|
|
},
|
|
'lg': {
|
|
'btn': 'px-4 py-3',
|
|
'input': 'px-4 py-3 text-base w-20',
|
|
'icon': 'w-5 h-5'
|
|
}
|
|
} %}
|
|
{% set s = sizes[size] %}
|
|
<div class="flex" role="group" aria-label="{{ label }}">
|
|
<button
|
|
type="button"
|
|
@click="{{ model }} = Math.max({{ min }}, {{ model }} - {{ step }})"
|
|
{% if disabled_var %}:disabled="{{ disabled_var }}"{% endif %}
|
|
{% if max %}:disabled="{{ model }} <= {{ min }}"{% endif %}
|
|
class="{{ s.btn }} text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
aria-label="Decrease {{ label|lower }}"
|
|
>
|
|
<span x-html="$icon('minus', '{{ s.icon }}')"></span>
|
|
</button>
|
|
<input
|
|
type="number"
|
|
x-model.number="{{ model }}"
|
|
{% if name %}name="{{ name }}"{% endif %}
|
|
{% if id %}id="{{ id }}"{% endif %}
|
|
min="{{ min }}"
|
|
{% if max %}:max="{{ max }}" max="{{ max }}"{% endif %}
|
|
step="{{ step }}"
|
|
{% if disabled_var %}:disabled="{{ disabled_var }}"{% endif %}
|
|
class="no-spinner {{ s.input }} text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10"
|
|
aria-label="{{ label }}"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="{{ model }} = {% if max %}Math.min({{ max }}, {{ model }} + {{ step }}){% else %}{{ model }} + {{ step }}{% endif %}"
|
|
{% if disabled_var %}:disabled="{{ disabled_var }}"{% endif %}
|
|
{% if max %}:disabled="{{ model }} >= {{ max }}"{% endif %}
|
|
class="{{ s.btn }} text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
aria-label="Increase {{ label|lower }}"
|
|
>
|
|
<span x-html="$icon('plus', '{{ s.icon }}')"></span>
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Store Selector (Tom Select)
|
|
============================
|
|
An async searchable store selector using Tom Select.
|
|
Searches stores by name and code with autocomplete.
|
|
|
|
Prerequisites:
|
|
- Tom Select CSS/JS must be loaded (included in admin/base.html)
|
|
- store-selector.js must be loaded
|
|
|
|
Parameters:
|
|
- ref_name: Alpine.js x-ref name for the select element (default: 'storeSelect')
|
|
- id: HTML id attribute (default: 'store-select')
|
|
- placeholder: Placeholder text (default: 'Search store by name or code...')
|
|
- width: CSS width class (default: 'w-80')
|
|
- on_init: JS callback name when Tom Select is initialized (optional)
|
|
|
|
Usage:
|
|
{% from 'shared/macros/inputs.html' import store_selector %}
|
|
|
|
{{ store_selector(
|
|
ref_name='storeSelect',
|
|
placeholder='Select a store...',
|
|
width='w-96'
|
|
) }}
|
|
|
|
// In your Alpine.js component init():
|
|
this.$nextTick(() => {
|
|
initStoreSelector(this.$refs.storeSelect, {
|
|
onSelect: (store) => this.onStoreSelected(store),
|
|
onClear: () => this.onStoreCleared()
|
|
});
|
|
});
|
|
#}
|
|
{% macro store_selector(
|
|
ref_name='storeSelect',
|
|
id='store-select',
|
|
placeholder='Search store by name or code...',
|
|
width='w-80'
|
|
) %}
|
|
<div class="{{ width }}">
|
|
<select
|
|
id="{{ id }}"
|
|
x-ref="{{ ref_name }}"
|
|
placeholder="{{ placeholder }}"
|
|
aria-label="Store selector"
|
|
></select>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Entity Selector (Tom Select)
|
|
============================
|
|
A generic async searchable entity selector using Tom Select.
|
|
Works for stores, merchants, platforms, or any entity with a search API.
|
|
|
|
Includes Tom Select dark mode CSS overrides (no need to add per page).
|
|
|
|
Parameters:
|
|
- ref_name: Alpine.js x-ref name for the select element (default: 'entitySelect')
|
|
- id: HTML id attribute (default: 'entity-select')
|
|
- placeholder: Placeholder text (default: 'Search...')
|
|
- width: CSS width class (default: 'w-80')
|
|
- label: Accessible label (default: 'Entity selector')
|
|
|
|
Usage:
|
|
{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
|
|
|
|
{{ entity_selector(ref_name='merchantSelect', id='merchant-select', placeholder='Filter by merchant...') }}
|
|
{{ entity_selected_badge(entity_var='selectedMerchant', clear_fn='clearMerchantFilter()', color='blue') }}
|
|
#}
|
|
{% macro entity_selector(
|
|
ref_name='entitySelect',
|
|
id='entity-select',
|
|
placeholder='Search...',
|
|
width='w-80',
|
|
label='Entity selector'
|
|
) %}
|
|
{# Dark mode CSS is in admin/base.html — no need to duplicate here #}
|
|
<div class="{{ width }}">
|
|
<select
|
|
id="{{ id }}"
|
|
x-ref="{{ ref_name }}"
|
|
placeholder="{{ placeholder }}"
|
|
aria-label="{{ label }}"
|
|
></select>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Entity Selected Badge
|
|
=====================
|
|
Displays the currently selected entity as a badge with avatar, name, optional code, and clear button.
|
|
|
|
Parameters:
|
|
- entity_var: Alpine.js variable name holding the selected entity (e.g. 'selectedStore')
|
|
- clear_fn: Alpine.js function to call on clear (e.g. 'clearStoreFilter()')
|
|
- name_field: Field name for entity name (default: 'name')
|
|
- code_field: Field name for secondary code display (default: None, omitted if None)
|
|
- color: Color scheme - 'purple', 'blue', 'teal', 'green' (default: 'purple')
|
|
|
|
Usage:
|
|
{{ entity_selected_badge(
|
|
entity_var='selectedStore',
|
|
clear_fn='clearStoreFilter()',
|
|
code_field='store_code',
|
|
color='purple'
|
|
) }}
|
|
#}
|
|
{% macro entity_selected_badge(
|
|
entity_var='selectedEntity',
|
|
clear_fn='clearEntityFilter()',
|
|
name_field='name',
|
|
code_field=None,
|
|
color='purple'
|
|
) %}
|
|
{% set bg = 'bg-' ~ color ~ '-50 dark:bg-' ~ color ~ '-900/20' %}
|
|
{% set border = 'border-' ~ color ~ '-200 dark:border-' ~ color ~ '-800' %}
|
|
{% set avatar_bg = 'bg-' ~ color ~ '-100 dark:bg-' ~ color ~ '-900' %}
|
|
{% set avatar_text = 'text-' ~ color ~ '-600 dark:text-' ~ color ~ '-300' %}
|
|
{% set name_text = 'text-' ~ color ~ '-800 dark:text-' ~ color ~ '-200' %}
|
|
{% set code_text = 'text-' ~ color ~ '-600 dark:text-' ~ color ~ '-400' %}
|
|
{% set btn_text = 'text-' ~ color ~ '-600 dark:text-' ~ color ~ '-400 hover:text-' ~ color ~ '-800 dark:hover:text-' ~ color ~ '-200' %}
|
|
<div x-show="{{ entity_var }}" x-transition class="mb-6 p-3 {{ bg }} rounded-lg border {{ border }}">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full {{ avatar_bg }} flex items-center justify-center">
|
|
<span class="text-sm font-semibold {{ avatar_text }}" x-text="{{ entity_var }}?.{{ name_field }}?.charAt(0).toUpperCase()"></span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium {{ name_text }}" x-text="{{ entity_var }}?.{{ name_field }}"></span>
|
|
{% if code_field %}
|
|
<span class="ml-2 text-xs {{ code_text }} font-mono" x-text="{{ entity_var }}?.{{ code_field }}"></span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<button @click="{{ clear_fn }}" class="{{ btn_text }} text-sm flex items-center gap-1">
|
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
|
Clear filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Toggle Switch
|
|
=============
|
|
A toggle switch component for binary options (on/off, monthly/annual, etc.)
|
|
with optional labels on both sides.
|
|
|
|
Parameters:
|
|
- model: Alpine.js x-model variable (required)
|
|
- left_label: Label for the "off" state (optional)
|
|
- right_label: Label for the "on" state (optional)
|
|
- right_badge: Small badge/extra text for right label (optional)
|
|
- size: 'sm' | 'md' | 'lg' (default: 'md')
|
|
- color: Tailwind color name for active state (default: 'indigo')
|
|
|
|
Usage:
|
|
{{ toggle_switch(model='annual', left_label='Monthly', right_label='Annual', right_badge='Save 2 months') }}
|
|
{{ toggle_switch(model='darkMode', size='sm') }}
|
|
#}
|
|
{% macro toggle_switch(
|
|
model,
|
|
left_label=none,
|
|
right_label=none,
|
|
right_badge=none,
|
|
size='md',
|
|
color='indigo'
|
|
) %}
|
|
{% set sizes = {
|
|
'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'translate': 'translate-x-5', 'text': 'text-sm'},
|
|
'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'translate': 'translate-x-7', 'text': 'text-base'},
|
|
'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'translate': 'translate-x-8', 'text': 'text-lg'}
|
|
} %}
|
|
{% set s = sizes[size] %}
|
|
<div class="inline-flex items-center gap-3">
|
|
{% if left_label %}
|
|
<span class="{{ s.text }} text-gray-700 dark:text-gray-300 select-none"
|
|
:class="{ 'font-semibold': !{{ model }} }">{{ left_label }}</span>
|
|
{% endif %}
|
|
|
|
<button type="button"
|
|
@click="{{ model }} = !{{ model }}"
|
|
role="switch"
|
|
:aria-checked="{{ model }}"
|
|
class="{{ s.track }} relative inline-flex items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-{{ color }}-500 focus:ring-offset-2"
|
|
:class="{{ model }} ? 'bg-{{ color }}-600' : 'bg-gray-300 dark:bg-gray-600'">
|
|
<span class="{{ s.thumb }} absolute left-0.5 bg-white rounded-full shadow-md transition-transform duration-200"
|
|
:class="{{ model }} ? '{{ s.translate }}' : 'translate-x-0'"></span>
|
|
</button>
|
|
|
|
{% if right_label %}
|
|
<span class="{{ s.text }} text-gray-700 dark:text-gray-300 select-none"
|
|
:class="{ 'font-semibold': {{ model }} }">
|
|
{{ right_label }}
|
|
{% if right_badge %}
|
|
<span class="text-green-600 dark:text-green-400 text-sm font-medium ml-1">{{ right_badge }}</span>
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|