Files
orion/static/vendor/js/settings.js
Samir Boulahtit 463e1b67d5 feat: complete vendor frontend parity with admin
Phase 1 - Sidebar Refactor:
- Refactor sidebar to use collapsible sections with Alpine.js
- Add localStorage persistence for section states
- Reorganize navigation into logical groups

Phase 2 - Core JS Files:
- Add products.js: product CRUD, search, filtering, toggle active/featured
- Add orders.js: order list, status management, filtering
- Add inventory.js: stock tracking, adjust/set quantity modals
- Add customers.js: customer list, order history, messaging
- Add team.js: member invite, role management, remove members
- Add profile.js: profile editing with form validation
- Add settings.js: tabbed settings (general, marketplace, notifications)

Templates updated from placeholders to full functional UIs.
Vendor frontend now at ~90% parity with admin.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-01 15:34:38 +01:00

179 lines
5.2 KiB
JavaScript

// static/vendor/js/settings.js
/**
* Vendor settings management page logic
* Configure vendor preferences and integrations
*/
const vendorSettingsLog = window.LogConfig.loggers.vendorSettings ||
window.LogConfig.createLogger('vendorSettings', false);
vendorSettingsLog.info('Loading...');
function vendorSettings() {
vendorSettingsLog.info('vendorSettings() called');
return {
// Inherit base layout state
...data(),
// Set page identifier
currentPage: 'settings',
// Loading states
loading: true,
error: '',
saving: false,
// Settings data
settings: null,
// Active section
activeSection: 'general',
// Sections for navigation
sections: [
{ id: 'general', label: 'General', icon: 'cog' },
{ id: 'marketplace', label: 'Marketplace', icon: 'shopping-cart' },
{ id: 'notifications', label: 'Notifications', icon: 'bell' }
],
// Forms for different sections
generalForm: {
subdomain: '',
is_active: true
},
marketplaceForm: {
letzshop_csv_url_fr: '',
letzshop_csv_url_en: '',
letzshop_csv_url_de: ''
},
notificationForm: {
email_notifications: true,
order_notifications: true,
marketing_emails: false
},
// Track changes
hasChanges: false,
async init() {
vendorSettingsLog.info('Settings init() called');
// Guard against multiple initialization
if (window._vendorSettingsInitialized) {
vendorSettingsLog.warn('Already initialized, skipping');
return;
}
window._vendorSettingsInitialized = true;
try {
await this.loadSettings();
} catch (error) {
vendorSettingsLog.error('Init failed:', error);
this.error = 'Failed to initialize settings page';
}
vendorSettingsLog.info('Settings initialization complete');
},
/**
* Load vendor settings
*/
async loadSettings() {
this.loading = true;
this.error = '';
try {
const response = await apiClient.get(`/vendor/${this.vendorCode}/settings`);
this.settings = response;
// Populate forms
this.generalForm = {
subdomain: response.subdomain || '',
is_active: response.is_active !== false
};
this.marketplaceForm = {
letzshop_csv_url_fr: response.letzshop_csv_url_fr || '',
letzshop_csv_url_en: response.letzshop_csv_url_en || '',
letzshop_csv_url_de: response.letzshop_csv_url_de || ''
};
this.hasChanges = false;
vendorSettingsLog.info('Loaded settings');
} catch (error) {
vendorSettingsLog.error('Failed to load settings:', error);
this.error = error.message || 'Failed to load settings';
} finally {
this.loading = false;
}
},
/**
* Mark form as changed
*/
markChanged() {
this.hasChanges = true;
},
/**
* Save marketplace settings
*/
async saveMarketplaceSettings() {
this.saving = true;
try {
await apiClient.put(`/vendor/${this.vendorCode}/settings/marketplace`, this.marketplaceForm);
Utils.showToast('Marketplace settings saved', 'success');
vendorSettingsLog.info('Marketplace settings updated');
this.hasChanges = false;
} catch (error) {
vendorSettingsLog.error('Failed to save marketplace settings:', error);
Utils.showToast(error.message || 'Failed to save settings', 'error');
} finally {
this.saving = false;
}
},
/**
* Test Letzshop CSV URL
*/
async testLetzshopUrl(lang) {
const url = this.marketplaceForm[`letzshop_csv_url_${lang}`];
if (!url) {
Utils.showToast('Please enter a URL first', 'error');
return;
}
this.saving = true;
try {
// Try to fetch the URL to validate it
const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
Utils.showToast(`URL appears to be valid`, 'success');
} catch (error) {
Utils.showToast('Could not validate URL - it may still work', 'warning');
} finally {
this.saving = false;
}
},
/**
* Reset settings to saved values
*/
resetSettings() {
this.loadSettings();
},
/**
* Switch active section
*/
setSection(sectionId) {
this.activeSection = sectionId;
}
};
}