436 lines
19 KiB
JavaScript
436 lines
19 KiB
JavaScript
// /home/Autopartes/pos/static/js/catalog.js
|
|
// Catalog UI: browsable inventory with cart, barcode scanner, external lookup
|
|
// Aligned with design-system catalog.html IDs and class names.
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const API = '/pos/api';
|
|
const token = localStorage.getItem('pos_token');
|
|
if (!token) { window.location.href = '/pos/login'; return; }
|
|
|
|
const headers = { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' };
|
|
|
|
// ─── DOM refs (design-system IDs) ───
|
|
const productGrid = document.getElementById('productGrid');
|
|
const emptyState = document.getElementById('emptyState');
|
|
const emptyTitle = document.getElementById('emptyStateTitle');
|
|
const emptySubtitle = document.getElementById('emptyStateSubtitle');
|
|
const searchInput = document.getElementById('inp-part');
|
|
const partSearchBtn = document.getElementById('partSearchBtn');
|
|
const cartSidebar = document.getElementById('cartSidebar');
|
|
const cartOverlay = document.getElementById('cartOverlay');
|
|
const cartItemsEl = document.getElementById('cartItems');
|
|
const cartEmptyEl = document.getElementById('cartEmpty');
|
|
const cartSubtotalEl = document.getElementById('cartSubtotal');
|
|
const cartTaxEl = document.getElementById('cartTax');
|
|
const cartTotalEl = document.getElementById('cartTotal');
|
|
const cartBadge = document.getElementById('cartBadge');
|
|
const checkoutBtn = document.getElementById('checkoutBtn');
|
|
const paginationNav = document.querySelector('.pagination');
|
|
|
|
// ─── State ───
|
|
let currentPage = 1;
|
|
let currentFilters = {};
|
|
let cartItems = JSON.parse(localStorage.getItem('pos_cart') || '[]');
|
|
let barcodeBuffer = '';
|
|
let barcodeTimeout = null;
|
|
let catalogItemsMap = {}; // id -> item for cart lookup
|
|
|
|
// ─── API helpers ───
|
|
async function apiFetch(url, opts) {
|
|
try {
|
|
var resp = await fetch(url, Object.assign({ headers: headers }, opts || {}));
|
|
if (resp.status === 401) {
|
|
localStorage.removeItem('pos_token');
|
|
window.location.href = '/pos/login';
|
|
return null;
|
|
}
|
|
return resp.json();
|
|
} catch (e) {
|
|
console.error('API fetch error:', e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ─── Catalog loading ───
|
|
async function loadCatalog(page, filters) {
|
|
currentPage = page || 1;
|
|
currentFilters = filters || currentFilters;
|
|
var params = new URLSearchParams({ page: currentPage, per_page: 30 });
|
|
if (currentFilters.q) params.set('q', currentFilters.q);
|
|
if (currentFilters.category) params.set('category', currentFilters.category);
|
|
if (currentFilters.brand) params.set('brand', currentFilters.brand);
|
|
if (currentFilters.vehicle_brand) params.set('vehicle_brand', currentFilters.vehicle_brand);
|
|
|
|
var data = await apiFetch(API + '/catalog/search?' + params.toString());
|
|
if (!data) return;
|
|
|
|
var items = data.data || [];
|
|
renderGrid(items);
|
|
renderPagination(data.pagination || {});
|
|
updateResultsCount(data.pagination || {});
|
|
}
|
|
|
|
function renderGrid(items) {
|
|
// Clear demo/hardcoded cards
|
|
productGrid.innerHTML = '';
|
|
|
|
if (!items.length) {
|
|
productGrid.style.display = 'none';
|
|
emptyState.classList.add('is-visible');
|
|
emptyTitle.textContent = 'No se encontraron productos';
|
|
emptySubtitle.textContent = currentFilters.q
|
|
? 'No hay resultados para "' + currentFilters.q + '". Intenta con otro termino.'
|
|
: 'Intenta con otro termino de busqueda o verifica el numero de parte';
|
|
return;
|
|
}
|
|
|
|
emptyState.classList.remove('is-visible');
|
|
productGrid.style.display = '';
|
|
|
|
catalogItemsMap = {};
|
|
items.forEach(function (it) { catalogItemsMap[it.id] = it; });
|
|
|
|
productGrid.innerHTML = items.map(function (it) {
|
|
var stockClass, stockLabel;
|
|
if (it.stock <= 0) {
|
|
stockClass = 'stock-out';
|
|
stockLabel = 'Agotado';
|
|
} else if (it.low_stock) {
|
|
stockClass = 'stock-low';
|
|
stockLabel = 'Ultimas ' + it.stock;
|
|
} else {
|
|
stockClass = 'stock-ok';
|
|
stockLabel = 'En stock';
|
|
}
|
|
|
|
var isOut = it.stock <= 0;
|
|
var imgHtml;
|
|
if (it.image_url) {
|
|
imgHtml = '<img src="' + escHtml(it.image_url) + '" alt="' + escHtml(it.name) + '" style="width:100%;height:100%;object-fit:contain;">';
|
|
} else {
|
|
imgHtml = '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 7h8M8 12h8M8 17h5"/></svg>' +
|
|
'<span class="product-card__image-label" aria-hidden="true">IMG</span>';
|
|
}
|
|
|
|
return '<article class="product-card" role="listitem" data-id="' + it.id + '">' +
|
|
'<div class="product-card__image">' +
|
|
imgHtml +
|
|
'<div class="stock-badge ' + stockClass + '" role="status">' + stockLabel + '</div>' +
|
|
'</div>' +
|
|
'<div class="product-card__body">' +
|
|
(it.category_name ? '<div class="product-card__category">' + escHtml(it.category_name) + '</div>' : '') +
|
|
'<div class="product-card__name">' + escHtml(it.name) + '</div>' +
|
|
'<div class="product-card__oem" title="Numero de parte">' + escHtml(it.part_number || '') + '</div>' +
|
|
'<div class="product-card__brand">' +
|
|
'<span>' + escHtml(it.brand || '') + '</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="product-card__footer">' +
|
|
'<div class="product-card__pricing">' +
|
|
'<div class="product-card__price">$' + fmt(it.price_1) + '</div>' +
|
|
'<div class="product-card__price-unit">MXN / ' + escHtml(it.unit || 'PZA') + '</div>' +
|
|
'</div>' +
|
|
(isOut
|
|
? '<button class="btn-add" disabled style="opacity:0.45;cursor:not-allowed;" aria-label="Producto agotado">' +
|
|
'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/></svg> Agotado</button>'
|
|
: '<button class="btn-add" onclick="CatalogApp.addToCart(' + it.id + ')" aria-label="Agregar ' + escHtml(it.name) + ' al carrito">' +
|
|
'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Agregar</button>'
|
|
) +
|
|
'</div>' +
|
|
'</article>';
|
|
}).join('');
|
|
}
|
|
|
|
function renderPagination(pg) {
|
|
if (!paginationNav) return;
|
|
if (!pg || pg.total_pages <= 1) {
|
|
paginationNav.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
var html = '';
|
|
|
|
// Previous button
|
|
if (pg.page <= 1) {
|
|
html += '<button class="page-item page-item--wide is-disabled" disabled aria-label="Pagina anterior">' +
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15,18 9,12 15,6"/></svg> Anterior</button>';
|
|
} else {
|
|
html += '<button class="page-item page-item--wide" onclick="CatalogApp.loadPage(' + (pg.page - 1) + ')" aria-label="Pagina anterior">' +
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15,18 9,12 15,6"/></svg> Anterior</button>';
|
|
}
|
|
|
|
// Page numbers
|
|
var pages = buildPageNumbers(pg.page, pg.total_pages);
|
|
pages.forEach(function (p) {
|
|
if (p === '...') {
|
|
html += '<span class="page-ellipsis" aria-hidden="true">…</span>';
|
|
} else if (p === pg.page) {
|
|
html += '<button class="page-item is-active" aria-label="Pagina ' + p + ', actual" aria-current="page">' + p + '</button>';
|
|
} else {
|
|
html += '<button class="page-item" onclick="CatalogApp.loadPage(' + p + ')" aria-label="Ir a pagina ' + p + '">' + p + '</button>';
|
|
}
|
|
});
|
|
|
|
// Next button
|
|
if (pg.page >= pg.total_pages) {
|
|
html += '<button class="page-item page-item--wide is-disabled" disabled aria-label="Pagina siguiente">Siguiente ' +
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9,18 15,12 9,6"/></svg></button>';
|
|
} else {
|
|
html += '<button class="page-item page-item--wide" onclick="CatalogApp.loadPage(' + (pg.page + 1) + ')" aria-label="Pagina siguiente">Siguiente ' +
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9,18 15,12 9,6"/></svg></button>';
|
|
}
|
|
|
|
paginationNav.innerHTML = html;
|
|
}
|
|
|
|
function buildPageNumbers(current, total) {
|
|
if (total <= 7) {
|
|
var arr = [];
|
|
for (var i = 1; i <= total; i++) arr.push(i);
|
|
return arr;
|
|
}
|
|
var pages = [1];
|
|
if (current > 3) pages.push('...');
|
|
for (var j = Math.max(2, current - 1); j <= Math.min(total - 1, current + 1); j++) {
|
|
pages.push(j);
|
|
}
|
|
if (current < total - 2) pages.push('...');
|
|
pages.push(total);
|
|
return pages;
|
|
}
|
|
|
|
function updateResultsCount(pg) {
|
|
var el = document.querySelector('.results-count');
|
|
if (!el || !pg) return;
|
|
var total = pg.total || 0;
|
|
el.innerHTML = '<strong>' + total.toLocaleString('es-MX') + '</strong> partes encontradas';
|
|
}
|
|
|
|
// ─── Barcode scanner ───
|
|
async function lookupBarcode(code) {
|
|
var data = await apiFetch(API + '/catalog/barcode/' + encodeURIComponent(code));
|
|
if (!data || data.error) { alert('Parte no encontrada: ' + code); return; }
|
|
addToCart(data);
|
|
}
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'F1') {
|
|
e.preventDefault();
|
|
if (searchInput) searchInput.focus();
|
|
return;
|
|
}
|
|
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'SELECT') return;
|
|
if (e.key === 'Enter' && barcodeBuffer.length >= 4) {
|
|
lookupBarcode(barcodeBuffer.trim());
|
|
barcodeBuffer = '';
|
|
return;
|
|
}
|
|
if (e.key.length === 1) {
|
|
barcodeBuffer += e.key;
|
|
clearTimeout(barcodeTimeout);
|
|
barcodeTimeout = setTimeout(function () { barcodeBuffer = ''; }, 200);
|
|
}
|
|
});
|
|
|
|
// ─── Cart ───
|
|
function addToCartById(id) {
|
|
var it = catalogItemsMap[id];
|
|
if (it) addToCart(it);
|
|
}
|
|
|
|
function addToCart(item) {
|
|
var existing = cartItems.find(function (c) { return c.id === item.id; });
|
|
if (existing) {
|
|
existing.quantity += 1;
|
|
} else {
|
|
cartItems.push({
|
|
id: item.id, part_number: item.part_number, name: item.name,
|
|
brand: item.brand, price: item.price_1 || item.price, tax_rate: item.tax_rate || 0.16,
|
|
unit: item.unit || 'PZA', stock: item.stock, quantity: 1
|
|
});
|
|
}
|
|
saveCart();
|
|
renderCart();
|
|
// Brief open to show item was added
|
|
if (!cartSidebar.classList.contains('open')) {
|
|
toggleCart();
|
|
}
|
|
}
|
|
|
|
function removeFromCart(index) {
|
|
cartItems.splice(index, 1);
|
|
saveCart();
|
|
renderCart();
|
|
}
|
|
|
|
function updateQuantity(index, qty) {
|
|
qty = parseInt(qty);
|
|
if (qty <= 0) { removeFromCart(index); return; }
|
|
cartItems[index].quantity = qty;
|
|
saveCart();
|
|
renderCart();
|
|
}
|
|
|
|
function clearCartFn() {
|
|
cartItems = [];
|
|
saveCart();
|
|
renderCart();
|
|
}
|
|
|
|
function saveCart() {
|
|
localStorage.setItem('pos_cart', JSON.stringify(cartItems));
|
|
}
|
|
|
|
function renderCart() {
|
|
var total = cartItems.reduce(function (s, c) { return s + c.quantity; }, 0);
|
|
if (cartBadge) {
|
|
cartBadge.textContent = total;
|
|
cartBadge.style.display = total > 0 ? 'flex' : 'none';
|
|
}
|
|
|
|
if (!cartItems.length) {
|
|
cartItemsEl.innerHTML = '';
|
|
cartEmptyEl.style.display = 'block';
|
|
if (checkoutBtn) checkoutBtn.disabled = true;
|
|
cartSubtotalEl.textContent = '$0.00';
|
|
cartTaxEl.textContent = '$0.00';
|
|
cartTotalEl.textContent = '$0.00';
|
|
return;
|
|
}
|
|
|
|
cartEmptyEl.style.display = 'none';
|
|
if (checkoutBtn) checkoutBtn.disabled = false;
|
|
|
|
var subtotal = 0;
|
|
var tax = 0;
|
|
cartItemsEl.innerHTML = cartItems.map(function (c, i) {
|
|
var lineTotal = c.price * c.quantity;
|
|
var lineTax = lineTotal * c.tax_rate;
|
|
subtotal += lineTotal;
|
|
tax += lineTax;
|
|
return '<div class="cart-item">' +
|
|
'<div style="flex:1;">' +
|
|
'<div style="font-weight:600;font-size:0.85rem;color:var(--color-text-primary);">' + escHtml(c.name) + '</div>' +
|
|
'<div style="font-size:0.75rem;color:var(--color-text-muted);">' + escHtml(c.part_number) + '</div>' +
|
|
'<div style="margin-top:4px;display:flex;align-items:center;gap:6px;">' +
|
|
'<button onclick="CatalogApp.updateQty(' + i + ',' + (c.quantity - 1) + ')" style="width:24px;height:24px;border:1px solid var(--color-border);background:var(--color-bg-base);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-primary);">-</button>' +
|
|
'<span style="font-weight:600;color:var(--color-text-primary);">' + c.quantity + '</span>' +
|
|
'<button onclick="CatalogApp.updateQty(' + i + ',' + (c.quantity + 1) + ')" style="width:24px;height:24px;border:1px solid var(--color-border);background:var(--color-bg-base);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-primary);">+</button>' +
|
|
'</div></div>' +
|
|
'<div style="text-align:right;">' +
|
|
'<div style="font-weight:600;color:var(--color-text-primary);">$' + fmt(lineTotal) + '</div>' +
|
|
'<button onclick="CatalogApp.removeFromCart(' + i + ')" style="font-size:0.75rem;color:var(--color-error,#ef4444);background:none;border:none;cursor:pointer;margin-top:4px;">Quitar</button>' +
|
|
'</div></div>';
|
|
}).join('');
|
|
|
|
cartSubtotalEl.textContent = '$' + fmt(subtotal);
|
|
cartTaxEl.textContent = '$' + fmt(tax);
|
|
cartTotalEl.textContent = '$' + fmt(subtotal + tax);
|
|
}
|
|
|
|
function toggleCart() {
|
|
var isOpen = cartSidebar.classList.toggle('open');
|
|
if (cartOverlay) cartOverlay.classList.toggle('open', isOpen);
|
|
}
|
|
|
|
function goToCheckout() {
|
|
if (!cartItems.length) return;
|
|
localStorage.setItem('pos_cart', JSON.stringify(cartItems));
|
|
window.location.href = '/pos/sale';
|
|
}
|
|
|
|
// ─── External availability ───
|
|
async function checkExternalAvailability(partNumber) {
|
|
var pn = partNumber || currentFilters.q || '';
|
|
if (!pn) return;
|
|
alert('Buscando "' + pn + '" en bodegas Nexus...');
|
|
|
|
var data = await apiFetch(API + '/catalog/external-availability/' + encodeURIComponent(pn));
|
|
if (!data || !data.data || !data.data.length) {
|
|
alert('No se encontraron resultados externos para "' + pn + '"');
|
|
return;
|
|
}
|
|
var msg = data.data.map(function (r) {
|
|
return (r.name || r.part_number || pn) + ' - Stock: ' + (r.stock || 'N/A');
|
|
}).join('\n');
|
|
alert('Resultados externos:\n' + msg);
|
|
}
|
|
|
|
// ─── Helpers ───
|
|
function fmt(n) { return (parseFloat(n) || 0).toFixed(2); }
|
|
function escHtml(s) { if (!s) return ''; var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
|
|
|
|
// ─── Search input ───
|
|
var searchTimeout = null;
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function () {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(function () {
|
|
currentFilters.q = searchInput.value.trim();
|
|
loadCatalog(1, currentFilters);
|
|
}, 300);
|
|
});
|
|
searchInput.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
clearTimeout(searchTimeout);
|
|
currentFilters.q = searchInput.value.trim();
|
|
loadCatalog(1, currentFilters);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ─── Part search button ───
|
|
if (partSearchBtn) {
|
|
partSearchBtn.addEventListener('click', function () {
|
|
if (searchInput) {
|
|
currentFilters.q = searchInput.value.trim();
|
|
loadCatalog(1, currentFilters);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ─── Filter chips ───
|
|
document.querySelectorAll('[data-chip]').forEach(function (chip) {
|
|
chip.addEventListener('click', function () {
|
|
var isActive = chip.classList.contains('is-active');
|
|
// Deactivate all chips first for single-select behavior
|
|
document.querySelectorAll('[data-chip]').forEach(function (c) {
|
|
c.classList.remove('is-active');
|
|
c.setAttribute('aria-pressed', 'false');
|
|
});
|
|
if (!isActive) {
|
|
chip.classList.add('is-active');
|
|
chip.setAttribute('aria-pressed', 'true');
|
|
currentFilters.category = chip.dataset.chip;
|
|
} else {
|
|
delete currentFilters.category;
|
|
}
|
|
loadCatalog(1, currentFilters);
|
|
});
|
|
});
|
|
|
|
// ─── Expose globals for inline onclick handlers ───
|
|
window.CatalogApp = {
|
|
toggleCart: toggleCart,
|
|
goToCheckout: goToCheckout,
|
|
addToCart: addToCartById,
|
|
removeFromCart: removeFromCart,
|
|
updateQty: updateQuantity,
|
|
clearCart: clearCartFn,
|
|
loadPage: function (p) { loadCatalog(p); },
|
|
checkExternal: checkExternalAvailability
|
|
};
|
|
|
|
// Also keep legacy window._ handlers for backward compat
|
|
window.toggleCart = toggleCart;
|
|
window.goToCheckout = goToCheckout;
|
|
window.checkExternalAvailability = checkExternalAvailability;
|
|
|
|
// ─── Init ───
|
|
renderCart();
|
|
loadCatalog(1, {});
|
|
})();
|