Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
js/src/graphql/event.ts
View File

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

41
js/src/views/Search.vue
View File

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