Various group events improvements

Adds a button to show pasts events of a group if no upcoming events are
displayed
q
Closes #690

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

js/src/components/Event/EventMinimalistCard.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link
-    class="event-minimalist-card-wrapper"
+    class="event-minimalist-card-wrapper bg-white rounded-lg shadow-md"
     dir="auto"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >

js/src/components/Utils/EmptyContent.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="empty-content" :class="{ inline }" role="note">
+  <div
+    class="empty-content"
+    :class="{ inline, 'text-center': center }"
+    role="note"
+  >
     <b-icon :icon="icon" size="is-large" />
     <h2 class="empty-content__title">
       <!-- @slot Mandatory title -->
@@ -18,6 +22,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 export default class EmptyContent extends Vue {
   @Prop({ type: String, required: true }) icon!: string;
   @Prop({ type: Boolean, required: false, default: false }) inline!: boolean;
+  @Prop({ type: Boolean, required: false, default: false }) center!: boolean;
 }
 </script>
 

js/src/i18n/en_US.json

@@ -1318,5 +1318,8 @@
   "return to the homepage": "return to the homepage",
   "Thanks a lot, your feedback was submitted!": "Thanks a lot, your feedback was submitted!",
   "You may also:": "You may also:",
-  "You may now close this page or {return_to_the_homepage}.": "You may now close this page or {return_to_the_homepage}."
+  "You may now close this page or {return_to_the_homepage}.": "You may now close this page or {return_to_the_homepage}.",
+  "This group is a remote group, it's possible the original instance has more informations.": "This group is a remote group, it's possible the original instance has more informations.",
+  "View the group profile on the original instance": "View the group profile on the original instance",
+  "View past events": "View past events"
 }

js/src/i18n/fr_FR.json

@@ -1309,5 +1309,8 @@
   "Category": "Catégorie",
   "Select a category": "Choisissez une categorie",
   "Any category": "N'importe quelle catégorie",
-  "No instance found.": "Aucune instance trouvée."
+  "No instance found.": "Aucune instance trouvée.",
+  "This group is a remote group, it's possible the original instance has more informations.": "Ce groupe est un groupe distant, il est possible que l'instance d'origine ait plus d'informations.",
+  "View the group profile on the original instance": "Afficher le profil du groupe sur l'instance d'origine",
+  "View past events": "Voir les événements passés"
 }

js/src/views/Event/GroupEvents.vue

@@ -43,21 +43,40 @@
         <subtitle>
           {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
         </subtitle>
-        <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
+        <b-switch class="mb-4" v-model="showPassedEvents">{{
+          $t("Past events")
+        }}</b-switch>
         <grouped-multi-event-minimalist-card
           :events="group.organizedEvents.elements"
           :isCurrentActorMember="isCurrentActorMember"
         />
-        <b-message
+        <empty-content
           v-if="
             group.organizedEvents.elements.length === 0 &&
             $apollo.loading === false
           "
-          type="is-danger"
+          icon="calendar"
+          :inline="true"
+          :center="true"
         >
           {{ $t("No events found") }}
-        </b-message>
+          <template v-if="group.domain !== null">
+            <div class="mt-4">
+              <p>
+                {{
+                  $t(
+                    "This group is a remote group, it's possible the original instance has more informations."
+                  )
+                }}
+              </p>
+              <b-button type="is-text" tag="a" :href="group.url">
+                {{ $t("View the group profile on the original instance") }}
+              </b-button>
+            </div>
+          </template>
+        </empty-content>
         <b-pagination
+          class="mt-4"
           :total="group.organizedEvents.total"
           v-model="eventsPage"
           :per-page="EVENTS_PAGE_LIMIT"
@@ -81,6 +100,7 @@ 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";
 
 const EVENTS_PAGE_LIMIT = 10;
@@ -114,6 +134,7 @@ const EVENTS_PAGE_LIMIT = 10;
     },
   },
   components: {
+    EmptyContent,
     Subtitle,
     GroupedMultiEventMinimalistCard,
   },

js/src/views/Group/Group.vue

@@ -579,29 +579,47 @@
           </div>
           <empty-content v-else-if="group" icon="calendar" :inline="true">
             {{ $t("No public upcoming events") }}
-            <template #desc v-if="isCurrentActorFollowing">
-              <i18n
-                class="has-text-grey-dark"
-                path="You will receive notifications about this group's public activity depending on %{notification_settings}."
-              >
-                <router-link
-                  :to="{ name: RouteName.NOTIFICATIONS }"
-                  slot="notification_settings"
-                  >{{ $t("your notification settings") }}</router-link
+            <template #desc>
+              <template v-if="isCurrentActorFollowing">
+                <i18n
+                  class="has-text-grey-dark"
+                  path="You will receive notifications about this group's public activity depending on %{notification_settings}."
                 >
-              </i18n>
+                  <router-link
+                    :to="{ name: RouteName.NOTIFICATIONS }"
+                    slot="notification_settings"
+                    >{{ $t("your notification settings") }}</router-link
+                  >
+                </i18n>
+              </template>
+              <b-button
+                tag="router-link"
+                class="my-2"
+                type="is-text"
+                :to="{
+                  name: RouteName.GROUP_EVENTS,
+                  params: { preferredUsername: usernameWithDomain(group) },
+                  query: { future: false },
+                }"
+                >{{ $t("View past events") }}</b-button
+              >
             </template>
           </empty-content>
           <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
-          <router-link
-            v-if="organizedEvents.total > 0"
-            :to="{
-              name: RouteName.GROUP_EVENTS,
-              params: { preferredUsername: usernameWithDomain(group) },
-              query: { future: organizedEvents.elements.length > 0 },
-            }"
-            >{{ $t("View all events") }}</router-link
-          >
+          <div class="flex justify-center">
+            <b-button
+              tag="router-link"
+              class="my-4"
+              type="is-text"
+              v-if="organizedEvents.total > 0"
+              :to="{
+                name: RouteName.GROUP_EVENTS,
+                params: { preferredUsername: usernameWithDomain(group) },
+                query: { future: organizedEvents.elements.length > 0 },
+              }"
+              >{{ $t("View all events") }}</b-button
+            >
+          </div>
         </section>
         <section>
           <subtitle>{{ $t("Latest posts") }}</subtitle>