flaschengeist-frontend/src/components/user/UserNavigation.vue

110 lines
2.5 KiB
Vue

<template>
<v-list>
<v-list-item link to="/main/user/add">
<v-list-item-icon>
<v-icon>{{ account }}</v-icon>
</v-list-item-icon>
<v-list-item-title>
Home
</v-list-item-title>
</v-list-item>
<v-list-item link :to="{ name: 'userOverview' }">
<v-list-item-icon>
<v-icon>{{ bank }}</v-icon>
</v-list-item-icon>
<v-list-item-title>Finanzübersicht</v-list-item-title>
</v-list-item>
<v-list-item
link
:to="{
name: 'userJobs',
params: {
year: new Date().getFullYear(),
month: new Date().getMonth() + 1
}
}"
>
<v-list-item-icon>
<v-icon>
{{ briefcase }}
</v-icon>
</v-list-item-icon>
<v-list-item-title>Dienstübersicht</v-list-item-title>
</v-list-item>
<v-list-item
link
:to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }"
>
<v-list-item-icon>
<v-badge overlap color="red" :content="news" :value="news !== 0">
<v-icon>
{{ switchAccount }}
</v-icon>
</v-badge>
</v-list-item-icon>
<v-list-item-title>Dienstanfragen</v-list-item-title>
</v-list-item>
<v-list-item link :to="{ name: 'userConfig' }">
<v-list-item-icon>
<v-icon>{{ account_card_details }}</v-icon>
</v-list-item-icon>
<v-list-item-title>Einstellung</v-list-item-title>
</v-list-item>
</v-list>
</template>
<script>
import {
mdiAccountCardDetails,
mdiHome,
mdiBank,
mdiBriefcase,
mdiAccountSwitch
} from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'UserNavigation',
data() {
return {
account_card_details: mdiAccountCardDetails,
account: mdiHome,
bank: mdiBank,
briefcase: mdiBriefcase,
switchAccount: mdiAccountSwitch
}
},
methods: {
...mapActions({
getJobInvites: 'jobInvites/getJobInvites',
getJobRequests: 'jobRequests/getJobRequests',
getUser: 'user/getUser'
})
},
computed: {
...mapGetters({
newsInvite: 'jobInvites/news',
newsRequest: 'jobRequests/news',
loading: 'user/loading'
}),
news() {
return this.newsInvite + this.newsRequest
}
},
created() {
this.getUser()
},
watch: {
loading(newValue) {
if (!newValue) {
this.getJobInvites()
this.getJobRequests()
}
}
}
}
</script>
<style scoped></style>