101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<TitleBar />
|
|
<v-navigation-drawer mini-variant expand-on-hover app clipped permanent overflow>
|
|
<v-list>
|
|
<v-list-item class="title" link @click="setActiveUser(activeUser)">
|
|
<v-list-item-icon>
|
|
<v-icon>home</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-title>Gesamtübersicht</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
<v-divider />
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="user in users"
|
|
v-bind:key="users.indexOf(user)"
|
|
:class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''"
|
|
link
|
|
@click="setActiveUser(user)"
|
|
>
|
|
<v-list-item-title>{{user.lastname}}, {{user.firstname}}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
<template v-slot:append>
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-item-icon>
|
|
<v-icon>search</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-title>
|
|
<v-autocomplete
|
|
outlined
|
|
return-object
|
|
v-model="user"
|
|
style="margin-top: 3px"
|
|
placeholder="Suche Person"
|
|
:items="allUsers"
|
|
item-text="fullName"
|
|
prepend-inner-icon="search"
|
|
full-width
|
|
/>
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-icon>
|
|
<v-icon>person_add</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-title>
|
|
<v-btn text block @click="addUser(user)">Hinzufügen</v-btn>
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
<v-content v-if="!activeUser.username">
|
|
<Overview />
|
|
</v-content>
|
|
<v-content v-else>
|
|
<User />
|
|
</v-content>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TitleBar from '@/components/TitleBar'
|
|
import Overview from '../components/finanzer/Overview'
|
|
import User from '../components/finanzer/User'
|
|
// eslint-disable-next-line no-unused-vars
|
|
import { mapGetters } from 'vuex'
|
|
import { mapActions } from 'vuex'
|
|
|
|
export default {
|
|
name: 'FinanzerView',
|
|
components: { User, Overview, TitleBar },
|
|
created() {
|
|
this.getAllUsers()
|
|
this.getUsers()
|
|
},
|
|
data() {
|
|
return {
|
|
user: null
|
|
}
|
|
},
|
|
methods: mapActions({
|
|
getAllUsers: 'finanzerUsers/getAllUsers',
|
|
setActiveUser: 'finanzerUsers/setActiveUser',
|
|
getUsers: 'finanzerUsers/getUsers',
|
|
finanzerUsers: 'finanzerUsers/addUser'
|
|
}),
|
|
computed: mapGetters({
|
|
users: 'finanzerUsers/users',
|
|
activeUser: 'finanzerUsers/activeUser',
|
|
allUsers: 'finanzerUsers/allUsers'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|