mobilizon/js/src/App.vue

124 lines
2.8 KiB
Vue
Raw Normal View History

<template>
<div id="mobilizon">
<NavBar></NavBar>
<main class="container">
<router-view></router-view>
</main>
<footer class="footer">
<div class="content has-text-centered">
<span
v-translate="{
date: new Date().getFullYear(),
}"
>© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks</span>
</div>
</footer>
</div>
</template>
<script lang="ts">
2018-12-21 16:10:39 +00:00
import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator';
2019-01-18 13:47:10 +00:00
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_EMAIL, AUTH_USER_ID } from '@/constants';
import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
import { ICurrentUser } from '@/types/current-user.model';
2018-12-21 16:10:39 +00:00
@Component({
2019-01-18 13:47:10 +00:00
apollo: {
currentUser: {
query: CURRENT_USER_CLIENT,
},
2019-01-18 13:47:10 +00:00
},
2018-12-21 16:10:39 +00:00
components: {
NavBar,
},
2018-12-21 16:10:39 +00:00
})
export default class App extends Vue {
drawer = false;
fab = false;
items = [
{
icon: 'poll',
text: 'Events',
route: 'EventList',
role: null,
2018-12-21 16:10:39 +00:00
},
{
icon: 'group',
text: 'Groups',
route: 'GroupList',
role: null,
2018-12-21 16:10:39 +00:00
},
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
{ icon: 'help', text: 'Help', role: null },
{ icon: 'phonelink', text: 'App downloads', role: null },
2018-12-21 16:10:39 +00:00
];
error = {
timeout: 3000,
show: false,
text: '',
2018-12-21 16:10:39 +00:00
};
2019-01-18 13:47:10 +00:00
currentUser!: ICurrentUser;
2018-12-21 16:10:39 +00:00
actor = localStorage.getItem(AUTH_USER_ACTOR);
2019-01-18 13:47:10 +00:00
mounted () {
this.initializeCurrentUser();
2019-01-18 13:47:10 +00:00
}
2018-12-21 16:10:39 +00:00
get displayed_name () {
// FIXME: load actor
return 'no implemented';
2018-12-21 16:10:39 +00:00
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name
}
showMenuItem(elem) {
2018-12-21 16:10:39 +00:00
// FIXME: load actor
return false;
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
}
getUser (): ICurrentUser|false {
2019-01-18 13:47:10 +00:00
return this.currentUser.id ? this.currentUser : false;
}
toggleDrawer() {
2018-12-21 16:10:39 +00:00
this.drawer = !this.drawer;
}
2019-01-18 13:47:10 +00:00
private initializeCurrentUser() {
const userId = localStorage.getItem(AUTH_USER_ID);
const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
const token = localStorage.getItem(AUTH_TOKEN);
if (userId && userEmail && token) {
return this.$apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT,
variables: {
id: userId,
email: userEmail,
},
});
}
}
2018-12-21 16:10:39 +00:00
}
</script>
<style>
.router-enter-active,
.router-leave-active {
transition-property: opacity;
transition-duration: 0.25s;
}
.router-enter-active {
transition-delay: 0.25s;
}
.router-enter,
.router-leave-active {
opacity: 0;
}
</style>