From 4fec04e5fea41bc7ff644f7dfb7d7e2f852230f6 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 21 May 2026 12:30:08 -0500
Subject: [PATCH] fix: inicializar users/roles en Alpine y null-safety en
 loadRegister
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Declara users:[] y roles:[] en el estado inicial de Alpine para que
  x-for funcione reactivamente desde el primer render
- Agrega totalPages:0 al estado inicial
- Añade comprobación response.ok antes de parsear JSON
- Usa || [] y || 0 para evitar TypeError si el backend retorna error
- Reemplaza data.Users.length con this.users.length (siempre array)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 resources/views/users.html | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/resources/views/users.html b/resources/views/users.html
index 3b6f21f..184406c 100755
--- a/resources/views/users.html
+++ b/resources/views/users.html
@@ -324,12 +324,13 @@
 
                 Id: null,
                 deleteId: null,
+                users: [],
+                roles: [],
                 loading: false,
-                totalRecords: 0, // Agregar esta línea
+                totalRecords: 0,
+                totalPages: 0,
                 isLoading: false,
 
-                roles: '',
-
                 init() {
                     this.loadRegister();
                 },
@@ -342,23 +343,22 @@
                     //this.loading = true;
                     const search = this.searchQuery ? `&search=${this.searchQuery}` : '';
                     fetch(`/app/loadusers?page=${page}${search}`)
-                        .then(response => response.json())
+                        .then(response => {
+                            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+                            return response.json();
+                        })
                         .then(data => {
-                            this.totalRecords = data.total; // Establece el total de registros aquí
-                            this.users = data.Users; // Asignar
-                            this.roles = data.Roles;
-                            console.log(this.roles);
-
-                            this.totalPages = data.totalPages; // Asignar total de páginas
+                            this.totalRecords = data.total || 0;
+                            this.users = data.Users || [];
+                            this.roles = data.Roles || [];
+                            this.totalPages = data.totalPages || 0;
                             this.createPagination(this.totalPages, page);
-
-                            if (data.Users.length != 0) {
-                                // Lógica de paginación
-                                const totalPages = Math.ceil(this.totalRecords / data.limit);
-                                this.createPagination(totalPages, page)
+                            if (this.users.length > 0) {
+                                const totalPages = Math.ceil(this.totalRecords / (data.limit || 10));
+                                this.createPagination(totalPages, page);
                             }
                         })
-                        .catch(error => console.error('Error:', error))
+                        .catch(error => console.error('Error cargando usuarios:', error))
                         .finally(() => {
                             this.isLoading = false; // Ocultar el GIF de carga
                         });