Files
orion/static/vendor/js/orders.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

355 lines
11 KiB
JavaScript

// static/vendor/js/orders.js
/**
* Vendor orders management page logic
* View and manage vendor's orders
*/
const vendorOrdersLog = window.LogConfig.loggers.vendorOrders ||
window.LogConfig.createLogger('vendorOrders', false);
vendorOrdersLog.info('Loading...');
function vendorOrders() {
vendorOrdersLog.info('vendorOrders() called');
return {
// Inherit base layout state
...data(),
// Set page identifier
currentPage: 'orders',
// Loading states
loading: true,
error: '',
saving: false,
// Orders data
orders: [],
stats: {
total: 0,
pending: 0,
processing: 0,
completed: 0,
cancelled: 0
},
// Order statuses for filter and display
statuses: [
{ value: 'pending', label: 'Pending', color: 'yellow' },
{ value: 'processing', label: 'Processing', color: 'blue' },
{ value: 'shipped', label: 'Shipped', color: 'indigo' },
{ value: 'delivered', label: 'Delivered', color: 'green' },
{ value: 'completed', label: 'Completed', color: 'green' },
{ value: 'cancelled', label: 'Cancelled', color: 'red' },
{ value: 'refunded', label: 'Refunded', color: 'gray' }
],
// Filters
filters: {
search: '',
status: '',
date_from: '',
date_to: ''
},
// Pagination
pagination: {
page: 1,
per_page: 20,
total: 0,
pages: 0
},
// Modal states
showDetailModal: false,
showStatusModal: false,
selectedOrder: null,
newStatus: '',
// 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() {
vendorOrdersLog.info('Orders init() called');
// Guard against multiple initialization
if (window._vendorOrdersInitialized) {
vendorOrdersLog.warn('Already initialized, skipping');
return;
}
window._vendorOrdersInitialized = true;
// Load platform settings for rows per page
if (window.PlatformSettings) {
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
}
try {
await this.loadOrders();
} catch (error) {
vendorOrdersLog.error('Init failed:', error);
this.error = 'Failed to initialize orders page';
}
vendorOrdersLog.info('Orders initialization complete');
},
/**
* Load orders with filtering and pagination
*/
async loadOrders() {
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.status) {
params.append('status', this.filters.status);
}
if (this.filters.date_from) {
params.append('date_from', this.filters.date_from);
}
if (this.filters.date_to) {
params.append('date_to', this.filters.date_to);
}
const response = await apiClient.get(`/vendor/${this.vendorCode}/orders?${params.toString()}`);
this.orders = response.orders || [];
this.pagination.total = response.total || 0;
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
// Calculate stats
this.calculateStats();
vendorOrdersLog.info('Loaded orders:', this.orders.length, 'of', this.pagination.total);
} catch (error) {
vendorOrdersLog.error('Failed to load orders:', error);
this.error = error.message || 'Failed to load orders';
} finally {
this.loading = false;
}
},
/**
* Calculate order statistics
*/
calculateStats() {
this.stats = {
total: this.pagination.total,
pending: this.orders.filter(o => o.status === 'pending').length,
processing: this.orders.filter(o => o.status === 'processing').length,
completed: this.orders.filter(o => ['completed', 'delivered'].includes(o.status)).length,
cancelled: this.orders.filter(o => o.status === 'cancelled').length
};
},
/**
* Debounced search handler
*/
debouncedSearch() {
clearTimeout(this.searchTimeout);
this.searchTimeout = setTimeout(() => {
this.pagination.page = 1;
this.loadOrders();
}, 300);
},
/**
* Apply filter and reload
*/
applyFilter() {
this.pagination.page = 1;
this.loadOrders();
},
/**
* Clear all filters
*/
clearFilters() {
this.filters = {
search: '',
status: '',
date_from: '',
date_to: ''
};
this.pagination.page = 1;
this.loadOrders();
},
/**
* View order details
*/
async viewOrder(order) {
this.loading = true;
try {
const response = await apiClient.get(`/vendor/${this.vendorCode}/orders/${order.id}`);
this.selectedOrder = response;
this.showDetailModal = true;
vendorOrdersLog.info('Loaded order details:', order.id);
} catch (error) {
vendorOrdersLog.error('Failed to load order details:', error);
Utils.showToast(error.message || 'Failed to load order details', 'error');
} finally {
this.loading = false;
}
},
/**
* Open status change modal
*/
openStatusModal(order) {
this.selectedOrder = order;
this.newStatus = order.status;
this.showStatusModal = true;
},
/**
* Update order status
*/
async updateStatus() {
if (!this.selectedOrder || !this.newStatus) return;
this.saving = true;
try {
await apiClient.put(`/vendor/${this.vendorCode}/orders/${this.selectedOrder.id}/status`, {
status: this.newStatus
});
Utils.showToast('Order status updated', 'success');
vendorOrdersLog.info('Updated order status:', this.selectedOrder.id, this.newStatus);
this.showStatusModal = false;
this.selectedOrder = null;
await this.loadOrders();
} catch (error) {
vendorOrdersLog.error('Failed to update status:', error);
Utils.showToast(error.message || 'Failed to update status', 'error');
} finally {
this.saving = false;
}
},
/**
* Get status color class
*/
getStatusColor(status) {
const statusObj = this.statuses.find(s => s.value === status);
return statusObj ? statusObj.color : 'gray';
},
/**
* Get status label
*/
getStatusLabel(status) {
const statusObj = this.statuses.find(s => s.value === status);
return statusObj ? statusObj.label : status;
},
/**
* Format price for display
*/
formatPrice(cents) {
if (!cents && cents !== 0) return '-';
return new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
}).format(cents / 100);
},
/**
* Format date for display
*/
formatDate(dateStr) {
if (!dateStr) return '-';
return new Date(dateStr).toLocaleDateString('de-DE', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
},
/**
* Pagination: Previous page
*/
previousPage() {
if (this.pagination.page > 1) {
this.pagination.page--;
this.loadOrders();
}
},
/**
* Pagination: Next page
*/
nextPage() {
if (this.pagination.page < this.totalPages) {
this.pagination.page++;
this.loadOrders();
}
},
/**
* Pagination: Go to specific page
*/
goToPage(pageNum) {
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
this.pagination.page = pageNum;
this.loadOrders();
}
}
};
}