Merge branch 'add-pagination-to-featured-events' into 'master'

Add pagination to featured events

Closes #811

See merge request framasoft/mobilizon!1018
This commit is contained in:
Thomas Citharel 2021-08-09 16:08:42 +00:00
commit c46d8eac3a
2 changed files with 62 additions and 21 deletions

View File

@ -209,8 +209,18 @@ export const FETCH_EVENT_BASIC = gql`
`; `;
export const FETCH_EVENTS = gql` export const FETCH_EVENTS = gql`
query FetchEvents($orderBy: EventOrderBy, $direction: SortDirection) { query FetchEvents(
events(orderBy: $orderBy, direction: $direction) { $orderBy: EventOrderBy
$direction: SortDirection
$page: Int
$limit: Int
) {
events(
orderBy: $orderBy
direction: $direction
page: $page
limit: $limit
) {
total total
elements { elements {
id id
@ -246,14 +256,14 @@ export const FETCH_EVENTS = gql`
domain domain
name name
} }
# attributedTo { attributedTo {
# avatar { avatar {
# id id
# url url
# }, }
# preferredUsername, preferredUsername
# name, name
# }, }
category category
tags { tags {
...TagFragment ...TagFragment

View File

@ -69,7 +69,8 @@
> >
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<h2 class="title">{{ $t("Featured events") }}</h2> <h2 class="title">{{ $t("Featured events") }}</h2>
<div v-if="events.elements.length > 0" class="columns is-multiline"> <div v-if="events.elements.length > 0">
<div class="columns is-multiline">
<div <div
class="column is-one-third-desktop" class="column is-one-third-desktop"
v-for="event in events.elements" v-for="event in events.elements"
@ -78,6 +79,19 @@
<EventCard :event="event" /> <EventCard :event="event" />
</div> </div>
</div> </div>
<div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
<b-pagination
:total="events.total"
v-model="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')"
>
</b-pagination>
</div>
</div>
<b-message <b-message
v-else-if="events.elements.length === 0 && $apollo.loading === false" v-else-if="events.elements.length === 0 && $apollo.loading === false"
type="is-danger" type="is-danger"
@ -104,7 +118,7 @@
<EventCard :event="event" /> <EventCard :event="event" />
</div> </div>
</div> </div>
<div class="pagination"> <div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT">
<b-pagination <b-pagination
:total="searchEvents.total" :total="searchEvents.total"
v-model="eventPage" v-model="eventPage"
@ -218,7 +232,15 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
}, },
apollo: { apollo: {
config: CONFIG, config: CONFIG,
events: FETCH_EVENTS, events: {
query: FETCH_EVENTS,
variables() {
return {
page: this.eventPage,
limit: EVENT_PAGE_LIMIT,
};
},
},
searchEvents: { searchEvents: {
query: SEARCH_EVENTS, query: SEARCH_EVENTS,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
@ -279,8 +301,6 @@ export default class Search extends Vue {
searchGroups: Paginate<IGroup> = { total: 0, elements: [] }; searchGroups: Paginate<IGroup> = { total: 0, elements: [] };
eventPage = 1;
groupPage = 1; groupPage = 1;
location: IAddress = new Address(); location: IAddress = new Address();
@ -355,6 +375,17 @@ export default class Search extends Vue {
this.$apollo.queries.searchEvents.refetch(); this.$apollo.queries.searchEvents.refetch();
} }
get eventPage(): number {
return parseInt(this.$route.query.eventPage as string, 10) || 1;
}
set eventPage(page: number) {
this.$router.push({
name: RouteName.SEARCH,
query: { ...this.$route.query, eventPage: page.toString() },
});
}
get search(): string | undefined { get search(): string | undefined {
return this.$route.query.term as string; return this.$route.query.term as string;
} }