Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Show group followed/member events on homepage

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
js/fragmentTypes.json
View File

@ -5,79 +5,41 @@
"kind": "INTERFACE",
"name": "ActionLogObject",
"possibleTypes": [
{
"name": "Comment"
},
{
"name": "Event"
},
{
"name": "Person"
},
{
"name": "Report"
},
{
"name": "ReportNote"
},
{
"name": "User"
}
{ "name": "Comment" },
{ "name": "Event" },
{ "name": "Group" },
{ "name": "Person" },
{ "name": "Report" },
{ "name": "ReportNote" },
{ "name": "User" }
]
},
{
"kind": "INTERFACE",
"name": "ActivityObject",
"possibleTypes": [
{
"name": "Comment"
},
{
"name": "Discussion"
},
{
"name": "Event"
},
{
"name": "Group"
},
{
"name": "Member"
},
{
"name": "Post"
},
{
"name": "Resource"
}
{ "name": "Comment" },
{ "name": "Discussion" },
{ "name": "Event" },
{ "name": "Group" },
{ "name": "Member" },
{ "name": "Post" },
{ "name": "Resource" }
]
},
{
"kind": "INTERFACE",
"name": "Actor",
"possibleTypes": [
{
"name": "Person"
},
{
"name": "Group"
},
{
"name": "Application"
}
{ "name": "Application" },
{ "name": "Group" },
{ "name": "Person" }
]
},
{
"kind": "INTERFACE",
"name": "Interactable",
"possibleTypes": [
{
"name": "Event"
},
{
"name": "Group"
}
]
"possibleTypes": [{ "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}
`;

2
js/src/types/current-user.model.ts
View File

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

10
js/src/types/followedGroupEvent.model.ts Normal file
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;
}

159
js/src/views/Home.vue
View File

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