From c216172d4450880668092604a221ca5129aed175 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 20 Apr 2022 15:29:24 +0200
Subject: [PATCH] Fix pagination of group events

Closes #1088

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/GroupEvents.vue | 38 ++++++++++++++++++------------
 1 file changed, 23 insertions(+), 15 deletions(-)

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