Only show one pagination bar when searching in both events & groups

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/SearchView.vue

@@ -503,54 +503,45 @@
           <o-notification v-if="features && !features.groups" variant="danger">
             {{ t("Groups are not enabled on this instance.") }}
           </o-notification>
-          <div v-else-if="searchGroups && searchGroups?.total > 0">
-            <GroupCard
-              v-for="group in searchGroups?.elements"
-              :group="group"
-              :key="group.id"
-              :isRemoteGroup="group.__typename === 'GroupResult'"
-              :isLoggedIn="currentUser?.isLoggedIn"
-              mode="row"
-            />
-            <o-pagination
-              v-if="searchGroups && searchGroups?.total > GROUP_PAGE_LIMIT"
-              :total="searchGroups?.total"
-              v-model:current="groupPage"
-              :per-page="GROUP_PAGE_LIMIT"
-              :aria-next-label="t('Next page')"
-              :aria-previous-label="t('Previous page')"
-              :aria-page-label="t('Page')"
-              :aria-current-label="t('Current page')"
-            >
-            </o-pagination>
-          </div>
+          <GroupCard
+            v-else-if="searchGroups && searchGroups?.total > 0"
+            v-for="group in searchGroups?.elements"
+            :group="group"
+            :key="group.id"
+            :isRemoteGroup="group.__typename === 'GroupResult'"
+            :isLoggedIn="currentUser?.isLoggedIn"
+            mode="row"
+          />
           <o-notification v-else-if="searchLoading === false" variant="danger">
             {{ t("No groups found") }}
           </o-notification>
-          <div v-if="searchEvents && searchEvents.total > 0">
-            <event-card
-              mode="row"
-              v-for="event in searchEvents?.elements"
-              :event="event"
-              :key="event.uuid"
-              :options="{
-                isRemoteEvent: event.__typename === 'EventResult',
-                isLoggedIn: currentUser?.isLoggedIn,
-              }"
-              class="my-4"
-            />
-            <o-pagination
-              v-if="searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT"
-              :total="searchEvents.total"
-              v-model:current="eventPage"
-              :per-page="EVENT_PAGE_LIMIT"
-              :aria-next-label="t('Next page')"
-              :aria-previous-label="t('Previous page')"
-              :aria-page-label="t('Page')"
-              :aria-current-label="t('Current page')"
-            >
-            </o-pagination>
-          </div>
+          <event-card
+            v-if="searchEvents && searchEvents.total > 0"
+            mode="row"
+            v-for="event in searchEvents?.elements"
+            :event="event"
+            :key="event.uuid"
+            :options="{
+              isRemoteEvent: event.__typename === 'EventResult',
+              isLoggedIn: currentUser?.isLoggedIn,
+            }"
+            class="my-4"
+          />
+          <o-pagination
+            v-if="
+              (searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT) ||
+              (searchGroups && searchGroups?.total > GROUP_PAGE_LIMIT)
+            "
+            :total="
+              Math.max(searchEvents?.total ?? 0, searchGroups?.total ?? 0)
+            "
+            v-model:current="page"
+            :per-page="EVENT_PAGE_LIMIT"
+            :aria-next-label="t('Next page')"
+            :aria-previous-label="t('Previous page')"
+            :aria-page-label="t('Page')"
+            :aria-current-label="t('Current page')"
+          />
           <o-notification v-else-if="searchLoading === false" variant="info">
             <p>{{ t("No events found") }}</p>
             <p v-if="searchIsUrl && !currentUser?.id">
@@ -770,6 +761,7 @@ const arrayTransformer: RouteQueryTransformer<string[]> = {
   },
 };
 
+const page = useRouteQuery("page", 1, integerTransformer);
 const eventPage = useRouteQuery("eventPage", 1, integerTransformer);
 const groupPage = useRouteQuery("groupPage", 1, integerTransformer);
 
@@ -783,6 +775,18 @@ const contentType = useRouteQuery(
   ContentType.ALL,
   enumTransformer(ContentType)
 );
+
+watch(contentType, (newContentType: ContentType) => {
+  switch (newContentType) {
+    case ContentType.ALL:
+      page.value = 1;
+    case ContentType.EVENTS:
+      eventPage.value = 1;
+    case ContentType.GROUPS:
+      groupPage.value = 1;
+  }
+});
+
 const isOnline = useRouteQuery("isOnline", false, booleanTransformer);
 const categoryOneOf = useRouteQuery("categoryOneOf", [], arrayTransformer);
 const statusOneOf = useRouteQuery(
@@ -1168,8 +1172,10 @@ const { result: searchElementsResult, loading: searchLoading } = useQuery<{
   beginsOn: start.value,
   endsOn: end.value,
   radius: geoHashLocation.value ? radius.value : undefined,
-  eventPage: eventPage.value,
-  groupPage: groupPage.value,
+  eventPage:
+    contentType.value === ContentType.ALL ? page.value : eventPage.value,
+  groupPage:
+    contentType.value === ContentType.ALL ? page.value : groupPage.value,
   limit: EVENT_PAGE_LIMIT,
   type: isOnline.value ? "ONLINE" : undefined,
   categoryOneOf: categoryOneOf.value,