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

Add identity pickers on event creation & join

Browse Source 
Also it now saves current actor in localStorage and initalizes it in
Apollo Cache (just like user stuff). This allows not relying on
loggedPerson query anymore.

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-09-11 09:59:01 +02:00
parent e3150a685c
commit 6bceb5b463
23 changed files with 469 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
js/src/components/NavBar.vue
View File

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