Actualizar usuarios.html

This commit is contained in:
2026-02-15 18:09:41 +00:00
parent 9bfa9417e7
commit fd8cd2af29

View File

@@ -403,13 +403,16 @@
function renderUsersTable() { function renderUsersTable() {
const tbody = document.getElementById('usersListBody'); const tbody = document.getElementById('usersListBody');
if (!tbody) return;
tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : ""; tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : "";
currentUsers.forEach(u => { currentUsers.forEach(u => {
// Determinamos si el usuario está activo basándonos en el campo 'status' del servidor // Detectamos si el operario está activo o de baja
const isActive = (u.status === 'active' || u.status === null); const isActive = u.status === 'active';
const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", "); const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", ");
// Agrupación visual de zonas
const groupedZones = (u.zones || []).reduce((acc, curr) => { const groupedZones = (u.zones || []).reduce((acc, curr) => {
if (!acc[curr.city]) acc[curr.city] = []; if (!acc[curr.city]) acc[curr.city] = [];
if (!acc[curr.city].includes(curr.cps)) acc[curr.city].push(curr.cps); if (!acc[curr.city].includes(curr.cps)) acc[curr.city].push(curr.cps);
@@ -423,7 +426,7 @@
</div>`; </div>`;
}).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>'; }).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>';
// Aplicamos clases CSS de "grisado" si no está activo // Aplicamos el estilo gris y opacidad si es baja temporal
tbody.innerHTML += ` tbody.innerHTML += `
<tr class="${isActive ? 'bg-white' : 'bg-gray-100 opacity-60'} hover:bg-gray-50 transition border-b"> <tr class="${isActive ? 'bg-white' : 'bg-gray-100 opacity-60'} hover:bg-gray-50 transition border-b">
<td class="p-4"> <td class="p-4">
@@ -433,7 +436,7 @@
<span class="font-black ${isActive ? 'text-slate-800' : 'text-gray-500'} uppercase">${u.full_name}</span> <span class="font-black ${isActive ? 'text-slate-800' : 'text-gray-500'} uppercase">${u.full_name}</span>
</div> </div>
<span class="text-[9px] text-gray-400 font-bold">${u.email}</span> <span class="text-[9px] text-gray-400 font-bold">${u.email}</span>
${!isActive ? '<span class="text-[8px] font-black text-red-500 mt-1 uppercase tracking-tighter">[ Baja Temporal ]</span>' : ''} ${!isActive ? '<span class="text-[8px] font-black text-red-500 mt-1 uppercase">[ Baja Temporal ]</span>' : ''}
</div> </div>
</td> </td>
<td class="p-4 font-black ${isActive ? 'text-green-600' : 'text-gray-400'}">${u.phone}</td> <td class="p-4 font-black ${isActive ? 'text-green-600' : 'text-gray-400'}">${u.phone}</td>
@@ -457,6 +460,29 @@
lucide.createIcons(); // Importante para que se vea el candado lucide.createIcons(); // Importante para que se vea el candado
} }
// Nueva función para el botón de Baja/Activar
async function toggleUserStatus(id, currentStatus) {
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
const msg = newStatus === 'active' ? "¿Reactivar operario?" : "¿Dar de baja temporal?";
if(!confirm(msg)) return;
try {
const res = await fetch(`${API_URL}/admin/users/${id}/status`, {
method: 'PATCH',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${localStorage.getItem("token")}`
},
body: JSON.stringify({ status: newStatus })
});
const data = await res.json();
if(data.ok) {
showToast(newStatus === 'active' ? "Operario activado" : "Operario en baja temporal");
fetchUsers();
}
} catch(e) { showToast("Error de conexión", true); }
}
// Asegúrate de tener también esta función para que los botones de la tabla funcionen // Asegúrate de tener también esta función para que los botones de la tabla funcionen
async function toggleUserStatus(id, currentStatus) { async function toggleUserStatus(id, currentStatus) {
const newStatus = currentStatus === 'active' ? 'inactive' : 'active'; const newStatus = currentStatus === 'active' ? 'inactive' : 'active';