Test implementation of my account page
This commit is contained in:
Chocobozzz
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user