Group enhancements

And fixes #492

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

js/src/components/Editor.vue

@@ -384,7 +384,7 @@ export default class EditorComponent extends Vue {
                 searchText: query,
               },
             });
-            // TODO: TipTap doesn't handle async for onFilter, hence the following line.
+            // TipTap doesn't handle async for onFilter, hence the following line.
             this.filteredActors = result.data.searchPersons.elements;
             return this.filteredActors;
           },

js/src/components/Event/ShareEventModal.vue

@@ -72,7 +72,6 @@
           <a :href="emailShareUrl" target="_blank" rel="nofollow noopener"
             ><b-icon icon="email" size="is-large" type="is-primary"
           /></a>
-          <!--     TODO: mailto: links are not used anymore, we should provide a popup to redact a message instead    -->
         </div>
       </div>
     </section>

js/src/graphql/event.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { GROUP_FIELDS_FRAGMENTS } from "./group";
 
 const participantQuery = `
   role,
@@ -622,3 +623,54 @@ export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
     }
   }
 `;
+
+export const FETCH_GROUP_EVENTS = gql`
+  query(
+    $name: String!
+    $afterDateTime: DateTime
+    $beforeDateTime: DateTime
+    $organisedEventsPage: Int
+    $organisedEventslimit: Int
+  ) {
+    group(preferredUsername: $name) {
+      id
+      preferredUsername
+      domain
+      name
+      organizedEvents(
+        afterDatetime: $afterDateTime
+        beforeDatetime: $beforeDateTime
+        page: $organisedEventsPage
+        limit: $organisedEventslimit
+      ) {
+        elements {
+          id
+          uuid
+          title
+          beginsOn
+          draft
+          options {
+            maximumAttendeeCapacity
+          }
+          participantStats {
+            participant
+            notApproved
+          }
+          attributedTo {
+            id
+            preferredUsername
+            name
+            domain
+          }
+          organizerActor {
+            id
+            preferredUsername
+            name
+            domain
+          }
+        }
+        total
+      }
+    }
+  }
+`;

js/src/i18n/en_US.json

@@ -442,7 +442,6 @@
   "Actor": "Actor",
   "Text": "Text",
   "Upcoming events": "Upcoming events",
-  "View all upcoming events": "View all upcoming events",
   "Resources": "Resources",
   "Public page": "Public page",
   "Discussions": "Discussions",
@@ -810,5 +809,6 @@
   "Your participation will be validated once you click the confirmation link into the email.": "Your participation will be validated once you click the confirmation link into the email.",
   "Unable to load event for participation. The error details are provided below:": "Unable to load event for participation. The error details are provided below:",
   "Unable to save your participation in this browser.": "Unable to save your participation in this browser.",
-  "return to the event's page": "return to the event's page"
+  "return to the event's page": "return to the event's page",
+  "View all events": "View all events"
 }

js/src/i18n/fr_FR.json

@@ -903,5 +903,6 @@
   "Unable to load event for participation. The error details are provided below:": "Impossible de charger l'événement pour la participation. Les détails de l'erreur sont disponibles ci-dessous :",
   "Unable to save your participation in this browser.": "Échec de la sauvegarde de votre participation dans ce navigateur.",
   "return to the event's page": "retourner sur la page de l'événement",
-  "You may now close this window, or {return_to_event}.": "Vous pouvez maintenant fermer cette fenêtre, ou bien {return_to_event}."
+  "You may now close this window, or {return_to_event}.": "Vous pouvez maintenant fermer cette fenêtre, ou bien {return_to_event}.",
+  "View all events": "Voir tous les événements"
 }

js/src/mixins/group.ts

@@ -14,6 +14,8 @@ import { Component, Vue } from "vue-property-decorator";
       variables() {
         return {
           name: this.$route.params.preferredUsername,
+          beforeDateTime: null,
+          afterDateTime: new Date(),
         };
       },
       skip() {

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
+        </div>
-            :to="{
+        <div
-              name: RouteName.GROUP_EVENTS,
+          v-else-if="group && group.organizedEvents.elements.length == 0"
-              params: { preferredUsername: usernameWithDomain(group) },
+          class="content has-text-grey has-text-centered"
-            }"
+        >
-            >{{ $t("View all upcoming events") }}</router-link
+          <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();
   }