feat(customers): habilitar edición de clientes desde la lista
- Hace clickeables las filas de la tabla para seleccionar un cliente y mostrar su panel de detalle (donde ya existe el botón Editar). - Agrega botón de acción rápida con icono de lápiz en cada fila para abrir directamente el modal de edición. - Extrae openEditModal y agrega editCustomer(id) para cargar el cliente vía API y abrir el modal sin depender de la selección previa. - Actualiza colspan del estado vacío de 9 a 11 por la nueva columna.
This commit is contained in:
@@ -107,7 +107,7 @@ const Customers = (() => {
|
|||||||
const num = String(c.id).padStart(5, '0');
|
const num = String(c.id).padStart(5, '0');
|
||||||
const selClass = (currentCustomer && currentCustomer.id === c.id) ? 'selected' : '';
|
const selClass = (currentCustomer && currentCustomer.id === c.id) ? 'selected' : '';
|
||||||
const isChecked = selectedCustomers.has(c.id) ? 'checked' : '';
|
const isChecked = selectedCustomers.has(c.id) ? 'checked' : '';
|
||||||
return '<tr class="' + selClass + '">' +
|
return '<tr class="' + selClass + '" onclick="Customers.selectCustomer(' + c.id + ')">' +
|
||||||
'<td onclick="event.stopPropagation();"><input type="checkbox" ' + isChecked + ' onchange="Customers.toggleCustomerSelection(' + c.id + ')"></td>' +
|
'<td onclick="event.stopPropagation();"><input type="checkbox" ' + isChecked + ' onchange="Customers.toggleCustomerSelection(' + c.id + ')"></td>' +
|
||||||
'<td class="cell-num">' + num + '</td>' +
|
'<td class="cell-num">' + num + '</td>' +
|
||||||
'<td>' +
|
'<td>' +
|
||||||
@@ -121,6 +121,7 @@ const Customers = (() => {
|
|||||||
'<td class="cell-credit ' + creditClass + '">' + fmt(available) + '</td>' +
|
'<td class="cell-credit ' + creditClass + '">' + fmt(available) + '</td>' +
|
||||||
'<td class="cell-date hide-mobile">' + formatDate(c.last_purchase || c.created_at) + '</td>' +
|
'<td class="cell-date hide-mobile">' + formatDate(c.last_purchase || c.created_at) + '</td>' +
|
||||||
'<td>' + statusBadge(c) + '</td>' +
|
'<td>' + statusBadge(c) + '</td>' +
|
||||||
|
'<td onclick="event.stopPropagation();"><button class="btn btn-sm btn-ghost" title="Editar cliente" onclick="Customers.editCustomer(' + c.id + ')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button></td>' +
|
||||||
'</tr>';
|
'</tr>';
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -131,7 +132,7 @@ const Customers = (() => {
|
|||||||
if (!tbody) return;
|
if (!tbody) return;
|
||||||
|
|
||||||
if (!customers || customers.length === 0) {
|
if (!customers || customers.length === 0) {
|
||||||
tbody.innerHTML = '<tr><td colspan="9">' + renderEmptyState({
|
tbody.innerHTML = '<tr><td colspan="11">' + renderEmptyState({
|
||||||
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
|
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
|
||||||
title: 'Sin clientes',
|
title: 'Sin clientes',
|
||||||
subtitle: 'No se encontraron clientes registrados.',
|
subtitle: 'No se encontraron clientes registrados.',
|
||||||
@@ -146,7 +147,7 @@ const Customers = (() => {
|
|||||||
rowHeight: 52,
|
rowHeight: 52,
|
||||||
buffer: 3,
|
buffer: 3,
|
||||||
renderRow: renderCustomerRow,
|
renderRow: renderCustomerRow,
|
||||||
emptyHtml: '<tr><td colspan="9">' + renderEmptyState({ title: 'Sin clientes', subtitle: 'No hay clientes registrados.' }) + '</td></tr>'
|
emptyHtml: '<tr><td colspan="11">' + renderEmptyState({ title: 'Sin clientes', subtitle: 'No hay clientes registrados.' }) + '</td></tr>'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
customersVS.setData(customers);
|
customersVS.setData(customers);
|
||||||
@@ -415,9 +416,22 @@ const Customers = (() => {
|
|||||||
|
|
||||||
function editCurrent() {
|
function editCurrent() {
|
||||||
if (!currentCustomer) return;
|
if (!currentCustomer) return;
|
||||||
const c = currentCustomer;
|
openEditModal(currentCustomer);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editCustomer(id) {
|
||||||
|
try {
|
||||||
|
const c = await api(`/pos/api/customers/${id}`);
|
||||||
|
currentCustomer = c;
|
||||||
|
openEditModal(c);
|
||||||
|
} catch (e) {
|
||||||
|
alert('Error: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEditModal(c) {
|
||||||
const modal = document.getElementById('customerModal');
|
const modal = document.getElementById('customerModal');
|
||||||
if (!modal) return;
|
if (!modal || !c) return;
|
||||||
document.getElementById('modalTitle').textContent = 'Editar Cliente';
|
document.getElementById('modalTitle').textContent = 'Editar Cliente';
|
||||||
document.getElementById('editId').value = c.id;
|
document.getElementById('editId').value = c.id;
|
||||||
const safeSet = (id, v) => { const el = document.getElementById(id); if (el) el.value = v; };
|
const safeSet = (id, v) => { const el = document.getElementById(id); if (el) el.value = v; };
|
||||||
@@ -802,7 +816,7 @@ const Customers = (() => {
|
|||||||
const publicApi = {
|
const publicApi = {
|
||||||
search, goToPage, loadCustomers,
|
search, goToPage, loadCustomers,
|
||||||
showDetail, selectCustomer, closeDetail,
|
showDetail, selectCustomer, closeDetail,
|
||||||
showCreateModal, editCurrent, closeModal, save,
|
showCreateModal, editCurrent, editCustomer, closeModal, save,
|
||||||
showStatement, closeStatement,
|
showStatement, closeStatement,
|
||||||
showPaymentModal, closePayment, recordPayment,
|
showPaymentModal, closePayment, recordPayment,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -330,6 +330,7 @@
|
|||||||
<th>Crédito Disp.</th>
|
<th>Crédito Disp.</th>
|
||||||
<th class="hide-mobile">Última Compra</th>
|
<th class="hide-mobile">Última Compra</th>
|
||||||
<th>Estado</th>
|
<th>Estado</th>
|
||||||
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="customersBody">
|
<tbody id="customersBody">
|
||||||
|
|||||||
Reference in New Issue
Block a user