File "usuarios.php"
Full Path: C:/wamp64/www/Formaciones/Vistas/admin/usuarios.php
File size: 14.95 KB
MIME-type: text/x-php
Charset: utf-8
<?php
/**
* Vista: Vistas/admin/usuarios.php
* Con búsqueda automática de empleados desde la BD externa
*/
?>
<!-- AGREGAR JQUERY Y SELECT2 SI NO ESTÁ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<h1>Gestión de Usuarios</h1>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-top: 20px;">
<section class="card-form">
<h2>Nuevo Usuario</h2>
<form method="post" action="index.php?r=admin/usuarios/guardar" id="formUsuario" style="display: flex; flex-direction: column; gap: 15px;">
<?php campo_csrf(); ?>
<div class="form-group">
<label>Cédula <span style="color: red;">*</span></label>
<div style="display: flex; gap: 10px;">
<input type="text"
name="cedula"
id="input_cedula"
required
placeholder="Ingrese la cédula"
style="flex: 1;">
<button type="button"
id="btn_buscar"
class="btn-primary"
style="padding: 10px 20px; white-space: nowrap;">
🔍 Buscar
</button>
</div>
<small id="mensaje_busqueda" style="display: none; margin-top: 5px;"></small>
</div>
<!-- Campo oculto para nombre completo que se enviará -->
<input type="hidden" name="name" id="input_name_hidden">
<div class="form-group">
<label>Nombre Completo</label>
<input type="text"
id="input_nombre_completo"
readonly
placeholder="Se llenará automáticamente"
style="background-color: #f5f5f5;">
</div>
<div class="form-group">
<label>Centro de Costo</label>
<input type="text"
name="ccosto"
id="input_ccosto"
readonly
placeholder="Se llenará automáticamente"
style="background-color: #f5f5f5;">
</div>
<div class="form-group">
<label>Cargo</label>
<input type="text"
name="cargo"
id="input_cargo"
readonly
placeholder="Se llenará automáticamente"
style="background-color: #f5f5f5;">
</div>
<div class="form-group">
<label>Correo electrónico <span style="color: red;">*</span></label>
<input type="email"
name="email"
id="input_email"
required
placeholder="correo@ejemplo.com">
</div>
<div class="form-group">
<label>Contraseña <span style="color: red;">*</span></label>
<input type="password"
name="password"
id="input_password"
required
placeholder="Mínimo 6 caracteres">
</div>
<div class="form-group">
<label>Rol <span style="color: red;">*</span></label>
<select id="input_role" name="role" required>
<option value="">Seleccione un rol...</option>
<option value="student">Estudiante</option>
<option value="instructor">Instructor</option>
<option value="admin">Administrador</option>
</select>
</div>
<button type="submit"
id="btn_submit"
disabled
style="opacity: 0.5; cursor: not-allowed;">
💾 Crear Usuario
</button>
</form>
</section>
<section>
<!-- FORMULARIO DE BÚSQUEDA -->
<div class="card" style="margin-bottom: 20px; padding: 15px;">
<form action="index.php" method="GET" style="display: flex; gap: 10px; align-items: center;">
<input type="hidden" name="r" value="admin/usuarios">
<input type="text"
name="busqueda"
value="<?= h($busqueda ?? '') ?>"
placeholder="Buscar por cédula o nombre..."
style="flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem;">
<button type="submit"
class="btn-primary"
style="padding: 12px 20px; background: #2c3e50; border: none; font-weight: bold; white-space: nowrap;">
Buscar 🔍
</button>
<?php if(!empty($busqueda)): ?>
<a href="index.php?r=admin/usuarios"
class="btn-primary"
style="padding: 12px 20px; background: #95a5a6; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;">
Limpiar
</a>
<?php endif; ?>
</form>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Cédula</th>
<th>Rol</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php if($usuarios && $usuarios->num_rows > 0): ?>
<?php while ($u = $usuarios->fetch_assoc()): ?>
<tr>
<td><strong><?= h($u['name']) ?></strong></td>
<td><?= h($u['cedula']) ?></td>
<td>
<span style="background: #fff3ec; padding: 4px 8px; border-radius: 6px; color: var(--accent-1); font-size: 0.8rem;">
<?= h($u['role']) ?>
</span>
</td>
<td>
<a href="index.php?r=admin/usuarios/ver&id=<?= $u['id'] ?>"
class="btn-primary"
style="padding: 5px 15px; font-size: 0.8rem; text-decoration: none; display: inline-block; border-radius: 15px;">
Ver
</a>
</td>
</tr>
<?php endwhile; ?>
<?php else: ?>
<tr>
<td colspan="4" style="text-align: center; padding: 40px; color: #95a5a6;">
No se encontraron usuarios<?= !empty($busqueda) ? ' con el criterio de búsqueda' : '' ?>.
</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
<?php if (isset($total_paginas) && $total_paginas > 1): ?>
<div class="pagination-container">
<?php
$url_base = "index.php?r=admin/usuarios" . (!empty($busqueda) ? "&busqueda=" . urlencode($busqueda) : "");
?>
<?php if ($pagina_actual > 1): ?>
<a href="<?= $url_base ?>&p=<?= $pagina_actual - 1 ?>" class="btn-page">« Anterior</a>
<?php endif; ?>
<?php
$rango = 2;
for ($i = 1; $i <= $total_paginas; $i++):
if ($i == 1 || $i == $total_paginas || ($i >= $pagina_actual - $rango && $i <= $pagina_actual + $rango)):
?>
<a href="<?= $url_base ?>&p=<?= $i ?>"
class="btn-page <?= $i == $pagina_actual ? 'active' : '' ?>">
<?= $i ?>
</a>
<?php
elseif ($i == $pagina_actual - $rango - 1 || $i == $pagina_actual + $rango + 1):
echo "<span class='dots'>...</span>";
endif;
endfor; ?>
<?php if ($pagina_actual < $total_paginas): ?>
<a href="<?= $url_base ?>&p=<?= $pagina_actual + 1 ?>" class="btn-page">Siguiente »</a>
<?php endif; ?>
</div>
<?php endif; ?>
</section>
</div>
<style>
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #34495e; font-size: 0.9rem; }
.form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.pagination-container {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 25px;
padding: 10px;
}
.btn-page {
padding: 8px 14px;
border: 1px solid #e0e0e0;
border-radius: 8px;
text-decoration: none;
color: #555;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
background: white;
}
.btn-page:hover {
background: #fff3ec;
color: #f37021;
border-color: #f37021;
}
.btn-page.active {
background: #f37021;
color: white;
border-color: #f37021;
box-shadow: 0 2px 4px rgba(243, 112, 33, 0.2);
}
.dots {
color: #999;
padding: 0 5px;
}
.btn-primary {
background-color: #f37021;
border: none;
color: white;
cursor: pointer;
border-radius: 6px;
}
.btn-primary:hover {
background-color: #d65d1a;
}
.mensaje-exito {
color: #27ae60;
font-weight: bold;
}
.mensaje-error {
color: #e74c3c;
font-weight: bold;
}
.mensaje-info {
color: #3498db;
font-style: italic;
}
</style>
<script>
$(document).ready(function() {
let datosEmpleadoCargados = false;
// Función para buscar empleado
$('#btn_buscar').click(function() {
const cedula = $('#input_cedula').val().trim();
if (!cedula) {
mostrarMensaje('Por favor ingrese una cédula', 'error');
return;
}
// Mostrar estado de carga
$('#btn_buscar').prop('disabled', true).text('⏳ Buscando...');
mostrarMensaje('Buscando empleado...', 'info');
// Realizar petición AJAX
$.ajax({
url: 'buscar_empleado.php',
method: 'GET',
data: { cedula: cedula },
dataType: 'json',
success: function(response) {
if (response.success) {
// Llenar los campos con la información
$('#input_nombre_completo').val(response.nombre_completo);
$('#input_name_hidden').val(response.nombre_completo); // Campo hidden para el form
$('#input_ccosto').val(response.ccosto);
$('#input_cargo').val(response.cargo);
mostrarMensaje('✅ Empleado encontrado exitosamente', 'exito');
datosEmpleadoCargados = true;
habilitarFormulario();
} else if (response.existe) {
mostrarMensaje('⚠️ ' + response.error, 'error');
limpiarCampos();
datosEmpleadoCargados = false;
} else if (response.no_encontrado) {
mostrarMensaje('❌ ' + response.error, 'error');
limpiarCampos();
datosEmpleadoCargados = false;
} else {
mostrarMensaje('❌ ' + (response.error || 'Error desconocido'), 'error');
limpiarCampos();
datosEmpleadoCargados = false;
}
},
error: function(xhr, status, error) {
console.error('Error AJAX:', error);
mostrarMensaje('❌ Error de conexión. Intente nuevamente.', 'error');
limpiarCampos();
datosEmpleadoCargados = false;
},
complete: function() {
$('#btn_buscar').prop('disabled', false).text('🔍 Buscar');
}
});
});
// Permitir buscar con Enter en el campo de cédula
$('#input_cedula').keypress(function(e) {
if (e.which === 13) {
e.preventDefault();
$('#btn_buscar').click();
}
});
// Validar formulario antes de enviar
$('#formUsuario').submit(function(e) {
if (!datosEmpleadoCargados) {
e.preventDefault();
alert('⚠️ Debe buscar y cargar los datos del empleado antes de crear el usuario');
return false;
}
// Validar que los campos obligatorios estén llenos
if (!$('#input_email').val() || !$('#input_password').val() || !$('#input_role').val()) {
e.preventDefault();
alert('⚠️ Complete todos los campos obligatorios');
return false;
}
return true;
});
// Función para mostrar mensajes
function mostrarMensaje(texto, tipo) {
const $mensaje = $('#mensaje_busqueda');
$mensaje.removeClass('mensaje-exito mensaje-error mensaje-info');
if (tipo === 'exito') {
$mensaje.addClass('mensaje-exito');
} else if (tipo === 'error') {
$mensaje.addClass('mensaje-error');
} else {
$mensaje.addClass('mensaje-info');
}
$mensaje.text(texto).show();
}
// Función para limpiar campos
function limpiarCampos() {
$('#input_nombre_completo').val('');
$('#input_name_hidden').val('');
$('#input_ccosto').val('');
$('#input_cargo').val('');
$('#btn_submit').prop('disabled', true).css({
'opacity': '0.5',
'cursor': 'not-allowed'
});
}
// Función para habilitar el formulario
function habilitarFormulario() {
$('#btn_submit').prop('disabled', false).css({
'opacity': '1',
'cursor': 'pointer'
});
}
// Si se cambia la cédula después de cargar datos, resetear
$('#input_cedula').on('input', function() {
if (datosEmpleadoCargados) {
limpiarCampos();
datosEmpleadoCargados = false;
mostrarMensaje('', 'info');
$('#mensaje_busqueda').hide();
}
});
});
</script>