flaschengeist-frontend/src/views/FinanzerView.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>