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

Fix pagination of group events 

Closes #1088

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-20 15:29:24 +02:00
parent 409439a916
commit c216172d44
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/src/views/Event/GroupEvents.vue
View File

@ -18,7 +18,7 @@
<h1 class="title" v-if="group"> <h1 class="title" v-if="group">
{{ {{
$t("{group}'s events", { $t("{group}'s events", {
group: group.name || group.preferredUsername, group: displayName(group),
}) })
}} }}
</h1> </h1>
@ -78,7 +78,7 @@
<b-pagination <b-pagination
class="mt-4" class="mt-4"
:total="group.organizedEvents.total" :total="group.organizedEvents.total"
v-model="eventsPage" v-model="page"
:per-page="EVENTS_PAGE_LIMIT" :per-page="EVENTS_PAGE_LIMIT"
:aria-next-label="$t('Next page')" :aria-next-label="$t('Next page')"
:aria-previous-label="$t('Previous page')" :aria-previous-label="$t('Previous page')"
@ -91,17 +91,15 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import RouteName from "@/router/name"; import RouteName from "@/router/name";
import Subtitle from "@/components/Utils/Subtitle.vue"; import Subtitle from "@/components/Utils/Subtitle.vue";
import GroupedMultiEventMinimalistCard from "@/components/Event/GroupedMultiEventMinimalistCard.vue"; import GroupedMultiEventMinimalistCard from "@/components/Event/GroupedMultiEventMinimalistCard.vue";
import { PERSON_MEMBERSHIPS } from "@/graphql/actor"; import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import GroupMixin from "@/mixins/group";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
import { FETCH_GROUP_EVENTS } from "@/graphql/event"; import { FETCH_GROUP_EVENTS } from "@/graphql/event";
import EmptyContent from "../../components/Utils/EmptyContent.vue"; import EmptyContent from "../../components/Utils/EmptyContent.vue";
import { displayName, usernameWithDomain } from "../../types/actor"; import { displayName, IGroup, usernameWithDomain } from "../../types/actor";
const EVENTS_PAGE_LIMIT = 10; const EVENTS_PAGE_LIMIT = 10;
@ -127,10 +125,11 @@ const EVENTS_PAGE_LIMIT = 10;
name: this.$route.params.preferredUsername, name: this.$route.params.preferredUsername,
beforeDateTime: this.showPassedEvents ? new Date() : null, beforeDateTime: this.showPassedEvents ? new Date() : null,
afterDateTime: this.showPassedEvents ? null : new Date(), afterDateTime: this.showPassedEvents ? null : new Date(),
organisedEventsPage: this.eventsPage, organisedEventsPage: this.page,
organisedEventsLimit: EVENTS_PAGE_LIMIT, organisedEventsLimit: EVENTS_PAGE_LIMIT,
}; };
}, },
update: (data) => data.group,
}, },
}, },
components: { components: {
@ -144,15 +143,27 @@ const EVENTS_PAGE_LIMIT = 10;
const { group } = this; const { group } = this;
return { return {
title: this.$t("{group} events", { title: this.$t("{group} events", {
group: group?.name || usernameWithDomain(group), group: displayName(group),
}) as string, }) as string,
}; };
}, },
}) })
export default class GroupEvents extends mixins(GroupMixin) { export default class GroupEvents extends Vue {
group!: IGroup;
memberships!: IMember[]; memberships!: IMember[];
eventsPage = 1; get page(): number {
return parseInt((this.$route.query.page as string) || "1", 10);
}
set page(page: number) {
this.$router.push({
name: RouteName.GROUP_EVENTS,
query: { ...this.$route.query, page: page.toString() },
});
this.$apollo.queries.group.refetch();
}
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
@ -170,14 +181,11 @@ export default class GroupEvents extends mixins(GroupMixin) {
} }
get showPassedEvents(): boolean { get showPassedEvents(): boolean {
return ( return this.$route.query.future === "false";
this.$route.query.future !== undefined &&
this.$route.query.future.toString() === "false"
);
} }
set showPassedEvents(value: boolean) { set showPassedEvents(value: boolean) {
this.$router.push({ query: { future: this.showPassedEvents.toString() } }); this.$router.replace({ query: { future: (!value).toString() } });
} }
} }
</script> </script>