flaschengeist-frontend/src/components/finanzer/FinanzerNavigation.vue

<template>
  <div>
    <v-list>
      <v-list-item class="title" link to="/main/finanzer/overview">
        <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-item link to="/main/finanzer/servicemanagement">
        <v-list-item-icon>
          <v-icon>{{work}}</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Dienstverwaltung</v-list-item-title>
      </v-list-item>
    </v-list>
    <v-divider />
    <v-list>
      <div v-for="user in users" v-bind:key="users.indexOf(user)">
        <v-list-item
          :to="{ name: 'activeUser', params: { id: user.username } }"
          link
        >
          <v-list-item-title
            >{{ user.lastname }}, {{ user.firstname }}</v-list-item-title
          >
        </v-list-item>
      </div>
      <v-list-item>
        <v-progress-circular indeterminate color="grey" v-if="loading" />
      </v-list-item>
    </v-list>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {mdiHome, mdiBriefcase} from '@mdi/js'
export default {
  name: 'FinanzerNavigation',
  data () {
    return {
      home: mdiHome,
      work: mdiBriefcase
    }
  },
  methods: {
    ...mapActions({
      addUser: 'finanzerUsers/addUser'
    })
  },
  computed: {
    ...mapGetters({
      users: 'finanzerUsers/users',
      allUsers: 'finanzerUsers/allUsers',
      loading: 'finanzerUsers/usersLoading'
    })
  }
}
</script>

<style scoped></style>