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:
commit
7bbed59f77
|
@ -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";
|
||||||
|
|
|
@ -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 });
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
86
js/src/components/Event/ParticipationModal.vue
Normal file
86
js/src/components/Event/ParticipationModal.vue
Normal 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>
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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,
|
||||||
|
|
59
js/src/views/Account/IdentityPicker.vue
Normal file
59
js/src/views/Account/IdentityPicker.vue
Normal 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>
|
|
@ -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">
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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,10 +288,12 @@ export default class EditIdentity extends Vue {
|
||||||
private handleError(err: any) {
|
private handleError(err: any) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
|
|
||||||
|
if (err.graphQLErrors !== undefined) {
|
||||||
err.graphQLErrors.forEach(({ message }) => {
|
err.graphQLErrors.forEach(({ message }) => {
|
||||||
this.errors.push(message);
|
this.$notifier.error(message);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private convertToUsername(value: string | null) {
|
private convertToUsername(value: string | null) {
|
||||||
if (!value) return '';
|
if (!value) return '';
|
||||||
|
@ -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 () {
|
||||||
|
|
|
@ -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'];
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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 }) => {
|
||||||
|
|
Loading…
Reference in a new issue