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>