mobilizon.chapril.org-mobil.../js/src/components/NavBar.vue

140 lines
3.6 KiB
Vue
Raw Normal View History

<template>
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<router-link class="navbar-item" :to="{ name: 'Home' }">Mobilizon</router-link>
2019-01-18 14:47:10 +01:00
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<router-link class="button is-primary" v-if="!currentUser.id" :to="{ name: 'Register' }">
<strong>
<translate>Sign up</translate>
</strong>
</router-link>
<router-link class="button is-light" v-if="!currentUser.id" :to="{ name: 'Login' }">
<translate>Log in</translate>
</router-link>
<router-link
class="button is-light"
v-if="currentUser.id && loggedPerson"
:to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
>
<figure class="image is-24x24">
<img :src="loggedPerson.avatarUrl">
</figure>
<span>{{ loggedPerson.preferredUsername }}</span>
</router-link>
</div>
</div>
</div>
</nav>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { SEARCH } from "@/graphql/search";
import { CURRENT_USER_CLIENT } from "@/graphql/user";
import { onLogout } from "@/vue-apollo";
import { deleteUserData } from "@/utils/auth";
import { LOGGED_PERSON } from "@/graphql/actor";
import { IActor, IPerson } from '@/types/actor.model';
2019-02-22 14:55:47 +01:00
import { RouteName } from '@/router'
@Component({
2018-12-21 17:10:39 +01:00
apollo: {
search: {
query: SEARCH,
variables() {
return {
searchText: this.searchText
2018-12-21 17:10:39 +01:00
};
},
2018-12-21 17:10:39 +01:00
skip() {
return !this.searchText;
}
2018-12-21 17:10:39 +01:00
},
2019-01-18 14:47:10 +01:00
currentUser: {
query: CURRENT_USER_CLIENT
},
loggedPerson: {
query: LOGGED_PERSON
2019-01-18 14:47:10 +01:00
}
}
2018-12-21 17:10:39 +01:00
})
export default class NavBar extends Vue {
notifications = [
{ header: "Coucou" },
{ title: "T'as une notification", subtitle: "Et elle est cool" }
2018-12-21 17:10:39 +01:00
];
model = null;
search: any[] = [];
searchText: string | null = null;
searchSelect = null;
loggedPerson!: IPerson;
2018-12-21 17:10:39 +01:00
get items() {
return this.search.map(searchEntry => {
switch (searchEntry.__typename) {
case "Actor":
searchEntry.label =
searchEntry.preferredUsername +
(searchEntry.domain === null ? "" : `@${searchEntry.domain}`);
2018-12-21 17:10:39 +01:00
break;
case "Event":
2018-12-21 17:10:39 +01:00
searchEntry.label = searchEntry.title;
break;
}
2018-12-21 17:10:39 +01:00
return searchEntry;
});
}
2019-02-22 14:55:47 +01:00
@Watch('model')
2018-12-21 17:10:39 +01:00
onModelChanged(val) {
switch (val.__typename) {
2019-02-22 14:55:47 +01:00
case 'Event':
this.$router.push({ name: RouteName.EVENT, params: { uuid: val.uuid } });
2018-12-21 17:10:39 +01:00
break;
2019-02-22 14:55:47 +01:00
case 'Actor':
this.$router.push({
2019-02-22 14:55:47 +01:00
name: RouteName.PROFILE,
params: { name: this.usernameWithDomain(val) },
});
2018-12-21 17:10:39 +01:00
break;
}
2018-12-21 17:10:39 +01:00
}
2019-02-22 14:55:47 +01:00
usernameWithDomain(actor: IActor) {
return (
actor.preferredUsername +
2019-02-22 14:55:47 +01:00
(actor.domain === null ? '' : `@${actor.domain}`)
);
2018-12-21 17:10:39 +01:00
}
2018-12-21 17:10:39 +01:00
enter() {
console.log("enter");
this.$apollo.queries["search"].refetch();
}
2019-01-18 14:47:10 +01:00
logout() {
2019-02-22 14:55:47 +01:00
alert('logout !');
2019-01-18 14:47:10 +01:00
deleteUserData();
return onLogout(this.$apollo);
}
2018-12-21 17:10:39 +01:00
}
</script>