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

Migration to typescript: first step

Browse Source 
Add vue cli typescript support
Rename .js to .ts
Use class and annotations in App and NavBar
Add tslint
This commit is contained in:
Chocobozzz
2018-12-21 15:41:34 +01:00
parent da817d35c4
commit b409a5583d
25 changed files with 712 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
js/src/App.vue
View File

@@ -14,15 +14,15 @@
>
<v-list-tile avatar v-if="actor" slot="activator">
<v-list-tile-avatar>
<img v-if="!actor.avatar"
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
<img v-else
class="img-circle elevation-7 mb-1"
:src="actor.avatar"
>
</v-list-tile-avatar>
<img v-if="!actor.avatar"
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
<img v-else
class="img-circle elevation-7 mb-1"
:src="actor.avatar"
>
</v-list-tile-avatar>
<v-list-tile-content @click="$router.push({name: 'Account', params: { name: actor.username }})">
<v-list-tile-title>{{ this.displayed_name }}</v-list-tile-title>
@@ -31,11 +31,11 @@
<v-list-tile avatar v-if="actor">
<v-list-tile-avatar>
<img
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
</v-list-tile-avatar>
<img
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Autre identité</v-list-tile-title>
@@ -44,8 +44,8 @@
<v-list-tile @click="$router.push({ name: 'Identities' })">
<v-list-tile-action>
<v-icon>group</v-icon>
</v-list-tile-action>
<v-icon>group</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Identities</v-list-tile-title>
</v-list-tile-content>
@@ -100,7 +100,7 @@
transition="scale-transition"
v-if="user"
>
<v-btn
<v-btn
slot="activator"
v-model="fab"
color="blue darken-2"
@@ -134,7 +134,8 @@
class="white--text"
v-translate="{
date: new Date().getFullYear(),
}">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
}">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a
href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
</span>
</v-footer>
<v-snackbar
@@ -148,75 +149,78 @@
</v-app>
</template>
<script>
import gql from 'graphql-tag';
import NavBar from '@/components/NavBar';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
<script lang="ts">
import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
export default {
name: 'app',
components: {
NavBar,
},
data() {
return {
drawer: false,
fab: false,
user: localStorage.getItem(AUTH_USER_ID),
items: [
{
icon: 'poll', text: 'Events', route: 'EventList', role: null,
},
{
icon: 'group', text: 'Groups', route: 'GroupList', role: null,
},
{
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
},
{ 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 },
],
error: {
timeout: 3000,
show: false,
text: '',
@Component({
components: {
NavBar
}
})
export default class App extends Vue {
drawer = false
fab = false
user = localStorage.getItem(AUTH_USER_ID)
items = [
{
icon: 'poll', text: 'Events', route: 'EventList', role: null
},
show_new_event_button: false,
actor: localStorage.getItem(AUTH_USER_ACTOR),
};
},
methods: {
showMenuItem(elem) {
return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true;
},
getUser() {
return this.user === undefined ? false : this.user;
},
toggleDrawer() {
this.drawer = !this.drawer;
},
},
computed: {
displayed_name() {
return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
},
},
};
{
icon: 'group', text: 'Groups', route: 'GroupList', role: null
},
{
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN'
},
{ 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 }
]
error = {
timeout: 3000,
show: false,
text: ''
}
show_new_event_button = false
actor = localStorage.getItem(AUTH_USER_ACTOR)
get displayed_name () {
// FIXME: load actor
return 'no implemented'
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name
}
showMenuItem (elem) {
// FIXME: load actor
return false
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
}
getUser () {
return this.user === undefined ? false : this.user
}
toggleDrawer () {
this.drawer = !this.drawer
}
}
</script>
<style>
.router-enter-active, .router-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.router-enter-active, .router-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.router-enter-active {
transition-delay: .25s;
}
.router-enter-active {
transition-delay: .25s;
}
.router-enter, .router-leave-active {
opacity: 0
}
.router-enter, .router-leave-active {
opacity: 0
}
</style>