orion/static/admin/js/vendor-product-create.js

// 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 `<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) => {
                    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;
            }
        }
    };
}