LineItemsManager Examples

HTML Code:

<input type="text" data-role="product"
       data-autocomplete="true"
       data-source="data/products.json">

<table data-line-items="items"
       data-detail-api="data/products.json"
       data-listen-select="[data-role='product']"
       data-on-calculate="calculatePO">
  <thead>
    <tr>
      <th data-field="sku" data-display-only="true">SKU</th>
      <th data-field="quantity" data-type="number">Quantity</th>
      <th data-field="unit_price" data-type="currency">Price</th>
      <th data-field="subtotal" data-readonly="true">Subtotal</th>
    </tr>
  </thead>
</table>

JavaScript:

function calculatePO({items}) {
  let total = 0;

  const updatedItems = items.map(item => {
    const qty = parseFloat(item.quantity) || 0;
    const price = parseFloat(item.unit_price) || 0;
    const subtotal = qty * price;
    total += subtotal;

    return {subtotal: subtotal.toFixed(2)};
  });

  return {
    items: updatedItems,
    '#po_total': total.toFixed(2)
  };
}

Cell Button (VAT):

<th data-field="unit_price" data-type="currency"
    data-button-click="addVat"
    data-button-class="icon-plus"
    data-button-title="+ VAT 7%">Price</th>

JavaScript:

// Button handler
function addVat(currentValue) {
  const price = parseFloat(currentValue) || 0;
  return (price * 1.07).toFixed(2);
}

// Calculation
function calculateInvoice({items}) {
  let subtotal = 0;

  const updatedItems = items.map(item => {
    const qty = parseFloat(item.quantity) || 0;
    const price = parseFloat(item.unit_price) || 0;
    const itemSubtotal = qty * price;
    subtotal += itemSubtotal;
    return {subtotal: itemSubtotal.toFixed(2)};
  });

  const discountPercent = parseFloat(
    document.getElementById('inv_discount_percent')?.value
  ) || 0;
  const discount = subtotal * (discountPercent / 100);
  const afterDiscount = subtotal - discount;
  const vat = afterDiscount * 0.07;
  const total = afterDiscount + vat;

  return {
    items: updatedItems,
    '#inv_subtotal': subtotal.toFixed(2),
    '#inv_discount_amount': discount.toFixed(2),
    '#inv_after_discount': afterDiscount.toFixed(2),
    '#inv_vat': vat.toFixed(2),
    '#inv_total': total.toFixed(2)
  };
}

HTML Code:

<select id="po_id" name="po_id">
  <option value="">-- Select PO --</option>
</select>

<table data-line-items="gr_items"
       data-load-from="#po_id"
       data-load-api="data/po-items.json"
       data-load-param="po_id">
  <thead>
    <tr>
      <th data-field="quantity" data-display-only="true">Ordered</th>
      <th data-field="received_qty" data-type="number">Received</th>
    </tr>
  </thead>
</table>

API Response:

{
  "success": true,
  "data": {
    "items": [
      {"sku": "P001", "name": "Product A", "quantity": 10},
      {"sku": "P002", "name": "Product B", "quantity": 5}
    ]
  }
}

HTML Code:

<table data-line-items="items"
       data-merge="true"
       data-merge-key="sku">
  <!-- When adding duplicate SKU, quantity will be added -->
</table>

Event Listener:

table.addEventListener('lineitems:merge', (e) => {
  console.log('Merged duplicate:', e.detail.row);
  console.log('New quantity:', e.detail.row.quantity);
});

JavaScript API:

const instance = LineItemsManager.getInstance('#api-table');

// Add item
instance.addItem({
  sku: 'P001',
  name: 'Product A',
  quantity: 1,
  unit_price: 100
});

// Update row
instance.updateRow(0, {quantity: 5});

// Remove row
instance.removeRow(0);

// Get all data
const data = instance.getData();

// Set data
instance.setData([...]);

// Clear all
instance.clear();