forked from potsda.mn/mobilizon
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:
parent
53458b16a2
commit
ccd705bc4f
54
js/src/components/Event/Date.vue
Normal file
54
js/src/components/Event/Date.vue
Normal 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>
|
|
@ -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,12 +10,17 @@
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
|
@ -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 {
|
||||||
|
|
|
@ -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 = [
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
49
js/src/graphql/feed_tokens.ts
Normal file
49
js/src/graphql/feed_tokens.ts
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
|
@ -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,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
export interface IConfig {
|
export interface IConfig {
|
||||||
name: string,
|
name: string;
|
||||||
|
|
||||||
registrationsOpen: boolean,
|
registrationsOpen: boolean;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,68 +1,107 @@
|
||||||
<template>
|
<template>
|
||||||
<section>
|
<section>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="card" v-if="person">
|
<div class="card" v-if="person">
|
||||||
<div class="card-image" v-if="person.bannerUrl">
|
<div class="card-image" v-if="person.bannerUrl">
|
||||||
<figure class="image">
|
<figure class="image">
|
||||||
<img :src="person.bannerUrl">
|
<img :src="person.bannerUrl">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="media">
|
<div class="media">
|
||||||
<div class="media-left">
|
<div class="media-left">
|
||||||
<figure class="image is-48x48">
|
<figure class="image is-48x48">
|
||||||
<img :src="person.avatarUrl">
|
<img :src="person.avatarUrl">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-content">
|
<div class="media-content">
|
||||||
<p class="title">{{ person.name }}</p>
|
<p class="title">{{ person.name }}</p>
|
||||||
<p class="subtitle">@{{ person.preferredUsername }}</p>
|
<p class="subtitle">@{{ person.preferredUsername }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p v-html="person.summary"></p>
|
<p v-html="person.summary"></p>
|
||||||
|
</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>
|
||||||
|
<section v-if="person.organizedEvents.length > 0">
|
||||||
|
<h2 class="subtitle">
|
||||||
|
<translate>Organized</translate>
|
||||||
|
</h2>
|
||||||
|
<div class="columns">
|
||||||
|
<EventCard
|
||||||
|
v-for="event in person.organizedEvents"
|
||||||
|
:event="event"
|
||||||
|
:options="{ hideDetails: true }"
|
||||||
|
:key="event.uuid"
|
||||||
|
class="column is-one-third"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a
|
||||||
|
class="button"
|
||||||
|
@click="logoutUser()"
|
||||||
|
v-if="loggedPerson && loggedPerson.id === person.id"
|
||||||
|
>
|
||||||
|
<translate>User logout</translate>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a
|
||||||
|
class="button"
|
||||||
|
@click="deleteProfile()"
|
||||||
|
v-if="loggedPerson && loggedPerson.id === person.id"
|
||||||
|
>
|
||||||
|
<translate>Delete</translate>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<section v-if="person.organizedEvents.length > 0">
|
|
||||||
<h2 class="subtitle">
|
|
||||||
<translate>Organized</translate>
|
|
||||||
</h2>
|
|
||||||
<div class="columns">
|
|
||||||
<EventCard
|
|
||||||
v-for="event in person.organizedEvents"
|
|
||||||
:event="event"
|
|
||||||
:hideDetails="true"
|
|
||||||
:key="event.uuid"
|
|
||||||
class="column is-one-third"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="field is-grouped">
|
|
||||||
<p class="control">
|
|
||||||
<a
|
|
||||||
class="button"
|
|
||||||
@click="logoutUser()"
|
|
||||||
v-if="loggedPerson && loggedPerson.id === person.id"
|
|
||||||
>
|
|
||||||
<translate>User logout</translate>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p class="control">
|
|
||||||
<a
|
|
||||||
class="button"
|
|
||||||
@click="deleteProfile()"
|
|
||||||
v-if="loggedPerson && loggedPerson.id === person.id"
|
|
||||||
>
|
|
||||||
<translate>Delete</translate>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -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,21 +134,41 @@ 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')
|
||||||
onRouteChange() {
|
onRouteChange() {
|
||||||
// this.fetchData()
|
// this.fetchData()
|
||||||
}
|
}
|
||||||
|
|
||||||
logoutUser() {
|
logoutUser() {
|
||||||
// TODO : implement logout
|
// TODO : implement logout
|
||||||
this.$router.push({ name: RouteName.HOME });
|
this.$router.push({ name: RouteName.HOME });
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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")
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue