Group enhancements

And fixes #492

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-12-09 09:56:53 +01:00
parent cadc741d99
commit 6c0ee2446a
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
8 changed files with 119 additions and 26 deletions

View file

@ -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;
},

View file

@ -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>

View file

@ -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
}
}
}
`;

View file

@ -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"
}

View file

@ -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"
}

View file

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

View file

@ -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>

View file

@ -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();
}