Add timeline events you're going to

Mix format

Fix chocobozzz feedback

Only show upcoming events on feed

Remove console log calls

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-03-21 20:23:42 +01:00
parent 53458b16a2
commit ccd705bc4f
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
16 changed files with 522 additions and 109 deletions

View File

@ -0,0 +1,54 @@
<template>
<span class="container">
<span class="month">{{ month }}</span>
<span class="day">{{ day }}</span>
</span>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class DateComponent extends Vue {
@Prop({ required: true }) date!: string;
get dateObj() {
return new Date(this.$props.date);
}
get month() {
return this.dateObj.toLocaleString(undefined, { month: 'short' });
}
get day() {
return this.dateObj.toLocaleString(undefined, { day: 'numeric' });
}
}
</script>
<style lang="scss" scoped>
.container {
display: inline-flex;
padding: 2px 0;
width: 40px;
background: #fff;
span {
flex: 0;
flex-direction: column;
text-align: center;
&.month {
color: #fa3e3e;
padding: 2px 0;
font-size: 12px;
line-height: 12px;
}
&.day {
font-weight: 300;
font-size: 20px;
line-height: 20px;
}
}
}
</style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-image" v-if="!event.image"> <div class="card-image" v-if="!event.image">
<figure class="image is-4by3"> <figure class="image is-16by9">
<img src="https://picsum.photos/g/400/200/"> <img src="https://picsum.photos/g/400/225/?random">
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
@ -10,10 +10,15 @@
<router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }"> <router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }">
<h2 class="title">{{ event.title }}</h2> <h2 class="title">{{ event.title }}</h2>
</router-link> </router-link>
<span>{{ event.beginsOn | formatDay }}</span> <DateComponent v-if="!options.hideDate" :date="event.beginsOn" />
</div> </div>
<div v-if="!hideDetails"> <div v-if="!options.hideDetails">
<div v-if="event.participants.length === 1"> <div v-if="event.participants.length > 0 &&
options.loggedPerson &&
event.participants[0].actor.id === options.loggedPerson.id">
<b-tag type="is-info"><translate>Organizer</translate></b-tag>
</div>
<div v-else-if="event.participants.length === 1">
<translate <translate
:translate-params="{name: event.participants[0].actor.preferredUsername}" :translate-params="{name: event.participants[0].actor.preferredUsername}"
>%{name} organizes this event</translate> >%{name} organizes this event</translate>
@ -35,11 +40,17 @@
<script lang="ts"> <script lang="ts">
import { IEvent, ParticipantRole } from '@/types/event.model'; import { IEvent, ParticipantRole } from '@/types/event.model';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import DateComponent from '@/components/Event/Date.vue';
@Component @Component({
components: {
DateComponent,
EventCard,
},
})
export default class EventCard extends Vue { export default class EventCard extends Vue {
@Prop({ required: true }) event!: IEvent; @Prop({ required: true }) event!: IEvent;
@Prop({ default: false }) hideDetails!: boolean; @Prop({ default() { return { hideDate: false, loggedPerson: false, hideDetails: false }; } }) options!: object;
data() { data() {
return { return {

View File

@ -75,8 +75,8 @@ import { ICurrentUser } from '@/types/current-user.model'
}, },
config: { config: {
query: CONFIG, query: CONFIG,
} },
} },
}) })
export default class NavBar extends Vue { export default class NavBar extends Vue {
notifications = [ notifications = [

View File

@ -3,6 +3,7 @@ import gql from 'graphql-tag';
export const FETCH_PERSON = gql` export const FETCH_PERSON = gql`
query($name:String!) { query($name:String!) {
person(preferredUsername: $name) { person(preferredUsername: $name) {
id,
url, url,
name, name,
domain, domain,
@ -11,9 +12,13 @@ query($name:String!) {
suspended, suspended,
avatarUrl, avatarUrl,
bannerUrl, bannerUrl,
feedTokens {
token
},
organizedEvents { organizedEvents {
uuid, uuid,
title title,
beginsOn
}, },
} }
} }
@ -28,6 +33,26 @@ query {
} }
}`; }`;
export const LOGGED_PERSON_WITH_GOING_TO_EVENTS = gql`
query {
loggedPerson {
id,
avatarUrl,
preferredUsername,
goingToEvents {
uuid,
title,
beginsOn,
participants {
actor {
id,
preferredUsername
}
}
},
}
}`;
export const IDENTITIES = gql` export const IDENTITIES = gql`
query { query {
identities { identities {

View File

@ -0,0 +1,49 @@
import gql from 'graphql-tag';
export const LOGGED_PERSON = gql`
query {
loggedPerson {
id,
avatarUrl,
preferredUsername,
}
}`;
export const CREATE_FEED_TOKEN_ACTOR = gql`
mutation createFeedToken($actor_id: Int!) {
createFeedToken(actor_id: $actor_id) {
token,
actor {
id
},
user {
id
}
}
}`;
export const CREATE_FEED_TOKEN = gql`
mutation {
createFeedToken {
token,
actor {
id
},
user {
id
}
}
}`;
export const DELETE_FEED_TOKEN = gql`
mutation deleteFeedToken($token: String!) {
deleteFeedToken(token: $token) {
actor {
id
},
user {
id
}
}
}
`;

View File

@ -1,3 +1,6 @@
import { ICurrentUser } from '@/types/current-user.model';
import { IEvent } from '@/types/event.model';
export interface IActor { export interface IActor {
id?: string; id?: string;
url: string; url: string;
@ -22,14 +25,24 @@ export class Actor implements IActor {
} }
export interface IPerson extends IActor { export interface IPerson extends IActor {
feedTokens: IFeedToken[];
goingToEvents: IEvent[];
} }
export interface IGroup extends IActor { export interface IGroup extends IActor {
members: IMember[]; members: IMember[];
} }
export class Person extends Actor implements IPerson {} export class Person extends Actor implements IPerson {
feedTokens: IFeedToken[] = [];
goingToEvents: IEvent[] = [];
}
export interface IFeedToken {
token: string;
actor?: IPerson;
user: ICurrentUser;
}
export enum MemberRole { export enum MemberRole {
PENDING, PENDING,

View File

@ -1,5 +1,5 @@
export interface IConfig { export interface IConfig {
name: string, name: string;
registrationsOpen: boolean, registrationsOpen: boolean;
} }

View File

@ -24,6 +24,45 @@
<div class="content"> <div class="content">
<p v-html="person.summary"></p> <p v-html="person.summary"></p>
</div> </div>
<b-dropdown hoverable has-link aria-role="list">
<button class="button is-info" slot="trigger">
<translate>Public feeds</translate>
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', true)">
<translate>Public RSS/Atom Feed</translate>
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', true)">
<translate>Public iCal Feed</translate>
</a>
</b-dropdown-item>
</b-dropdown>
<b-dropdown hoverable has-link aria-role="list" v-if="person.feedTokens.length > 0">
<button class="button is-info" slot="trigger">
<translate>Private feeds</translate>
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', false)">
<translate>RSS/Atom Feed</translate>
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', false)">
<translate>iCal Feed</translate>
</a>
</b-dropdown-item>
</b-dropdown>
<a class="button" v-else @click="createToken">
<translate>Create token</translate>
</a>
</div> </div>
<section v-if="person.organizedEvents.length > 0"> <section v-if="person.organizedEvents.length > 0">
<h2 class="subtitle"> <h2 class="subtitle">
@ -33,7 +72,7 @@
<EventCard <EventCard
v-for="event in person.organizedEvents" v-for="event in person.organizedEvents"
:event="event" :event="event"
:hideDetails="true" :options="{ hideDetails: true }"
:key="event.uuid" :key="event.uuid"
class="column is-one-third" class="column is-one-third"
/> />
@ -70,6 +109,9 @@ import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { IPerson } from '@/types/actor.model';
import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
@Component({ @Component({
apollo: { apollo: {
@ -92,7 +134,7 @@ import { RouteName } from '@/router';
export default class Profile extends Vue { export default class Profile extends Vue {
@Prop({ type: String, required: true }) name!: string; @Prop({ type: String, required: true }) name!: string;
person = null; person!: IPerson;
// call again the method if the route changes // call again the method if the route changes
@Watch('$route') @Watch('$route')
@ -108,5 +150,25 @@ export default class Profile extends Vue {
nl2br(text) { nl2br(text) {
return text.replace(/(?:\r\n|\r|\n)/g, '<br>'); return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
} }
feedUrls(format, isPublic = true): string {
let url = format === 'ics' ? 'webcal:' : '';
url += `//${MOBILIZON_INSTANCE_HOST}/`;
if (isPublic === true) {
url += `@${this.person.preferredUsername}/feed/`;
} else {
url += `events/going/${this.person.feedTokens[0].token}/`;
}
return url + (format === 'ics' ? 'ics' : 'atom');
}
async createToken() {
const { data } = await this.$apollo.mutate({
mutation: CREATE_FEED_TOKEN_ACTOR,
variables: { actor_id: this.person.id },
});
this.person.feedTokens.push(data);
}
} }
</script> </script>

View File

@ -93,6 +93,8 @@ export default class Register extends Vue {
avatarUrl: '', avatarUrl: '',
bannerUrl: '', bannerUrl: '',
domain: null, domain: null,
feedTokens: [],
goingToEvents: [],
}; };
errors: object = {}; errors: object = {};
validationSent: boolean = false; validationSent: boolean = false;

View File

@ -107,6 +107,7 @@ import { IEvent, IParticipant } from '@/types/event.model';
import { IPerson } from '@/types/actor.model'; import { IPerson } from '@/types/actor.model';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import 'vue-simple-markdown/dist/vue-simple-markdown.css'; import 'vue-simple-markdown/dist/vue-simple-markdown.css';
import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';
@Component({ @Component({
apollo: { apollo: {
@ -199,19 +200,15 @@ export default class Event extends Vue {
} }
} }
downloadIcsEvent() { async downloadIcsEvent() {
// FIXME: remove eventFetch const data = await (await fetch(`${GRAPHQL_API_ENDPOINT}/events/${this.uuid}/export/ics`)).text();
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' }) const blob = new Blob([data], { type: 'text/calendar' });
// .then(response => response.text()) const link = document.createElement('a');
// .then((response) => { link.href = window.URL.createObjectURL(blob);
// const blob = new Blob([ response ], { type: 'text/calendar' }); link.download = `${this.event.title}.ics`;
// const link = document.createElement('a'); document.body.appendChild(link);
// link.href = window.URL.createObjectURL(blob); link.click();
// link.download = `${this.event.title}.ics`; document.body.removeChild(link);
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// });
} }
actorIsParticipant() { actorIsParticipant() {

View File

@ -33,7 +33,7 @@
<EventCard <EventCard
v-for="event in group.organizedEvents" v-for="event in group.organizedEvents"
:event="event" :event="event"
:hideDetails="true" :options="{ hideDetails: true }"
:key="event.uuid" :key="event.uuid"
class="column is-one-third" class="column is-one-third"
/> />

View File

@ -18,6 +18,50 @@
>Welcome back %{username}</translate> >Welcome back %{username}</translate>
</h1> </h1>
</section> </section>
<section v-if="loggedPerson">
<span class="events-nearby title">Events you're going at</span>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="goingToEvents.size > 0" v-for="row in Array.from(goingToEvents.entries())">
<!-- Iterators will be supported in v-for with VueJS 3 -->
<date-component :date="row[0]"></date-component>
<h3 class="subtitle"
v-if="isToday(row[0])"
v-translate="{count: row[1].length}"
:translate-n="row[1].length"
translate-plural="You have %{ count } events today"
>
You have one event today.
</h3>
<h3 class="subtitle"
v-else-if="isTomorrow(row[0])"
v-translate="{count: row[1].length}"
:translate-n="row[1].length"
translate-plural="You have %{ count } events tomorrow"
>
You have one event tomorrow.
</h3>
<h3 class="subtitle"
v-else
v-translate="{count: row[1].length, days: calculateDiffDays(row[0])}"
:translate-n="row[1].length"
translate-plural="You have %{ count } events in %{ days } days"
>
You have one event in %{ days } days.
</h3>
<div class="columns">
<EventCard
v-for="event in row[1]"
:key="event.uuid"
:event="event"
:options="{loggedPerson: loggedPerson}"
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
</div>
<b-message v-else type="is-danger">
<translate>You're not going to any event yet</translate>
</b-message>
</section>
<section> <section>
<span class="events-nearby title">Events nearby you</span> <span class="events-nearby title">Events nearby you</span>
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
@ -41,11 +85,13 @@ import ngeohash from 'ngeohash';
import { FETCH_EVENTS } from '@/graphql/event'; import { FETCH_EVENTS } from '@/graphql/event';
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import { LOGGED_PERSON } from '@/graphql/actor'; import { LOGGED_PERSON_WITH_GOING_TO_EVENTS } from '@/graphql/actor';
import { IPerson } from '@/types/actor.model'; import { IPerson, Person } from '@/types/actor.model';
import { ICurrentUser } from '@/types/current-user.model'; import { ICurrentUser } from '@/types/current-user.model';
import { CURRENT_USER_CLIENT } from '@/graphql/user'; import { CURRENT_USER_CLIENT } from '@/graphql/user';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { IEvent } from '@/types/event.model';
import DateComponent from '@/components/Event/Date.vue';
@Component({ @Component({
apollo: { apollo: {
@ -54,13 +100,14 @@ import { RouteName } from '@/router';
fetchPolicy: 'no-cache', // Debug me: https://github.com/apollographql/apollo-client/issues/3030 fetchPolicy: 'no-cache', // Debug me: https://github.com/apollographql/apollo-client/issues/3030
}, },
loggedPerson: { loggedPerson: {
query: LOGGED_PERSON, query: LOGGED_PERSON_WITH_GOING_TO_EVENTS,
}, },
currentUser: { currentUser: {
query: CURRENT_USER_CLIENT, query: CURRENT_USER_CLIENT,
}, },
}, },
components: { components: {
DateComponent,
EventCard, EventCard,
}, },
}) })
@ -69,8 +116,7 @@ export default class Home extends Vue {
locations = []; locations = [];
city = { name: null }; city = { name: null };
country = { name: null }; country = { name: null };
// FIXME: correctly parse local storage loggedPerson: IPerson = new Person();
loggedPerson!: IPerson;
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
get displayed_name() { get displayed_name() {
@ -79,13 +125,47 @@ export default class Home extends Vue {
: this.loggedPerson.name; : this.loggedPerson.name;
} }
fetchLocations() { isToday(date: string) {
// FIXME: remove eventFetch return (new Date(date)).toDateString() === (new Date()).toDateString();
// eventFetch('/locations', this.$store) }
// .then(response => (response.json()))
// .then((response) => { isTomorrow(date: string) :boolean {
// this.locations = response; return this.isInDays(date, 1);
// }); }
isInDays(date: string, nbDays: number) :boolean {
return this.calculateDiffDays(date) === nbDays;
}
isBefore(date: string, nbDays: number) :boolean {
return this.calculateDiffDays(date) > nbDays;
}
// FIXME: Use me
isInLessThanSevenDays(date: string): boolean {
return this.isInDays(date, 7);
}
calculateDiffDays(date: string): number {
const dateObj = new Date(date);
return Math.ceil((dateObj.getTime() - (new Date()).getTime()) / 1000 / 60 / 60 / 24);
}
get goingToEvents(): Map<string, IEvent[]> {
const res = this.$data.loggedPerson.goingToEvents.filter((event) => {
return event.beginsOn != null && this.isBefore(event.beginsOn, 0)
});
res.sort(
(a: IEvent, b: IEvent) => new Date(a.beginsOn) > new Date(b.beginsOn),
);
const groups = res.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
const day = (new Date(event.beginsOn)).toDateString();
const events: IEvent[] = acc.get(day) || [];
events.push(event);
acc.set(day, events);
return acc;
}, new Map());
return groups;
} }
geoLocalize() { geoLocalize() {
@ -144,6 +224,6 @@ export default class Home extends Vue {
} }
.events-nearby { .events-nearby {
margin-bottom: 25px; margin: 25px auto;
} }
</style> </style>

View File

@ -6,6 +6,7 @@ defmodule MobilizonWeb.Resolvers.Person do
alias Mobilizon.Actors.Actor alias Mobilizon.Actors.Actor
alias Mobilizon.Users.User alias Mobilizon.Users.User
alias Mobilizon.Users alias Mobilizon.Users
alias Mobilizon.Events
alias Mobilizon.Service.ActivityPub alias Mobilizon.Service.ActivityPub
@doc """ @doc """
@ -83,4 +84,34 @@ defmodule MobilizonWeb.Resolvers.Person do
{:error, e} {:error, e}
end end
end end
@doc """
Returns the list of events this person is going to
"""
def person_going_to_events(%Actor{id: actor_id}, _args, %{
context: %{current_user: user}
}) do
with {:is_owned, true, actor} <- User.owns_actor(user, actor_id),
events <- Events.list_event_participations_for_actor(actor) do
{:ok, events}
else
{:is_owned, false} ->
{:error, "Actor id is not owned by authenticated user"}
end
end
@doc """
Returns the list of events this person is going to
"""
def person_going_to_events(_parent, %{}, %{
context: %{current_user: user}
}) do
with %Actor{} = actor <- Users.get_actor_for_user(user),
events <- Events.list_event_participations_for_actor(actor) do
{:ok, events}
else
{:is_owned, false} ->
{:error, "Actor id is not owned by authenticated user"}
end
end
end end

View File

@ -53,6 +53,11 @@ defmodule MobilizonWeb.Schema.Actors.PersonType do
resolve: dataloader(Events), resolve: dataloader(Events),
description: "A list of the events this actor has organized" description: "A list of the events this actor has organized"
) )
@desc "The list of events this person goes to"
field :going_to_events, list_of(:event) do
resolve(&Resolvers.Person.person_going_to_events/3)
end
end end
object :person_queries do object :person_queries do

View File

@ -88,7 +88,9 @@ defmodule Mobilizon.Service.Export.Feed do
# Create an entry for the Atom feed # Create an entry for the Atom feed
@spec get_entry(Event.t()) :: any() @spec get_entry(Event.t()) :: any()
defp get_entry(%Event{} = event) do defp get_entry(%Event{} = event) do
with {:ok, html, []} <- Earmark.as_html(event.description) do description = event.description || ""
with {:ok, html, []} <- Earmark.as_html(description) do
entry = entry =
Entry.new(event.url, event.publish_at || event.inserted_at, event.title) Entry.new(event.url, event.publish_at || event.inserted_at, event.title)
|> Entry.link(event.url, rel: "alternate", type: "text/html") |> Entry.link(event.url, rel: "alternate", type: "text/html")

View File

@ -137,4 +137,86 @@ defmodule MobilizonWeb.Resolvers.PersonResolverTest do
MapSet.new([actor.preferred_username, "new_identity"]) MapSet.new([actor.preferred_username, "new_identity"])
end end
end end
test "get_current_person/3 can return the events the person is going to", context do
user = insert(:user)
actor = insert(:actor, user: user)
query = """
{
loggedPerson {
goingToEvents {
uuid,
title
}
}
}
"""
res =
context.conn
|> auth_conn(user)
|> get("/api", AbsintheHelpers.query_skeleton(query, "logged_person"))
assert json_response(res, 200)["data"]["loggedPerson"]["goingToEvents"] == []
event = insert(:event, %{organizer_actor: actor})
insert(:participant, %{actor: actor, event: event})
res =
context.conn
|> auth_conn(user)
|> get("/api", AbsintheHelpers.query_skeleton(query, "logged_person"))
assert json_response(res, 200)["data"]["loggedPerson"]["goingToEvents"] == [
%{"title" => event.title, "uuid" => event.uuid}
]
end
test "find_person/3 can return the events an identity is going to if it's the same actor",
context do
user = insert(:user)
actor = insert(:actor, user: user)
insert(:actor, user: user)
actor_from_other_user = insert(:actor)
query = """
{
person(preferredUsername: "#{actor.preferred_username}") {
goingToEvents {
uuid,
title
}
}
}
"""
res =
context.conn
|> auth_conn(user)
|> get("/api", AbsintheHelpers.query_skeleton(query, "person"))
assert json_response(res, 200)["data"]["person"]["goingToEvents"] == []
query = """
{
person(preferredUsername: "#{actor_from_other_user.preferred_username}") {
goingToEvents {
uuid,
title
}
}
}
"""
res =
context.conn
|> auth_conn(user)
|> get("/api", AbsintheHelpers.query_skeleton(query, "person"))
assert json_response(res, 200)["data"]["person"]["goingToEvents"] == nil
assert hd(json_response(res, 200)["errors"])["message"] ==
"Actor id is not owned by authenticated user"
end
end end