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

Test implementation of my account page

Browse Source
This commit is contained in:
Chocobozzz
2019-04-26 15:22:16 +02:00
parent 69974ff745
commit 92ff05f505
27 changed files with 1200 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
js/src/views/Account/Identities.vue
View File

@@ -1,92 +0,0 @@
<template>
<section>
<b-loading :active.sync="$apollo.loading"></b-loading>
<h1 class="title">
<translate>Identities</translate>
</h1>
<a class="button is-primary" @click="showCreateProfileForm = true">
<translate>Add a new profile</translate>
</a>
<div class="columns" v-if="showCreateProfileForm">
<form @submit="createProfile" class="column is-half">
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<b-field label="Username">
<b-input aria-required="true" required v-model="newPerson.preferredUsername"/>
</b-field>
<button class="button is-primary">
<translate>Register</translate>
</button>
</form>
</div>
<ul>
<li v-for="identity in identities" :key="identity.id">
<hr>
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="identity.avatarUrl">
</figure>
</div>
<div class="media-content">
<p class="title is-5">
{{ identity.name }}
<span
v-if="identity.preferredUsername === loggedPerson.preferredUsername"
class="tag is-primary"
>
<translate>Current</translate>
</span>
</p>
<p class="subtitle is-6">@{{ identity.preferredUsername }}</p>
</div>
</div>
</li>
</ul>
</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { IDENTITIES, LOGGED_PERSON, CREATE_PERSON } from '../../graphql/actor';
import { IPerson } from '@/types/actor.model';
@Component({
apollo: {
identities: {
query: IDENTITIES,
},
loggedPerson: {
query: LOGGED_PERSON,
},
},
})
export default class Identities extends Vue {
identities: IPerson[] = [];
loggedPerson!: IPerson;
newPerson!: IPerson;
showCreateProfileForm: boolean = false;
errors: string[] = [];
async createProfile(e) {
e.preventDefault();
try {
await this.$apollo.mutate({
mutation: CREATE_PERSON,
variables: this.newPerson,
});
this.showCreateProfileForm = false;
this.$apollo.queries.identities.refresh();
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {
this.errors.push(message);
});
}
}
host() {
return `@${window.location.host}`;
}
}
</script>

68
js/src/views/Account/MyAccount.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<section class="container">
<div v-if="person">
<div class="header">
<figure v-if="person.bannerUrl" class="image is-3by1">
<img :src="person.bannerUrl" alt="banner">
</figure>
</div>
<div class="columns">
<div class="identities column is-4">
<identities></identities>
</div>
</div>
</div>
</section>
</template>
<style lang="scss">
.header {
padding-bottom: 30px;
}
.identities {
padding-right: 45px;
margin-right: 45px;
}
</style>
<script lang="ts">
import { LOGGED_PERSON } from '@/graphql/actor';
import { Component, Vue } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { IPerson } from '@/types/actor';
import { CURRENT_USER_CLIENT } from '@/graphql/user';
import Identities from '@/components/Account/Identities.vue';
@Component({
apollo: {
currentUser: {
query: CURRENT_USER_CLIENT,
},
loggedPerson: {
query: LOGGED_PERSON,
},
},
components: {
EventCard,
Identities,
},
})
export default class MyAccount extends Vue {
person: IPerson | null = null;
async mounted () {
const result = await this.$apollo.query({
query: LOGGED_PERSON,
});
this.person = result.data.loggedPerson;
}
}
</script>
<style lang="scss">
@import "../../variables";
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/components/dropdown.sass";
</style>

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

@@ -1,103 +1,102 @@
<template>
<section class="container">
<div 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">
<vue-simple-markdown :source="person.summary"></vue-simple-markdown>
</div>
<b-dropdown hoverable has-link aria-role="list">
<button class="button is-primary" 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-if="loggedPerson" @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, organizerActor: person }"
:key="event.uuid"
class="column is-one-third"
/>
</div>
<div class="field is-grouped">
<p class="control">
<a
class="button"
@click="deleteProfile()"
v-if="loggedPerson && loggedPerson.id === person.id"
>
<translate>Delete</translate>
</a>
</p>
</div>
</section>
<section class="container">
<div 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="content">
<vue-simple-markdown :source="person.summary"></vue-simple-markdown>
</div>
<b-dropdown hoverable has-link aria-role="list">
<button class="button is-primary" 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-if="loggedPerson" @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, organizerActor: person }"
:key="event.uuid"
class="column is-one-third"
/>
</div>
<div class="field is-grouped">
<p class="control">
<a
class="button"
@click="deleteProfile()"
v-if="loggedPerson && loggedPerson.id === person.id"
>
<translate>Delete</translate>
</a>
</p>
</div>
</section>
</div>
</section>
</template>
<script lang="ts">
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 { IPerson } from '@/types/actor';
import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
@Component({
@@ -118,19 +117,15 @@ import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
EventCard,
},
})
export default class Profile extends Vue {
export default class MyAccount extends Vue {
@Prop({ type: String, required: true }) name!: string;
person!: IPerson;
// call again the method if the route changes
// call again the method if the route changes
@Watch('$route')
onRouteChange() {
// this.fetchData()
}
nl2br(text) {
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
onRouteChange() {
// this.fetchData()
}
feedUrls(format, isPublic = true): string {
@@ -155,7 +150,7 @@ export default class Profile extends Vue {
}
</script>
<style lang="scss">
@import "../../variables";
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/components/dropdown.sass";
@import "../../variables";
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/components/dropdown.sass";
</style>

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

@@ -71,7 +71,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IPerson } from '@/types/actor.model';
import { IPerson } from '@/types/actor';
import { REGISTER_PERSON } from '@/graphql/actor';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { RouteName } from '@/router';

2
js/src/views/Event/Create.vue
View File

@@ -40,7 +40,7 @@ import {
EventModel,
} from '@/types/event.model';
import { LOGGED_PERSON } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor.model';
import { IPerson, Person } from '@/types/actor';
@Component({
apollo: {

2
js/src/views/Event/Event.vue
View File

@@ -233,7 +233,7 @@ import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/ev
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGGED_PERSON } from '@/graphql/actor';
import { EventVisibility, IEvent, IParticipant } from '@/types/event.model';
import { IPerson } from '@/types/actor.model';
import { IPerson } from '@/types/actor';
import { RouteName } from '@/router';
import 'vue-simple-markdown/dist/vue-simple-markdown.css';
import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';

2
js/src/views/Group/Group.vue
View File

@@ -59,7 +59,7 @@
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { FETCH_GROUP, LOGGED_PERSON } from '@/graphql/actor';
import { IGroup } from '@/types/actor.model';
import { IGroup } from '@/types/actor';
@Component({
apollo: {

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

@@ -88,7 +88,7 @@ import { FETCH_EVENTS } from '@/graphql/event';
import { Component, Vue } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { LOGGED_PERSON_WITH_GOING_TO_EVENTS } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor.model';
import { IPerson, Person } from '@/types/actor';
import { ICurrentUser } from '@/types/current-user.model';
import { CURRENT_USER_CLIENT } from '@/graphql/user';
import { RouteName } from '@/router';

2
js/src/views/Search.vue
View File

@@ -48,7 +48,7 @@ import { SEARCH_EVENTS, SEARCH_GROUPS } from '@/graphql/search';
import { RouteName } from '@/router';
import EventCard from '@/components/Event/EventCard.vue';
import GroupCard from '@/components/Group/GroupCard.vue';
import { Group, IGroup } from '@/types/actor.model';
import { Group, IGroup } from '@/types/actor';
import { SearchEvent, SearchGroup } from '@/types/search.model';
enum SearchTabs {