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-bind:users="users" v-bind:emailErrors="errorMails" @add:amount="addAmount" @add:credit="addCredit" @send:mails="sendMails"/>
            </v-content>
            <v-content v-else>
                <User v-bind:user="activeUser"
                      v-bind:emailError="errorMail"
                      @send:mail="sendMail"
                      @add:amount="addAmount" @add:credit="addCredit"
                      @do:lock="doLock" @save:config="saveConfig"/>
            </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', 'setActiveUser', 'getUsers', 'addAmount', 'addCredit', 'doLock', 'saveConfig', 'addUser', 'sendMails', 'sendMail']),
        computed: mapGetters(['allUsers', 'activeUser', 'users', 'errorMails', 'errorMail'])
    }
</script>

<style scoped>

</style>