182 lines
5.0 KiB
Vue
182 lines
5.0 KiB
Vue
<template>
|
|
<div class="container section" v-if="group">
|
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
|
<ul>
|
|
<li>
|
|
<router-link
|
|
:to="{
|
|
name: RouteName.GROUP,
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
|
}"
|
|
>{{ group.name }}</router-link
|
|
>
|
|
</li>
|
|
<li class="is-active">
|
|
<router-link
|
|
:to="{
|
|
name: RouteName.TODO_LISTS,
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
|
}"
|
|
>{{ $t("Events") }}</router-link
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<section>
|
|
<h1 class="title" v-if="group">
|
|
{{
|
|
$t("{group}'s events", {
|
|
group: group.name || group.preferredUsername,
|
|
})
|
|
}}
|
|
</h1>
|
|
<p v-if="isCurrentActorMember">
|
|
{{
|
|
$t(
|
|
"When a moderator from the group creates an event and attributes it to the group, it will show up here."
|
|
)
|
|
}}
|
|
</p>
|
|
<router-link
|
|
v-if="isCurrentActorAGroupModerator"
|
|
:to="{
|
|
name: RouteName.CREATE_EVENT,
|
|
query: { actorId: group.id },
|
|
}"
|
|
class="button is-primary"
|
|
>{{ $t("+ Create an event") }}</router-link
|
|
>
|
|
<b-loading :active.sync="$apollo.loading"></b-loading>
|
|
<section v-if="group">
|
|
<subtitle>
|
|
{{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
|
|
</subtitle>
|
|
<b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
|
|
<transition-group name="list" tag="div" class="event-list">
|
|
<EventListViewCard
|
|
v-for="event in group.organizedEvents.elements"
|
|
:key="event.id"
|
|
:event="event"
|
|
:options="{ memberofGroup: isCurrentActorMember }"
|
|
/>
|
|
</transition-group>
|
|
<b-message
|
|
v-if="
|
|
group.organizedEvents.elements.length === 0 &&
|
|
$apollo.loading === false
|
|
"
|
|
type="is-danger"
|
|
>
|
|
{{ $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>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component } from "vue-property-decorator";
|
|
import { mixins } from "vue-class-component";
|
|
import RouteName from "@/router/name";
|
|
import Subtitle from "@/components/Utils/Subtitle.vue";
|
|
import EventListViewCard from "@/components/Event/EventListViewCard.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 { usernameWithDomain } from "../../types/actor";
|
|
|
|
const EVENTS_PAGE_LIMIT = 10;
|
|
|
|
@Component({
|
|
apollo: {
|
|
memberships: {
|
|
query: PERSON_MEMBERSHIPS,
|
|
fetchPolicy: "cache-and-network",
|
|
variables() {
|
|
return {
|
|
id: this.currentActor.id,
|
|
};
|
|
},
|
|
update: (data) => data.person.memberships.elements,
|
|
skip() {
|
|
return !this.currentActor || !this.currentActor.id;
|
|
},
|
|
},
|
|
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,
|
|
};
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
Subtitle,
|
|
EventListViewCard,
|
|
},
|
|
metaInfo() {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
const { group } = this;
|
|
return {
|
|
title: this.$t("{group} events", {
|
|
group: group.name || usernameWithDomain(group),
|
|
}) as string,
|
|
};
|
|
},
|
|
})
|
|
export default class GroupEvents extends mixins(GroupMixin) {
|
|
memberships!: IMember[];
|
|
|
|
eventsPage = 1;
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
|
|
|
RouteName = RouteName;
|
|
|
|
EVENTS_PAGE_LIMIT = EVENTS_PAGE_LIMIT;
|
|
|
|
get isCurrentActorMember(): boolean {
|
|
if (!this.group || !this.memberships) return false;
|
|
return this.memberships
|
|
.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>
|