feat: add marketplace products admin UI with copy-to-vendor functionality
- Add admin marketplace products page to browse imported products - Add admin vendor products page to manage vendor catalog - Add product detail pages for both marketplace and vendor products - Implement copy-to-vendor API to copy marketplace products to vendor catalogs - Add vendor product service with CRUD operations - Update sidebar navigation with new product management links - Add integration and unit tests for new endpoints and services 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
181
static/admin/js/marketplace-product-detail.js
Normal file
181
static/admin/js/marketplace-product-detail.js
Normal file
@@ -0,0 +1,181 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
416
static/admin/js/marketplace-products.js
Normal file
416
static/admin/js/marketplace-products.js
Normal file
@@ -0,0 +1,416 @@
|
||||
// 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: ''
|
||||
},
|
||||
|
||||
// Available marketplaces for filter dropdown
|
||||
marketplaces: [],
|
||||
|
||||
// Available source vendors for filter dropdown
|
||||
sourceVendors: [],
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
page: 1,
|
||||
per_page: 50,
|
||||
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 data in parallel
|
||||
await Promise.all([
|
||||
this.loadStats(),
|
||||
this.loadMarketplaces(),
|
||||
this.loadSourceVendors(),
|
||||
this.loadTargetVendors(),
|
||||
this.loadProducts()
|
||||
]);
|
||||
|
||||
adminMarketplaceProductsLog.info('Marketplace Products initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load product statistics
|
||||
*/
|
||||
async loadStats() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/products/stats');
|
||||
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 available source vendors for filter (from marketplace products)
|
||||
*/
|
||||
async loadSourceVendors() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/products/vendors');
|
||||
this.sourceVendors = response.vendors || [];
|
||||
adminMarketplaceProductsLog.info('Loaded source vendors:', this.sourceVendors);
|
||||
} catch (error) {
|
||||
adminMarketplaceProductsLog.error('Failed to load source vendors:', 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();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -24,6 +24,9 @@ function adminMarketplace() {
|
||||
error: '',
|
||||
successMessage: '',
|
||||
|
||||
// Active import tab (marketplace selector)
|
||||
activeImportTab: 'letzshop',
|
||||
|
||||
// Vendors list
|
||||
vendors: [],
|
||||
selectedVendor: null,
|
||||
@@ -289,6 +292,29 @@ function adminMarketplace() {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
170
static/admin/js/vendor-product-detail.js
Normal file
170
static/admin/js/vendor-product-detail.js
Normal file
@@ -0,0 +1,170 @@
|
||||
// static/admin/js/vendor-product-detail.js
|
||||
/**
|
||||
* Admin vendor product detail page logic
|
||||
* View and manage individual vendor catalog products
|
||||
*/
|
||||
|
||||
const adminVendorProductDetailLog = window.LogConfig.loggers.adminVendorProductDetail ||
|
||||
window.LogConfig.createLogger('adminVendorProductDetail', false);
|
||||
|
||||
adminVendorProductDetailLog.info('Loading...');
|
||||
|
||||
function adminVendorProductDetail() {
|
||||
adminVendorProductDetailLog.info('adminVendorProductDetail() 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: 'vendor-products',
|
||||
|
||||
// Product ID from URL
|
||||
productId: productId,
|
||||
|
||||
// Loading states
|
||||
loading: true,
|
||||
error: '',
|
||||
|
||||
// Product data
|
||||
product: null,
|
||||
|
||||
// Modals
|
||||
showRemoveModal: false,
|
||||
removing: false,
|
||||
|
||||
async init() {
|
||||
adminVendorProductDetailLog.info('Vendor Product Detail init() called, ID:', this.productId);
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._adminVendorProductDetailInitialized) {
|
||||
adminVendorProductDetailLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._adminVendorProductDetailInitialized = true;
|
||||
|
||||
// Load product data
|
||||
await this.loadProduct();
|
||||
|
||||
adminVendorProductDetailLog.info('Vendor Product Detail initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load product details
|
||||
*/
|
||||
async loadProduct() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/admin/vendor-products/${this.productId}`);
|
||||
this.product = response;
|
||||
adminVendorProductDetailLog.info('Loaded product:', this.product.id);
|
||||
} catch (error) {
|
||||
adminVendorProductDetailLog.error('Failed to load product:', error);
|
||||
this.error = error.message || 'Failed to load product details';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open edit modal (placeholder for future implementation)
|
||||
*/
|
||||
openEditModal() {
|
||||
window.dispatchEvent(new CustomEvent('toast', {
|
||||
detail: { message: 'Edit functionality coming soon', type: 'info' }
|
||||
}));
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle active status
|
||||
*/
|
||||
async toggleActive() {
|
||||
// TODO: Implement PATCH endpoint for status update
|
||||
window.dispatchEvent(new CustomEvent('toast', {
|
||||
detail: {
|
||||
message: 'Status toggle functionality coming soon',
|
||||
type: 'info'
|
||||
}
|
||||
}));
|
||||
},
|
||||
|
||||
/**
|
||||
* Confirm remove
|
||||
*/
|
||||
confirmRemove() {
|
||||
this.showRemoveModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute remove
|
||||
*/
|
||||
async executeRemove() {
|
||||
this.removing = true;
|
||||
|
||||
try {
|
||||
await apiClient.delete(`/admin/vendor-products/${this.productId}`);
|
||||
|
||||
adminVendorProductDetailLog.info('Product removed:', this.productId);
|
||||
|
||||
window.dispatchEvent(new CustomEvent('toast', {
|
||||
detail: {
|
||||
message: 'Product removed from catalog successfully',
|
||||
type: 'success'
|
||||
}
|
||||
}));
|
||||
|
||||
// Redirect to vendor products list
|
||||
setTimeout(() => {
|
||||
window.location.href = '/admin/vendor-products';
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
adminVendorProductDetailLog.error('Failed to remove product:', error);
|
||||
window.dispatchEvent(new CustomEvent('toast', {
|
||||
detail: { message: error.message || 'Failed to remove product', type: 'error' }
|
||||
}));
|
||||
} finally {
|
||||
this.removing = false;
|
||||
this.showRemoveModal = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Format price for display
|
||||
*/
|
||||
formatPrice(price, currency = 'EUR') {
|
||||
if (price === null || price === undefined) return '-';
|
||||
const numPrice = typeof price === 'string' ? parseFloat(price) : price;
|
||||
if (isNaN(numPrice)) return price;
|
||||
|
||||
return new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: currency || 'EUR'
|
||||
}).format(numPrice);
|
||||
},
|
||||
|
||||
/**
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch (e) {
|
||||
return dateString;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
310
static/admin/js/vendor-products.js
Normal file
310
static/admin/js/vendor-products.js
Normal file
@@ -0,0 +1,310 @@
|
||||
// static/admin/js/vendor-products.js
|
||||
/**
|
||||
* Admin vendor products page logic
|
||||
* Browse vendor-specific product catalogs with override capability
|
||||
*/
|
||||
|
||||
const adminVendorProductsLog = window.LogConfig.loggers.adminVendorProducts ||
|
||||
window.LogConfig.createLogger('adminVendorProducts', false);
|
||||
|
||||
adminVendorProductsLog.info('Loading...');
|
||||
|
||||
function adminVendorProducts() {
|
||||
adminVendorProductsLog.info('adminVendorProducts() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'vendor-products',
|
||||
|
||||
// Loading states
|
||||
loading: true,
|
||||
error: '',
|
||||
|
||||
// Products data
|
||||
products: [],
|
||||
stats: {
|
||||
total: 0,
|
||||
active: 0,
|
||||
inactive: 0,
|
||||
featured: 0,
|
||||
digital: 0,
|
||||
physical: 0,
|
||||
by_vendor: {}
|
||||
},
|
||||
|
||||
// Filters
|
||||
filters: {
|
||||
search: '',
|
||||
vendor_id: '',
|
||||
is_active: '',
|
||||
is_featured: ''
|
||||
},
|
||||
|
||||
// Available vendors for filter dropdown
|
||||
vendors: [],
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
page: 1,
|
||||
per_page: 50,
|
||||
total: 0,
|
||||
pages: 0
|
||||
},
|
||||
|
||||
// Product detail modal state
|
||||
showProductModal: false,
|
||||
selectedProduct: null,
|
||||
|
||||
// Remove confirmation modal state
|
||||
showRemoveModal: false,
|
||||
productToRemove: null,
|
||||
removing: false,
|
||||
|
||||
// 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() {
|
||||
adminVendorProductsLog.info('Vendor Products init() called');
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._adminVendorProductsInitialized) {
|
||||
adminVendorProductsLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._adminVendorProductsInitialized = true;
|
||||
|
||||
// Load data in parallel
|
||||
await Promise.all([
|
||||
this.loadStats(),
|
||||
this.loadVendors(),
|
||||
this.loadProducts()
|
||||
]);
|
||||
|
||||
adminVendorProductsLog.info('Vendor Products initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load product statistics
|
||||
*/
|
||||
async loadStats() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendor-products/stats');
|
||||
this.stats = response;
|
||||
adminVendorProductsLog.info('Loaded stats:', this.stats);
|
||||
} catch (error) {
|
||||
adminVendorProductsLog.error('Failed to load stats:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load available vendors for filter
|
||||
*/
|
||||
async loadVendors() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendor-products/vendors');
|
||||
this.vendors = response.vendors || [];
|
||||
adminVendorProductsLog.info('Loaded vendors:', this.vendors.length);
|
||||
} catch (error) {
|
||||
adminVendorProductsLog.error('Failed to load 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.vendor_id) {
|
||||
params.append('vendor_id', this.filters.vendor_id);
|
||||
}
|
||||
if (this.filters.is_active !== '') {
|
||||
params.append('is_active', this.filters.is_active);
|
||||
}
|
||||
if (this.filters.is_featured !== '') {
|
||||
params.append('is_featured', this.filters.is_featured);
|
||||
}
|
||||
|
||||
const response = await apiClient.get(`/admin/vendor-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);
|
||||
|
||||
adminVendorProductsLog.info('Loaded products:', this.products.length, 'of', this.pagination.total);
|
||||
} catch (error) {
|
||||
adminVendorProductsLog.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.loadVendors(),
|
||||
this.loadProducts()
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
* View product details - navigate to detail page
|
||||
*/
|
||||
viewProduct(productId) {
|
||||
adminVendorProductsLog.info('Navigating to product detail:', productId);
|
||||
window.location.href = `/admin/vendor-products/${productId}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Show remove confirmation modal
|
||||
*/
|
||||
confirmRemove(product) {
|
||||
this.productToRemove = product;
|
||||
this.showRemoveModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute product removal from catalog
|
||||
*/
|
||||
async executeRemove() {
|
||||
if (!this.productToRemove) return;
|
||||
|
||||
this.removing = true;
|
||||
try {
|
||||
await apiClient.delete(`/admin/vendor-products/${this.productToRemove.id}`);
|
||||
|
||||
adminVendorProductsLog.info('Removed product:', this.productToRemove.id);
|
||||
|
||||
// Close modal and refresh
|
||||
this.showRemoveModal = false;
|
||||
this.productToRemove = null;
|
||||
|
||||
// Show success notification
|
||||
Utils.showToast('Product removed from vendor catalog.', 'success');
|
||||
|
||||
// Refresh the list
|
||||
await this.refresh();
|
||||
} catch (error) {
|
||||
adminVendorProductsLog.error('Failed to remove product:', error);
|
||||
this.error = error.message || 'Failed to remove product';
|
||||
} finally {
|
||||
this.removing = 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();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user