132 lines
4.6 KiB
JavaScript
132 lines
4.6 KiB
JavaScript
// Kanban functionality
|
|
|
|
function createCard(pedido) {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
if (pedido.es_urgente) {
|
|
card.classList.add('urgente');
|
|
}
|
|
|
|
const fechaCita = pedido.fecha_cita ? new Date(pedido.fecha_cita).toLocaleString('es-ES') : 'Sin fecha';
|
|
|
|
card.innerHTML = `
|
|
<div class="card-header">
|
|
<div>
|
|
<div class="card-title">Pedido ${pedido.numero_pedido}</div>
|
|
<div class="card-subtitle">${pedido.cliente?.matricula_vehiculo || 'N/A'} - ${pedido.cliente?.nombre || 'N/A'}</div>
|
|
</div>
|
|
${pedido.es_urgente ? '<span class="urgente-badge">URGENTE</span>' : ''}
|
|
</div>
|
|
<div class="card-subtitle" style="margin-bottom: 0.5rem;">Cita: ${fechaCita}</div>
|
|
<div class="referencias-list">
|
|
${(pedido.referencias || []).map(ref => {
|
|
const estadoClass = ref.estado === 'completo' ? 'completo' :
|
|
ref.estado === 'parcial' ? 'parcial' : 'pendiente';
|
|
return `
|
|
<div class="referencia-item ${estadoClass}">
|
|
<div>
|
|
<span class="referencia-codigo">${ref.referencia}</span>
|
|
<div style="font-size: 0.8rem;">${ref.denominacion}</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>${ref.unidades_solicitadas} unidades</div>
|
|
<div style="font-size: 0.8rem;">
|
|
Stock: ${ref.unidades_en_stock} | Pendiente: ${ref.unidades_pendientes}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('')}
|
|
</div>
|
|
`;
|
|
|
|
return card;
|
|
}
|
|
|
|
function renderKanban(data) {
|
|
const columns = {
|
|
'pendiente_revision': document.getElementById('col-pendiente-revision'),
|
|
'en_revision': document.getElementById('col-en-revision'),
|
|
'pendiente_materiales': document.getElementById('col-pendiente-materiales'),
|
|
'completado': document.getElementById('col-completado'),
|
|
};
|
|
|
|
// Limpiar columnas
|
|
Object.values(columns).forEach(col => {
|
|
if (col) col.innerHTML = '';
|
|
});
|
|
|
|
// Renderizar tarjetas
|
|
Object.entries(data).forEach(([estado, pedidos]) => {
|
|
const column = columns[estado];
|
|
if (!column) return;
|
|
|
|
if (pedidos.length === 0) {
|
|
column.innerHTML = '<div class="empty-column">No hay pedidos</div>';
|
|
} else {
|
|
pedidos.forEach(pedido => {
|
|
column.appendChild(createCard(pedido));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadKanban() {
|
|
try {
|
|
const data = await apiRequest('/kanban/');
|
|
renderKanban(data);
|
|
} catch (error) {
|
|
console.error('Error al cargar Kanban:', error);
|
|
alert('Error al cargar los datos: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Filtros
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const searchInput = document.getElementById('search-input');
|
|
const estadoFilter = document.getElementById('estado-filter');
|
|
const urgenteOnly = document.getElementById('urgente-only');
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', (e) => {
|
|
const search = e.target.value.toLowerCase();
|
|
document.querySelectorAll('.card').forEach(card => {
|
|
const text = card.textContent.toLowerCase();
|
|
card.style.display = text.includes(search) ? 'block' : 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
if (estadoFilter) {
|
|
estadoFilter.addEventListener('change', async (e) => {
|
|
const estado = e.target.value;
|
|
if (!estado) {
|
|
loadKanban();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await apiRequest(`/pedidos-cliente/?estado=${estado}`);
|
|
const pedidos = Array.isArray(data) ? data : (data.results || []);
|
|
const grouped = {
|
|
'pendiente_revision': [],
|
|
'en_revision': [],
|
|
'pendiente_materiales': [],
|
|
'completado': [],
|
|
};
|
|
grouped[estado] = pedidos;
|
|
renderKanban(grouped);
|
|
} catch (error) {
|
|
console.error('Error al filtrar:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Auto-refresh cada 30 segundos
|
|
setInterval(loadKanban, 30000);
|
|
|
|
// Cargar inicial
|
|
loadKanban();
|
|
});
|
|
|