@xniffing/request-queue NPM

@xniffing/request-queue

A customizable web component for managing and displaying order requests in a queue format, perfect for restaurants and food delivery services.

Features

📱 Responsive design
🔄 Real-time status updates
🔍 Search functionality
📊 Detailed order information display
💳 Payment status tracking
📝 Order notes support
🕒 Scheduled delivery times
💶 VAT calculations
🎨 Customizable styling

Installation

NPM

npm install @xniffing/request-queue

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xniffing/request-queue/dist/request-queue.css">
<script src="https://cdn.jsdelivr.net/npm/@xniffing/request-queue"></script>

Usage

Add the component to your HTML:

<peaceui-request-queue id="requestQueue"></peaceui-request-queue>

Initialize with data:

const requestsData = [
  {
    id: 1,
    expanded: false,
    customerName: 'John Doe',
    orderDateTime: '2024-03-20T00:48:00',
    scheduledDateTime: '2024-03-20T01:30:00',
    status: 'Pending',
    items: [
      {
        quantity: 1,
        name: 'Product Name',
        variant: 'Variant',
        price: 10.00
      }
    ],
    subtotal: 10.00,
    vatRate: 23,
    vatAmount: 2.30,
    total: 12.30,
    phone: '123456789',
    email: 'john@example.com',
    address: '123 Main St',
    postalCode: '12345',
    locality: 'City',
    paymentMethod: 'Credit Card',
    paymentStatus: 'Paid',
    notes: 'Delivery instructions',
    fiscalNumber: '123456789'
  }
];

// Dispatch update event
const event = new CustomEvent('update-requests', {
  detail: JSON.stringify(requestsData),
  bubbles: true,
  composed: true
});
document.getElementById('requestQueue').dispatchEvent(event);

Events

Input Events

update-requests: Update the queue with new request data
```
detail: JSON.stringify(requestsData)
```

Output Events

status-update: Emitted when a request status changes

detail: {
  requestId: number,
  newStatus: string
}

Data Structure

Request Object

interface Request {
  id: number;
  expanded: boolean;
  customerName: string;
  orderDateTime: string;
  scheduledDateTime: string | null;
  status: 'Pending' | 'Accepted' | 'Rejected';
  items: OrderItem[];
  subtotal: number;
  vatRate: number;
  vatAmount: number;
  total: number;
  phone: string;
  email: string;
  address: string;
  postalCode: string;
  locality: string;
  paymentMethod: string;
  paymentStatus: 'Paid' | 'Pending';
  notes: string;
  fiscalNumber: string;
}

interface OrderItem {
  quantity: number;
  name: string;
  variant?: string;
  price: number;
}