orders.js

7.54 KB
14/10/2025 05:49
JS
orders.js
// Order Management logic
class OrderManagement {
  constructor() {
    this.dbHelper = dbHelper;
    this.orders = [];
    this.currentFilter = 'all';
    this.currentOrderId = null;

    // Initialize modals
    this.orderDetailsModal = new Modal('orderDetailsModal');
    this.updateStatusModal = new Modal('updateStatusModal');

    // Initialize event listeners
    this.initEventListeners();

    // Start auto-refresh
    this.startAutoRefresh();
  }

  async init() {
    try {
      // Initialize database
      await this.dbHelper.init();

      // Initialize with mock data if needed
      await this.dbHelper.initializeWithMockData();

      // Load orders
      await this.loadOrders();

      console.log('Order Management initialized successfully');
    } catch (error) {
      console.error('Error initializing Order Management:', error);
    }
  }

  initEventListeners() {
    // Filter tabs
    const filterTabs = document.querySelectorAll('.filter-tab');
    filterTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        // Remove active class from all tabs
        filterTabs.forEach(t => t.classList.remove('active'));

        // Add active class to clicked tab
        tab.classList.add('active');

        // Filter orders
        this.currentFilter = tab.getAttribute('data-filter');
        this.filterOrders();
      });
    });

    // Refresh button
    const refreshBtn = document.getElementById('refreshOrdersBtn');
    if (refreshBtn) {
      refreshBtn.addEventListener('click', () => {
        this.loadOrders();
        toast.show('รีเฟรชข้อมูลสำเร็จ');
      });
    }

    // Close order details button
    const closeOrderDetailsBtn = document.getElementById('closeOrderDetailsBtn');
    if (closeOrderDetailsBtn) {
      closeOrderDetailsBtn.addEventListener('click', () => {
        this.orderDetailsModal.close();
      });
    }

    // Update order status button
    const updateOrderStatusBtn = document.getElementById('updateOrderStatusBtn');
    if (updateOrderStatusBtn) {
      updateOrderStatusBtn.addEventListener('click', () => {
        this.orderDetailsModal.close();
        this.updateStatusModal.open();
      });
    }

    // Status options
    const statusOptions = document.querySelectorAll('.status-option');
    statusOptions.forEach(option => {
      option.addEventListener('click', () => {
        // Remove selected class from all options
        statusOptions.forEach(o => o.classList.remove('selected'));

        // Add selected class to clicked option
        option.classList.add('selected');
      });
    });

    // Cancel update button
    const cancelUpdateBtn = document.getElementById('cancelUpdateBtn');
    if (cancelUpdateBtn) {
      cancelUpdateBtn.addEventListener('click', () => {
        this.updateStatusModal.close();
      });
    }

    // Confirm update button
    const confirmUpdateBtn = document.getElementById('confirmUpdateBtn');
    if (confirmUpdateBtn) {
      confirmUpdateBtn.addEventListener('click', () => {
        this.updateOrderStatus();
      });
    }
  }

  async loadOrders() {
    try {
      // Get orders from IndexedDB
      const ordersData = await this.dbHelper.getAll('orders');
      this.orders = ordersData.map(order => new Order(order));

      // Sort orders by date (newest first)
      this.orders.sort((a, b) => new Date(b.date) - new Date(a.date));

      // Render orders
      this.renderOrders();
    } catch (error) {
      console.error('Error loading orders:', error);
    }
  }

  renderOrders() {
    const ordersList = document.getElementById('ordersList');
    if (ordersList) {
      if (this.orders.length === 0) {
        ordersList.innerHTML = '<p>ไม่มีคำสั่งซื้อ</p>';
      } else {
        ordersList.innerHTML = this.orders.map(order => order.renderCard()).join('');

        // Add event listeners to order cards
        this.attachOrderEventListeners();
      }
    }
  }

  filterOrders() {
    let filteredOrders = this.orders;

    // Filter by status
    if (this.currentFilter !== 'all') {
      filteredOrders = filteredOrders.filter(order => order.status === this.currentFilter);
    }

    // Render filtered orders
    const ordersList = document.getElementById('ordersList');
    if (ordersList) {
      if (filteredOrders.length === 0) {
        ordersList.innerHTML = '<p>ไม่มีคำสั่งซื้อที่ตรงกับเงื่อนไข</p>';
      } else {
        ordersList.innerHTML = filteredOrders.map(order => order.renderCard()).join('');

        // Add event listeners to order cards
        this.attachOrderEventListeners();
      }
    }
  }

  attachOrderEventListeners() {
    // View order buttons
    document.querySelectorAll('.view-order-btn').forEach(button => {
      button.addEventListener('click', (e) => {
        const orderId = e.target.getAttribute('data-id');
        this.viewOrderDetails(orderId);
      });
    });

    // Update status buttons
    document.querySelectorAll('.update-status-btn').forEach(button => {
      button.addEventListener('click', (e) => {
        const orderId = e.target.getAttribute('data-id');
        this.openUpdateStatusModal(orderId);
      });
    });
  }

  viewOrderDetails(orderId) {
    // Find order
    const order = this.orders.find(o => o.id === orderId);
    if (!order) return;

    // Update order details modal
    const orderDetailsContent = document.getElementById('orderDetailsContent');
    orderDetailsContent.innerHTML = order.renderDetails();

    // Store current order ID
    this.currentOrderId = orderId;

    // Open modal
    this.orderDetailsModal.open();
  }

  openUpdateStatusModal(orderId) {
    // Find order
    const order = this.orders.find(o => o.id === orderId);
    if (!order) return;

    // Store current order ID
    this.currentOrderId = orderId;

    // Select current status
    document.querySelectorAll('.status-option').forEach(option => {
      option.classList.remove('selected');
      if (option.getAttribute('data-status') === order.status) {
        option.classList.add('selected');
      }
    });

    // Open modal
    this.updateStatusModal.open();
  }

  async updateOrderStatus() {
    try {
      if (!this.currentOrderId) return;

      // Get selected status
      const selectedStatus = document.querySelector('.status-option.selected');
      if (!selectedStatus) {
        toast.show('กรุณาเลือกสถานะ', 'warning');
        return;
      }

      const newStatus = selectedStatus.getAttribute('data-status');

      // Find order
      const order = this.orders.find(o => o.id === this.currentOrderId);
      if (!order) return;

      // Update order status
      order.status = newStatus;

      // Update in IndexedDB
      await this.dbHelper.update('orders', order);

      // Close modal
      this.updateStatusModal.close();

      // Reload orders
      await this.loadOrders();

      // Show success message
      toast.show('อัปเดตสถานะสำเร็จ');

      console.log('Order status updated successfully:', order);
    } catch (error) {
      console.error('Error updating order status:', error);
      toast.show('เกิดข้อผิดพลาดในการอัปเดตสถานะ', 'error');
    }
  }

  startAutoRefresh() {
    // Refresh orders every 5 seconds
    setInterval(() => {
      this.loadOrders();
    }, 5000);
  }
}

// Initialize Order Management when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  const orderManagement = new OrderManagement();
  orderManagement.init();
});