fix: inicializar users/roles en Alpine y null-safety en loadRegister

- 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>
This commit is contained in:
Lizandro Guarnizo
2026-05-21 12:30:08 -05:00
co-authored by Copilot
parent 10639d233b
commit 4fec04e5fe
+16 -16
View File
@@ -324,12 +324,13 @@
Id: null, Id: null,
deleteId: null, deleteId: null,
users: [],
roles: [],
loading: false, loading: false,
totalRecords: 0, // Agregar esta línea totalRecords: 0,
totalPages: 0,
isLoading: false, isLoading: false,
roles: '',
init() { init() {
this.loadRegister(); this.loadRegister();
}, },
@@ -342,23 +343,22 @@
//this.loading = true; //this.loading = true;
const search = this.searchQuery ? `&search=${this.searchQuery}` : ''; const search = this.searchQuery ? `&search=${this.searchQuery}` : '';
fetch(`/app/loadusers?page=${page}${search}`) 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 => { .then(data => {
this.totalRecords = data.total; // Establece el total de registros aquí this.totalRecords = data.total || 0;
this.users = data.Users; // Asignar this.users = data.Users || [];
this.roles = data.Roles; this.roles = data.Roles || [];
console.log(this.roles); this.totalPages = data.totalPages || 0;
this.totalPages = data.totalPages; // Asignar total de páginas
this.createPagination(this.totalPages, page); this.createPagination(this.totalPages, page);
if (this.users.length > 0) {
if (data.Users.length != 0) { const totalPages = Math.ceil(this.totalRecords / (data.limit || 10));
// Lógica de paginación this.createPagination(totalPages, page);
const totalPages = Math.ceil(this.totalRecords / data.limit);
this.createPagination(totalPages, page)
} }
}) })
.catch(error => console.error('Error:', error)) .catch(error => console.error('Error cargando usuarios:', error))
.finally(() => { .finally(() => {
this.isLoading = false; // Ocultar el GIF de carga this.isLoading = false; // Ocultar el GIF de carga
}); });