refactor(js): migrate JavaScript files to module directories

Move 47 JS files from static/{admin,vendor,shared}/js/ to their
respective module directories app/modules/*/static/*/js/:

- Orders: orders.js, order-detail.js
- Catalog: products.js (renamed from vendor-products.js), product-*.js
- Inventory: inventory.js (admin & vendor)
- Customers: customers.js, users.js, user-*.js
- Billing: billing-history.js, subscriptions.js, subscription-tiers.js,
  billing.js, invoices.js, feature-store.js, upgrade-prompts.js
- Messaging: messages.js, notifications.js, email-templates.js
- Marketplace: marketplace*.js, letzshop*.js, onboarding.js
- Monitoring: monitoring.js, background-tasks.js, imports.js, logs.js
- Dev Tools: testing-*.js, code-quality-*.js

Update 39 templates to reference new module static paths using
url_for('{module}_static', path='...') pattern.

Files staying in static/ (platform core):
- admin: dashboard, login, platforms, vendors, companies, admin-users,
  settings, components, init-alpine, module-config
- vendor: dashboard, login, profile, settings, team, media, init-alpine
- shared: api-client, utils, money, icons, log-config, vendor-selector,
  media-picker

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-30 22:08:20 +01:00
parent 434db1560a
commit 0b4291d893
86 changed files with 63 additions and 63 deletions

View File

@@ -0,0 +1,204 @@
// app/modules/marketplace/static/admin/js/letzshop-vendor-directory.js
/**
* Admin Letzshop Vendor Directory page logic
* Browse and import vendors from Letzshop marketplace
*/
const letzshopVendorDirectoryLog = window.LogConfig.loggers.letzshopVendorDirectory ||
window.LogConfig.createLogger('letzshopVendorDirectory', false);
letzshopVendorDirectoryLog.info('Loading...');
function letzshopVendorDirectory() {
letzshopVendorDirectoryLog.info('letzshopVendorDirectory() called');
return {
// Inherit base layout state
...data(),
// Set page identifier for sidebar highlighting
currentPage: 'letzshop-vendor-directory',
// Data
vendors: [],
stats: {},
companies: [],
total: 0,
page: 1,
limit: 20,
hasMore: false,
// State
loading: true,
syncing: false,
creating: false,
error: '',
successMessage: '',
// Filters
filters: {
search: '',
city: '',
category: '',
only_unclaimed: false,
},
// Modals
showDetailModal: false,
showCreateModal: false,
selectedVendor: null,
createVendorData: {
slug: '',
name: '',
company_id: '',
},
createError: '',
// Init
async init() {
// Guard against multiple initialization
if (window._letzshopVendorDirectoryInitialized) return;
window._letzshopVendorDirectoryInitialized = true;
letzshopVendorDirectoryLog.info('init() called');
await Promise.all([
this.loadStats(),
this.loadVendors(),
this.loadCompanies(),
]);
},
// API calls
async loadStats() {
try {
const data = await apiClient.get('/admin/letzshop/vendor-directory/stats');
if (data.success) {
this.stats = data.stats;
}
} catch (e) {
letzshopVendorDirectoryLog.error('Failed to load stats:', e);
}
},
async loadVendors() {
this.loading = true;
this.error = '';
try {
const params = new URLSearchParams({
page: this.page,
limit: this.limit,
});
if (this.filters.search) params.append('search', this.filters.search);
if (this.filters.city) params.append('city', this.filters.city);
if (this.filters.category) params.append('category', this.filters.category);
if (this.filters.only_unclaimed) params.append('only_unclaimed', 'true');
const data = await apiClient.get(`/admin/letzshop/vendor-directory/vendors?${params}`);
if (data.success) {
this.vendors = data.vendors;
this.total = data.total;
this.hasMore = data.has_more;
} else {
this.error = data.detail || 'Failed to load vendors';
}
} catch (e) {
this.error = 'Failed to load vendors';
letzshopVendorDirectoryLog.error('Failed to load vendors:', e);
} finally {
this.loading = false;
}
},
async loadCompanies() {
try {
const data = await apiClient.get('/admin/companies?limit=100');
if (data.companies) {
this.companies = data.companies;
}
} catch (e) {
letzshopVendorDirectoryLog.error('Failed to load companies:', e);
}
},
async triggerSync() {
this.syncing = true;
this.error = '';
this.successMessage = '';
try {
const data = await apiClient.post('/admin/letzshop/vendor-directory/sync');
if (data.success) {
this.successMessage = data.message + (data.mode === 'celery' ? ` (Task ID: ${data.task_id})` : '');
// Reload data after a delay to allow sync to complete
setTimeout(() => {
this.loadStats();
this.loadVendors();
}, 3000);
} else {
this.error = data.detail || 'Failed to trigger sync';
}
} catch (e) {
this.error = 'Failed to trigger sync';
letzshopVendorDirectoryLog.error('Failed to trigger sync:', e);
} finally {
this.syncing = false;
}
},
async createVendor() {
if (!this.createVendorData.company_id || !this.createVendorData.slug) return;
this.creating = true;
this.createError = '';
try {
const data = await apiClient.post(
`/admin/letzshop/vendor-directory/vendors/${this.createVendorData.slug}/create-vendor?company_id=${this.createVendorData.company_id}`
);
if (data.success) {
this.showCreateModal = false;
this.successMessage = data.message;
this.loadVendors();
this.loadStats();
} else {
this.createError = data.detail || 'Failed to create vendor';
}
} catch (e) {
this.createError = 'Failed to create vendor';
letzshopVendorDirectoryLog.error('Failed to create vendor:', e);
} finally {
this.creating = false;
}
},
// Modal handlers
showVendorDetail(vendor) {
this.selectedVendor = vendor;
this.showDetailModal = true;
},
openCreateVendorModal(vendor) {
this.createVendorData = {
slug: vendor.slug,
name: vendor.name,
company_id: '',
};
this.createError = '';
this.showCreateModal = true;
},
// Utilities
formatDate(dateStr) {
if (!dateStr) return '-';
const date = new Date(dateStr);
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
},
};
}
letzshopVendorDirectoryLog.info('Loaded');

View File

@@ -0,0 +1,281 @@
// app/modules/marketplace/static/admin/js/letzshop.js
/**
* Admin Letzshop management page logic
*/
// Use centralized logger (with fallback)
const letzshopLog = window.LogConfig?.createLogger?.('letzshop') ||
window.LogConfig?.loggers?.letzshop ||
{ info: () => {}, warn: () => {}, error: () => {}, debug: () => {} };
letzshopLog.info('Loading...');
function adminLetzshop() {
letzshopLog.info('adminLetzshop() called');
return {
// Inherit base layout state
...data(),
// Set page identifier
currentPage: 'letzshop',
// Loading states
loading: false,
savingConfig: false,
loadingOrders: false,
// Messages
error: '',
successMessage: '',
// Vendors data
vendors: [],
totalVendors: 0,
page: 1,
limit: 50,
// Filters
filters: {
configuredOnly: false
},
// Stats
stats: {
total: 0,
configured: 0,
autoSync: 0,
pendingOrders: 0
},
// Configuration modal
showConfigModal: false,
selectedVendor: null,
vendorCredentials: null,
configForm: {
api_key: '',
auto_sync_enabled: false,
sync_interval_minutes: 15
},
showApiKey: false,
// Orders modal
showOrdersModal: false,
vendorOrders: [],
async init() {
// Guard against multiple initialization
if (window._adminLetzshopInitialized) {
return;
}
window._adminLetzshopInitialized = true;
letzshopLog.info('Initializing...');
await this.loadVendors();
},
/**
* Load vendors with Letzshop status
*/
async loadVendors() {
this.loading = true;
this.error = '';
try {
const params = new URLSearchParams({
skip: ((this.page - 1) * this.limit).toString(),
limit: this.limit.toString(),
configured_only: this.filters.configuredOnly.toString()
});
const response = await apiClient.get(`/admin/letzshop/vendors?${params}`);
this.vendors = response.vendors || [];
this.totalVendors = response.total || 0;
// Calculate stats
this.stats.total = this.totalVendors;
this.stats.configured = this.vendors.filter(v => v.is_configured).length;
this.stats.autoSync = this.vendors.filter(v => v.auto_sync_enabled).length;
this.stats.pendingOrders = this.vendors.reduce((sum, v) => sum + (v.pending_orders || 0), 0);
letzshopLog.info('Loaded vendors:', this.vendors.length);
} catch (error) {
letzshopLog.error('Failed to load vendors:', error);
this.error = error.message || 'Failed to load vendors';
} finally {
this.loading = false;
}
},
/**
* Refresh all data
*/
async refreshData() {
await this.loadVendors();
this.successMessage = 'Data refreshed';
setTimeout(() => this.successMessage = '', 3000);
},
/**
* Open configuration modal for a vendor
*/
async openConfigModal(vendor) {
this.selectedVendor = vendor;
this.vendorCredentials = null;
this.configForm = {
api_key: '',
auto_sync_enabled: vendor.auto_sync_enabled || false,
sync_interval_minutes: 15
};
this.showApiKey = false;
this.showConfigModal = true;
// Load existing credentials if configured
if (vendor.is_configured) {
try {
const response = await apiClient.get(`/admin/letzshop/vendors/${vendor.vendor_id}/credentials`);
this.vendorCredentials = response;
this.configForm.auto_sync_enabled = response.auto_sync_enabled;
this.configForm.sync_interval_minutes = response.sync_interval_minutes || 15;
} catch (error) {
if (error.status !== 404) {
letzshopLog.error('Failed to load credentials:', error);
}
}
}
},
/**
* Save vendor configuration
*/
async saveVendorConfig() {
if (!this.configForm.api_key && !this.vendorCredentials) {
this.error = 'Please enter an API key';
return;
}
this.savingConfig = true;
this.error = '';
try {
const payload = {
auto_sync_enabled: this.configForm.auto_sync_enabled,
sync_interval_minutes: parseInt(this.configForm.sync_interval_minutes)
};
if (this.configForm.api_key) {
payload.api_key = this.configForm.api_key;
}
await apiClient.post(
`/admin/letzshop/vendors/${this.selectedVendor.vendor_id}/credentials`,
payload
);
this.showConfigModal = false;
this.successMessage = 'Configuration saved successfully';
await this.loadVendors();
} catch (error) {
letzshopLog.error('Failed to save config:', error);
this.error = error.message || 'Failed to save configuration';
} finally {
this.savingConfig = false;
setTimeout(() => this.successMessage = '', 5000);
}
},
/**
* Delete vendor configuration
*/
async deleteVendorConfig() {
if (!confirm('Are you sure you want to remove Letzshop configuration for this vendor?')) {
return;
}
try {
await apiClient.delete(`/admin/letzshop/vendors/${this.selectedVendor.vendor_id}/credentials`);
this.showConfigModal = false;
this.successMessage = 'Configuration removed';
await this.loadVendors();
} catch (error) {
letzshopLog.error('Failed to delete config:', error);
this.error = error.message || 'Failed to remove configuration';
}
setTimeout(() => this.successMessage = '', 5000);
},
/**
* Test connection for a vendor
*/
async testConnection(vendor) {
this.error = '';
try {
const response = await apiClient.post(`/admin/letzshop/vendors/${vendor.vendor_id}/test`);
if (response.success) {
this.successMessage = `Connection successful for ${vendor.vendor_name} (${response.response_time_ms?.toFixed(0)}ms)`;
} else {
this.error = response.error_details || 'Connection failed';
}
} catch (error) {
letzshopLog.error('Connection test failed:', error);
this.error = error.message || 'Connection test failed';
}
setTimeout(() => this.successMessage = '', 5000);
},
/**
* Trigger sync for a vendor
*/
async triggerSync(vendor) {
this.error = '';
try {
const response = await apiClient.post(`/admin/letzshop/vendors/${vendor.vendor_id}/sync`);
if (response.success) {
this.successMessage = response.message || 'Sync completed';
await this.loadVendors();
} else {
this.error = response.message || 'Sync failed';
}
} catch (error) {
letzshopLog.error('Sync failed:', error);
this.error = error.message || 'Sync failed';
}
setTimeout(() => this.successMessage = '', 5000);
},
/**
* View orders for a vendor
*/
async viewOrders(vendor) {
this.selectedVendor = vendor;
this.vendorOrders = [];
this.loadingOrders = true;
this.showOrdersModal = true;
try {
const response = await apiClient.get(`/admin/letzshop/vendors/${vendor.vendor_id}/orders?limit=100`);
this.vendorOrders = response.orders || [];
} catch (error) {
letzshopLog.error('Failed to load orders:', error);
this.error = error.message || 'Failed to load orders';
} finally {
this.loadingOrders = false;
}
},
/**
* Format date for display
*/
formatDate(dateStr) {
if (!dateStr) return 'N/A';
const date = new Date(dateStr);
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
};
}
letzshopLog.info('Module loaded');

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,229 @@
// noqa: js-006 - async init pattern is safe, loadData has try/catch
// static/admin/js/marketplace-product-detail.js
/**
* Admin marketplace product detail page logic
* View and manage individual marketplace products
*/
const adminMarketplaceProductDetailLog = window.LogConfig.loggers.adminMarketplaceProductDetail ||
window.LogConfig.createLogger('adminMarketplaceProductDetail', false);
adminMarketplaceProductDetailLog.info('Loading...');
function adminMarketplaceProductDetail() {
adminMarketplaceProductDetailLog.info('adminMarketplaceProductDetail() called');
// Extract product ID from URL
const pathParts = window.location.pathname.split('/');
const productId = parseInt(pathParts[pathParts.length - 1]);
return {
// Inherit base layout state
...data(),
// Set page identifier
currentPage: 'marketplace-products',
// Product ID from URL
productId: productId,
// Loading states
loading: true,
error: '',
// Product data
product: null,
// Copy to vendor modal state
showCopyModal: false,
copying: false,
copyForm: {
vendor_id: '',
skip_existing: true
},
targetVendors: [],
async init() {
adminMarketplaceProductDetailLog.info('Marketplace Product Detail init() called, ID:', this.productId);
// Guard against multiple initialization
if (window._adminMarketplaceProductDetailInitialized) {
adminMarketplaceProductDetailLog.warn('Already initialized, skipping');
return;
}
window._adminMarketplaceProductDetailInitialized = true;
// Load data in parallel
await Promise.all([
this.loadProduct(),
this.loadTargetVendors()
]);
adminMarketplaceProductDetailLog.info('Marketplace Product Detail initialization complete');
},
/**
* Load product details
*/
async loadProduct() {
this.loading = true;
this.error = '';
try {
const response = await apiClient.get(`/admin/products/${this.productId}`);
this.product = response;
adminMarketplaceProductDetailLog.info('Loaded product:', this.product.marketplace_product_id);
} catch (error) {
adminMarketplaceProductDetailLog.error('Failed to load product:', error);
this.error = error.message || 'Failed to load product details';
} finally {
this.loading = false;
}
},
/**
* Load target vendors for copy functionality
*/
async loadTargetVendors() {
try {
const response = await apiClient.get('/admin/vendors?is_active=true&limit=500');
this.targetVendors = response.vendors || [];
adminMarketplaceProductDetailLog.info('Loaded target vendors:', this.targetVendors.length);
} catch (error) {
adminMarketplaceProductDetailLog.error('Failed to load target vendors:', error);
}
},
/**
* Open copy modal
*/
openCopyModal() {
this.copyForm.vendor_id = '';
this.showCopyModal = true;
adminMarketplaceProductDetailLog.info('Opening copy modal for product:', this.productId);
},
/**
* Execute copy to vendor catalog
*/
async executeCopyToVendor() {
if (!this.copyForm.vendor_id) {
this.error = 'Please select a target vendor';
return;
}
this.copying = true;
try {
const response = await apiClient.post('/admin/products/copy-to-vendor', {
marketplace_product_ids: [this.productId],
vendor_id: parseInt(this.copyForm.vendor_id),
skip_existing: this.copyForm.skip_existing
});
adminMarketplaceProductDetailLog.info('Copy result:', response);
// Show success message
const copied = response.copied || 0;
const skipped = response.skipped || 0;
const failed = response.failed || 0;
let message;
if (copied > 0) {
message = 'Product successfully copied to vendor catalog.';
} else if (skipped > 0) {
message = 'Product already exists in the vendor catalog.';
} else {
message = 'Failed to copy product.';
}
// Close modal
this.showCopyModal = false;
// Show notification
Utils.showToast(message, copied > 0 ? 'success' : 'warning');
} catch (error) {
adminMarketplaceProductDetailLog.error('Failed to copy product:', error);
this.error = error.message || 'Failed to copy product to vendor catalog';
} finally {
this.copying = false;
}
},
/**
* Format price for display
*/
formatPrice(price, currency = 'EUR') {
if (price === null || price === undefined) return '-';
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency || 'EUR'
}).format(price);
},
/**
* Format date for display
*/
formatDate(dateString) {
if (!dateString) return '-';
try {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
} catch (e) {
return dateString;
}
},
/**
* Get full language name from ISO code (native names for Luxembourg languages)
*/
getLanguageName(code) {
const languages = {
'en': 'English',
'de': 'Deutsch',
'fr': 'Français',
'lb': 'Lëtzebuergesch',
'es': 'Español',
'it': 'Italiano',
'nl': 'Nederlands',
'pt': 'Português',
'pl': 'Polski',
'cs': 'Čeština',
'da': 'Dansk',
'sv': 'Svenska',
'fi': 'Suomi',
'no': 'Norsk',
'hu': 'Hungarian',
'ro': 'Romanian',
'bg': 'Bulgarian',
'el': 'Greek',
'sk': 'Slovak',
'sl': 'Slovenian',
'hr': 'Croatian',
'lt': 'Lithuanian',
'lv': 'Latvian',
'et': 'Estonian'
};
return languages[code?.toLowerCase()] || '';
},
/**
* Copy text to clipboard
*/
async copyToClipboard(text) {
if (!text) return;
try {
await navigator.clipboard.writeText(text);
Utils.showToast('Copied to clipboard', 'success');
} catch (err) {
adminMarketplaceProductDetailLog.error('Failed to copy to clipboard:', err);
Utils.showToast('Failed to copy to clipboard', 'error');
}
}
};
}

View File

@@ -0,0 +1,554 @@
// noqa: js-006 - async init pattern is safe, loadData has try/catch
// static/admin/js/marketplace-products.js
/**
* Admin marketplace products page logic
* Browse the master product repository (imported from external sources)
*/
const adminMarketplaceProductsLog = window.LogConfig.loggers.adminMarketplaceProducts ||
window.LogConfig.createLogger('adminMarketplaceProducts', false);
adminMarketplaceProductsLog.info('Loading...');
function adminMarketplaceProducts() {
adminMarketplaceProductsLog.info('adminMarketplaceProducts() called');
return {
// Inherit base layout state
...data(),
// Set page identifier
currentPage: 'marketplace-products',
// Loading states
loading: true,
error: '',
// Products data
products: [],
stats: {
total: 0,
active: 0,
inactive: 0,
digital: 0,
physical: 0,
by_marketplace: {}
},
// Filters
filters: {
search: '',
marketplace: '',
vendor_name: '',
is_active: '',
is_digital: ''
},
// Selected vendor (for prominent display and filtering)
selectedVendor: null,
// Tom Select instance
vendorSelectInstance: null,
// Available marketplaces for filter dropdown
marketplaces: [],
// Pagination
pagination: {
page: 1,
per_page: 20,
total: 0,
pages: 0
},
// Selection state
selectedProducts: [],
// Copy to vendor modal state
showCopyModal: false,
copying: false,
copyForm: {
vendor_id: '',
skip_existing: true
},
targetVendors: [],
// Debounce timer
searchTimeout: null,
// Computed: Total pages
get totalPages() {
return this.pagination.pages;
},
// Computed: Start index for pagination display
get startIndex() {
if (this.pagination.total === 0) return 0;
return (this.pagination.page - 1) * this.pagination.per_page + 1;
},
// Computed: End index for pagination display
get endIndex() {
const end = this.pagination.page * this.pagination.per_page;
return end > this.pagination.total ? this.pagination.total : end;
},
// Computed: Page numbers for pagination
get pageNumbers() {
const pages = [];
const totalPages = this.totalPages;
const current = this.pagination.page;
if (totalPages <= 7) {
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
} else {
pages.push(1);
if (current > 3) {
pages.push('...');
}
const start = Math.max(2, current - 1);
const end = Math.min(totalPages - 1, current + 1);
for (let i = start; i <= end; i++) {
pages.push(i);
}
if (current < totalPages - 2) {
pages.push('...');
}
pages.push(totalPages);
}
return pages;
},
async init() {
adminMarketplaceProductsLog.info('Marketplace Products init() called');
// Guard against multiple initialization
if (window._adminMarketplaceProductsInitialized) {
adminMarketplaceProductsLog.warn('Already initialized, skipping');
return;
}
window._adminMarketplaceProductsInitialized = true;
// Load platform settings for rows per page
if (window.PlatformSettings) {
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
}
// Initialize Tom Select for vendor filter
this.initVendorSelect();
// Check localStorage for saved vendor
const savedVendorId = localStorage.getItem('marketplace_products_selected_vendor_id');
if (savedVendorId) {
adminMarketplaceProductsLog.info('Restoring saved vendor:', savedVendorId);
// Restore vendor after a short delay to ensure TomSelect is ready
setTimeout(async () => {
await this.restoreSavedVendor(parseInt(savedVendorId));
}, 200);
// Load other data but not products (restoreSavedVendor will do that)
await Promise.all([
this.loadStats(),
this.loadMarketplaces(),
this.loadTargetVendors()
]);
} else {
// No saved vendor - load all data including unfiltered products
await Promise.all([
this.loadStats(),
this.loadMarketplaces(),
this.loadTargetVendors(),
this.loadProducts()
]);
}
adminMarketplaceProductsLog.info('Marketplace Products initialization complete');
},
/**
* Restore saved vendor from localStorage
*/
async restoreSavedVendor(vendorId) {
try {
const vendor = await apiClient.get(`/admin/vendors/${vendorId}`);
if (this.vendorSelectInstance && vendor) {
// Add the vendor as an option and select it
this.vendorSelectInstance.addOption({
id: vendor.id,
name: vendor.name,
vendor_code: vendor.vendor_code
});
this.vendorSelectInstance.setValue(vendor.id, true);
// Set the filter state
this.selectedVendor = vendor;
this.filters.vendor_name = vendor.name;
adminMarketplaceProductsLog.info('Restored vendor:', vendor.name);
// Load products with the vendor filter applied
await this.loadProducts();
}
} catch (error) {
adminMarketplaceProductsLog.warn('Failed to restore saved vendor, clearing localStorage:', error);
localStorage.removeItem('marketplace_products_selected_vendor_id');
// Load unfiltered products as fallback
await this.loadProducts();
}
},
/**
* Initialize Tom Select for vendor autocomplete
*/
initVendorSelect() {
const selectEl = this.$refs.vendorSelect;
if (!selectEl) {
adminMarketplaceProductsLog.warn('Vendor select element not found');
return;
}
// Wait for Tom Select to be available
if (typeof TomSelect === 'undefined') {
adminMarketplaceProductsLog.warn('TomSelect not loaded, retrying in 100ms');
setTimeout(() => this.initVendorSelect(), 100);
return;
}
this.vendorSelectInstance = new TomSelect(selectEl, {
valueField: 'id',
labelField: 'name',
searchField: ['name', 'vendor_code'],
placeholder: 'Filter by vendor...',
allowEmptyOption: true,
load: async (query, callback) => {
try {
const response = await apiClient.get('/admin/vendors', {
search: query,
limit: 50
});
callback(response.vendors || []);
} catch (error) {
adminMarketplaceProductsLog.error('Failed to search vendors:', error);
callback([]);
}
},
render: {
option: (data, escape) => {
return `<div class="flex items-center justify-between py-1">
<span>${escape(data.name)}</span>
<span class="text-xs text-gray-400 font-mono">${escape(data.vendor_code || '')}</span>
</div>`;
},
item: (data, escape) => {
return `<div>${escape(data.name)}</div>`;
}
},
onChange: (value) => {
if (value) {
const vendor = this.vendorSelectInstance.options[value];
this.selectedVendor = vendor;
this.filters.vendor_name = vendor.name;
// Save to localStorage
localStorage.setItem('marketplace_products_selected_vendor_id', value.toString());
} else {
this.selectedVendor = null;
this.filters.vendor_name = '';
// Clear from localStorage
localStorage.removeItem('marketplace_products_selected_vendor_id');
}
this.pagination.page = 1;
this.loadProducts();
this.loadStats();
}
});
adminMarketplaceProductsLog.info('Vendor select initialized');
},
/**
* Clear vendor filter
*/
clearVendorFilter() {
if (this.vendorSelectInstance) {
this.vendorSelectInstance.clear();
}
this.selectedVendor = null;
this.filters.vendor_name = '';
// Clear from localStorage
localStorage.removeItem('marketplace_products_selected_vendor_id');
this.pagination.page = 1;
this.loadProducts();
this.loadStats();
},
/**
* Load product statistics
*/
async loadStats() {
try {
const params = new URLSearchParams();
if (this.filters.marketplace) {
params.append('marketplace', this.filters.marketplace);
}
if (this.filters.vendor_name) {
params.append('vendor_name', this.filters.vendor_name);
}
const url = params.toString() ? `/admin/products/stats?${params}` : '/admin/products/stats';
const response = await apiClient.get(url);
this.stats = response;
adminMarketplaceProductsLog.info('Loaded stats:', this.stats);
} catch (error) {
adminMarketplaceProductsLog.error('Failed to load stats:', error);
}
},
/**
* Load available marketplaces for filter
*/
async loadMarketplaces() {
try {
const response = await apiClient.get('/admin/products/marketplaces');
this.marketplaces = response.marketplaces || [];
adminMarketplaceProductsLog.info('Loaded marketplaces:', this.marketplaces);
} catch (error) {
adminMarketplaceProductsLog.error('Failed to load marketplaces:', error);
}
},
/**
* Load target vendors for copy functionality (actual vendor accounts)
*/
async loadTargetVendors() {
try {
const response = await apiClient.get('/admin/vendors?is_active=true&limit=500');
this.targetVendors = response.vendors || [];
adminMarketplaceProductsLog.info('Loaded target vendors:', this.targetVendors.length);
} catch (error) {
adminMarketplaceProductsLog.error('Failed to load target vendors:', error);
}
},
/**
* Load products with filtering and pagination
*/
async loadProducts() {
this.loading = true;
this.error = '';
try {
const params = new URLSearchParams({
skip: (this.pagination.page - 1) * this.pagination.per_page,
limit: this.pagination.per_page
});
// Add filters
if (this.filters.search) {
params.append('search', this.filters.search);
}
if (this.filters.marketplace) {
params.append('marketplace', this.filters.marketplace);
}
if (this.filters.vendor_name) {
params.append('vendor_name', this.filters.vendor_name);
}
if (this.filters.is_active !== '') {
params.append('is_active', this.filters.is_active);
}
if (this.filters.is_digital !== '') {
params.append('is_digital', this.filters.is_digital);
}
const response = await apiClient.get(`/admin/products?${params.toString()}`);
this.products = response.products || [];
this.pagination.total = response.total || 0;
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
adminMarketplaceProductsLog.info('Loaded products:', this.products.length, 'of', this.pagination.total);
} catch (error) {
adminMarketplaceProductsLog.error('Failed to load products:', error);
this.error = error.message || 'Failed to load products';
} finally {
this.loading = false;
}
},
/**
* Debounced search handler
*/
debouncedSearch() {
clearTimeout(this.searchTimeout);
this.searchTimeout = setTimeout(() => {
this.pagination.page = 1;
this.loadProducts();
}, 300);
},
/**
* Refresh products list
*/
async refresh() {
await Promise.all([
this.loadStats(),
this.loadProducts()
]);
},
// ─────────────────────────────────────────────────────────────────
// Selection Management
// ─────────────────────────────────────────────────────────────────
/**
* Check if a product is selected
*/
isSelected(productId) {
return this.selectedProducts.includes(productId);
},
/**
* Toggle selection for a single product
*/
toggleSelection(productId) {
const index = this.selectedProducts.indexOf(productId);
if (index === -1) {
this.selectedProducts.push(productId);
} else {
this.selectedProducts.splice(index, 1);
}
adminMarketplaceProductsLog.info('Selection changed:', this.selectedProducts.length, 'selected');
},
/**
* Toggle select all products on current page
*/
toggleSelectAll(event) {
if (event.target.checked) {
// Select all on current page
this.selectedProducts = this.products.map(p => p.id);
} else {
// Deselect all
this.selectedProducts = [];
}
adminMarketplaceProductsLog.info('Select all toggled:', this.selectedProducts.length, 'selected');
},
/**
* Clear all selections
*/
clearSelection() {
this.selectedProducts = [];
adminMarketplaceProductsLog.info('Selection cleared');
},
// ─────────────────────────────────────────────────────────────────
// Copy to Vendor Catalog
// ─────────────────────────────────────────────────────────────────
/**
* Open copy modal for selected products
*/
openCopyToVendorModal() {
if (this.selectedProducts.length === 0) {
this.error = 'Please select at least one product to copy';
return;
}
this.copyForm.vendor_id = '';
this.showCopyModal = true;
adminMarketplaceProductsLog.info('Opening copy modal for', this.selectedProducts.length, 'products');
},
/**
* Copy single product - convenience method for action button
*/
copySingleProduct(productId) {
this.selectedProducts = [productId];
this.openCopyToVendorModal();
},
/**
* Execute copy to vendor catalog
*/
async executeCopyToVendor() {
if (!this.copyForm.vendor_id) {
this.error = 'Please select a target vendor';
return;
}
this.copying = true;
try {
const response = await apiClient.post('/admin/products/copy-to-vendor', {
marketplace_product_ids: this.selectedProducts,
vendor_id: parseInt(this.copyForm.vendor_id),
skip_existing: this.copyForm.skip_existing
});
adminMarketplaceProductsLog.info('Copy result:', response);
// Show success message
const copied = response.copied || 0;
const skipped = response.skipped || 0;
const failed = response.failed || 0;
let message = `Successfully copied ${copied} product(s) to vendor catalog.`;
if (skipped > 0) message += ` ${skipped} already existed.`;
if (failed > 0) message += ` ${failed} failed.`;
// Close modal and clear selection
this.showCopyModal = false;
this.clearSelection();
// Show success notification
Utils.showToast(message, 'success');
} catch (error) {
adminMarketplaceProductsLog.error('Failed to copy products:', error);
const errorMsg = error.message || 'Failed to copy products to vendor catalog';
this.error = errorMsg;
Utils.showToast(errorMsg, 'error');
} finally {
this.copying = false;
}
},
/**
* Format price for display
*/
formatPrice(price, currency = 'EUR') {
if (price === null || price === undefined) return '-';
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency || 'EUR'
}).format(price);
},
/**
* Pagination: Previous page
*/
previousPage() {
if (this.pagination.page > 1) {
this.pagination.page--;
this.loadProducts();
}
},
/**
* Pagination: Next page
*/
nextPage() {
if (this.pagination.page < this.totalPages) {
this.pagination.page++;
this.loadProducts();
}
},
/**
* Pagination: Go to specific page
*/
goToPage(pageNum) {
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
this.pagination.page = pageNum;
this.loadProducts();
}
}
};
}

View File

@@ -0,0 +1,533 @@
// noqa: js-006 - async init pattern is safe, loadData has try/catch
// static/admin/js/marketplace.js
/**
* Admin marketplace import page logic
*/
// ✅ Use centralized logger
const adminMarketplaceLog = window.LogConfig.loggers.marketplace;
adminMarketplaceLog.info('Loading...');
function adminMarketplace() {
adminMarketplaceLog.info('adminMarketplace() called');
return {
// ✅ Inherit base layout state
...data(),
// ✅ Set page identifier
currentPage: 'marketplace',
// Loading states
loading: false,
importing: false,
error: '',
successMessage: '',
// Active import tab (marketplace selector)
activeImportTab: 'letzshop',
// Vendors list
vendors: [],
selectedVendor: null,
// Import form
importForm: {
vendor_id: '',
csv_url: '',
marketplace: 'Letzshop',
language: 'fr',
batch_size: 1000
},
// Filters
filters: {
vendor_id: '',
status: '',
marketplace: ''
},
// Import jobs
jobs: [],
pagination: {
page: 1,
per_page: 20,
total: 0,
pages: 0
},
// Modal state
showJobModal: false,
selectedJob: null,
// Auto-refresh for active jobs
autoRefreshInterval: null,
// Computed: Total pages
get totalPages() {
return this.pagination.pages;
},
// Computed: Start index for pagination display
get startIndex() {
if (this.pagination.total === 0) return 0;
return (this.pagination.page - 1) * this.pagination.per_page + 1;
},
// Computed: End index for pagination display
get endIndex() {
const end = this.pagination.page * this.pagination.per_page;
return end > this.pagination.total ? this.pagination.total : end;
},
// Computed: Page numbers for pagination
get pageNumbers() {
const pages = [];
const totalPages = this.totalPages;
const current = this.pagination.page;
if (totalPages <= 7) {
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
} else {
pages.push(1);
if (current > 3) {
pages.push('...');
}
const start = Math.max(2, current - 1);
const end = Math.min(totalPages - 1, current + 1);
for (let i = start; i <= end; i++) {
pages.push(i);
}
if (current < totalPages - 2) {
pages.push('...');
}
pages.push(totalPages);
}
return pages;
},
async init() {
adminMarketplaceLog.info('Marketplace init() called');
// Guard against multiple initialization
if (window._adminMarketplaceInitialized) {
adminMarketplaceLog.warn('Already initialized, skipping');
return;
}
window._adminMarketplaceInitialized = true;
// Load platform settings for rows per page
if (window.PlatformSettings) {
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
}
// Ensure form defaults are set (in case spread didn't work)
if (!this.importForm.marketplace) {
this.importForm.marketplace = 'Letzshop';
}
if (!this.importForm.batch_size) {
this.importForm.batch_size = 1000;
}
if (!this.importForm.language) {
this.importForm.language = 'fr';
}
adminMarketplaceLog.info('Form defaults:', this.importForm);
await this.loadVendors();
await this.loadJobs();
// Auto-refresh active jobs every 10 seconds
this.startAutoRefresh();
adminMarketplaceLog.info('Marketplace initialization complete');
},
/**
* Load all vendors for dropdown
*/
async loadVendors() {
try {
const response = await apiClient.get('/admin/vendors?limit=1000');
this.vendors = response.vendors || [];
adminMarketplaceLog.info('Loaded vendors:', this.vendors.length);
} catch (error) {
adminMarketplaceLog.error('Failed to load vendors:', error);
this.error = 'Failed to load vendors: ' + (error.message || 'Unknown error');
}
},
/**
* Handle vendor selection change
*/
onVendorChange() {
const vendorId = parseInt(this.importForm.vendor_id);
this.selectedVendor = this.vendors.find(v => v.id === vendorId) || null;
adminMarketplaceLog.info('Selected vendor:', this.selectedVendor);
// Auto-populate CSV URL if marketplace is Letzshop
this.autoPopulateCSV();
},
/**
* Handle language selection change
*/
onLanguageChange() {
// Auto-populate CSV URL if marketplace is Letzshop
this.autoPopulateCSV();
},
/**
* Auto-populate CSV URL based on selected vendor and language
*/
autoPopulateCSV() {
// Only auto-populate for Letzshop marketplace
if (this.importForm.marketplace !== 'Letzshop') return;
if (!this.selectedVendor) return;
const urlMap = {
'fr': this.selectedVendor.letzshop_csv_url_fr,
'en': this.selectedVendor.letzshop_csv_url_en,
'de': this.selectedVendor.letzshop_csv_url_de
};
const url = urlMap[this.importForm.language];
if (url) {
this.importForm.csv_url = url;
adminMarketplaceLog.info('Auto-populated CSV URL:', this.importForm.language, url);
} else {
adminMarketplaceLog.info('No CSV URL configured for language:', this.importForm.language);
}
},
/**
* Load import jobs (only jobs triggered by current admin user)
*/
async loadJobs() {
this.loading = true;
this.error = '';
try {
// Build query params
const params = new URLSearchParams({
skip: (this.pagination.page - 1) * this.pagination.per_page,
limit: this.pagination.per_page,
created_by_me: 'true' // ✅ Only show jobs I triggered
});
// Add filters (keep for consistency, though less needed here)
if (this.filters.vendor_id) {
params.append('vendor_id', this.filters.vendor_id);
}
if (this.filters.status) {
params.append('status', this.filters.status);
}
if (this.filters.marketplace) {
params.append('marketplace', this.filters.marketplace);
}
const response = await apiClient.get(
`/admin/marketplace-import-jobs?${params.toString()}`
);
this.jobs = response.items || [];
this.pagination.total = response.total || 0;
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
adminMarketplaceLog.info('Loaded my jobs:', this.jobs.length);
} catch (error) {
adminMarketplaceLog.error('Failed to load jobs:', error);
this.error = error.message || 'Failed to load import jobs';
} finally {
this.loading = false;
}
},
/**
* Start new import for selected vendor
*/
async startImport() {
if (!this.importForm.csv_url || !this.importForm.vendor_id) {
this.error = 'Please select a vendor and enter a CSV URL';
return;
}
this.importing = true;
this.error = '';
this.successMessage = '';
try {
const payload = {
vendor_id: parseInt(this.importForm.vendor_id),
source_url: this.importForm.csv_url,
marketplace: this.importForm.marketplace,
batch_size: this.importForm.batch_size,
language: this.importForm.language // Include selected language
};
adminMarketplaceLog.info('Starting import:', payload);
const response = await apiClient.post('/admin/marketplace-import-jobs', payload);
adminMarketplaceLog.info('Import started:', response);
const vendorName = this.selectedVendor?.name || 'vendor';
this.successMessage = `Import job #${response.job_id || response.id} started successfully for ${vendorName}!`;
// Clear form
this.importForm.vendor_id = '';
this.importForm.csv_url = '';
this.importForm.language = 'fr';
this.importForm.batch_size = 1000;
this.selectedVendor = null;
// Reload jobs to show the new import
await this.loadJobs();
// Clear success message after 5 seconds
setTimeout(() => {
this.successMessage = '';
}, 5000);
} catch (error) {
adminMarketplaceLog.error('Failed to start import:', error);
this.error = error.message || 'Failed to start import';
} finally {
this.importing = false;
}
},
/**
* Switch marketplace tab and update form accordingly
*/
switchMarketplace(marketplace) {
this.activeImportTab = marketplace;
// Update marketplace in form
const marketplaceMap = {
'letzshop': 'Letzshop',
'codeswholesale': 'CodesWholesale'
};
this.importForm.marketplace = marketplaceMap[marketplace] || 'Letzshop';
// Reset form fields when switching tabs
this.importForm.vendor_id = '';
this.importForm.csv_url = '';
this.importForm.language = 'fr';
this.importForm.batch_size = 1000;
this.selectedVendor = null;
adminMarketplaceLog.info('Switched to marketplace:', this.importForm.marketplace);
},
/**
* Quick fill form with saved CSV URL from vendor settings
*/
quickFill(language) {
if (!this.selectedVendor) return;
const urlMap = {
'fr': this.selectedVendor.letzshop_csv_url_fr,
'en': this.selectedVendor.letzshop_csv_url_en,
'de': this.selectedVendor.letzshop_csv_url_de
};
const url = urlMap[language];
if (url) {
this.importForm.csv_url = url;
this.importForm.language = language;
adminMarketplaceLog.info('Quick filled:', language, url);
}
},
/**
* Clear all filters and reload
*/
clearFilters() {
this.filters.vendor_id = '';
this.filters.status = '';
this.filters.marketplace = '';
this.pagination.page = 1;
this.loadJobs();
},
/**
* Refresh jobs list
*/
async refreshJobs() {
await this.loadJobs();
},
/**
* Refresh single job status
*/
async refreshJobStatus(jobId) {
try {
const response = await apiClient.get(`/admin/marketplace-import-jobs/${jobId}`);
// Update job in list
const index = this.jobs.findIndex(j => j.id === jobId);
if (index !== -1) {
this.jobs[index] = response;
}
// Update selected job if modal is open
if (this.selectedJob && this.selectedJob.id === jobId) {
this.selectedJob = response;
}
adminMarketplaceLog.info('Refreshed job:', jobId);
} catch (error) {
adminMarketplaceLog.error('Failed to refresh job:', error);
}
},
/**
* View job details in modal
*/
async viewJobDetails(jobId) {
try {
const response = await apiClient.get(`/admin/marketplace-import-jobs/${jobId}`);
this.selectedJob = response;
this.showJobModal = true;
adminMarketplaceLog.info('Viewing job details:', jobId);
} catch (error) {
adminMarketplaceLog.error('Failed to load job details:', error);
this.error = error.message || 'Failed to load job details';
}
},
/**
* Close job details modal
*/
closeJobModal() {
this.showJobModal = false;
this.selectedJob = null;
},
/**
* Get vendor name by ID
*/
getVendorName(vendorId) {
const vendor = this.vendors.find(v => v.id === vendorId);
return vendor ? `${vendor.name} (${vendor.vendor_code})` : `Vendor #${vendorId}`;
},
/**
* Pagination: Previous page
*/
previousPage() {
if (this.pagination.page > 1) {
this.pagination.page--;
this.loadJobs();
}
},
/**
* Pagination: Next page
*/
nextPage() {
if (this.pagination.page < this.totalPages) {
this.pagination.page++;
this.loadJobs();
}
},
/**
* Pagination: Go to specific page
*/
goToPage(pageNum) {
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
this.pagination.page = pageNum;
this.loadJobs();
}
},
/**
* Format date for display
*/
formatDate(dateString) {
if (!dateString) return 'N/A';
try {
const date = new Date(dateString);
return date.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
} catch (error) {
return dateString;
}
},
/**
* Calculate duration between start and end
*/
calculateDuration(job) {
if (!job.started_at) {
return 'Not started';
}
const start = new Date(job.started_at);
const end = job.completed_at ? new Date(job.completed_at) : new Date();
const durationMs = end - start;
// Convert to human-readable format
const seconds = Math.floor(durationMs / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
if (hours > 0) {
return `${hours}h ${minutes % 60}m`;
} else if (minutes > 0) {
return `${minutes}m ${seconds % 60}s`;
} else {
return `${seconds}s`;
}
},
/**
* Start auto-refresh for active jobs
*/
startAutoRefresh() {
// Clear any existing interval
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
}
// Refresh every 10 seconds if there are active jobs
this.autoRefreshInterval = setInterval(async () => {
const hasActiveJobs = this.jobs.some(job =>
job.status === 'pending' || job.status === 'processing'
);
if (hasActiveJobs) {
adminMarketplaceLog.info('Auto-refreshing active jobs...');
await this.loadJobs();
}
}, 10000); // 10 seconds
},
/**
* Stop auto-refresh (cleanup)
*/
stopAutoRefresh() {
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = null;
}
}
};
}
// Cleanup on page unload
window.addEventListener('beforeunload', () => {
if (window._adminMarketplaceInstance && window._adminMarketplaceInstance.stopAutoRefresh) {
window._adminMarketplaceInstance.stopAutoRefresh();
}
});