summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-24 04:50:17 +0100
committerJannik Schönartz2019-02-24 04:50:17 +0100
commit364d2b8ac1fb817d3f97a4c5ba363c02746d40ad (patch)
tree7b0a06e8f088fbc69a4214d30a8fd57621174c50 /webapp
parenteslint fix (diff)
downloadbas-364d2b8ac1fb817d3f97a4c5ba363c02746d40ad.tar.gz
bas-364d2b8ac1fb817d3f97a4c5ba363c02746d40ad.tar.xz
bas-364d2b8ac1fb817d3f97a4c5ba363c02746d40ad.zip
[webapp/dashboard] Add username to the topbar & put fullname in the global store
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/AccountModule.vue4
-rw-r--r--webapp/src/components/DashboardPage.vue25
-rw-r--r--webapp/src/store/global.js9
3 files changed, 28 insertions, 10 deletions
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index 0b3839b..31185a5 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -249,7 +249,7 @@
</template>
<script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
export default {
name: 'AccountPage',
data () {
@@ -288,6 +288,7 @@ export default {
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor'])
},
methods: {
+ ...mapMutations(['setUserFullName']),
deleteAccount () {
this.dialog = false
this.$http.delete('/api/users/current').then(response => {
@@ -345,6 +346,7 @@ export default {
getUserData () {
this.$http('/api/users/current').then(response => {
this.user = response.data
+ this.setUserFullName(this.user.name)
})
},
newAlert () {
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 2659d13..bfe156f 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -70,7 +70,12 @@
<v-toolbar-items>
<v-menu offset-y attach>
<v-btn class="user-button" flat slot="activator">
- <v-icon left>account_circle</v-icon>{{ userFullName }}
+ <v-icon left>account_circle</v-icon>
+ <v-flex>
+ {{ userFullName }}
+ <v-spacer></v-spacer>
+ <v-subheader class="user-subheader">{{ userName }}</v-subheader>
+ </v-flex>
</v-btn>
<v-list>
<v-list-tile to="/dashboard/account" active-class="">
@@ -99,7 +104,7 @@
</template>
<script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapMutations, mapGetters } from 'vuex'
import NotificationsAlerts from '@/components/NotificationsAlerts'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
import AccountModule from '@/components/AccountModule'
@@ -126,12 +131,13 @@ export default {
drawerTranslateX: 0,
drawerMini: localStorage.getItem('drawerMini') === 'true',
drawerOpen: localStorage.getItem('drawerOpen') !== 'false',
- userFullName: '',
- clientCount: 0
+ clientCount: 0,
+ userName: ''
}
},
computed: {
...mapState(['settings']),
+ ...mapGetters(['userFullName']),
mini () { return this.settings.mini },
desktop () { return this.$vuetify.breakpoint.lgAndUp },
drawerDraggingStyle () {
@@ -159,7 +165,7 @@ export default {
drawerOpen (value) { localStorage.setItem('drawerOpen', value) }
},
methods: {
- ...mapMutations(['setLoginRedirect']),
+ ...mapMutations(['setLoginRedirect', 'setUserFullName']),
toggleDrawer () {
if (this.settings.mini && this.desktop) this.drawerMini = !this.drawerMini
else this.drawerOpen = !this.drawerOpen
@@ -199,7 +205,8 @@ export default {
created () {
if (this.settings.mini && this.desktop) this.drawerOpen = true
this.$http('/api/users/current').then(response => {
- this.userFullName = response.data.name
+ this.setUserFullName(response.data.name)
+ this.userName = response.data.username
})
}
}
@@ -258,4 +265,10 @@ export default {
margin-right: 8px;
}
+.user-subheader {
+ height: unset;
+ justify-content: center;
+ font-size: 8pt;
+}
+
</style>
diff --git a/webapp/src/store/global.js b/webapp/src/store/global.js
index 3277cea..2a564e4 100644
--- a/webapp/src/store/global.js
+++ b/webapp/src/store/global.js
@@ -19,15 +19,18 @@ export default {
clipped: loadSetting('clipped', true),
mini: loadSetting('mini', true)
},
- loginRedirect: null
+ loginRedirect: null,
+ userFullName: 'unnamed'
},
getters: {
tabsDark: state => state.settings.dark || state.settings.coloredTabs,
tabsColor: state => state.settings.coloredTabs ? 'primary' : '',
- tabsSliderColor: state => state.settings.coloredTabs ? 'white' : 'primary'
+ tabsSliderColor: state => state.settings.coloredTabs ? 'white' : 'primary',
+ userFullName: state => state.userFullName
},
mutations: {
setLoginRedirect: (state, value) => { state.loginRedirect = value },
- saveSetting (state, { name, value }) { if (name in state.settings) state.settings[name] = value; localStorage.setItem('settings.' + name, value) }
+ saveSetting (state, { name, value }) { if (name in state.settings) state.settings[name] = value; localStorage.setItem('settings.' + name, value) },
+ setUserFullName: (state, value) => { state.userFullName = value }
}
}