Show group followed/member events on homepage

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-10-29 10:53:43 +02:00
parent 23fddaedf1
commit 807b1084b0
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 214 additions and 138 deletions

View file

@ -5,79 +5,41 @@
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "ActionLogObject", "name": "ActionLogObject",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Comment" },
"name": "Comment" { "name": "Event" },
}, { "name": "Group" },
{ { "name": "Person" },
"name": "Event" { "name": "Report" },
}, { "name": "ReportNote" },
{ { "name": "User" }
"name": "Person"
},
{
"name": "Report"
},
{
"name": "ReportNote"
},
{
"name": "User"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "ActivityObject", "name": "ActivityObject",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Comment" },
"name": "Comment" { "name": "Discussion" },
}, { "name": "Event" },
{ { "name": "Group" },
"name": "Discussion" { "name": "Member" },
}, { "name": "Post" },
{ { "name": "Resource" }
"name": "Event"
},
{
"name": "Group"
},
{
"name": "Member"
},
{
"name": "Post"
},
{
"name": "Resource"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "Actor", "name": "Actor",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Application" },
"name": "Person" { "name": "Group" },
}, { "name": "Person" }
{
"name": "Group"
},
{
"name": "Application"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "Interactable", "name": "Interactable",
"possibleTypes": [ "possibleTypes": [{ "name": "Event" }, { "name": "Group" }]
{
"name": "Event"
},
{
"name": "Group"
}
]
} }
] ]
} }

107
js/src/graphql/home.ts Normal file
View file

@ -0,0 +1,107 @@
import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
import { ADDRESS_FRAGMENT } from "./address";
import { EVENT_OPTIONS_FRAGMENT } from "./event";
import { TAG_FRAGMENT } from "./tags";
import { USER_SETTINGS_FRAGMENT } from "./user";
export const HOME_USER_QUERIES = gql`
query HomeUserQueries(
$afterDateTime: DateTime
$beforeDateTime: DateTime
$page: Int
$limit: Int
) {
loggedUser {
id
locale
settings {
...UserSettingFragment
}
participations(
afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime
page: $page
limit: $limit
) {
total
elements {
event {
id
uuid
title
picture {
id
url
alt
}
beginsOn
visibility
organizerActor {
...ActorFragment
}
attributedTo {
...ActorFragment
}
participantStats {
going
notApproved
participant
}
options {
...EventOptions
}
tags {
...TagFragment
}
}
id
role
actor {
...ActorFragment
}
}
}
followGroupEvents {
total
elements {
profile {
id
}
group {
...ActorFragment
}
event {
id
uuid
title
beginsOn
picture {
url
}
attributedTo {
...ActorFragment
}
organizerActor {
...ActorFragment
}
options {
...EventOptions
}
physicalAddress {
...AdressFragment
}
tags {
...TagFragment
}
}
}
}
}
}
${USER_SETTINGS_FRAGMENT}
${ADDRESS_FRAGMENT}
${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`;

View file

@ -3,6 +3,7 @@ import type { IPerson } from "@/types/actor/person.model";
import type { Paginate } from "./paginate"; import type { Paginate } from "./paginate";
import type { IParticipant } from "./participant.model"; import type { IParticipant } from "./participant.model";
import { ICurrentUserRole, INotificationPendingEnum } from "./enums"; import { ICurrentUserRole, INotificationPendingEnum } from "./enums";
import { IFollowedGroupEvent } from "./followedGroupEvent.model";
export interface ICurrentUser { export interface ICurrentUser {
id: string; id: string;
@ -47,6 +48,7 @@ export interface IUser extends ICurrentUser {
drafts: IEvent[]; drafts: IEvent[];
settings: IUserSettings; settings: IUserSettings;
activitySettings: IActivitySetting[]; activitySettings: IActivitySetting[];
followedGroupEvents: Paginate<IFollowedGroupEvent>;
locale: string; locale: string;
provider?: string; provider?: string;
lastSignInAt: string; lastSignInAt: string;

View file

@ -0,0 +1,10 @@
import { IEvent } from "./event.model";
import { IPerson, IGroup } from "./actor";
import { IUser } from "./current-user.model";
export interface IFollowedGroupEvent {
profile: IPerson;
group: IGroup;
user: IUser;
event: IEvent;
}

View file

@ -1,5 +1,6 @@
<template> <template>
<div id="homepage"> <div id="homepage">
<b-loading :active.sync="$apollo.loading" />
<section <section
class="hero" class="hero"
:class="{ webp: supportsWebPFormat }" :class="{ webp: supportsWebPFormat }"
@ -59,19 +60,9 @@
<i18n tag="span" path="On {instance} and other federated instances"> <i18n tag="span" path="On {instance} and other federated instances">
<b slot="instance">{{ config.name }}</b> <b slot="instance">{{ config.name }}</b>
</i18n> </i18n>
<b-loading :active.sync="$apollo.loading" />
</p> </p>
<b-loading :active.sync="$apollo.loading" />
<div v-if="this.events.total > 0"> <div v-if="this.events.total > 0">
<div class="columns is-multiline"> <multi-card :events="events.elements.slice(0, 6)" />
<div
class="column is-one-third-desktop"
v-for="event in this.events.elements.slice(0, 6)"
:key="event.uuid"
>
<EventCard :event="event" />
</div>
</div>
<span class="view-all"> <span class="view-all">
<router-link :to="{ name: RouteName.SEARCH }" <router-link :to="{ name: RouteName.SEARCH }"
>{{ $t("View everything") }} >></router-link >{{ $t("View everything") }} >></router-link
@ -181,10 +172,7 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="container section" v-if="config && loggedUserSettings">
class="container section"
v-if="config && loggedUser && loggedUser.settings"
>
<section v-if="currentActor.id && (welcomeBack || newRegisteredUser)"> <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
<b-message type="is-info" v-if="welcomeBack">{{ <b-message type="is-info" v-if="welcomeBack">{{
$t("Welcome back {username}!", { $t("Welcome back {username}!", {
@ -200,7 +188,6 @@
<!-- Your upcoming events --> <!-- Your upcoming events -->
<section v-if="canShowMyUpcomingEvents"> <section v-if="canShowMyUpcomingEvents">
<h2 class="title">{{ $t("Your upcoming events") }}</h2> <h2 class="title">{{ $t("Your upcoming events") }}</h2>
<b-loading :active.sync="$apollo.loading" />
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]"> <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
<p <p
class="date-component-container" class="date-component-container"
@ -243,8 +230,26 @@
<hr <hr
role="presentation" role="presentation"
class="home-separator" class="home-separator"
v-if="canShowMyUpcomingEvents && canShowCloseEvents" v-if="canShowMyUpcomingEvents && canShowFollowActivity"
/> />
<!-- Events from your followed groups -->
<section class="followActivity" v-if="canShowFollowActivity">
<h2 class="title">
{{ $t("Recent events from your groups") }}
</h2>
<p>{{ $t("That you follow or of which you are a member") }}</p>
<multi-card
:events="
followedGroupEvents.elements.map(({ event }) => event).slice(0, 3)
"
/>
</section>
<hr
role="presentation"
class="home-separator"
v-if="canShowFollowActivity && canShowCloseEvents"
/>
<!-- Events close to you --> <!-- Events close to you -->
<section class="events-close" v-if="canShowCloseEvents"> <section class="events-close" v-if="canShowCloseEvents">
<h2 class="title"> <h2 class="title">
@ -254,10 +259,10 @@
{{ {{
$tc( $tc(
"Within {number} kilometers of {place}", "Within {number} kilometers of {place}",
loggedUser.settings.location.range, loggedUserSettings.location.range,
{ {
number: loggedUser.settings.location.range, number: loggedUserSettings.location.range,
place: loggedUser.settings.location.name, place: loggedUserSettings.location.name,
} }
) )
}} }}
@ -267,17 +272,8 @@
> >
<b-icon class="clickable" icon="pencil" size="is-small" /> <b-icon class="clickable" icon="pencil" size="is-small" />
</router-link> </router-link>
<b-loading :active.sync="$apollo.loading" />
</p> </p>
<div class="columns is-multiline"> <multi-card :events="closeEvents.elements.slice(0, 3)" />
<div
class="column is-one-third-desktop"
v-for="event in closeEvents.elements.slice(0, 3)"
:key="event.uuid"
>
<event-card :event="event" />
</div>
</div>
</section> </section>
<hr <hr
role="presentation" role="presentation"
@ -292,19 +288,10 @@
<i18n tag="span" path="On {instance} and other federated instances"> <i18n tag="span" path="On {instance} and other federated instances">
<b slot="instance">{{ config.name }}</b> <b slot="instance">{{ config.name }}</b>
</i18n> </i18n>
<b-loading :active.sync="$apollo.loading" />
</p> </p>
<div v-if="this.events.total > 0"> <div v-if="events.total > 0">
<div class="columns is-multiline"> <multi-card :events="events.elements.slice(0, 8)" />
<div
class="column is-one-third-desktop"
v-for="event in this.events.elements.slice(0, 6)"
:key="event.uuid"
>
<recent-event-card-wrapper :event="event" />
</div>
</div>
<span class="view-all"> <span class="view-all">
<router-link :to="{ name: RouteName.SEARCH }" <router-link :to="{ name: RouteName.SEARCH }"
>{{ $t("View everything") }} >></router-link >{{ $t("View everything") }} >></router-link
@ -333,27 +320,28 @@ import { supportsWebPFormat } from "@/utils/support";
import { IParticipant, Participant } from "../types/participant.model"; import { IParticipant, Participant } from "../types/participant.model";
import { CLOSE_EVENTS, FETCH_EVENTS } from "../graphql/event"; import { CLOSE_EVENTS, FETCH_EVENTS } from "../graphql/event";
import EventListCard from "../components/Event/EventListCard.vue"; import EventListCard from "../components/Event/EventListCard.vue";
import EventCard from "../components/Event/EventCard.vue"; import MultiCard from "../components/Event/MultiCard.vue";
import RecentEventCardWrapper from "../components/Event/RecentEventCardWrapper.vue"; import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
import {
CURRENT_ACTOR_CLIENT,
LOGGED_USER_PARTICIPATIONS,
} from "../graphql/actor";
import { IPerson, Person } from "../types/actor"; import { IPerson, Person } from "../types/actor";
import { ICurrentUser, IUser } from "../types/current-user.model"; import {
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user"; ICurrentUser,
IUser,
IUserSettings,
} from "../types/current-user.model";
import { CURRENT_USER_CLIENT } from "../graphql/user";
import { HOME_USER_QUERIES } from "../graphql/home";
import RouteName from "../router/name"; import RouteName from "../router/name";
import { IEvent } from "../types/event.model"; import { IEvent } from "../types/event.model";
import DateComponent from "../components/Event/DateCalendarIcon.vue"; import DateComponent from "../components/Event/DateCalendarIcon.vue";
import { CONFIG } from "../graphql/config"; import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model"; import { IConfig } from "../types/config.model";
import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
import Subtitle from "../components/Utils/Subtitle.vue"; import Subtitle from "../components/Utils/Subtitle.vue";
@Component({ @Component({
apollo: { apollo: {
events: { events: {
query: FETCH_EVENTS, query: FETCH_EVENTS,
fetchPolicy: "no-cache", // Debug me: https://github.com/apollographql/apollo-client/issues/3030
variables: { variables: {
orderBy: EventSortField.INSERTED_AT, orderBy: EventSortField.INSERTED_AT,
direction: SortDirection.DESC, direction: SortDirection.DESC,
@ -364,33 +352,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
update: (data) => new Person(data.currentActor), update: (data) => new Person(data.currentActor),
}, },
currentUser: CURRENT_USER_CLIENT, currentUser: CURRENT_USER_CLIENT,
loggedUser: {
query: USER_SETTINGS,
fetchPolicy: "network-only",
skip() {
return !this.currentUser || this.currentUser.isLoggedIn === false;
},
error() {
return null;
},
},
config: CONFIG, config: CONFIG,
currentUserParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
fetchPolicy: "cache-and-network",
variables() {
return {
afterDateTime: new Date().toISOString(),
};
},
update: (data) =>
data.loggedUser.participations.elements.map(
(participation: IParticipant) => new Participant(participation)
),
skip() {
return this.currentUser?.isLoggedIn === false;
},
},
closeEvents: { closeEvents: {
query: CLOSE_EVENTS, query: CLOSE_EVENTS,
variables() { variables() {
@ -408,13 +370,30 @@ import Subtitle from "../components/Utils/Subtitle.vue";
); );
}, },
}, },
userQueries: {
query: HOME_USER_QUERIES,
update(data) {
console.log("loggedUser", data.loggedUser);
this.loggedUser = data.loggedUser;
this.followedGroupEvents = data.loggedUser.followedGroupEvents;
this.currentUserParticipations =
data.loggedUser.participations.elements.map(
(participation: IParticipant) => new Participant(participation)
);
},
variables: {
afterDateTime: new Date().toISOString(),
},
skip() {
return !this.currentUser?.isLoggedIn;
},
},
}, },
components: { components: {
Subtitle, Subtitle,
DateComponent, DateComponent,
EventListCard, EventListCard,
EventCard, MultiCard,
RecentEventCardWrapper,
"settings-onboard": () => import("./User/SettingsOnboard.vue"), "settings-onboard": () => import("./User/SettingsOnboard.vue"),
}, },
metaInfo() { metaInfo() {
@ -438,9 +417,9 @@ export default class Home extends Vue {
country = { name: null }; country = { name: null };
currentUser!: IUser; currentUser!: ICurrentUser;
loggedUser!: ICurrentUser; loggedUser: IUser | null = null;
currentActor!: IPerson; currentActor!: IPerson;
@ -454,6 +433,11 @@ export default class Home extends Vue {
closeEvents: Paginate<IEvent> = { elements: [], total: 0 }; closeEvents: Paginate<IEvent> = { elements: [], total: 0 };
followedGroupEvents: Paginate<IFollowedGroupEvent> = {
elements: [],
total: 0,
};
// get displayed_name() { // get displayed_name() {
// return this.loggedPerson && this.loggedPerson.name === null // return this.loggedPerson && this.loggedPerson.name === null
// ? this.loggedPerson.preferredUsername // ? this.loggedPerson.preferredUsername
@ -573,7 +557,7 @@ export default class Home extends Vue {
@Watch("loggedUser") @Watch("loggedUser")
detectEmptyUserSettings(loggedUser: IUser): void { detectEmptyUserSettings(loggedUser: IUser): void {
if (loggedUser && loggedUser.id && loggedUser.settings === null) { if (loggedUser?.id && loggedUser?.settings === null) {
this.$router.push({ this.$router.push({
name: RouteName.WELCOME_SCREEN, name: RouteName.WELCOME_SCREEN,
params: { step: "1" }, params: { step: "1" },
@ -581,12 +565,23 @@ export default class Home extends Vue {
} }
} }
get loggedUserSettings(): IUserSettings | undefined {
return this.loggedUser?.settings;
}
get canShowMyUpcomingEvents(): boolean { get canShowMyUpcomingEvents(): boolean {
return this.currentActor.id != undefined && this.goingToEvents.size > 0; return this.currentActor.id != undefined && this.goingToEvents.size > 0;
} }
get canShowCloseEvents(): boolean { get canShowCloseEvents(): boolean {
return this.closeEvents.total > 0; return (
this.loggedUser?.settings?.location != undefined &&
this.closeEvents.total > 0
);
}
get canShowFollowActivity(): boolean {
return this.followedGroupEvents.total > 0;
} }
} }
</script> </script>