320 lines
8.9 KiB
HTML
320 lines
8.9 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Kanban - Gestión de Pedidos{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.kanban-container {
|
|
display: flex;
|
|
gap: 1rem;
|
|
overflow-x: auto;
|
|
padding: 1rem 0;
|
|
min-height: calc(100vh - 200px);
|
|
}
|
|
|
|
.kanban-column {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
background: #ecf0f1;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.column-header {
|
|
background: #34495e;
|
|
color: white;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
margin-bottom: 1rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.column-header.pendiente-revision { background: #95a5a6; }
|
|
.column-header.en-revision { background: #f39c12; }
|
|
.column-header.pendiente-materiales { background: #e74c3c; }
|
|
.column-header.completado { background: #27ae60; }
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.card.urgente {
|
|
border-left: 4px solid #e74c3c;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.card-title {
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.card-subtitle {
|
|
color: #7f8c8d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.urgente-badge {
|
|
background: #e74c3c;
|
|
color: white;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.referencias-list {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.referencia-item {
|
|
padding: 0.5rem;
|
|
margin: 0.25rem 0;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.referencia-item.completo {
|
|
background: #d5f4e6;
|
|
color: #27ae60;
|
|
}
|
|
|
|
.referencia-item.parcial {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.referencia-item.pendiente {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.referencia-codigo {
|
|
font-weight: bold;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.filters {
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-input {
|
|
padding: 0.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.refresh-btn {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.empty-column {
|
|
text-align: center;
|
|
color: #95a5a6;
|
|
padding: 2rem;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="filters">
|
|
<input type="text" id="search-input" class="filter-input" placeholder="Buscar por matrícula o número de pedido...">
|
|
<select id="estado-filter" class="filter-input">
|
|
<option value="">Todos los estados</option>
|
|
<option value="pendiente_revision">Pendiente Revisión</option>
|
|
<option value="en_revision">En Revisión</option>
|
|
<option value="pendiente_materiales">Pendiente Materiales</option>
|
|
<option value="completado">Completado</option>
|
|
</select>
|
|
<label>
|
|
<input type="checkbox" id="urgente-only"> Solo urgentes
|
|
</label>
|
|
<button class="btn btn-primary refresh-btn" onclick="loadKanban()">Actualizar</button>
|
|
</div>
|
|
|
|
<div class="kanban-container" id="kanban-container">
|
|
<div class="kanban-column">
|
|
<div class="column-header pendiente-revision">Pendiente Revisión</div>
|
|
<div id="col-pendiente-revision" class="cards-container"></div>
|
|
</div>
|
|
<div class="kanban-column">
|
|
<div class="column-header en-revision">En Revisión</div>
|
|
<div id="col-en-revision" class="cards-container"></div>
|
|
</div>
|
|
<div class="kanban-column">
|
|
<div class="column-header pendiente-materiales">Pendiente Materiales</div>
|
|
<div id="col-pendiente-materiales" class="cards-container"></div>
|
|
</div>
|
|
<div class="kanban-column">
|
|
<div class="column-header completado">Completado</div>
|
|
<div id="col-completado" class="cards-container"></div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
const API_BASE = '/api';
|
|
|
|
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} - ${pedido.cliente.nombre}</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>
|
|
`;
|
|
|
|
card.onclick = () => {
|
|
window.location.href = `/admin/gestion_pedidos/pedidocliente/${pedido.id}/change/`;
|
|
};
|
|
|
|
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 => {
|
|
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));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadKanban() {
|
|
fetch(`${API_BASE}/kanban/`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
renderKanban(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error al cargar Kanban:', error);
|
|
});
|
|
}
|
|
|
|
// Filtros
|
|
document.getElementById('search-input').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';
|
|
});
|
|
});
|
|
|
|
document.getElementById('estado-filter').addEventListener('change', (e) => {
|
|
const estado = e.target.value;
|
|
if (!estado) {
|
|
loadKanban();
|
|
return;
|
|
}
|
|
|
|
fetch(`${API_BASE}/pedidos-cliente/?estado=${estado}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const grouped = {
|
|
'pendiente_revision': [],
|
|
'en_revision': [],
|
|
'pendiente_materiales': [],
|
|
'completado': [],
|
|
};
|
|
grouped[estado] = data.results || data;
|
|
renderKanban(grouped);
|
|
});
|
|
});
|
|
|
|
// Auto-refresh cada 30 segundos
|
|
setInterval(loadKanban, 30000);
|
|
|
|
// Cargar inicial
|
|
loadKanban();
|
|
</script>
|
|
{% endblock %}
|
|
|