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>
This commit is contained in:
Thomas Citharel 2022-04-06 18:02:11 +02:00
parent 927d2296eb
commit 0abb9a13e5
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
6 changed files with 78 additions and 28 deletions

View file

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

View file

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

View file

@ -1318,5 +1318,8 @@
"return to the homepage": "return to the homepage", "return to the homepage": "return to the homepage",
"Thanks a lot, your feedback was submitted!": "Thanks a lot, your feedback was submitted!", "Thanks a lot, your feedback was submitted!": "Thanks a lot, your feedback was submitted!",
"You may also:": "You may also:", "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"
}

View file

@ -1309,5 +1309,8 @@
"Category": "Catégorie", "Category": "Catégorie",
"Select a category": "Choisissez une categorie", "Select a category": "Choisissez une categorie",
"Any category": "N'importe quelle catégorie", "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"
} }

View file

@ -43,21 +43,40 @@
<subtitle> <subtitle>
{{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }} {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
</subtitle> </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 <grouped-multi-event-minimalist-card
:events="group.organizedEvents.elements" :events="group.organizedEvents.elements"
:isCurrentActorMember="isCurrentActorMember" :isCurrentActorMember="isCurrentActorMember"
/> />
<b-message <empty-content
v-if=" v-if="
group.organizedEvents.elements.length === 0 && group.organizedEvents.elements.length === 0 &&
$apollo.loading === false $apollo.loading === false
" "
type="is-danger" icon="calendar"
:inline="true"
:center="true"
> >
{{ $t("No events found") }} {{ $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 <b-pagination
class="mt-4"
:total="group.organizedEvents.total" :total="group.organizedEvents.total"
v-model="eventsPage" v-model="eventsPage"
:per-page="EVENTS_PAGE_LIMIT" :per-page="EVENTS_PAGE_LIMIT"
@ -81,6 +100,7 @@ import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import GroupMixin from "@/mixins/group"; 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 { displayName, usernameWithDomain } from "../../types/actor"; import { displayName, usernameWithDomain } from "../../types/actor";
const EVENTS_PAGE_LIMIT = 10; const EVENTS_PAGE_LIMIT = 10;
@ -114,6 +134,7 @@ const EVENTS_PAGE_LIMIT = 10;
}, },
}, },
components: { components: {
EmptyContent,
Subtitle, Subtitle,
GroupedMultiEventMinimalistCard, GroupedMultiEventMinimalistCard,
}, },

View file

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