// static/admin/js/vendor-product-create.js /** * Admin vendor product create page logic * Create new vendor product entries */ const adminVendorProductCreateLog = window.LogConfig.loggers.adminVendorProductCreate || window.LogConfig.createLogger('adminVendorProductCreate', false); adminVendorProductCreateLog.info('Loading...'); function adminVendorProductCreate() { adminVendorProductCreateLog.info('adminVendorProductCreate() called'); return { // Inherit base layout state ...data(), // Set page identifier currentPage: 'vendor-products', // Loading states saving: false, // Tom Select instance vendorSelectInstance: null, // Form data form: { vendor_id: null, title: '', brand: '', vendor_sku: '', gtin: '', price: null, currency: 'EUR', availability: '', is_active: true, is_featured: false, is_digital: false, description: '' }, async init() { adminVendorProductCreateLog.info('Vendor Product Create init() called'); // Guard against multiple initialization if (window._adminVendorProductCreateInitialized) { adminVendorProductCreateLog.warn('Already initialized, skipping'); return; } window._adminVendorProductCreateInitialized = true; // Initialize Tom Select this.initVendorSelect(); adminVendorProductCreateLog.info('Vendor Product Create initialization complete'); }, /** * Initialize Tom Select for vendor autocomplete */ initVendorSelect() { const selectEl = this.$refs.vendorSelect; if (!selectEl) { adminVendorProductCreateLog.warn('Vendor select element not found'); return; } // Wait for Tom Select to be available if (typeof TomSelect === 'undefined') { adminVendorProductCreateLog.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: 'Search vendor...', load: async (query, callback) => { try { const response = await apiClient.get('/admin/vendors', { search: query, limit: 50 }); callback(response.vendors || []); } catch (error) { adminVendorProductCreateLog.error('Failed to search vendors:', error); callback([]); } }, render: { option: (data, escape) => { return `
${escape(data.name)} ${escape(data.vendor_code || '')}
`; }, item: (data, escape) => { return `
${escape(data.name)}
`; } }, onChange: (value) => { this.form.vendor_id = value ? parseInt(value) : null; } }); adminVendorProductCreateLog.info('Vendor select initialized'); }, /** * Create the product */ async createProduct() { if (!this.form.vendor_id) { Utils.showToast('Please select a vendor', 'error'); return; } if (!this.form.title) { Utils.showToast('Please enter a product title', 'error'); return; } this.saving = true; try { // Build create payload const payload = { vendor_id: this.form.vendor_id, title: this.form.title, brand: this.form.brand || null, vendor_sku: this.form.vendor_sku || null, gtin: this.form.gtin || null, price: this.form.price ? parseFloat(this.form.price) : null, currency: this.form.currency || 'EUR', availability: this.form.availability || null, is_active: this.form.is_active, is_featured: this.form.is_featured, is_digital: this.form.is_digital, description: this.form.description || null }; const response = await apiClient.post('/admin/vendor-products', payload); adminVendorProductCreateLog.info('Product created:', response.id); Utils.showToast('Product created successfully', 'success'); // Redirect to the new product's detail page setTimeout(() => { window.location.href = `/admin/vendor-products/${response.id}`; }, 1000); } catch (error) { adminVendorProductCreateLog.error('Failed to create product:', error); Utils.showToast(error.message || 'Failed to create product', 'error'); } finally { this.saving = false; } } }; }