hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add timeline events you're going to

Browse Source 
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
16 changed files with 522 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
js/src/views/Account/Profile.vue
View File

@@ -1,68 +1,107 @@
<template>
<section>
<div class="columns">
<div class="column">
<div class="card" v-if="person">
<div class="card-image" v-if="person.bannerUrl">
<figure class="image">
<img :src="person.bannerUrl">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="person.avatarUrl">
</figure>
</div>
<div class="media-content">
<p class="title">{{ person.name }}</p>
<p class="subtitle">@{{ person.preferredUsername }}</p>
</div>
</div>
<section>
<div class="columns">
<div class="column">
<div class="card" v-if="person">
<div class="card-image" v-if="person.bannerUrl">
<figure class="image">
<img :src="person.bannerUrl">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="person.avatarUrl">
</figure>
</div>
<div class="media-content">
<p class="title">{{ person.name }}</p>
<p class="subtitle">@{{ person.preferredUsername }}</p>
</div>
</div>
<div class="content">
<p v-html="person.summary"></p>
<div class="content">
<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>
<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>
</section>
</template>
<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 EventCard from '@/components/Event/EventCard.vue';
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({
apollo: {
@@ -92,21 +134,41 @@ import { RouteName } from '@/router';
export default class Profile extends Vue {
@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')
onRouteChange() {
// this.fetchData()
onRouteChange() {
// this.fetchData()
}
logoutUser() {
// TODO : implement logout
// TODO : implement logout
this.$router.push({ name: RouteName.HOME });
}
nl2br(text) {
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>

2
js/src/views/Account/Register.vue
View File

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