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

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-12 19:10:39 +02:00
parent fca3720bdb
commit e4ba0f21ee
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

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