feat(admin): separate platform CRUD from CMS, add entity selector macro
Some checks failed
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>
This commit is contained in:
@@ -5,62 +5,18 @@
|
||||
{% 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 entity_selector, entity_selected_badge %}
|
||||
|
||||
{% block title %}Store Products{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminStoreProducts(){% 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='Store Products', subtitle='Browse store-specific product catalogs with override capability') %}
|
||||
<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') }}
|
||||
<a
|
||||
href="/admin/store-products/create"
|
||||
@@ -73,23 +29,7 @@
|
||||
{% 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...') }}
|
||||
|
||||
|
||||
262
app/modules/core/static/shared/js/entity-selector.js
Normal file
262
app/modules/core/static/shared/js/entity-selector.js
Normal file
@@ -0,0 +1,262 @@
|
||||
// static/shared/js/entity-selector.js
|
||||
/**
|
||||
* Shared Entity Selector Module
|
||||
* ==============================
|
||||
* A configurable Tom Select-based autocomplete for any entity type.
|
||||
* Generalizes store-selector.js to work with stores, merchants, platforms, etc.
|
||||
*
|
||||
* Usage:
|
||||
* const selector = initEntitySelector(this.$refs.merchantSelect, {
|
||||
* apiEndpoint: '/admin/merchants',
|
||||
* responseKey: 'merchants',
|
||||
* searchFields: ['name'],
|
||||
* valueField: 'id',
|
||||
* labelField: 'name',
|
||||
* codeField: null,
|
||||
* onSelect: (entity) => this.onMerchantSelected(entity),
|
||||
* onClear: () => this.onMerchantCleared()
|
||||
* });
|
||||
*
|
||||
* selector.setValue(merchantId, merchantData);
|
||||
* selector.clear();
|
||||
*/
|
||||
|
||||
const entitySelectorLog = window.LogConfig?.loggers?.entitySelector ||
|
||||
window.LogConfig?.createLogger?.('entitySelector', false) ||
|
||||
{ info: console.log, warn: console.warn, error: console.error }; // noqa: js-001 - fallback if logger not ready
|
||||
|
||||
/**
|
||||
* Wait for Tom Select to be available
|
||||
*/
|
||||
function waitForTomSelectReady(callback, maxRetries = 20, retryDelay = 100) {
|
||||
let retries = 0;
|
||||
|
||||
function check() {
|
||||
if (typeof TomSelect !== 'undefined') {
|
||||
callback();
|
||||
} else if (retries < maxRetries) {
|
||||
retries++;
|
||||
setTimeout(check, retryDelay);
|
||||
} else {
|
||||
entitySelectorLog.error('TomSelect not available after maximum retries');
|
||||
}
|
||||
}
|
||||
|
||||
check();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize an entity selector on the given element
|
||||
* @param {HTMLElement} selectElement - The select element to enhance
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {string} options.apiEndpoint - API endpoint for search (e.g. '/admin/merchants')
|
||||
* @param {string} options.responseKey - Key in API response containing the array (e.g. 'merchants')
|
||||
* @param {string} options.valueField - Field used as option value (default: 'id')
|
||||
* @param {string} options.labelField - Field used as display label (default: 'name')
|
||||
* @param {string[]} options.searchFields - Fields to search on (default: ['name'])
|
||||
* @param {string|null} options.codeField - Optional secondary code field for display (e.g. 'store_code')
|
||||
* @param {Function} options.onSelect - Callback when entity is selected (receives entity object)
|
||||
* @param {Function} options.onClear - Callback when selection is cleared
|
||||
* @param {number} options.minChars - Minimum characters before search (default: 2)
|
||||
* @param {number} options.maxOptions - Maximum options to show (default: 50)
|
||||
* @param {string} options.placeholder - Placeholder text
|
||||
* @param {string} options.noResultsText - Text when no results (default: 'No results found')
|
||||
* @returns {Object} Controller object with setValue(), clear(), getInstance(), destroy()
|
||||
*/
|
||||
function initEntitySelector(selectElement, options = {}) {
|
||||
if (!selectElement) {
|
||||
entitySelectorLog.error('Entity selector element not provided');
|
||||
return null;
|
||||
}
|
||||
|
||||
const config = {
|
||||
apiEndpoint: options.apiEndpoint || '/admin/stores',
|
||||
responseKey: options.responseKey || 'stores',
|
||||
valueField: options.valueField || 'id',
|
||||
labelField: options.labelField || 'name',
|
||||
searchFields: options.searchFields || ['name'],
|
||||
codeField: options.codeField || null,
|
||||
minChars: options.minChars || 2,
|
||||
maxOptions: options.maxOptions || 50,
|
||||
placeholder: options.placeholder || selectElement.getAttribute('placeholder') || 'Search...',
|
||||
noResultsText: options.noResultsText || 'No results found',
|
||||
onSelect: options.onSelect || (() => {}),
|
||||
onClear: options.onClear || (() => {})
|
||||
};
|
||||
|
||||
let tomSelectInstance = null;
|
||||
|
||||
const controller = {
|
||||
/**
|
||||
* Set the selected entity by ID
|
||||
* @param {*} entityId - Entity ID to select
|
||||
* @param {Object} entityData - Optional entity data to avoid API call
|
||||
*/
|
||||
setValue: async function(entityId, entityData = null) {
|
||||
if (!tomSelectInstance) return;
|
||||
|
||||
if (entityData) {
|
||||
const optionData = {};
|
||||
optionData[config.valueField] = entityData[config.valueField] || entityId;
|
||||
optionData[config.labelField] = entityData[config.labelField];
|
||||
if (config.codeField) {
|
||||
optionData[config.codeField] = entityData[config.codeField];
|
||||
}
|
||||
tomSelectInstance.addOption(optionData);
|
||||
tomSelectInstance.setValue(optionData[config.valueField], true);
|
||||
} else if (entityId) {
|
||||
try {
|
||||
const response = await apiClient.get(`${config.apiEndpoint}/${entityId}`);
|
||||
const optionData = {};
|
||||
optionData[config.valueField] = response[config.valueField] || entityId;
|
||||
optionData[config.labelField] = response[config.labelField];
|
||||
if (config.codeField) {
|
||||
optionData[config.codeField] = response[config.codeField];
|
||||
}
|
||||
tomSelectInstance.addOption(optionData);
|
||||
tomSelectInstance.setValue(optionData[config.valueField], true);
|
||||
} catch (error) {
|
||||
entitySelectorLog.error('Failed to load entity:', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
if (tomSelectInstance) {
|
||||
tomSelectInstance.clear();
|
||||
}
|
||||
},
|
||||
|
||||
getInstance: function() {
|
||||
return tomSelectInstance;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
if (tomSelectInstance) {
|
||||
tomSelectInstance.destroy();
|
||||
tomSelectInstance = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize Tom Select when available
|
||||
waitForTomSelectReady(() => {
|
||||
entitySelectorLog.info(`Initializing entity selector (${config.responseKey})`);
|
||||
|
||||
// Build render functions
|
||||
const render = {
|
||||
option: function(data, escape) {
|
||||
if (config.codeField && data[config.codeField]) {
|
||||
return `<div class="flex justify-between items-center py-1">
|
||||
<span class="font-medium">${escape(data[config.labelField])}</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500 ml-2 font-mono">${escape(data[config.codeField])}</span>
|
||||
</div>`;
|
||||
}
|
||||
return `<div class="py-1"><span class="font-medium">${escape(data[config.labelField])}</span></div>`;
|
||||
},
|
||||
item: function(data, escape) {
|
||||
if (config.codeField && data[config.codeField]) {
|
||||
return `<div class="flex items-center gap-2">
|
||||
<span>${escape(data[config.labelField])}</span>
|
||||
<span class="text-xs text-gray-400 font-mono">(${escape(data[config.codeField])})</span>
|
||||
</div>`;
|
||||
}
|
||||
return `<div>${escape(data[config.labelField])}</div>`;
|
||||
},
|
||||
no_results: function() {
|
||||
return `<div class="no-results py-2 px-3 text-gray-500 dark:text-gray-400">${config.noResultsText}</div>`;
|
||||
},
|
||||
loading: function() {
|
||||
return '<div class="loading py-2 px-3 text-gray-500 dark:text-gray-400">Searching...</div>';
|
||||
}
|
||||
};
|
||||
|
||||
tomSelectInstance = new TomSelect(selectElement, {
|
||||
valueField: config.valueField,
|
||||
labelField: config.labelField,
|
||||
searchField: config.searchFields,
|
||||
maxOptions: config.maxOptions,
|
||||
placeholder: config.placeholder,
|
||||
|
||||
load: async function(query, callback) {
|
||||
if (query.length < config.minChars) {
|
||||
callback([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const sep = config.apiEndpoint.includes('?') ? '&' : '?';
|
||||
const response = await apiClient.get(
|
||||
`${config.apiEndpoint}${sep}search=${encodeURIComponent(query)}&limit=${config.maxOptions}`
|
||||
);
|
||||
|
||||
const items = (response[config.responseKey] || []).map(v => {
|
||||
const item = {};
|
||||
item[config.valueField] = v[config.valueField];
|
||||
item[config.labelField] = v[config.labelField];
|
||||
if (config.codeField) {
|
||||
item[config.codeField] = v[config.codeField];
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
entitySelectorLog.info(`Found ${items.length} ${config.responseKey} for "${query}"`);
|
||||
callback(items);
|
||||
} catch (error) {
|
||||
entitySelectorLog.error(`${config.responseKey} search failed:`, error);
|
||||
callback([]);
|
||||
}
|
||||
},
|
||||
|
||||
render: render,
|
||||
|
||||
onChange: function(value) {
|
||||
if (value) {
|
||||
const selectedOption = this.options[value];
|
||||
if (selectedOption) {
|
||||
entitySelectorLog.info(`${config.responseKey} selected:`, selectedOption);
|
||||
const entity = {};
|
||||
entity[config.valueField] = config.valueField === 'id' ? parseInt(value) : value;
|
||||
entity[config.labelField] = selectedOption[config.labelField];
|
||||
if (config.codeField) {
|
||||
entity[config.codeField] = selectedOption[config.codeField];
|
||||
}
|
||||
config.onSelect(entity);
|
||||
}
|
||||
} else {
|
||||
entitySelectorLog.info(`${config.responseKey} selection cleared`);
|
||||
config.onClear();
|
||||
}
|
||||
},
|
||||
|
||||
loadThrottle: 150,
|
||||
closeAfterSelect: true,
|
||||
hideSelected: false,
|
||||
persist: true,
|
||||
createOnBlur: false,
|
||||
create: false
|
||||
});
|
||||
|
||||
entitySelectorLog.info(`Entity selector (${config.responseKey}) initialized`);
|
||||
});
|
||||
|
||||
return controller;
|
||||
}
|
||||
|
||||
// Convenience wrapper for store selector (backward compatible)
|
||||
function initStoreSelectorFromEntity(selectElement, options = {}) {
|
||||
return initEntitySelector(selectElement, {
|
||||
apiEndpoint: options.apiEndpoint || '/admin/stores',
|
||||
responseKey: 'stores',
|
||||
valueField: 'id',
|
||||
labelField: 'name',
|
||||
searchFields: ['name', 'store_code'],
|
||||
codeField: 'store_code',
|
||||
placeholder: options.placeholder || 'Search store by name or code...',
|
||||
noResultsText: 'No stores found',
|
||||
...options
|
||||
});
|
||||
}
|
||||
|
||||
// Export to window
|
||||
window.initEntitySelector = initEntitySelector;
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
|
||||
<span x-html="$icon('building-storefront', 'w-5 h-5')"></span>
|
||||
<span x-html="$icon('store', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Stores List</p>
|
||||
@@ -53,7 +53,7 @@
|
||||
<h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">Quick Actions</h4>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="{{ url_for('admin:stores_list') }}" class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none">
|
||||
<span x-html="$icon('building-storefront', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-html="$icon('store', 'w-4 h-4 mr-2')"></span>
|
||||
Go to Stores List
|
||||
</a>
|
||||
<a href="{{ url_for('admin:users_list') }}" class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-green-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none">
|
||||
|
||||
@@ -335,7 +335,7 @@
|
||||
<button @click="runTests('tests/integration')"
|
||||
:disabled="running"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span x-html="$icon('server', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-html="$icon('cube', 'w-4 h-4 mr-2')"></span>
|
||||
Run Integration Tests
|
||||
</button>
|
||||
<button @click="collectTests()"
|
||||
|
||||
@@ -98,7 +98,7 @@ hosting_module = ModuleDefinition(
|
||||
MenuItemDefinition(
|
||||
id="hosting-clients",
|
||||
label_key="hosting.menu.clients",
|
||||
icon="server",
|
||||
icon="cube",
|
||||
route="/admin/hosting/clients",
|
||||
order=10,
|
||||
),
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
</a>
|
||||
<a href="/admin/hosting/clients"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:bg-gray-700">
|
||||
<span x-html="$icon('server', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-html="$icon('cube', 'w-4 h-4 mr-2')"></span>
|
||||
All Services
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="stats.total_stores || 0"></p>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
|
||||
<span x-html="$icon('building-storefront', 'w-5 h-5 text-blue-600 dark:text-blue-400')"></span>
|
||||
<span x-html="$icon('store', 'w-5 h-5 text-blue-600 dark:text-blue-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -147,7 +147,7 @@
|
||||
<div x-show="!loading" x-cloak class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<!-- Empty State -->
|
||||
<div x-show="stores.length === 0" class="text-center py-12">
|
||||
<span x-html="$icon('building-storefront', 'w-12 h-12 mx-auto text-gray-400')"></span>
|
||||
<span x-html="$icon('store', 'w-12 h-12 mx-auto text-gray-400')"></span>
|
||||
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No stores found</h3>
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">
|
||||
<span x-show="stats.total_stores === 0">Click "Sync from Letzshop" to import stores.</span>
|
||||
|
||||
@@ -164,20 +164,12 @@ tenancy_module = ModuleDefinition(
|
||||
order=20,
|
||||
is_mandatory=True,
|
||||
),
|
||||
],
|
||||
),
|
||||
MenuSectionDefinition(
|
||||
id="contentMgmt",
|
||||
label_key="tenancy.menu.content_management",
|
||||
icon="globe-alt",
|
||||
order=70,
|
||||
items=[
|
||||
MenuItemDefinition(
|
||||
id="platforms",
|
||||
label_key="tenancy.menu.platforms",
|
||||
icon="globe-alt",
|
||||
route="/admin/platforms",
|
||||
order=10,
|
||||
order=5,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -91,6 +91,21 @@ class PlatformUpdateRequest(BaseModel):
|
||||
settings: dict[str, Any] | None = None
|
||||
|
||||
|
||||
class PlatformCreateRequest(BaseModel):
|
||||
"""Request schema for creating a platform."""
|
||||
|
||||
code: str = Field(..., min_length=2, max_length=50, pattern=r"^[a-z][a-z0-9_-]*$")
|
||||
name: str = Field(..., min_length=1, max_length=100)
|
||||
description: str | None = None
|
||||
description_translations: dict[str, str] | None = None
|
||||
domain: str | None = None
|
||||
path_prefix: str | None = None
|
||||
default_language: str = "fr"
|
||||
supported_languages: list[str] = Field(default_factory=lambda: ["fr", "de", "en", "lb"])
|
||||
is_active: bool = True
|
||||
is_public: bool = True
|
||||
|
||||
|
||||
class PlatformStatsResponse(BaseModel):
|
||||
"""Platform statistics response."""
|
||||
|
||||
@@ -162,6 +177,26 @@ async def list_platforms(
|
||||
return PlatformListResponse(platforms=result, total=len(result))
|
||||
|
||||
|
||||
@admin_platforms_router.post("", response_model=PlatformResponse, status_code=201)
|
||||
async def create_platform(
|
||||
create_data: PlatformCreateRequest,
|
||||
db: Session = Depends(get_db),
|
||||
current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
|
||||
):
|
||||
"""
|
||||
Create a new platform.
|
||||
|
||||
Creates a new platform with the provided configuration.
|
||||
"""
|
||||
data = create_data.model_dump()
|
||||
platform = platform_service.create_platform(db, data)
|
||||
db.commit()
|
||||
db.refresh(platform)
|
||||
|
||||
logger.info(f"[PLATFORMS] Created platform: {platform.code}")
|
||||
return _build_platform_response(db, platform)
|
||||
|
||||
|
||||
@admin_platforms_router.get("/{code}", response_model=PlatformResponse)
|
||||
async def get_platform(
|
||||
code: str = Path(..., description="Platform code (oms, loyalty, etc.)"),
|
||||
|
||||
@@ -491,6 +491,24 @@ async def admin_platforms_list(
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/platforms/create", response_class=HTMLResponse, include_in_schema=False
|
||||
)
|
||||
async def admin_platform_create(
|
||||
request: Request,
|
||||
current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render platform creation form.
|
||||
Allows creating a new platform with basic settings.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"tenancy/admin/platform-create.html",
|
||||
get_admin_context(request, db, current_user),
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/platforms/{platform_code}", response_class=HTMLResponse, include_in_schema=False
|
||||
)
|
||||
|
||||
@@ -500,6 +500,29 @@ class PlatformService:
|
||||
|
||||
return None
|
||||
|
||||
@staticmethod
|
||||
def create_platform(db: Session, data: dict) -> Platform:
|
||||
"""
|
||||
Create a new platform.
|
||||
|
||||
Note: This method does NOT commit the transaction.
|
||||
The caller (API endpoint) is responsible for committing.
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
data: Dictionary of fields for the new platform
|
||||
|
||||
Returns:
|
||||
Created Platform object (with pending changes)
|
||||
"""
|
||||
platform = Platform()
|
||||
for field, value in data.items():
|
||||
if hasattr(platform, field):
|
||||
setattr(platform, field, value)
|
||||
db.add(platform)
|
||||
logger.info(f"[PLATFORMS] Created platform: {platform.code}")
|
||||
return platform
|
||||
|
||||
@staticmethod
|
||||
def update_platform(
|
||||
db: Session, platform: Platform, update_data: dict
|
||||
|
||||
134
app/modules/tenancy/static/admin/js/platform-create.js
Normal file
134
app/modules/tenancy/static/admin/js/platform-create.js
Normal file
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Platform Create - Alpine.js Component
|
||||
*
|
||||
* Handles platform creation for multi-platform CMS.
|
||||
*/
|
||||
|
||||
const platformCreateLog = window.LogConfig.createLogger('PLATFORM_CREATE');
|
||||
|
||||
function platformCreate() {
|
||||
return {
|
||||
// Inherit base layout functionality from init-alpine.js
|
||||
...data(),
|
||||
|
||||
// Page identification
|
||||
currentPage: 'platform-create',
|
||||
|
||||
// State
|
||||
saving: false,
|
||||
error: null,
|
||||
|
||||
// Language editing
|
||||
currentLang: 'fr',
|
||||
languageNames: {
|
||||
fr: 'Fran\u00e7ais',
|
||||
de: 'Deutsch',
|
||||
en: 'English',
|
||||
lb: 'L\u00ebtzebuergesch',
|
||||
},
|
||||
|
||||
// Form data
|
||||
formData: {
|
||||
code: '',
|
||||
name: '',
|
||||
description_translations: { fr: '', de: '', en: '', lb: '' },
|
||||
domain: '',
|
||||
path_prefix: '',
|
||||
default_language: 'fr',
|
||||
supported_languages: ['fr', 'de', 'en', 'lb'],
|
||||
is_active: true,
|
||||
is_public: true,
|
||||
},
|
||||
|
||||
errors: {},
|
||||
|
||||
// Available languages
|
||||
availableLanguages: [
|
||||
{ code: 'fr', name: 'French' },
|
||||
{ code: 'de', name: 'German' },
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'lb', name: 'Luxembourgish' },
|
||||
],
|
||||
|
||||
// Lifecycle
|
||||
async init() {
|
||||
platformCreateLog.info('=== PLATFORM CREATE PAGE INITIALIZING ===');
|
||||
|
||||
// Duplicate initialization guard
|
||||
if (window._platformCreateInitialized) {
|
||||
platformCreateLog.warn('Platform create page already initialized, skipping...');
|
||||
return;
|
||||
}
|
||||
window._platformCreateInitialized = true;
|
||||
|
||||
platformCreateLog.info('=== PLATFORM CREATE PAGE INITIALIZATION COMPLETE ===');
|
||||
},
|
||||
|
||||
async handleSubmit() {
|
||||
this.saving = true;
|
||||
this.error = null;
|
||||
this.errors = {};
|
||||
|
||||
try {
|
||||
// Sync base description from default language translation
|
||||
const defaultLang = this.formData.default_language || 'fr';
|
||||
const baseDesc = this.formData.description_translations[defaultLang] || '';
|
||||
|
||||
const payload = {
|
||||
code: this.formData.code,
|
||||
name: this.formData.name,
|
||||
description: baseDesc || null,
|
||||
description_translations: this.formData.description_translations,
|
||||
domain: this.formData.domain || null,
|
||||
path_prefix: this.formData.path_prefix || null,
|
||||
default_language: this.formData.default_language,
|
||||
supported_languages: this.formData.supported_languages,
|
||||
is_active: this.formData.is_active,
|
||||
is_public: this.formData.is_public,
|
||||
};
|
||||
|
||||
const response = await apiClient.post('/admin/platforms', payload);
|
||||
|
||||
platformCreateLog.info(`Created platform: ${response.code}`);
|
||||
|
||||
// Redirect to the new platform's detail page
|
||||
window.location.href = `/admin/platforms/${response.code}`;
|
||||
} catch (err) {
|
||||
platformCreateLog.error('Error creating platform:', err);
|
||||
this.error = err.message || 'Failed to create platform';
|
||||
|
||||
// Handle validation errors
|
||||
if (err.details) {
|
||||
this.errors = err.details;
|
||||
}
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Helper Methods
|
||||
isLanguageSupported(code) {
|
||||
return this.formData.supported_languages.includes(code);
|
||||
},
|
||||
|
||||
toggleLanguage(code) {
|
||||
const index = this.formData.supported_languages.indexOf(code);
|
||||
if (index > -1) {
|
||||
// Don't allow removing the last language
|
||||
if (this.formData.supported_languages.length > 1) {
|
||||
this.formData.supported_languages.splice(index, 1);
|
||||
// Switch tab if the removed language was active
|
||||
if (this.currentLang === code) {
|
||||
this.currentLang = this.formData.supported_languages[0];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.formData.supported_languages.push(code);
|
||||
// Initialize empty translation for new language
|
||||
if (!this.formData.description_translations[code]) {
|
||||
this.formData.description_translations[code] = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -17,7 +17,6 @@ function platformDetail() {
|
||||
// State
|
||||
platform: null,
|
||||
stats: null,
|
||||
recentPages: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
platformCode: null,
|
||||
@@ -41,10 +40,7 @@ function platformDetail() {
|
||||
if (match) {
|
||||
this.platformCode = match[1];
|
||||
platformDetailLog.info('Viewing platform:', this.platformCode);
|
||||
await Promise.all([
|
||||
this.loadPlatform(),
|
||||
this.loadRecentPages(),
|
||||
]);
|
||||
await this.loadPlatform();
|
||||
} else {
|
||||
platformDetailLog.error('No platform code in URL');
|
||||
this.error = 'Platform code not found in URL';
|
||||
@@ -74,19 +70,6 @@ function platformDetail() {
|
||||
}
|
||||
},
|
||||
|
||||
async loadRecentPages() {
|
||||
try {
|
||||
// Load recent content pages for this platform
|
||||
const response = await apiClient.get(`/admin/content-pages?platform_code=${this.platformCode}&limit=5`);
|
||||
this.recentPages = response.items || response || [];
|
||||
platformDetailLog.info(`Loaded ${this.recentPages.length} recent pages`);
|
||||
} catch (err) {
|
||||
platformDetailLog.error('Error loading recent pages:', err);
|
||||
// Non-fatal - don't throw
|
||||
this.recentPages = [];
|
||||
}
|
||||
},
|
||||
|
||||
// Helper Methods
|
||||
getPlatformIcon(code) {
|
||||
const icons = {
|
||||
@@ -98,22 +81,6 @@ function platformDetail() {
|
||||
return icons[code] || 'globe-alt';
|
||||
},
|
||||
|
||||
getPageTypeLabel(page) {
|
||||
if (page.is_platform_page) return 'Marketing';
|
||||
if (page.store_id) return 'Store Override';
|
||||
return 'Store Default';
|
||||
},
|
||||
|
||||
getPageTypeBadgeClass(page) {
|
||||
if (page.is_platform_page) {
|
||||
return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
|
||||
}
|
||||
if (page.store_id) {
|
||||
return 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200';
|
||||
}
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
||||
},
|
||||
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '—';
|
||||
const date = new Date(dateString);
|
||||
|
||||
@@ -28,11 +28,16 @@ function adminStores() {
|
||||
showDeleteStoreModal: false,
|
||||
storeToDelete: null,
|
||||
|
||||
// Merchant filter (Tom Select)
|
||||
selectedMerchant: null,
|
||||
merchantSelectInstance: null,
|
||||
|
||||
// Search and filters
|
||||
filters: {
|
||||
search: '',
|
||||
is_active: '',
|
||||
is_verified: ''
|
||||
is_verified: '',
|
||||
merchant_id: ''
|
||||
},
|
||||
|
||||
// Pagination state (server-side)
|
||||
@@ -62,9 +67,16 @@ function adminStores() {
|
||||
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
|
||||
}
|
||||
|
||||
// Initialize merchant selector (Tom Select)
|
||||
this.$nextTick(() => {
|
||||
this.initMerchantSelect();
|
||||
});
|
||||
|
||||
storesLog.group('Loading stores data');
|
||||
await this.loadStores();
|
||||
await this.loadStats();
|
||||
await Promise.all([
|
||||
this.loadStores(),
|
||||
this.loadStats(),
|
||||
]);
|
||||
storesLog.groupEnd();
|
||||
|
||||
storesLog.info('=== STORES PAGE INITIALIZATION COMPLETE ===');
|
||||
@@ -163,6 +175,9 @@ function adminStores() {
|
||||
if (this.filters.is_verified !== '') {
|
||||
params.append('is_verified', this.filters.is_verified);
|
||||
}
|
||||
if (this.filters.merchant_id !== '') {
|
||||
params.append('merchant_id', this.filters.merchant_id);
|
||||
}
|
||||
|
||||
const url = `/admin/stores?${params}`;
|
||||
window.LogConfig.logApiCall('GET', url, null, 'request');
|
||||
@@ -230,6 +245,64 @@ function adminStores() {
|
||||
}
|
||||
},
|
||||
|
||||
// Initialize merchant selector (Tom Select autocomplete)
|
||||
initMerchantSelect() {
|
||||
if (!window.initEntitySelector) {
|
||||
storesLog.warn('initEntitySelector not available yet, retrying...');
|
||||
setTimeout(() => this.initMerchantSelect(), 200);
|
||||
return;
|
||||
}
|
||||
|
||||
this.merchantSelectInstance = initEntitySelector(this.$refs.merchantSelect, {
|
||||
apiEndpoint: '/admin/merchants',
|
||||
responseKey: 'merchants',
|
||||
searchFields: ['name'],
|
||||
codeField: null,
|
||||
placeholder: 'Filter by merchant...',
|
||||
noResultsText: 'No merchants found',
|
||||
onSelect: (merchant) => {
|
||||
storesLog.info('Merchant selected:', merchant);
|
||||
this.selectedMerchant = merchant;
|
||||
this.filters.merchant_id = merchant.id;
|
||||
this.pagination.page = 1;
|
||||
localStorage.setItem('stores_selected_merchant_id', merchant.id);
|
||||
localStorage.setItem('stores_selected_merchant_data', JSON.stringify(merchant));
|
||||
this.loadStores();
|
||||
},
|
||||
onClear: () => {
|
||||
this.clearMerchantFilter();
|
||||
}
|
||||
});
|
||||
|
||||
// Restore from localStorage
|
||||
const savedMerchantId = localStorage.getItem('stores_selected_merchant_id');
|
||||
if (savedMerchantId) {
|
||||
const savedData = JSON.parse(localStorage.getItem('stores_selected_merchant_data') || 'null');
|
||||
if (savedData) {
|
||||
this.selectedMerchant = savedData;
|
||||
this.filters.merchant_id = parseInt(savedMerchantId);
|
||||
// Wait for Tom Select to init, then set value
|
||||
setTimeout(() => {
|
||||
this.merchantSelectInstance?.setValue(parseInt(savedMerchantId), savedData);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Clear merchant filter
|
||||
clearMerchantFilter() {
|
||||
storesLog.info('Clearing merchant filter');
|
||||
this.selectedMerchant = null;
|
||||
this.filters.merchant_id = '';
|
||||
this.pagination.page = 1;
|
||||
localStorage.removeItem('stores_selected_merchant_id');
|
||||
localStorage.removeItem('stores_selected_merchant_data');
|
||||
if (this.merchantSelectInstance) {
|
||||
this.merchantSelectInstance.clear();
|
||||
}
|
||||
this.loadStores();
|
||||
},
|
||||
|
||||
// Pagination: Go to specific page
|
||||
goToPage(pageNum) {
|
||||
if (pageNum === '...' || pageNum < 1 || pageNum > this.totalPages) {
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
<!-- Store Menu Items -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<span x-html="$icon('building-storefront', 'w-5 h-5 inline mr-2 text-teal-600 dark:text-teal-400')"></span>
|
||||
<span x-html="$icon('store', 'w-5 h-5 inline mr-2 text-teal-600 dark:text-teal-400')"></span>
|
||||
Store Menu Items
|
||||
</h3>
|
||||
<div x-show="module?.store_menu_items?.length > 0" class="space-y-2">
|
||||
@@ -171,7 +171,7 @@
|
||||
<!-- Self-Contained Module Info (if applicable) -->
|
||||
<div x-show="module?.is_self_contained" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<span x-html="$icon('puzzle', 'w-5 h-5 inline mr-2 text-green-600 dark:text-green-400')"></span>
|
||||
<span x-html="$icon('puzzle-piece', 'w-5 h-5 inline mr-2 text-green-600 dark:text-green-400')"></span>
|
||||
Self-Contained Module
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
237
app/modules/tenancy/templates/tenancy/admin/platform-create.html
Normal file
237
app/modules/tenancy/templates/tenancy/admin/platform-create.html
Normal file
@@ -0,0 +1,237 @@
|
||||
{# app/templates/admin/platform-create.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state %}
|
||||
{% from 'shared/macros/headers.html' import edit_page_header %}
|
||||
|
||||
{% block title %}Create Platform{% endblock %}
|
||||
|
||||
{% block alpine_data %}platformCreate(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% call edit_page_header('Create Platform', '/admin/platforms', back_label='Back to Platforms') %}
|
||||
New Platform
|
||||
{% endcall %}
|
||||
|
||||
<!-- Error State -->
|
||||
<div x-show="error" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg dark:bg-red-900/50 dark:border-red-600 dark:text-red-200">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('exclamation-circle', 'w-5 h-5 mr-2')"></span>
|
||||
<span x-text="error"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Form -->
|
||||
<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
||||
<!-- Left Column: Basic Info -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<!-- Platform Code -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Platform Code <span class="text-red-600">*</span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.code"
|
||||
required
|
||||
maxlength="50"
|
||||
pattern="^[a-z][a-z0-9_-]*$"
|
||||
placeholder="e.g., marketplace"
|
||||
:disabled="saving"
|
||||
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"
|
||||
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.code }"
|
||||
>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Lowercase letters, numbers, hyphens, and underscores. Cannot be changed later.
|
||||
</span>
|
||||
<span x-show="errors.code" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.code"></span>
|
||||
</label>
|
||||
|
||||
<!-- Name -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Platform Name <span class="text-red-600">*</span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.name"
|
||||
required
|
||||
maxlength="100"
|
||||
placeholder="e.g., Marketplace"
|
||||
:disabled="saving"
|
||||
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"
|
||||
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
|
||||
>
|
||||
<span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
|
||||
</label>
|
||||
|
||||
<!-- Description (multilingual) -->
|
||||
<div class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Description
|
||||
</span>
|
||||
|
||||
<!-- Language Tabs -->
|
||||
<div class="mt-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<nav class="flex -mb-px space-x-2">
|
||||
<template x-for="lang in formData.supported_languages" :key="lang">
|
||||
<button
|
||||
type="button"
|
||||
@click="currentLang = lang"
|
||||
:class="currentLang === lang
|
||||
? 'border-purple-500 text-purple-600 dark:text-purple-400'
|
||||
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
|
||||
class="py-2 px-3 border-b-2 font-medium text-xs transition-colors"
|
||||
>
|
||||
<span x-text="languageNames[lang] || lang.toUpperCase()"></span>
|
||||
<span x-show="lang === formData.default_language" class="ml-1 text-xs text-gray-400">(default)</span>
|
||||
</button>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Per-language textarea -->
|
||||
<textarea
|
||||
x-model="formData.description_translations[currentLang]"
|
||||
rows="3"
|
||||
maxlength="500"
|
||||
:disabled="saving"
|
||||
:placeholder="'Description in ' + (languageNames[currentLang] || currentLang)"
|
||||
class="block w-full mt-2 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-textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Default Language -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Default Language
|
||||
</span>
|
||||
<select
|
||||
x-model="formData.default_language"
|
||||
:disabled="saving"
|
||||
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-select"
|
||||
>
|
||||
<template x-for="lang in availableLanguages" :key="lang.code">
|
||||
<option :value="lang.code" x-text="lang.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<!-- Supported Languages -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Supported Languages
|
||||
</span>
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<template x-for="lang in availableLanguages" :key="lang.code">
|
||||
<button
|
||||
type="button"
|
||||
@click="toggleLanguage(lang.code)"
|
||||
:disabled="saving"
|
||||
class="px-3 py-1 text-sm rounded-full transition-colors"
|
||||
:class="isLanguageSupported(lang.code)
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
|
||||
>
|
||||
<span x-text="lang.name"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Routing -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Routing
|
||||
</h3>
|
||||
|
||||
<!-- Domain -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Production Domain
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.domain"
|
||||
placeholder="e.g., marketplace.lu"
|
||||
:disabled="saving"
|
||||
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"
|
||||
>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Domain used in production for this platform
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Path Prefix -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Development Path Prefix
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.path_prefix"
|
||||
placeholder="e.g., marketplace"
|
||||
:disabled="saving"
|
||||
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"
|
||||
>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Used for /platforms/{prefix}/ routing in development
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Status Options -->
|
||||
<h3 class="mb-4 mt-8 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Status
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<label class="flex items-center text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="formData.is_active"
|
||||
:disabled="saving"
|
||||
class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-400">Active</span>
|
||||
</label>
|
||||
<label class="flex items-center text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="formData.is_public"
|
||||
:disabled="saving"
|
||||
class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-400">Public</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<a
|
||||
href="/admin/platforms"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-show="saving" x-html="$icon('refresh', 'w-4 h-4 mr-2 animate-spin')"></span>
|
||||
<span x-text="saving ? 'Creating...' : 'Create Platform'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script defer src="{{ url_for('tenancy_static', path='admin/js/platform-create.js') }}"></script>
|
||||
{% endblock %}
|
||||
@@ -47,7 +47,7 @@
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Actions</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Edit Settings -->
|
||||
<a :href="`/admin/platforms/${platformCode}/edit`"
|
||||
class="flex items-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors">
|
||||
@@ -58,26 +58,6 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Edit Homepage -->
|
||||
<a :href="`/admin/content-pages?platform_code=${platformCode}&slug=home`"
|
||||
class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors">
|
||||
<span x-html="$icon('home', 'w-8 h-8 text-blue-600 dark:text-blue-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">Edit Homepage</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Platform landing page</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Manage Pages -->
|
||||
<a :href="`/admin/content-pages?platform_code=${platformCode}`"
|
||||
class="flex items-center p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg hover:bg-teal-100 dark:hover:bg-teal-900/40 transition-colors">
|
||||
<span x-html="$icon('document-text', 'w-8 h-8 text-teal-600 dark:text-teal-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">Manage Pages</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">All content pages</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- View Platform -->
|
||||
<a :href="getPlatformUrl()" target="_blank"
|
||||
class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
@@ -102,7 +82,7 @@
|
||||
<!-- Module Configuration -->
|
||||
<a :href="`/admin/platforms/${platformCode}/modules`"
|
||||
class="flex items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors">
|
||||
<span x-html="$icon('puzzle', 'w-8 h-8 text-green-600 dark:text-green-400')"></span>
|
||||
<span x-html="$icon('puzzle-piece', 'w-8 h-8 text-green-600 dark:text-green-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">Module Configuration</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Enable/disable features</p>
|
||||
@@ -131,38 +111,38 @@
|
||||
<p class="text-3xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.store_count || 0"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-purple-100 dark:bg-purple-900/50 rounded-full">
|
||||
<span x-html="$icon('building-storefront', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
|
||||
<span x-html="$icon('store', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Marketing Pages -->
|
||||
<!-- Languages -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
|
||||
<p class="text-3xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Languages</p>
|
||||
<p class="text-3xl font-bold text-blue-600 dark:text-blue-400" x-text="(platform?.supported_languages || []).length"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-100 dark:bg-blue-900/50 rounded-full">
|
||||
<span x-html="$icon('megaphone', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
|
||||
<span x-html="$icon('translate', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Store Defaults -->
|
||||
<!-- Active Status -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Store Defaults</p>
|
||||
<p class="text-3xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.store_defaults_count || 0"></p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Status</p>
|
||||
<p class="text-xl font-bold" :class="platform?.is_active ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" x-text="platform?.is_active ? 'Active' : 'Inactive'"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-teal-100 dark:bg-teal-900/50 rounded-full">
|
||||
<span x-html="$icon('document-duplicate', 'w-6 h-6 text-teal-600 dark:text-teal-400')"></span>
|
||||
<div class="p-3 rounded-full" :class="platform?.is_active ? 'bg-green-100 dark:bg-green-900/50' : 'bg-red-100 dark:bg-red-900/50'">
|
||||
<span x-html="$icon(platform?.is_active ? 'check-circle' : 'x-circle', 'w-6 h-6 ' + (platform?.is_active ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'))"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Language -->
|
||||
<!-- Default Language -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -170,7 +150,7 @@
|
||||
<p class="text-3xl font-bold text-gray-700 dark:text-gray-300" x-text="platform?.default_language?.toUpperCase() || '—'"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-full">
|
||||
<span x-html="$icon('language', 'w-6 h-6 text-gray-600 dark:text-gray-400')"></span>
|
||||
<span x-html="$icon('translate', 'w-6 h-6 text-gray-600 dark:text-gray-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,62 +212,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Pages -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Content Pages</h3>
|
||||
<a :href="`/admin/content-pages?platform_code=${platformCode}`"
|
||||
class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
|
||||
View All →
|
||||
</a>
|
||||
</div>
|
||||
<div x-show="recentPages.length > 0">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700/50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Title</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Slug</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Type</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<template x-for="page in recentPages" :key="page.id">
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<td class="px-6 py-4">
|
||||
<a :href="`/admin/content-pages/${page.id}/edit`"
|
||||
class="text-gray-900 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 font-medium"
|
||||
x-text="page.title"></a>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="page.slug"></code>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded-full"
|
||||
:class="getPageTypeBadgeClass(page)"
|
||||
x-text="getPageTypeLabel(page)"></span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span x-show="page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Published</span>
|
||||
<span x-show="!page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Draft</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(page.updated_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div x-show="recentPages.length === 0" class="p-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('document-text', 'w-12 h-12 mx-auto mb-2 opacity-50')"></span>
|
||||
<p>No content pages yet.</p>
|
||||
<a :href="`/admin/content-pages/create?platform_code=${platformCode}`"
|
||||
class="inline-block mt-2 text-purple-600 hover:text-purple-700 dark:text-purple-400">
|
||||
Create your first page →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timestamps -->
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p>Created: <span x-text="formatDate(platform?.created_at)"></span></p>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<div class="grid gap-4 mb-6 md:grid-cols-4">
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
|
||||
<span x-html="$icon('puzzle', 'w-5 h-5')"></span>
|
||||
<span x-html="$icon('puzzle-piece', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Total Modules</p>
|
||||
@@ -166,7 +166,7 @@
|
||||
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('puzzle', 'w-5 h-5 text-gray-600 dark:text-gray-400 mr-2')"></span>
|
||||
<span x-html="$icon('puzzle-piece', 'w-5 h-5 text-gray-600 dark:text-gray-400 mr-2')"></span>
|
||||
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Optional Modules</h3>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400" x-text="`${enabledOptionalCount}/${optionalModules.length} enabled`"></span>
|
||||
@@ -271,7 +271,7 @@
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="moduleConfig?.modules?.length === 0" class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-8 text-center">
|
||||
<span x-html="$icon('puzzle', 'w-12 h-12 mx-auto text-gray-400')"></span>
|
||||
<span x-html="$icon('puzzle-piece', 'w-12 h-12 mx-auto text-gray-400')"></span>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400">No modules available.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,15 @@
|
||||
{% block content %}
|
||||
{{ page_header('Platforms', subtitle='Manage platform configurations for OMS, Loyalty, and other business offerings') }}
|
||||
|
||||
<!-- Create Platform Button -->
|
||||
<div class="flex justify-end mb-6">
|
||||
<a href="/admin/platforms/create"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors">
|
||||
<span x-html="$icon('plus', 'w-5 h-5 mr-2')"></span>
|
||||
Create Platform
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ loading_state('Loading platforms...') }}
|
||||
|
||||
{{ error_state('Error loading platforms') }}
|
||||
@@ -49,12 +58,12 @@
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Stores</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="platform.platform_pages_count"></p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Marketing Pages</p>
|
||||
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="(platform.supported_languages || []).length"></p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Languages</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-teal-600 dark:text-teal-400" x-text="platform.store_defaults_count"></p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Store Defaults</p>
|
||||
<p class="text-2xl font-bold" :class="platform.domain ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'" x-text="platform.domain ? '✓' : '—'"></p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Domain</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,37 +89,20 @@
|
||||
<!-- Platform Actions -->
|
||||
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div class="flex justify-between items-center">
|
||||
<a
|
||||
:href="`/admin/platforms/${platform.code}`"
|
||||
class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
|
||||
View Details
|
||||
</a>
|
||||
<div class="flex space-x-2">
|
||||
<div class="flex items-center space-x-3">
|
||||
<a
|
||||
:href="`/admin/content-pages?platform_code=${platform.code}&slug=home`"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
title="Edit platform homepage"
|
||||
:href="`/admin/platforms/${platform.code}`"
|
||||
class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
|
||||
>
|
||||
<span x-html="$icon('home', 'w-4 h-4 mr-1')"></span>
|
||||
Homepage
|
||||
</a>
|
||||
<a
|
||||
:href="`/admin/content-pages?platform_code=${platform.code}`"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
title="View all content pages for this platform"
|
||||
>
|
||||
<span x-html="$icon('document-text', 'w-4 h-4 mr-1')"></span>
|
||||
Pages
|
||||
<span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
|
||||
View Details
|
||||
</a>
|
||||
<a
|
||||
:href="`/admin/platforms/${platform.code}/edit`"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
||||
title="Edit platform settings"
|
||||
class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
>
|
||||
<span x-html="$icon('cog', 'w-4 h-4 mr-1')"></span>
|
||||
Settings
|
||||
<span x-html="$icon('pencil', 'w-4 h-4 mr-1')"></span>
|
||||
Edit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,33 +120,6 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Page Tier Legend -->
|
||||
<div x-show="!loading && platforms.length > 0" class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">Content Page Tiers</h4>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="flex items-start">
|
||||
<span class="inline-block w-3 h-3 rounded-full bg-blue-500 mt-1.5 mr-3"></span>
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">Platform Marketing Pages</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Public pages like homepage, pricing, features. Not inherited by stores.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<span class="inline-block w-3 h-3 rounded-full bg-teal-500 mt-1.5 mr-3"></span>
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">Store Defaults</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Default pages inherited by all stores (about, terms, privacy).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<span class="inline-block w-3 h-3 rounded-full bg-purple-500 mt-1.5 mr-3"></span>
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">Store Overrides</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Custom pages created by individual stores.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
{% 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 confirm_modal, confirm_modal_dynamic %}
|
||||
{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
|
||||
|
||||
{% block title %}Stores{% endblock %}
|
||||
|
||||
@@ -123,6 +124,9 @@
|
||||
<option value="false">Pending</option>
|
||||
</select>
|
||||
|
||||
<!-- Merchant Filter (Tom Select autocomplete) -->
|
||||
{{ entity_selector(ref_name='merchantSelect', id='merchant-select', placeholder='Filter by merchant...', width='w-64') }}
|
||||
|
||||
<!-- Refresh Button -->
|
||||
<button
|
||||
@click="refresh()"
|
||||
@@ -136,6 +140,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected Merchant Badge -->
|
||||
{{ entity_selected_badge(entity_var='selectedMerchant', clear_fn='clearMerchantFilter()', name_field='name', color='blue') }}
|
||||
|
||||
<!-- Stores Table with Pagination -->
|
||||
<div x-show="!loading">
|
||||
{% call table_wrapper() %}
|
||||
|
||||
@@ -141,6 +141,9 @@
|
||||
<!-- 7. SEVENTH: Store Selector (depends on Tom Select and API Client) -->
|
||||
<script defer src="{{ url_for('core_static', path='shared/js/store-selector.js') }}"></script>
|
||||
|
||||
<!-- 7b. Entity Selector (generic version of store selector) -->
|
||||
<script defer src="{{ url_for('core_static', path='shared/js/entity-selector.js') }}"></script>
|
||||
|
||||
<!-- 8a. Alpine.js Collapse Plugin (must load before Alpine) -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.13.3/dist/cdn.min.js"></script>
|
||||
|
||||
|
||||
@@ -284,6 +284,102 @@
|
||||
{% 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
|
||||
=============
|
||||
|
||||
Reference in New Issue
Block a user