Actualizar usuarios.html

usuarios.html

@@ -466,18 +466,25 @@
 
                 let roleBadge = "OP. NORMAL";
                 let roleColor = "bg-blue-50 text-blue-600 border-blue-100";
+                let toggleRoleBtnText = "Bolsa Off"; // Botón para cambiar rol
                 
                 if (u.role === 'operario_cerrado') {
-                    roleBadge = "OP. CERRADO (SIN BOLSA)";
+                    roleBadge = "OP. CERRADO";
                     roleColor = "bg-amber-50 text-amber-600 border-amber-200";
+                    toggleRoleBtnText = "Bolsa On";
                 } else if (u.role === 'admin') {
                     roleBadge = "ADMINISTRADOR";
                     roleColor = "bg-purple-50 text-purple-600 border-purple-200";
+                    toggleRoleBtnText = ""; // Los admin no tienen esto
                 } else if (u.role === 'facturacion') {
                     roleBadge = "FACTURACIÓN";
                     roleColor = "bg-emerald-50 text-emerald-600 border-emerald-200";
+                    toggleRoleBtnText = "";
                 }
 
+                // Generar el botón de alternar bolsa si aplica
+                const toggleRoleHtml = toggleRoleBtnText ? `<button onclick="toggleUserRole(${u.id}, '${u.role}')" class="text-purple-600 hover:text-white hover:bg-purple-600 border-purple-200 font-black text-[9px] uppercase tracking-widest border px-3 py-1.5 rounded-lg transition-all shadow-sm">${toggleRoleBtnText}</button>` : '';
+
                 tbody.innerHTML += `
                     <tr class="${isActive ? 'bg-white' : 'bg-slate-50 opacity-70'} hover:bg-slate-50/80 transition-colors border-b border-slate-100">
                         <td class="p-4">
@@ -497,6 +504,7 @@
                         </td>
                         <td class="p-4 text-left"><div class="max-h-24 overflow-y-auto no-scrollbar">${uZonesHtml}</div></td>
                         <td class="p-4 text-right space-x-2">
+                            ${toggleRoleHtml}
                             <button onclick="editUser(${u.id})" class="text-blue-500 hover:text-white hover:bg-blue-500 font-black text-[9px] uppercase tracking-widest border border-blue-200 px-3 py-1.5 rounded-lg transition-all shadow-sm">Editar</button>
                             <button onclick="toggleUserStatus(${u.id}, '${u.status || 'active'}')" class="${isActive ? 'text-amber-600 hover:bg-amber-500 hover:text-white border-amber-200' : 'text-emerald-600 hover:bg-emerald-500 hover:text-white border-emerald-200'} font-black text-[9px] uppercase tracking-widest border px-3 py-1.5 rounded-lg transition-all shadow-sm">
                                 ${isActive ? 'Pausar' : 'Activar'}
@@ -508,6 +516,44 @@
             lucide.createIcons();
         }
 
+        // Nueva función para alternar rápidamente el rol de un operario
+        async function toggleUserRole(id, currentRole) {
+            const newRole = currentRole === 'operario' ? 'operario_cerrado' : 'operario';
+            const msg = newRole === 'operario_cerrado' ? "¿Quitar acceso a la Bolsa Libre a este operario?" : "¿Devolver acceso a la Bolsa Libre a este operario?";
+            if(!confirm(msg)) return;
+
+            // Recogemos el usuario para enviar el objeto completo (el endpoint PUT lo requiere)
+            const user = currentUsers.find(u => u.id === id);
+            if (!user) return;
+
+            const data = {
+                fullName: user.full_name,
+                email: user.email,
+                phone: user.phone,
+                role: newRole,
+                guilds: user.guilds || [],
+                zones: user.zones || []
+            };
+
+            try {
+                const res = await fetch(`${API_URL}/admin/users/${id}`, {
+                    method: 'PUT',
+                    headers: { 
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${localStorage.getItem("token")}` 
+                    },
+                    body: JSON.stringify(data)
+                });
+                const json = await res.json();
+                if(json.ok) {
+                    showToast(newRole === 'operario_cerrado' ? "Acceso a bolsa denegado" : "Acceso a bolsa permitido");
+                    fetchUsers();
+                } else {
+                    showToast("Error al cambiar permisos", true);
+                }
+            } catch(e) { showToast("Error de conexión", true); }
+        }
+
         async function toggleUserStatus(id, currentStatus) {
             const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
             const msg = newStatus === 'active' ? "¿Reactivar operario para que reciba avisos?" : "¿Dar de baja temporal? (No verá avisos)";