Group enhancements

And fixes #492

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Event/GroupEvents.vue

@@ -51,7 +51,7 @@
           {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
         </subtitle>
         <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
-        <transition-group name="list" tag="p">
+        <transition-group name="list" tag="div" class="event-list">
           <EventListViewCard
             v-for="event in group.organizedEvents.elements"
             :key="event.id"
@@ -68,6 +68,16 @@
         >
           {{ $t("No events found") }}
         </b-message>
+        <b-pagination
+          :total="group.organizedEvents.total"
+          v-model="eventsPage"
+          :per-page="EVENTS_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>
       </section>
     </section>
   </div>
@@ -75,15 +85,17 @@
 <script lang="ts">
 import { Component } from "vue-property-decorator";
 import { mixins } from "vue-class-component";
-import { FETCH_GROUP } from "@/graphql/group";
 import RouteName from "@/router/name";
 import Subtitle from "@/components/Utils/Subtitle.vue";
 import EventListViewCard from "@/components/Event/EventListViewCard.vue";
 import { CURRENT_ACTOR_CLIENT, 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 { IGroup, IPerson, usernameWithDomain } from "../../types/actor";
 
+const EVENTS_PAGE_LIMIT = 10;
+
 @Component({
   apollo: {
     currentActor: CURRENT_ACTOR_CLIENT,
@@ -101,12 +113,14 @@ import { IGroup, IPerson, usernameWithDomain } from "../../types/actor";
       },
     },
     group: {
-      query: FETCH_GROUP,
+      query: FETCH_GROUP_EVENTS,
       variables() {
         return {
           name: this.$route.params.preferredUsername,
           beforeDateTime: this.showPassedEvents ? new Date() : null,
           afterDateTime: this.showPassedEvents ? null : new Date(),
+          organisedEventsPage: this.eventsPage,
+          organisedEventslimit: EVENTS_PAGE_LIMIT,
         };
       },
     },
@@ -123,11 +137,13 @@ export default class GroupEvents extends mixins(GroupMixin) {
 
   currentActor!: IPerson;
 
+  eventsPage = 1;
+
   usernameWithDomain = usernameWithDomain;
 
   RouteName = RouteName;
 
-  showPassedEvents = false;
+  EVENTS_PAGE_LIMIT = EVENTS_PAGE_LIMIT;
 
   get isCurrentActorMember(): boolean {
     if (!this.group || !this.memberships) return false;
@@ -135,10 +151,25 @@ export default class GroupEvents extends mixins(GroupMixin) {
       .map(({ parent: { id } }) => id)
       .includes(this.group.id);
   }
+
+  get showPassedEvents(): boolean {
+    return (
+      this.$route.query.future !== undefined &&
+      this.$route.query.future.toString() === "false"
+    );
+  }
+
+  set showPassedEvents(value: boolean) {
+    this.$router.push({ query: { future: this.showPassedEvents.toString() } });
+  }
 }
 </script>
 <style lang="scss" scoped>
 .container.section {
   background: $white;
 }
+
+div.event-list {
+  margin-bottom: 1rem;
+}
 </style>

js/src/views/Group/Group.vue

@@ -362,18 +362,26 @@
             :key="event.uuid"
             class="organized-event"
           />
-          <router-link
-            :to="{
-              name: RouteName.GROUP_EVENTS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("View all upcoming events") }}</router-link
-          >
+        </div>
+        <div
+          v-else-if="group && group.organizedEvents.elements.length == 0"
+          class="content has-text-grey has-text-centered"
+        >
+          <p>{{ $t("No public upcoming events") }}</p>
         </div>
         <div v-else-if="group" class="content has-text-grey has-text-centered">
           <p>{{ $t("No public upcoming events") }}</p>
         </div>
-        <b-skeleton animated v-else></b-skeleton>
+        <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
+        <router-link
+          v-if="group.organizedEvents.total > 0"
+          :to="{
+            name: RouteName.GROUP_EVENTS,
+            params: { preferredUsername: usernameWithDomain(group) },
+            query: { future: group.organizedEvents.elements.length > 0 },
+          }"
+          >{{ $t("View all events") }}</router-link
+        >
       </section>
       <section>
         <subtitle>{{ $t("Latest posts") }}</subtitle>
@@ -383,18 +391,19 @@
             :key="post.id"
             :post="post"
           />
-          <router-link
-            :to="{
-              name: RouteName.POSTS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("View all posts") }}</router-link
-          >
         </div>
         <div v-else-if="group" class="content has-text-grey has-text-centered">
           <p>{{ $t("No posts yet") }}</p>
         </div>
-        <b-skeleton animated v-else></b-skeleton>
+        <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
+        <router-link
+          v-if="group.posts.total > 0"
+          :to="{
+            name: RouteName.POSTS,
+            params: { preferredUsername: usernameWithDomain(group) },
+          }"
+          >{{ $t("View all posts") }}</router-link
+        >
       </section>
       <b-modal
         v-if="physicalAddress && physicalAddress.geom"
@@ -607,7 +616,6 @@ export default class Group extends mixins(GroupMixin) {
 
   @Watch("isCurrentActorAGroupMember")
   refetchGroupData(): void {
-    console.log("refetchGroupData");
     this.$apollo.queries.group.refetch();
   }