Merge branch 'feature/pick-identity' into 'master'

Add identity pickers on event creation & join

Closes #153 et #152

See merge request framasoft/mobilizon!183
This commit is contained in:
Thomas Citharel 2019-09-11 11:15:29 +02:00
commit 7bbed59f77
23 changed files with 469 additions and 146 deletions

View File

@ -11,11 +11,20 @@
<script lang="ts"> <script lang="ts">
import NavBar from '@/components/NavBar.vue'; import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { AUTH_ACCESS_TOKEN, AUTH_USER_ACTOR, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from '@/constants'; import {
AUTH_ACCESS_TOKEN,
AUTH_USER_ACTOR_ID,
AUTH_USER_EMAIL,
AUTH_USER_ID,
AUTH_USER_ROLE,
} from '@/constants';
import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'; import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
import { ICurrentUser } from '@/types/current-user.model'; import { ICurrentUser } from '@/types/current-user.model';
import Footer from '@/components/Footer.vue'; import Footer from '@/components/Footer.vue';
import Logo from '@/components/Logo.vue'; import Logo from '@/components/Logo.vue';
import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson } from '@/types/actor';
import { changeIdentity, saveActorData } from '@/utils/auth';
@Component({ @Component({
apollo: { apollo: {
@ -30,16 +39,9 @@ import Logo from '@/components/Logo.vue';
}, },
}) })
export default class App extends Vue { export default class App extends Vue {
currentUser!: ICurrentUser; async created() {
actor = localStorage.getItem(AUTH_USER_ACTOR);
async mounted() {
await this.initializeCurrentUser(); await this.initializeCurrentUser();
} await this.initializeCurrentActor();
getUser(): ICurrentUser | false {
return this.currentUser.id ? this.currentUser : false;
} }
private initializeCurrentUser() { private initializeCurrentUser() {
@ -60,6 +62,27 @@ export default class App extends Vue {
}); });
} }
} }
/**
* We fetch from localStorage the latest actor ID used,
* then fetch the current identities to set in cache
* the current identity used
*/
private async initializeCurrentActor() {
const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
const result = await this.$apollo.query({
query: IDENTITIES,
});
const identities = result.data.identities;
if (identities.length < 1) return;
const activeIdentity = identities.find(identity => identity.id === actorId) || identities[0] as IPerson;
if (activeIdentity) {
console.log('calling changeIdentity with', activeIdentity);
return await changeIdentity(this.$apollo.provider.defaultClient, activeIdentity);
}
}
} }
</script> </script>
@ -77,6 +100,7 @@ export default class App extends Vue {
@import "~bulma/sass/components/pagination.sass"; @import "~bulma/sass/components/pagination.sass";
@import "~bulma/sass/components/dropdown.sass"; @import "~bulma/sass/components/dropdown.sass";
@import "~bulma/sass/components/breadcrumb.sass"; @import "~bulma/sass/components/breadcrumb.sass";
@import "~bulma/sass/components/list.sass";
@import "~bulma/sass/elements/box.sass"; @import "~bulma/sass/elements/box.sass";
@import "~bulma/sass/elements/button.sass"; @import "~bulma/sass/elements/button.sass";
@import "~bulma/sass/elements/container.sass"; @import "~bulma/sass/elements/container.sass";

View File

@ -12,6 +12,13 @@ export function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObjec
isLoggedIn: false, isLoggedIn: false,
role: ICurrentUserRole.USER, role: ICurrentUserRole.USER,
}, },
currentActor: {
__typename: 'CurrentActor',
id: null,
preferredUsername: null,
name: null,
avatar: null,
},
}, },
}); });
@ -28,6 +35,19 @@ export function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObjec
}, },
}; };
cache.writeData({ data });
},
updateCurrentActor: (_, { id, preferredUsername, avatar, name }, { cache }) => {
const data = {
currentActor: {
id,
preferredUsername,
avatar,
name,
__typename: 'CurrentActor',
},
};
cache.writeData({ data }); cache.writeData({ data });
}, },
}, },

View File

@ -55,7 +55,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor'; import { IDENTITIES } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor'; import { IPerson, Person } from '@/types/actor';
@Component({ @Component({

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="editor" id="tiptab-editor" :data-actor-id="loggedPerson && loggedPerson.id"> <div class="editor" id="tiptab-editor" :data-actor-id="currentActor && currentActor.id">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
<div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }"> <div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }">
@ -176,20 +176,20 @@ import { IActor, IPerson } from '@/types/actor';
import Image from '@/components/Editor/Image'; import Image from '@/components/Editor/Image';
import { UPLOAD_PICTURE } from '@/graphql/upload'; import { UPLOAD_PICTURE } from '@/graphql/upload';
import { listenFileUpload } from '@/utils/upload'; import { listenFileUpload } from '@/utils/upload';
import { LOGGED_PERSON } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
@Component({ @Component({
components: { EditorContent, EditorMenuBar, EditorMenuBubble }, components: { EditorContent, EditorMenuBar, EditorMenuBubble },
apollo: { apollo: {
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
}, },
}) })
export default class CreateEvent extends Vue { export default class CreateEvent extends Vue {
@Prop({ required: true }) value!: String; @Prop({ required: true }) value!: String;
loggedPerson!: IPerson; currentActor!: IPerson;
editor: Editor = null; editor: Editor = null;
@ -438,7 +438,7 @@ export default class CreateEvent extends Vue {
variables: { variables: {
file: image, file: image,
name: image.name, name: image.name,
actorId: this.loggedPerson.id, actorId: this.currentActor.id,
}, },
}); });
if (data.uploadPicture && data.uploadPicture.url) { if (data.uploadPicture && data.uploadPicture.url) {

View File

@ -0,0 +1,86 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Join event {{ event.title }}</p>
</header>
<section class="modal-card-body is-flex">
<div class="media">
<div
class="media-left">
<b-icon
icon="alert"
type="is-warning"
size="is-large"/>
</div>
<div class="media-content">
<p>Do you want to participate in {{ event.title }}?</p>
<b-field :label="$gettext('Identity')">
<identity-picker v-model="identity"></identity-picker>
</b-field>
<p v-if="!event.local">
The event came from another instance. Your participation will be confirmed after we confirm it with the other instance.
</p>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button
class="button"
ref="cancelButton"
@click="close">
Cancel
</button>
<button
class="button is-primary"
ref="confirmButton"
@click="confirm">
Confirm my particpation
</button>
</footer>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IEvent } from '@/types/event.model';
import IdentityPicker from '@/views/Account/IdentityPicker.vue';
import { IPerson } from '@/types/actor';
@Component({
components: {
IdentityPicker,
},
mounted() {
this.$data.isActive = true;
},
})
export default class ReportModal extends Vue {
@Prop({ type: Function, default: () => {} }) onConfirm;
@Prop({ type: Object }) event! : IEvent;
@Prop({ type: Object }) defaultIdentity!: IPerson;
isActive: boolean = false;
identity: IPerson = this.defaultIdentity;
confirm() {
this.onConfirm(this.identity);
}
/**
* Close the Dialog.
*/
close() {
this.isActive = false;
this.$emit('close');
}
}
</script>
<style lang="scss">
.modal-card .modal-card-foot {
justify-content: flex-end;
}
</style>

View File

@ -27,26 +27,42 @@
<div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn"> <div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn">
<a <a
class="navbar-link" class="navbar-link"
v-if="loggedPerson" v-if="currentActor"
> >
<figure class="image is-24x24" v-if="loggedPerson.avatar"> <figure class="image is-24x24" v-if="currentActor.avatar">
<img alt="avatarUrl" :src="loggedPerson.avatar.url"> <img alt="avatarUrl" :src="currentActor.avatar.url">
</figure> </figure>
<span>{{ loggedPerson.preferredUsername }}</span> <span>{{ currentActor.preferredUsername }}</span>
</a> </a>
<div class="navbar-dropdown"> <div class="navbar-dropdown is-boxed">
<span class="navbar-item"> <div v-for="identity in identities" v-if="identities.length > 0">
<a class="navbar-item" @click="setIdentity(identity)" :class="{ 'is-active': identity.id === currentActor.id }">
<div class="media-left">
<figure class="image is-24x24" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url">
</figure>
</div>
<div class="media-content">
<h3>{{ identity.displayName() }}</h3>
</div>
</a>
<hr class="navbar-divider">
</div>
<a class="navbar-item">
<router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link> <router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link>
</span> </a>
<span class="navbar-item"> <a class="navbar-item">
<router-link :to="{ name: ActorRouteName.CREATE_GROUP }" v-translate>Create group</router-link> <router-link :to="{ name: ActorRouteName.CREATE_GROUP }" v-translate>Create group</router-link>
</span> </a>
<span class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"> <a class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
<router-link :to="{ name: AdminRouteName.DASHBOARD }" v-translate>Administration</router-link> <router-link :to="{ name: AdminRouteName.DASHBOARD }" v-translate>Administration</router-link>
</span> </a>
<a v-translate class="navbar-item" v-on:click="logout()">Log out</a> <a v-translate class="navbar-item" v-on:click="logout()">Log out</a>
</div> </div>
@ -70,9 +86,9 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'; import { Component, Vue, Watch } from 'vue-property-decorator';
import { CURRENT_USER_CLIENT } from '@/graphql/user'; import { CURRENT_USER_CLIENT } from '@/graphql/user';
import { logout } from '@/utils/auth'; import { changeIdentity, logout } from '@/utils/auth';
import { LOGGED_PERSON } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson } from '@/types/actor'; import { IPerson, Person } from '@/types/actor';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model'; import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
@ -87,6 +103,13 @@ import { RouteName } from '@/router';
currentUser: { currentUser: {
query: CURRENT_USER_CLIENT, query: CURRENT_USER_CLIENT,
}, },
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
identities: {
query: IDENTITIES,
update: ({ identities }) => identities.map(identity => new Person(identity)),
},
config: { config: {
query: CONFIG, query: CONFIG,
}, },
@ -101,28 +124,30 @@ export default class NavBar extends Vue {
{ header: 'Coucou' }, { header: 'Coucou' },
{ title: 'T\'as une notification', subtitle: 'Et elle est cool' }, { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
]; ];
loggedPerson: IPerson | null = null; currentActor!: IPerson;
config!: IConfig; config!: IConfig;
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
ICurrentUserRole = ICurrentUserRole; ICurrentUserRole = ICurrentUserRole;
identities!: IPerson[];
showNavbar: boolean = false; showNavbar: boolean = false;
ActorRouteName = ActorRouteName; ActorRouteName = ActorRouteName;
AdminRouteName = AdminRouteName; AdminRouteName = AdminRouteName;
@Watch('currentUser') // @Watch('currentUser')
async onCurrentUserChanged() { // async onCurrentUserChanged() {
// Refresh logged person object // // Refresh logged person object
if (this.currentUser.isLoggedIn) { // if (this.currentUser.isLoggedIn) {
const result = await this.$apollo.query({ // const result = await this.$apollo.query({
query: LOGGED_PERSON, // query: CURRENT_ACTOR_CLIENT,
}); // });
// console.log(result);
this.loggedPerson = result.data.loggedPerson; //
} else { // this.loggedPerson = result.data.currentActor;
this.loggedPerson = null; // } else {
} // this.loggedPerson = null;
} // }
// }
async logout() { async logout() {
await logout(this.$apollo.provider.defaultClient); await logout(this.$apollo.provider.defaultClient);
@ -130,6 +155,10 @@ export default class NavBar extends Vue {
if (this.$route.name === RouteName.HOME) return; if (this.$route.name === RouteName.HOME) return;
return this.$router.push({ name: RouteName.HOME }); return this.$router.push({ name: RouteName.HOME });
} }
async setIdentity(identity: IPerson) {
return await changeIdentity(this.$apollo.provider.defaultClient, identity);
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -43,7 +43,7 @@
<button <button
class="button" class="button"
ref="cancelButton" ref="cancelButton"
@click="cancel('button')"> @click="close">
{{ cancelText }} {{ cancelText }}
</button> </button>
<button <button
@ -86,11 +86,7 @@ export default class ReportModal extends Vue {
*/ */
close() { close() {
this.isActive = false; this.isActive = false;
// Timeout for the animation complete before destroying this.$emit('close');
setTimeout(() => {
this.$destroy();
removeElement(this.$el);
}, 150);
} }
} }
</script> </script>

View File

@ -2,5 +2,5 @@ export const AUTH_ACCESS_TOKEN = 'auth-access-token';
export const AUTH_REFRESH_TOKEN = 'auth-refresh-token'; export const AUTH_REFRESH_TOKEN = 'auth-refresh-token';
export const AUTH_USER_ID = 'auth-user-id'; export const AUTH_USER_ID = 'auth-user-id';
export const AUTH_USER_EMAIL = 'auth-user-email'; export const AUTH_USER_EMAIL = 'auth-user-email';
export const AUTH_USER_ACTOR = 'auth-user-actor'; export const AUTH_USER_ACTOR_ID = 'auth-user-actor-id';
export const AUTH_USER_ROLE = 'auth-user-role'; export const AUTH_USER_ROLE = 'auth-user-role';

View File

@ -40,6 +40,25 @@ query {
} }
}`; }`;
export const CURRENT_ACTOR_CLIENT = gql`
query {
currentActor @client {
id,
avatar {
url
},
preferredUsername,
name
}
}
`;
export const UPDATE_CURRENT_ACTOR_CLIENT = gql`
mutation UpdateCurrentActor($id: String!, $avatar: String, $preferredUsername: String!, $name: String!) {
updateCurrentActor(id: $id, avatar: $avatar, preferredUsername: $preferredUsername, name: $name) @client
}
`;
export const LOGGED_PERSON_WITH_GOING_TO_EVENTS = gql` export const LOGGED_PERSON_WITH_GOING_TO_EVENTS = gql`
query { query {
loggedPerson { loggedPerson {

View File

@ -37,7 +37,7 @@ query {
`; `;
export const UPDATE_CURRENT_USER_CLIENT = gql` export const UPDATE_CURRENT_USER_CLIENT = gql`
mutation UpdateCurrentUser($id: Int!, $email: String!, $isLoggedIn: Boolean!, $role: UserRole!) { mutation UpdateCurrentUser($id: String!, $email: String!, $isLoggedIn: Boolean!, $role: UserRole!) {
updateCurrentUser(id: $id, email: $email, isLoggedIn: $isLoggedIn, role: $role) @client updateCurrentUser(id: $id, email: $email, isLoggedIn: $isLoggedIn, role: $role) @client
} }
`; `;

View File

@ -4,6 +4,7 @@ declare module 'vue/types/vue' {
interface Vue { interface Vue {
$notifier: { $notifier: {
success: (message: string) => void; success: (message: string) => void;
error: (message: string) => void;
}; };
} }
} }
@ -16,7 +17,7 @@ export class Notifier {
} }
success(message: string) { success(message: string) {
this.vue.prototype.$notification.open({ this.vue.prototype.$buefy.notification.open({
message, message,
duration: 5000, duration: 5000,
position: 'is-bottom-right', position: 'is-bottom-right',
@ -24,6 +25,16 @@ export class Notifier {
hasIcon: true, hasIcon: true,
}); });
} }
error(message: string) {
this.vue.prototype.$buefy.notification.open({
message,
duration: 5000,
position: 'is-bottom-right',
type: 'is-danger',
hasIcon: true,
});
}
} }
// tslint:disable // tslint:disable

View File

@ -36,7 +36,7 @@ export class Actor implements IActor {
return `@${this.preferredUsername}${domain}`; return `@${this.preferredUsername}${domain}`;
} }
displayName(): string { public displayName(): string {
return this.name != null && this.name !== '' ? this.name : this.usernameWithDomain(); return this.name != null && this.name !== '' ? this.name : this.usernameWithDomain();
} }
} }

View File

@ -90,7 +90,7 @@ export interface IEvent {
picture: IPicture | null; picture: IPicture | null;
organizerActor: IActor; organizerActor?: IActor;
attributedTo: IActor; attributedTo: IActor;
participants: IParticipant[]; participants: IParticipant[];
@ -159,7 +159,7 @@ export class EventModel implements IEvent {
relatedEvents: IEvent[] = []; relatedEvents: IEvent[] = [];
attributedTo = new Actor(); attributedTo = new Actor();
organizerActor = new Actor(); organizerActor?: IActor;
tags: ITag[] = []; tags: ITag[] = [];
options: IEventOptions = new EventOptions(); options: IEventOptions = new EventOptions();

View File

@ -1,9 +1,18 @@
import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from '@/constants'; import {
AUTH_ACCESS_TOKEN,
AUTH_REFRESH_TOKEN,
AUTH_USER_ACTOR_ID,
AUTH_USER_EMAIL,
AUTH_USER_ID,
AUTH_USER_ROLE,
} from '@/constants';
import { ILogin, IToken } from '@/types/login.model'; import { ILogin, IToken } from '@/types/login.model';
import { UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'; import { UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
import { onLogout } from '@/vue-apollo'; import { onLogout } from '@/vue-apollo';
import ApolloClient from 'apollo-client'; import ApolloClient from 'apollo-client';
import { ICurrentUserRole } from '@/types/current-user.model'; import { ICurrentUserRole } from '@/types/current-user.model';
import { IPerson } from '@/types/actor';
import { UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
export function saveUserData(obj: ILogin) { export function saveUserData(obj: ILogin) {
localStorage.setItem(AUTH_USER_ID, `${obj.user.id}`); localStorage.setItem(AUTH_USER_ID, `${obj.user.id}`);
@ -13,17 +22,29 @@ export function saveUserData(obj: ILogin) {
saveTokenData(obj); saveTokenData(obj);
} }
export function saveActorData(obj: IPerson) {
localStorage.setItem(AUTH_USER_ACTOR_ID, `${obj.id}`);
}
export function saveTokenData(obj: IToken) { export function saveTokenData(obj: IToken) {
localStorage.setItem(AUTH_ACCESS_TOKEN, obj.accessToken); localStorage.setItem(AUTH_ACCESS_TOKEN, obj.accessToken);
localStorage.setItem(AUTH_REFRESH_TOKEN, obj.refreshToken); localStorage.setItem(AUTH_REFRESH_TOKEN, obj.refreshToken);
} }
export function deleteUserData() { export function deleteUserData() {
for (const key of [AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_ROLE]) { for (const key of [AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_ROLE, AUTH_USER_ACTOR_ID]) {
localStorage.removeItem(key); localStorage.removeItem(key);
} }
} }
export async function changeIdentity(apollo: ApolloClient<any>, identity: IPerson) {
await apollo.mutate({
mutation: UPDATE_CURRENT_ACTOR_CLIENT,
variables: identity,
});
saveActorData(identity);
}
export function logout(apollo: ApolloClient<any>) { export function logout(apollo: ApolloClient<any>) {
apollo.mutate({ apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT, mutation: UPDATE_CURRENT_USER_CLIENT,

View File

@ -0,0 +1,59 @@
<template>
<div class="identity-picker">
<img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url" :alt="currentIdentity.avatar.alt"/> {{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
<b-button type="is-text" @click="isComponentModalActive = true"><translate>Change</translate></b-button>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Pick an identity</p>
</header>
<section class="modal-card-body">
<div class="list is-hoverable">
<a class="list-item" v-for="identity in identities" :class="{ 'is-active': identity.id === currentIdentity.id }" @click="changeCurrentIdentity(identity)">
<div class="media">
<img class="media-left image" v-if="identity.avatar" :src="identity.avatar.url" />
<div class="media-content">
<h3>@{{ identity.preferredUsername }}</h3>
<small>{{ identity.name }}</small>
</div>
</div>
</a>
</div>
</section>
</div>
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IActor } from '@/types/actor';
import { IDENTITIES } from '@/graphql/actor';
@Component({
apollo: {
identities: {
query: IDENTITIES,
},
},
})
export default class IdentityPicker extends Vue {
@Prop() value!: IActor;
isComponentModalActive: boolean = false;
identities: IActor[] = [];
currentIdentity: IActor = this.value;
changeCurrentIdentity(identity: IActor) {
this.currentIdentity = identity;
this.$emit('input', identity);
this.isComponentModalActive = false;
}
}
</script>
<style lang="scss">
.identity-picker img.image {
display: inline;
height: 1.5em;
vertical-align: text-bottom;
}
</style>

View File

@ -1,9 +1,9 @@
<template> <template>
<section class="container"> <section class="container">
<div v-if="loggedPerson"> <div v-if="currentActor">
<div class="header"> <div class="header">
<figure v-if="loggedPerson.banner" class="image is-3by1"> <figure v-if="currentActor.banner" class="image is-3by1">
<img :src="loggedPerson.banner.url" alt="banner"> <img :src="currentActor.banner.url" alt="banner">
</figure> </figure>
</div> </div>
@ -31,7 +31,7 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { LOGGED_PERSON } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { Component, Vue, Watch } from 'vue-property-decorator'; import { Component, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import { IPerson } from '@/types/actor'; import { IPerson } from '@/types/actor';
@ -42,17 +42,18 @@ import Identities from '@/components/Account/Identities.vue';
EventCard, EventCard,
Identities, Identities,
}, },
apollo: {
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
},
}) })
export default class MyAccount extends Vue { export default class MyAccount extends Vue {
loggedPerson: IPerson | null = null; currentActor!: IPerson;
currentIdentityName: string | null = null; currentIdentityName: string | null = null;
@Watch('$route.params.identityName', { immediate: true }) @Watch('$route.params.identityName', { immediate: true })
async onIdentityParamChanged (val: string) { async onIdentityParamChanged (val: string) {
if (!this.loggedPerson) {
this.loggedPerson = await this.loadLoggedPerson();
}
await this.redirectIfNoIdentitySelected(val); await this.redirectIfNoIdentitySelected(val);
this.currentIdentityName = val; this.currentIdentityName = val;
@ -61,18 +62,10 @@ export default class MyAccount extends Vue {
private async redirectIfNoIdentitySelected (identityParam?: string) { private async redirectIfNoIdentitySelected (identityParam?: string) {
if (!!identityParam) return; if (!!identityParam) return;
if (!!this.loggedPerson) { if (!!this.currentActor) {
this.$router.push({ params: { identityName: this.loggedPerson.preferredUsername } }); await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
} }
} }
private async loadLoggedPerson () {
const result = await this.$apollo.query({
query: LOGGED_PERSON,
});
return result.data.loggedPerson as IPerson;
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -57,7 +57,7 @@
</a> </a>
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
<a class="button" v-if="loggedPerson.id === person.id" @click="createToken"> <a class="button" v-if="currentActor.id === person.id" @click="createToken">
<translate>Create token</translate> <translate>Create token</translate>
</a> </a>
</div> </div>
@ -79,7 +79,7 @@
<a <a
class="button" class="button"
@click="deleteProfile()" @click="deleteProfile()"
v-if="loggedPerson && loggedPerson.id === person.id" v-if="currentActor && currentActor.id === person.id"
> >
<translate>Delete</translate> <translate>Delete</translate>
</a> </a>
@ -91,7 +91,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor'; import { FETCH_PERSON, CURRENT_ACTOR_CLIENT } 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 { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint'; import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
@ -108,8 +108,8 @@ import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
}; };
}, },
}, },
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
}, },
components: { components: {
@ -120,6 +120,7 @@ export default class MyAccount extends Vue {
@Prop({ type: String, required: true }) name!: string; @Prop({ type: String, required: true }) name!: string;
person!: IPerson; person!: IPerson;
currentActor!: IPerson;
// call again the method if the route changes // call again the method if the route changes
@Watch('$route') @Watch('$route')

View File

@ -25,6 +25,16 @@
<b-input type="textarea" aria-required="false" v-model="identity.summary"/> <b-input type="textarea" aria-required="false" v-model="identity.summary"/>
</b-field> </b-field>
<b-notification
type="is-danger"
has-icon
aria-close-label="Close notification"
role="alert"
v-for="error in errors"
>
{{ error }}
</b-notification>
<b-field class="submit"> <b-field class="submit">
<div class="control"> <div class="control">
<button v-translate type="button" class="button is-primary" @click="submit()"> <button v-translate type="button" class="button is-primary" @click="submit()">
@ -70,19 +80,32 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { CREATE_PERSON, DELETE_PERSON, FETCH_PERSON, IDENTITIES, LOGGED_PERSON, UPDATE_PERSON } from '../../../graphql/actor'; import {
CREATE_PERSON,
CURRENT_ACTOR_CLIENT,
DELETE_PERSON,
FETCH_PERSON,
IDENTITIES,
UPDATE_PERSON,
} from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor'; import { IPerson, Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue'; import PictureUpload from '@/components/PictureUpload.vue';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint'; import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { Dialog } from 'buefy/dist/components/dialog'; import { Dialog } from 'buefy/dist/components/dialog';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { buildFileFromIPicture, buildFileVariable } from '@/utils/image'; import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
import { changeIdentity, saveActorData } from '@/utils/auth';
@Component({ @Component({
components: { components: {
PictureUpload, PictureUpload,
Dialog, Dialog,
}, },
apollo: {
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
},
}) })
export default class EditIdentity extends Vue { export default class EditIdentity extends Vue {
@Prop({ type: Boolean }) isUpdate!: boolean; @Prop({ type: Boolean }) isUpdate!: boolean;
@ -94,7 +117,7 @@ export default class EditIdentity extends Vue {
identity = new Person(); identity = new Person();
private oldDisplayName: string | null = null; private oldDisplayName: string | null = null;
private loggedPerson: IPerson | null = null; private currentActor: IPerson | null = null;
@Watch('isUpdate') @Watch('isUpdate')
async isUpdateChanged () { async isUpdateChanged () {
@ -134,6 +157,9 @@ export default class EditIdentity extends Vue {
this.oldDisplayName = newDisplayName; this.oldDisplayName = newDisplayName;
} }
/**
* Delete an identity
*/
async deleteIdentity() { async deleteIdentity() {
try { try {
await this.$apollo.mutate({ await this.$apollo.mutate({
@ -150,17 +176,15 @@ export default class EditIdentity extends Vue {
}, },
}); });
this.$notifier.success( this.$notifier.success(
this.$gettextInterpolate('Identity %{displayName} deleted', { displayName: this.identity.displayName() }), this.$gettextInterpolate('Identity %{displayName} deleted', { displayName: this.identity.displayName() }),
); );
/**
await this.loadLoggedPersonIfNeeded(); * If we just deleted the current identity, we need to change it to the next one
*/
// Refresh the loaded person if we deleted the default identity const data = this.$apollo.provider.defaultClient.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
if (this.loggedPerson && this.identity.id === this.loggedPerson.id) { if (data) {
this.loggedPerson = null; await this.maybeUpdateCurrentActorCache(data.identities[0]);
await this.loadLoggedPersonIfNeeded(true);
} }
await this.redirectIfNoIdentitySelected(); await this.redirectIfNoIdentitySelected();
@ -181,6 +205,7 @@ export default class EditIdentity extends Vue {
const index = data.identities.findIndex(i => i.id === this.identity.id); const index = data.identities.findIndex(i => i.id === this.identity.id);
this.$set(data.identities, index, updatePerson); this.$set(data.identities, index, updatePerson);
this.maybeUpdateCurrentActorCache(updatePerson);
store.writeQuery({ query: IDENTITIES, data }); store.writeQuery({ query: IDENTITIES, data });
} }
@ -211,11 +236,11 @@ export default class EditIdentity extends Vue {
}, },
}); });
this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
this.$notifier.success( this.$notifier.success(
this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }), this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }),
); );
await this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
} catch (err) { } catch (err) {
this.handleError(err); this.handleError(err);
} }
@ -263,9 +288,11 @@ export default class EditIdentity extends Vue {
private handleError(err: any) { private handleError(err: any) {
console.error(err); console.error(err);
err.graphQLErrors.forEach(({ message }) => { if (err.graphQLErrors !== undefined) {
this.errors.push(message); err.graphQLErrors.forEach(({ message }) => {
}); this.$notifier.error(message);
});
}
} }
private convertToUsername(value: string | null) { private convertToUsername(value: string | null) {
@ -287,20 +314,29 @@ export default class EditIdentity extends Vue {
await this.loadLoggedPersonIfNeeded(); await this.loadLoggedPersonIfNeeded();
if (!!this.loggedPerson) { if (!!this.currentActor) {
this.$router.push({ params: { identityName: this.loggedPerson.preferredUsername } }); await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
}
}
private async maybeUpdateCurrentActorCache(identity: IPerson) {
if (this.currentActor) {
if (this.currentActor.preferredUsername === this.identity.preferredUsername) {
await changeIdentity(this.$apollo.provider.defaultClient, identity);
}
this.currentActor = identity;
} }
} }
private async loadLoggedPersonIfNeeded (bypassCache = false) { private async loadLoggedPersonIfNeeded (bypassCache = false) {
if (this.loggedPerson) return; if (this.currentActor) return;
const result = await this.$apollo.query({ const result = await this.$apollo.query({
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
fetchPolicy: bypassCache ? 'network-only' : undefined, fetchPolicy: bypassCache ? 'network-only' : undefined,
}); });
this.loggedPerson = result.data.loggedPerson; this.currentActor = result.data.currentActor;
} }
private resetFields () { private resetFields () {

View File

@ -22,11 +22,15 @@
<tag-input v-model="event.tags" :data="tags" path="title" /> <tag-input v-model="event.tags" :data="tags" path="title" />
<address-auto-complete v-model="event.physicalAddress" />
<date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/> <date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
<date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" /> <date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />
<address-auto-complete v-model="event.physicalAddress" />
<b-field :label="$gettext('Organizer')">
<identity-picker v-model="event.organizerActor"></identity-picker>
</b-field>
<div class="field"> <div class="field">
<label class="label">{{ $gettext('Description') }}</label> <label class="label">{{ $gettext('Description') }}</label>
<editor v-model="event.description" /> <editor v-model="event.description" />
@ -192,7 +196,7 @@
import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT, FETCH_EVENTS } from '@/graphql/event'; import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT, FETCH_EVENTS } from '@/graphql/event';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration, IEvent } from '@/types/event.model'; import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration, IEvent } from '@/types/event.model';
import { LOGGED_PERSON } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor'; import { IPerson, Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue'; import PictureUpload from '@/components/PictureUpload.vue';
import Editor from '@/components/Editor.vue'; import Editor from '@/components/Editor.vue';
@ -202,12 +206,13 @@ import { TAGS } from '@/graphql/tags';
import { ITag } from '@/types/tag.model'; import { ITag } from '@/types/tag.model';
import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue'; import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
import { buildFileFromIPicture, buildFileVariable } from '@/utils/image'; import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
import IdentityPicker from '@/views/Account/IdentityPicker.vue';
@Component({ @Component({
components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor }, components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor, IdentityPicker },
apollo: { apollo: {
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
tags: { tags: {
query: TAGS, query: TAGS,
@ -220,7 +225,7 @@ export default class EditEvent extends Vue {
eventId!: string | undefined; eventId!: string | undefined;
loggedPerson = new Person(); currentActor = new Person();
tags: ITag[] = []; tags: ITag[] = [];
event = new EventModel(); event = new EventModel();
pictureFile: File | null = null; pictureFile: File | null = null;
@ -257,6 +262,7 @@ export default class EditEvent extends Vue {
this.event.beginsOn = now; this.event.beginsOn = now;
this.event.endsOn = end; this.event.endsOn = end;
this.event.organizerActor = this.event.organizerActor || this.currentActor;
} }
createOrUpdate(e: Event) { createOrUpdate(e: Event) {
@ -305,7 +311,10 @@ export default class EditEvent extends Vue {
* Build variables for Event GraphQL creation query * Build variables for Event GraphQL creation query
*/ */
private buildVariables() { private buildVariables() {
const res = Object.assign(this.event.toEditJSON(), { organizerActorId: this.loggedPerson.id }); let res = this.event.toEditJSON();
if (this.event.organizerActor) {
res = Object.assign(res, { organizerActorId: this.event.organizerActor.id });
}
delete this.event.options['__typename']; delete this.event.options['__typename'];

View File

@ -19,11 +19,11 @@
<h1 class="title">{{ event.title }}</h1> <h1 class="title">{{ event.title }}</h1>
</div> </div>
<div v-if="!actorIsOrganizer()" class="participate-button has-text-centered"> <div v-if="!actorIsOrganizer()" class="participate-button has-text-centered">
<a v-if="!actorIsParticipant()" @click="joinEvent" class="button is-large is-primary is-rounded"> <a v-if="!actorIsParticipant()" @click="isJoinModalActive = true" class="button is-large is-primary is-rounded">
<b-icon icon="circle-outline"></b-icon> <b-icon icon="circle-outline"></b-icon>
<translate>Join</translate> <translate>Join</translate>
</a> </a>
<a v-if="actorIsParticipant()" @click="leaveEvent" class="button is-large is-primary is-rounded"> <a v-if="actorIsParticipant()" @click="confirmLeave()" class="button is-large is-primary is-rounded">
<b-icon icon="check-circle"></b-icon> <b-icon icon="check-circle"></b-icon>
<translate>Leave</translate> <translate>Leave</translate>
</a> </a>
@ -229,8 +229,11 @@
</div> </div>
</div> </div>
</section> </section>
<b-modal :active.sync="isReportModalActive" has-modal-card> <b-modal :active.sync="isReportModalActive" has-modal-card ref="reportModal">
<report-modal :on-confirm="reportEvent" title="Report this event" :outside-domain="event.organizerActor.domain" /> <report-modal :on-confirm="reportEvent" title="Report this event" :outside-domain="event.organizerActor.domain" @close="$refs.reportModal.close()" />
</b-modal>
<b-modal :active.sync="isJoinModalActive" has-modal-card ref="participationModal">
<participation-modal :on-confirm="joinEvent" :event="event" :defaultIdentity="currentActor" @close="$refs.participationModal.close()" />
</b-modal> </b-modal>
</div> </div>
</div> </div>
@ -239,7 +242,7 @@
<script lang="ts"> <script lang="ts">
import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event'; import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGGED_PERSON } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { EventVisibility, IEvent, IParticipant } from '@/types/event.model'; import { EventVisibility, IEvent, IParticipant } from '@/types/event.model';
import { IPerson } from '@/types/actor'; import { IPerson } from '@/types/actor';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
@ -250,6 +253,7 @@ import EventCard from '@/components/Event/EventCard.vue';
import EventFullDate from '@/components/Event/EventFullDate.vue'; import EventFullDate from '@/components/Event/EventFullDate.vue';
import ActorLink from '@/components/Account/ActorLink.vue'; import ActorLink from '@/components/Account/ActorLink.vue';
import ReportModal from '@/components/Report/ReportModal.vue'; import ReportModal from '@/components/Report/ReportModal.vue';
import ParticipationModal from '@/components/Event/ParticipationModal.vue';
import { IReport } from '@/types/report.model'; import { IReport } from '@/types/report.model';
import { CREATE_REPORT } from '@/graphql/report'; import { CREATE_REPORT } from '@/graphql/report';
@ -261,6 +265,7 @@ import { CREATE_REPORT } from '@/graphql/report';
BIcon, BIcon,
DateCalendarIcon, DateCalendarIcon,
ReportModal, ReportModal,
ParticipationModal,
// tslint:disable:space-in-parens // tslint:disable:space-in-parens
'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'), 'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'),
// tslint:enable // tslint:enable
@ -274,8 +279,8 @@ import { CREATE_REPORT } from '@/graphql/report';
}; };
}, },
}, },
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
}, },
}) })
@ -283,10 +288,11 @@ export default class Event extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;
event!: IEvent; event!: IEvent;
loggedPerson!: IPerson; currentActor!: IPerson;
validationSent: boolean = false; validationSent: boolean = false;
showMap: boolean = false; showMap: boolean = false;
isReportModalActive: boolean = false; isReportModalActive: boolean = false;
isJoinModalActive: boolean = false;
EventVisibility = EventVisibility; EventVisibility = EventVisibility;
@ -317,13 +323,14 @@ export default class Event extends Vue {
async reportEvent(content: string, forward: boolean) { async reportEvent(content: string, forward: boolean) {
this.isReportModalActive = false; this.isReportModalActive = false;
if (!this.event.organizerActor) return;
const eventTitle = this.event.title; const eventTitle = this.event.title;
try { try {
await this.$apollo.mutate<IReport>({ await this.$apollo.mutate<IReport>({
mutation: CREATE_REPORT, mutation: CREATE_REPORT,
variables: { variables: {
eventId: this.event.id, eventId: this.event.id,
reporterActorId: this.loggedPerson.id, reporterActorId: this.currentActor.id,
reportedActorId: this.event.organizerActor.id, reportedActorId: this.event.organizerActor.id,
content, content,
}, },
@ -339,13 +346,14 @@ export default class Event extends Vue {
} }
} }
async joinEvent() { async joinEvent(identity: IPerson) {
this.isJoinModalActive = false;
try { try {
await this.$apollo.mutate<{ joinEvent: IParticipant }>({ await this.$apollo.mutate<{ joinEvent: IParticipant }>({
mutation: JOIN_EVENT, mutation: JOIN_EVENT,
variables: { variables: {
eventId: this.event.id, eventId: this.event.id,
actorId: this.loggedPerson.id, actorId: identity.id,
}, },
update: (store, { data }) => { update: (store, { data }) => {
if (data == null) return; if (data == null) return;
@ -367,13 +375,24 @@ export default class Event extends Vue {
} }
} }
confirmLeave() {
this.$buefy.dialog.confirm({
title: `Leaving event « ${this.event.title} »`,
message: `Are you sure you want to leave event « ${this.event.title} »`,
confirmText: 'Leave event',
type: 'is-danger',
hasIcon: true,
onConfirm: () => this.leaveEvent(),
});
}
async leaveEvent() { async leaveEvent() {
try { try {
await this.$apollo.mutate<{ leaveEvent: IParticipant }>({ await this.$apollo.mutate<{ leaveEvent: IParticipant }>({
mutation: LEAVE_EVENT, mutation: LEAVE_EVENT,
variables: { variables: {
eventId: this.event.id, eventId: this.event.id,
actorId: this.loggedPerson.id, actorId: this.currentActor.id,
}, },
update: (store, { data }) => { update: (store, { data }) => {
if (data == null) return; if (data == null) return;
@ -410,14 +429,14 @@ export default class Event extends Vue {
actorIsParticipant() { actorIsParticipant() {
if (this.actorIsOrganizer()) return true; if (this.actorIsOrganizer()) return true;
return this.loggedPerson && return this.currentActor &&
this.event.participants this.event.participants
.some(participant => participant.actor.id === this.loggedPerson.id); .some(participant => participant.actor.id === this.currentActor.id);
} }
actorIsOrganizer() { actorIsOrganizer() {
return this.loggedPerson && return this.currentActor && this.event.organizerActor &&
this.loggedPerson.id === this.event.organizerActor.id; this.currentActor.id === this.event.organizerActor.id;
} }
get twitterShareUrl(): string { get twitterShareUrl(): string {
@ -445,7 +464,7 @@ export default class Event extends Vue {
mutation: DELETE_EVENT, mutation: DELETE_EVENT,
variables: { variables: {
eventId: this.event.id, eventId: this.event.id,
actorId: this.loggedPerson.id, actorId: this.currentActor.id,
}, },
}); });

View File

@ -42,7 +42,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { Group, IPerson } from '@/types/actor'; import { Group, IPerson } from '@/types/actor';
import { CREATE_GROUP, LOGGED_PERSON } from '@/graphql/actor'; import { CREATE_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import PictureUpload from '@/components/PictureUpload.vue'; import PictureUpload from '@/components/PictureUpload.vue';
@ -51,13 +51,13 @@ import PictureUpload from '@/components/PictureUpload.vue';
PictureUpload, PictureUpload,
}, },
apollo: { apollo: {
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
}, },
}) })
export default class CreateGroup extends Vue { export default class CreateGroup extends Vue {
loggedPerson!: IPerson; currentActor!: IPerson;
group = new Group(); group = new Group();
@ -74,7 +74,7 @@ export default class CreateGroup extends Vue {
}, },
}); });
this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } }); await this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
this.$notifier.success( this.$notifier.success(
this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }), this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }),
@ -111,7 +111,7 @@ export default class CreateGroup extends Vue {
} }
const currentActor = { const currentActor = {
creatorActorId: this.loggedPerson.id, creatorActorId: this.currentActor.id,
}; };
return Object.assign({}, this.group, avatarObj, bannerObj, currentActor); return Object.assign({}, this.group, avatarObj, bannerObj, currentActor);

View File

@ -58,7 +58,7 @@
<script lang="ts"> <script lang="ts">
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 { FETCH_GROUP, LOGGED_PERSON } from '@/graphql/actor'; import { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IGroup } from '@/types/actor'; import { IGroup } from '@/types/actor';
@Component({ @Component({
@ -71,8 +71,8 @@ import { IGroup } from '@/types/actor';
}; };
}, },
}, },
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
}, },
components: { components: {

View File

@ -109,7 +109,7 @@ import { EventRouteName } from '@/router/event';
import { ActorRouteName } from '@/router/actor'; import { ActorRouteName } from '@/router/actor';
import { AdminRouteName } from '@/router/admin'; import { AdminRouteName } from '@/router/admin';
import { ModerationRouteName } from '@/router/moderation'; import { ModerationRouteName } from '@/router/moderation';
import { LOGGED_PERSON } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson } from '@/types/actor'; import { IPerson } from '@/types/actor';
import { DELETE_EVENT } from '@/graphql/event'; import { DELETE_EVENT } from '@/graphql/event';
import { uniq } from 'lodash'; import { uniq } from 'lodash';
@ -127,15 +127,15 @@ import { uniq } from 'lodash';
this.errors = uniq(graphQLErrors.map(({ message }) => message)); this.errors = uniq(graphQLErrors.map(({ message }) => message));
}, },
}, },
loggedPerson: { currentActor: {
query: LOGGED_PERSON, query: CURRENT_ACTOR_CLIENT,
}, },
}, },
}) })
export default class Report extends Vue { export default class Report extends Vue {
@Prop({ required: true }) reportId!: number; @Prop({ required: true }) reportId!: number;
report!: IReport; report!: IReport;
loggedPerson!: IPerson; currentActor!: IPerson;
errors: string[] = []; errors: string[] = [];
ReportStatusEnum = ReportStatusEnum; ReportStatusEnum = ReportStatusEnum;
@ -152,7 +152,7 @@ export default class Report extends Vue {
mutation: CREATE_REPORT_NOTE, mutation: CREATE_REPORT_NOTE,
variables: { variables: {
reportId: this.report.id, reportId: this.report.id,
moderatorId: this.loggedPerson.id, moderatorId: this.currentActor.id,
content: this.noteContent, content: this.noteContent,
}, },
update: (store, { data }) => { update: (store, { data }) => {
@ -165,7 +165,7 @@ export default class Report extends Vue {
return; return;
} }
const note = data.createReportNote; const note = data.createReportNote;
note.moderator = this.loggedPerson; note.moderator = this.currentActor;
report.notes = report.notes.concat([note]); report.notes = report.notes.concat([note]);
@ -199,7 +199,7 @@ export default class Report extends Vue {
mutation: DELETE_EVENT, mutation: DELETE_EVENT,
variables: { variables: {
eventId: this.report.event.id.toString(), eventId: this.report.event.id.toString(),
actorId: this.loggedPerson.id, actorId: this.currentActor.id,
}, },
}); });
@ -220,7 +220,7 @@ export default class Report extends Vue {
mutation: UPDATE_REPORT, mutation: UPDATE_REPORT,
variables: { variables: {
reportId: this.report.id, reportId: this.report.id,
moderatorId: this.loggedPerson.id, moderatorId: this.currentActor.id,
status, status,
}, },
update: (store, { data }) => { update: (store, { data }) => {