modalized edit worker + global css

This commit is contained in:
2026-03-19 23:32:55 -03:00
parent a1bfb25abf
commit e430c732bd
7 changed files with 125 additions and 118 deletions

View File

@@ -1,5 +1,5 @@
{% extends "macros/base.html" %}
{% from 'macros/modals.html' import confirm_modal, edit_worker_modal %}
{% block title %}Gestión de Trabajadores{% endblock %}
@@ -18,6 +18,8 @@
{% endif %}
{% endwith %}
{{ edit_worker_modal(modulos) }}
<div class="card mb-4">
<div class="card-header bg-secondary text-white">Agregar Nuevo Trabajador</div>
<div class="card-body">
@@ -70,10 +72,28 @@
<td class="align-middle">{{ worker[3] }}</td>
<td class="align-middle"><span class="badge bg-info text-dark">{{ worker[4] }}</span></td>
<td class="text-end">
<a href="{{ url_for('edit_worker', id=worker[0]) }}" class="btn btn-sm btn-outline-info">Editar</a>
<form action="{{ url_for('delete_worker', id=worker[0]) }}" method="POST" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar a este trabajador?');">Eliminar</button>
</form>
<button type="button"
class="btn btn-sm btn-outline-info"
data-bs-toggle="modal"
data-bs-target="#editWorkerModal"
data-id="{{ worker[0] }}"
data-rut="{{ worker[1] }}"
data-name="{{ worker[2] }}"
data-phone="{{ worker[3] }}"
data-modulo="{{ worker[5] }}"> Editar
</button>
<button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delWorker{{ worker[0] }}">
Eliminar
</button>
{{ confirm_modal(
id='delWorker' ~ worker[0],
title='Eliminar Trabajador',
message='¿Eliminar a ' ~ worker[2] ~ '?',
action_url=url_for('delete_worker', id=worker[0]),
btn_class='btn-danger'
) }}
</td>
</tr>
{% else %}
@@ -87,6 +107,27 @@
</div>
<script>
const editWorkerModal = document.getElementById('editWorkerModal');
if (editWorkerModal) {
editWorkerModal.addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget;
const id = button.getAttribute('data-id');
// IMPORTANTE: Definir las rutas correctamente
const editForm = editWorkerModal.querySelector('#editWorkerForm');
const resetForm = editWorkerModal.querySelector('#resetPasswordForm');
editForm.action = "/admin/workers/edit/" + id;
resetForm.action = "/admin/workers/reset_password/" + id;
// Rellenar campos
editWorkerModal.querySelector('#edit_worker_rut').value = button.getAttribute('data-rut');
editWorkerModal.querySelector('#edit_worker_name').value = button.getAttribute('data-name');
editWorkerModal.querySelector('#edit_worker_phone').value = button.getAttribute('data-phone');
editWorkerModal.querySelector('#edit_worker_modulo').value = button.getAttribute('data-modulo');
});
}
document.getElementById('rutInput').addEventListener('input', function(e) {
let value = this.value.replace(/[^0-9kK]/g, '').toUpperCase();
if (value.length > 1) {
@@ -99,18 +140,17 @@
}
});
document.getElementById('phoneInput').addEventListener('input', function(e) {
let value = this.value.replace(/\D/g, '');
function formatPhone(input) {
let value = input.value.replace(/\D/g, '');
if (value.startsWith('56')) value = value.substring(2);
value = value.substring(0, 9);
if (value.length > 5) {
this.value = value.replace(/(\d{1})(\d{4})(\d+)/, '$1 $2 $3');
} else if (value.length > 1) {
this.value = value.replace(/(\d{1})(\d+)/, '$1 $2');
} else {
this.value = value;
}
if (value.length > 5) input.value = value.replace(/(\d{1})(\d{4})(\d+)/, '$1 $2 $3');
else if (value.length > 1) input.value = value.replace(/(\d{1})(\d+)/, '$1 $2');
else input.value = value;
}
document.querySelectorAll('.phone-input, #phoneInput').forEach(inp => {
inp.addEventListener('input', () => formatPhone(inp));
});
</script>
{% endblock %}