79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<md-toolbar class="md-transparent" md-elevation="0">
|
|
<span class="md-title">VideON</span>
|
|
</md-toolbar>
|
|
|
|
<md-list>
|
|
|
|
|
|
<md-subheader>You</md-subheader>
|
|
|
|
<md-list-item>
|
|
<md-avatar class="md-avatar-icon">{{ avatarText }}</md-avatar>
|
|
<span class="md-list-item-text">{{ $store.state.auth.name }}</span>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-button class="md-raised md-accent" @click="performLogout">Logout</md-button>
|
|
</md-list-item>
|
|
|
|
|
|
<md-subheader>Pending tasks</md-subheader>
|
|
|
|
<md-list-item>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Creations:</th>
|
|
<td>{{ pendingChanges.created.length }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Updates:</th>
|
|
<td>{{ pendingChanges.updated.length }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Deletions:</th>
|
|
<td>{{ pendingChanges.deleted.length }}</td>
|
|
</tr>
|
|
</table>
|
|
</md-list-item>
|
|
|
|
</md-list>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "WorkspaceDrawerContent",
|
|
props: {
|
|
pendingChanges: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
created: [],
|
|
updated: [],
|
|
deleted: []
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
performLogout() {
|
|
this.$store.dispatch("auth/performLogout").then(() => {
|
|
this.$router.push({name: "Welcome"})
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
avatarText() {
|
|
return this.$store.state.auth.name.slice(0, 2);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |