modalized edit worker + global css
This commit is contained in:
@@ -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 %}
|
||||
Reference in New Issue
Block a user