mobilizon/js/src/components/NavBar.vue

146 lines
4.3 KiB
Vue
Raw Normal View History

<template>
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<router-link class="navbar-item" :to="{ name: 'Home' }"><logo /></router-link>
2019-01-18 13:47:10 +00:00
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
@click="showNavbar = !showNavbar" :class="{ 'is-active': showNavbar }"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" :class="{ 'is-active': showNavbar }">
<div class="navbar-end">
<div class="navbar-item">
<search-field />
</div>
<div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn">
<a
class="navbar-link"
v-if="loggedPerson"
>
<figure class="image is-24x24" v-if="loggedPerson.avatar">
<img alt="avatarUrl" :src="loggedPerson.avatar.url">
</figure>
<span>{{ loggedPerson.preferredUsername }}</span>
</a>
<div class="navbar-dropdown">
<span class="navbar-item">
<router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link>
</span>
2019-09-02 08:50:00 +00:00
<span class="navbar-item">
<router-link :to="{ name: ActorRouteName.CREATE_GROUP }" v-translate>Create group</router-link>
</span>
<span class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
<router-link :to="{ name: AdminRouteName.DASHBOARD }" v-translate>Administration</router-link>
</span>
<a v-translate class="navbar-item" v-on:click="logout()">Log out</a>
</div>
</div>
<div class="navbar-item" v-else>
<div class="buttons">
<router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
<strong v-translate>Sign up</strong>
2019-04-26 13:22:16 +00:00
</router-link>
<router-link class="button is-primary" :to="{ name: 'Login' }" v-translate>Log in</router-link>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
<script lang="ts">
2019-08-13 06:43:37 +00:00
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 { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
2019-08-13 06:43:37 +00:00
import Logo from '@/components/Logo.vue';
import SearchField from '@/components/SearchField.vue';
2019-09-02 08:50:00 +00:00
import { ActorRouteName } from '@/router/actor';
import { AdminRouteName } from '@/router/admin';
import { RouteName } from '@/router';
2019-08-12 14:04:16 +00:00
2019-08-13 06:43:37 +00:00
@Component({
2018-12-21 16:10:39 +00:00
apollo: {
2019-01-18 13:47:10 +00:00
currentUser: {
query: CURRENT_USER_CLIENT,
},
config: {
query: CONFIG,
},
},
components: {
Logo,
SearchField,
},
2018-12-21 16:10:39 +00:00
})
export default class NavBar extends Vue {
notifications = [
{ header: 'Coucou' },
2019-08-13 06:43:37 +00:00
{ title: 'T\'as une notification', subtitle: 'Et elle est cool' },
2018-12-21 16:10:39 +00:00
];
loggedPerson: IPerson | null = null;
config!: IConfig;
currentUser!: ICurrentUser;
ICurrentUserRole = ICurrentUserRole;
showNavbar: boolean = false;
2019-09-02 08:50:00 +00:00
ActorRouteName = ActorRouteName;
AdminRouteName = AdminRouteName;
2019-09-02 08:50:00 +00:00
@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;
}
}
async logout() {
2019-08-12 14:04:16 +00:00
await logout(this.$apollo.provider.defaultClient);
if (this.$route.name === RouteName.HOME) return;
return this.$router.push({ name: RouteName.HOME });
2019-01-18 13:47:10 +00:00
}
2018-12-21 16:10:39 +00:00
}
</script>
<style lang="scss" scoped>
2019-08-13 06:43:37 +00:00
@import "../variables.scss";
2019-08-13 06:43:37 +00:00
nav {
border-bottom: solid 1px #0a0a0a;
2019-08-13 06:43:37 +00:00
.navbar-item img {
max-height: 2.5em;
}
2019-08-13 06:43:37 +00:00
}
</style>