controlmc/erp-efintel-2026-portainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MEJORA: Refactorizacion a HTMX para WebSockets en tiempo real y agregado widget-tweaks

Browse Source
This commit is contained in:
Nachou-u
2026-09-09 08:46:44 -03:00
parent 7684136e46
commit 87467b1092
8 changed files with 107 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/settings.py
+1
View File
@@ -47,6 +47,7 @@ INSTALLED_APPS = [
'django.contrib.staticfiles',
'django.contrib.humanize',
'channels',
'widget_tweaks',
'expenses',
'payroll',
'procurement',
expenses/consumers.py
+3 -7
View File
@@ -19,11 +19,7 @@ class ExpenseConsumer(AsyncWebsocketConsumer):
# Recibir actualización desde el Channel Layer
async def expense_update(self, event):
expense_data = event['expense']
action = event['action']
html_payload = event['html']
# Enviar actualización por WebSocket al cliente
await self.send(text_data=json.dumps({
'action': action,
'expense': expense_data
}))
# Enviar actualización por WebSocket al cliente (HTMX espera HTML puro, no JSON)
await self.send(text_data=html_payload)
expenses/signals.py
+16 -14
View File
@@ -2,40 +2,42 @@ from django.db.models.signals import post_save, post_delete
from django.dispatch import receiver
from channels.layers import get_channel_layer
from asgiref.sync import async_to_sync
from django.template.loader import render_to_string
from .models import Expense
@receiver(post_save, sender=Expense)
def expense_saved(sender, instance, created, **kwargs):
channel_layer = get_channel_layer()
action = 'created' if created else 'updated'
expense_data = {
'id': instance.id,
'amount': str(instance.amount_clp),
'category': instance.category.name if instance.category else None,
'project': instance.project.name if instance.project else None,
'user': instance.user.username if instance.user else None,
'date': instance.date.strftime('%Y-%m-%d'),
'description': instance.description,
}
# Renderizamos la fila parcial
html = render_to_string('expenses/partials/expense_row.html', {'expense': instance})
# Envolvemos el HTML con las directivas OOB (Out-of-Band) de HTMX
if created:
# Si es nuevo, lo insertamos al principio del tbody con id "expenses-tbody"
payload = f'<tbody id="expenses-tbody" hx-swap-oob="afterbegin">{html}</tbody>'
else:
# Si ya existe, HTMX reemplazará automáticamente el tr con el mismo ID si usamos hx-swap-oob="true"
payload = html.replace('<tr ', '<tr hx-swap-oob="true" ')
async_to_sync(channel_layer.group_send)(
'expenses_updates',
{
'type': 'expense_update',
'action': action,
'expense': expense_data
'html': payload
}
)
@receiver(post_delete, sender=Expense)
def expense_deleted(sender, instance, **kwargs):
channel_layer = get_channel_layer()
# Para borrar, mandamos un elemento vacío con swap out-of-band que reemplace la fila eliminada
payload = f'<tr id="expense-{instance.id}" hx-swap-oob="outerHTML"></tr>'
async_to_sync(channel_layer.group_send)(
'expenses_updates',
{
'type': 'expense_update',
'action': 'deleted',
'expense': {'id': instance.id}
'html': payload
}
)
requirements.txt
+1
View File
@@ -57,3 +57,4 @@ boto3==1.34.69
requests==2.31.0
uvicorn[standard]
gunicorn
django-widget-tweaks==1.5.0
static/js/app.js
+12 -104
View File
@@ -33,110 +33,18 @@ function showToast(message, type = 'info') {
}, 5000);
}
// WebSocket connection for real-time updates
let wsReconnectAttempts = 0;
const maxWsReconnectAttempts = 5;
function connectWebSocket() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}/ws/expenses/`;
// We only connect if we are not on the login page
if (document.querySelector('.login-page')) return;
const ws = new WebSocket(wsUrl);
ws.onopen = function(e) {
console.log('WebSocket connected');
wsReconnectAttempts = 0;
};
ws.onmessage = function(e) {
const data = JSON.parse(e.data);
const action = data.action;
const expense = data.expense;
const tbody = document.getElementById('expenses-table-body');
if (!tbody || !expense) return;
if (action === 'created') {
const tr = document.createElement('tr');
tr.id = `expense-row-${expense.id}`;
tr.innerHTML = `
<td>${expense.date}</td>
<td>${expense.project}</td>
<td>${expense.category}</td>
${document.querySelector('th:nth-child(4)') && document.querySelector('th:nth-child(4)').textContent === 'Descripción' ? `<td>${expense.description || ''}</td>` : ''}
<td>$${expense.amount}</td>
<td>${expense.user}</td>
${document.querySelector('th:nth-child(7)') ? `
<td>
<div style="display: flex; gap: 0.5rem;">
<span style="font-size:0.8rem; color:var(--text-secondary);">Recarga para ver acciones</span>
</div>
</td>` : ''}
`;
// Add animation class
tr.style.backgroundColor = 'rgba(0, 212, 170, 0.2)';
tr.style.transition = 'background-color 2s ease';
tbody.insertBefore(tr, tbody.firstChild);
// Remove highlight after animation
setTimeout(() => {
tr.style.backgroundColor = '';
}, 2000);
showToast('Nuevo gasto registrado', 'success');
}
else if (action === 'updated') {
const row = document.getElementById(`expense-row-${expense.id}`);
if (row) {
// Flash the row
row.style.backgroundColor = 'rgba(108, 99, 255, 0.2)';
row.style.transition = 'background-color 2s ease';
setTimeout(() => {
row.style.backgroundColor = '';
}, 2000);
showToast('Gasto actualizado', 'info');
}
}
else if (action === 'deleted') {
const row = document.getElementById(`expense-row-${expense.id}`);
if (row) {
row.style.transform = 'translateX(100%)';
row.style.opacity = '0';
row.style.transition = 'all 0.3s ease';
setTimeout(() => {
if (row.parentNode) {
row.parentNode.removeChild(row);
}
}, 300);
showToast('Gasto eliminado', 'danger');
}
}
};
ws.onclose = function(e) {
console.error('WebSocket closed unexpectedly');
if (wsReconnectAttempts < maxWsReconnectAttempts) {
wsReconnectAttempts++;
const timeout = Math.min(1000 * Math.pow(2, wsReconnectAttempts), 30000);
console.log(`Attempting reconnect in ${timeout}ms...`);
setTimeout(connectWebSocket, timeout);
}
};
}
// HTMX HTMX HTMX
document.addEventListener('DOMContentLoaded', () => {
connectWebSocket();
// Re-initialize Lucide icons when HTMX swaps content
if (typeof lucide !== 'undefined' && document.body.addEventListener) {
document.body.addEventListener('htmx:afterSwap', function(evt) {
lucide.createIcons();
});
// Convert CSRF token for fetch requests if needed later
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
document.body.addEventListener('htmx:wsAfterMessage', function(evt) {
lucide.createIcons();
// Optional: trigger toast
showToast('Actualización en tiempo real recibida', 'info');
});
}
});
templates/base.html
+3
View File
@@ -11,6 +11,9 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- HTMX & WebSockets Extension -->
<script src="https://unpkg.com/htmx.org@2.0.2"></script>
<script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}?v=3.0">
<meta name="csrf-token" content="{{ csrf_token }}">
</head>
templates/expenses/expense_list.html
+3 -71
View File
@@ -41,7 +41,7 @@
</div>
<div class="data-card">
<div class="data-table-wrapper">
<div class="data-table-wrapper" hx-ext="ws" ws-connect="/ws/expenses/">
<table class="data-table">
<thead>
<tr>
@@ -54,77 +54,9 @@
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tbody id="expenses-tbody">
{% for expense in expenses %}
<tr>
<td style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--efintel-gray);">{{ expense.expense_code|truncatechars:12 }}</td>
<td style="font-size:0.8rem; font-weight: 600;">{{ expense.date|date:"d/m/Y" }}</td>
<td>
<span class="project-tag" {% if expense.project.type == 'GASTO_OPERACIONAL_OVERHEAD' %}style="background:#e2e8f0; color:#475569;"{% endif %}>
{{ expense.project.code }}
</span>
</td>
<td style="font-weight:600; color:var(--efintel-dark); font-size: 0.85rem;">
{{ expense.description|truncatechars:40 }}<br>
<span style="font-size:0.65rem; color:var(--efintel-gray);">{{ expense.responsible_person.username|default:expense.user.username }}</span>
{% if expense.documents.all %}
<div style="margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.2rem;">
{% for doc in expense.documents.all %}
<div style="display:inline-flex; align-items:center; gap:0.3rem;">
<a href="{{ doc.file.url }}" target="_blank" style="font-size:0.65rem; color:var(--efintel-blue); text-decoration:none;" title="{{ doc.title|default:doc.file.name }}">
<i data-lucide="paperclip" style="width:10px;"></i> {{ doc.title|default:doc.file.name|truncatechars:20 }}
</a>
<button type="button" onclick="previewDocument('{{ doc.file.url }}', '{{ doc.title|escapejs }}', {% if doc.is_pdf %}true{% else %}false{% endif %})" style="background:none; border:none; color:#0284c7; cursor:pointer; padding:0; font-size:0.65rem;" title="Vista Previa Modal">
<i data-lucide="eye" style="width:12px;"></i> Ver
</button>
</div>
{% endfor %}
</div>
{% endif %}
</td>
<td class="amount-cell">
<div>${{ expense.amount_clp|floatformat:"0"|intcomma }} CLP</div>
<div style="font-size:0.68rem; color:var(--efintel-gray); font-family:var(--font-mono);">${{ expense.amount_usd|floatformat:"2"|intcomma }} USD</div>
</td>
<td>
{% if expense.approval_status == 'EN_REVISION_DOCUMENTAL' %}
<span class="badge badge-amber"><i data-lucide="clock" style="width:12px;"></i> En Revisión</span>
{% elif expense.approval_status == 'SOLICITADO_FINANZAS' %}
<span class="badge badge-blue"><i data-lucide="send" style="width:12px;"></i> Solicitado Finanzas</span>
{% elif expense.approval_status == 'LIBERADO_PAGADO' %}
<span class="badge badge-emerald"><i data-lucide="check-check" style="width:12px;"></i> Pagado</span>
{% else %}
<span class="badge badge-red"><i data-lucide="x-circle" style="width:12px;"></i> Rechazado</span>
{% endif %}
</td>
<td>
<div style="display: flex; gap: 0.3rem;">
{% if expense.approval_status == 'EN_REVISION_DOCUMENTAL' %}
<a href="{% url 'approve_expense' expense.id 'solicitar' %}" class="btn-primary" style="padding:0.3rem; font-size:0.65rem; background: var(--efintel-blue);" title="Elevar a Finanzas"><i data-lucide="arrow-right"></i></a>
{% endif %}
{% if expense.approval_status == 'SOLICITADO_FINANZAS' and 'Administrador Finanzas' in request.user.groups.all.0.name or request.user.is_superuser %}
<a href="{% url 'approve_expense' expense.id 'pagar' %}" class="btn-primary" style="padding:0.3rem; font-size:0.65rem; background: var(--efintel-success);" title="Liberar Pago"><i data-lucide="check"></i></a>
<a href="{% url 'approve_expense' expense.id 'rechazar' %}" class="btn-danger" style="padding:0.3rem; font-size:0.65rem;" title="Rechazar"><i data-lucide="x"></i></a>
{% endif %}
{% if expense.approval_status != 'SOLICITADO_FINANZAS' and expense.approval_status != 'LIBERADO_PAGADO' %}
{% if request.user.groups.all.0.name == 'Administrador' or request.user.is_superuser or expense.user == request.user %}
<a href="/gastos/{{ expense.id }}/editar/" class="btn-secondary" style="padding: 0.3rem; background: var(--efintel-light); color: var(--efintel-petroleum);" title="Editar"><i data-lucide="pencil" style="width:14px;"></i></a>
{% endif %}
{% if request.user.groups.all.0.name == 'Administrador' or request.user.is_superuser %}
<form method="post" action="/gastos/{{ expense.id }}/eliminar/" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn-danger" style="padding: 0.3rem;" onclick="return confirm('¿Seguro que desea eliminar esta erogación? Esta acción quedará en el Log de Auditoría.');" title="Eliminar"><i data-lucide="trash-2" style="width:14px;"></i></button>
</form>
{% endif %}
{% else %}
<span style="font-size:0.75rem; color:var(--efintel-gray); padding: 0.3rem;" title="Comprobante Bloqueado"><i data-lucide="lock" style="width:14px;"></i></span>
{% endif %}
</div>
</td>
</tr>
{% include 'expenses/partials/expense_row.html' with expense=expense %}
{% empty %}
<tr>
<td colspan="7" style="text-align: center; padding: 2rem; color: var(--efintel-gray);">No hay gastos registrados para este filtro.</td>
templates/expenses/partials/expense_row.html
+67
View File
@@ -0,0 +1,67 @@
{% load humanize %}
<tr id="expense-{{ expense.id }}" class="fade-in">
<td style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--efintel-gray);">{{ expense.expense_code|truncatechars:12 }}</td>
<td style="font-size:0.8rem; font-weight: 600;">{{ expense.date|date:"d/m/Y" }}</td>
<td>
<span class="project-tag" {% if expense.project.type == 'GASTO_OPERACIONAL_OVERHEAD' %}style="background:#e2e8f0; color:#475569;"{% endif %}>
{{ expense.project.code }}
</span>
</td>
<td style="font-weight:600; color:var(--efintel-dark); font-size: 0.85rem;">
{{ expense.description|truncatechars:40 }}<br>
<span style="font-size:0.65rem; color:var(--efintel-gray);">{{ expense.responsible_person.username|default:expense.user.username }}</span>
{% if expense.documents.all %}
<div style="margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.2rem;">
{% for doc in expense.documents.all %}
<div style="display:inline-flex; align-items:center; gap:0.3rem;">
<a href="{{ doc.file.url }}" target="_blank" style="font-size:0.65rem; color:var(--efintel-blue); text-decoration:none;" title="{{ doc.title|default:doc.file.name }}">
<i data-lucide="paperclip" style="width:10px;"></i> {{ doc.title|default:doc.file.name|truncatechars:20 }}
</a>
</div>
{% endfor %}
</div>
{% endif %}
</td>
<td class="amount-cell">
<div>${{ expense.amount_clp|floatformat:"0"|intcomma }} CLP</div>
<div style="font-size:0.68rem; color:var(--efintel-gray); font-family:var(--font-mono);">${{ expense.amount_usd|floatformat:"2"|intcomma }} USD</div>
</td>
<td>
{% if expense.approval_status == 'EN_REVISION_DOCUMENTAL' %}
<span class="badge badge-amber"><i data-lucide="clock" style="width:12px;"></i> En Revisión</span>
{% elif expense.approval_status == 'SOLICITADO_FINANZAS' %}
<span class="badge badge-blue"><i data-lucide="send" style="width:12px;"></i> Solicitado Finanzas</span>
{% elif expense.approval_status == 'LIBERADO_PAGADO' %}
<span class="badge badge-emerald"><i data-lucide="check-check" style="width:12px;"></i> Pagado</span>
{% else %}
<span class="badge badge-red"><i data-lucide="x-circle" style="width:12px;"></i> Rechazado</span>
{% endif %}
</td>
<td>
<div style="display: flex; gap: 0.3rem;">
{% if expense.approval_status == 'EN_REVISION_DOCUMENTAL' %}
<a href="{% url 'approve_expense' expense.id 'solicitar' %}" class="btn-primary" style="padding:0.3rem; font-size:0.65rem; background: var(--efintel-blue);" title="Elevar a Finanzas"><i data-lucide="arrow-right"></i></a>
{% endif %}
{% if expense.approval_status == 'SOLICITADO_FINANZAS' and 'Administrador Finanzas' in request.user.groups.all.0.name or request.user.is_superuser %}
<a href="{% url 'approve_expense' expense.id 'pagar' %}" class="btn-primary" style="padding:0.3rem; font-size:0.65rem; background: var(--efintel-success);" title="Liberar Pago"><i data-lucide="check"></i></a>
<a href="{% url 'approve_expense' expense.id 'rechazar' %}" class="btn-danger" style="padding:0.3rem; font-size:0.65rem;" title="Rechazar"><i data-lucide="x"></i></a>
{% endif %}
{% if expense.approval_status != 'SOLICITADO_FINANZAS' and expense.approval_status != 'LIBERADO_PAGADO' %}
{% if request.user.groups.all.0.name == 'Administrador' or request.user.is_superuser or expense.user == request.user %}
<a href="/gastos/{{ expense.id }}/editar/" class="btn-secondary" style="padding: 0.3rem; background: var(--efintel-light); color: var(--efintel-petroleum);" title="Editar"><i data-lucide="pencil" style="width:14px;"></i></a>
{% endif %}
{% if request.user.groups.all.0.name == 'Administrador' or request.user.is_superuser %}
<form method="post" action="/gastos/{{ expense.id }}/eliminar/" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn-danger" style="padding: 0.3rem;" onclick="return confirm('¿Seguro que desea eliminar esta erogación? Esta acción quedará en el Log de Auditoría.');" title="Eliminar"><i data-lucide="trash-2" style="width:14px;"></i></button>
</form>
{% endif %}
{% else %}
<span style="font-size:0.75rem; color:var(--efintel-gray); padding: 0.3rem;" title="Comprobante Bloqueado"><i data-lucide="lock" style="width:14px;"></i></span>
{% endif %}
</div>
</td>
</tr>