From bbf78fa1981c35595fdaf533da51876e43885fe5 Mon Sep 17 00:00:00 2001
From: Massedil <massedil-framagit.org@msd.im>
Date: Wed, 22 Oct 2025 23:00:46 +0200
Subject: [PATCH] fix: update table data when page changes

Fixes: #1609
---
 src/views/Event/ParticipantsView.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/views/Event/ParticipantsView.vue b/src/views/Event/ParticipantsView.vue
index 91a593eaa..847d44f99 100644
--- a/src/views/Event/ParticipantsView.vue
+++ b/src/views/Event/ParticipantsView.vue
@@ -39,7 +39,7 @@
             </o-select>
           </o-field>
         </div>
-        <div class="" v-if="exportFormats.length > 0">
+        <div v-if="exportFormats.length > 0">
           <o-dropdown aria-role="list">
             <template #trigger="{ active }">
               <o-button
@@ -102,7 +102,7 @@
       backend-sorting
       :default-sort-direction="'desc'"
       :default-sort="['insertedAt', 'desc']"
-      @page-change="(newPage: number) => (page = newPage)"
+      @page-change="onPageChange"
       @sort="(field: string, order: string) => emit('sort', field, order)"
     >
       <o-table-column
@@ -320,7 +320,11 @@ const checkedRows = ref<IParticipant[]>([]);
 
 const queueTable = ref();
 
-const { result: participantsResult, loading: participantsLoading } = useQuery<{
+const {
+  result: participantsResult,
+  loading: participantsLoading,
+  refetch: participantsRefetch,
+} = useQuery<{
   event: IEvent;
 }>(
   PARTICIPANTS,
@@ -338,6 +342,18 @@ const { result: participantsResult, loading: participantsLoading } = useQuery<{
   })
 );
 
+const onPageChange = (p: number): void => {
+  // Change is not instantaneous since page is created with useRouteQuery linked to the URL state
+  page.value = p;
+  participantsRefetch({
+    uuid: eventId.value,
+    // use p to send the new value, not page.value (contains the old value)
+    page: p,
+    limit: PARTICIPANTS_PER_PAGE,
+    roles: role.value === "EVERYTHING" ? undefined : role.value,
+  });
+};
+
 const event = computed(() => participantsResult.value?.event);
 
 // const participantStats = computed((): IEventParticipantStats | null => {