flaschengeist-frontend/src/views/MainView.vue

<template>
  <div>
    <v-navigation-drawer
      v-if="isLoggedIn"
      mini-variant
      expand-on-hover
      app
      clipped
      permanent
      overflow
    >
      <v-list>
        <v-list-item v-if="isExtern" class="title">
          <v-list-item-icon>
            <v-icon>{{person}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            {{user.firstname}} {{user.lastname}}
          </v-list-item-title>
        </v-list-item>
        <v-list-item :disabled="lockedBar" v-if="isUser" class="title" link :to="{name: 'add'}">
          <v-list-item-icon>
            <v-icon>{{person}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{user.firstname}} {{user.lastname}}</v-list-item-title>
        </v-list-item>
        <v-list-item v-if="isBar" class="title" link :to="{name: 'geruecht'}">
          <v-list-item-icon>
            <v-icon>{{glass_cocktail}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            Bar
          </v-list-item-title>
        </v-list-item>
        <v-list-item :disabled="lockedBar" v-if="isManagement" class="title" link :to="{name: 'serviceManagement', params: {year: new Date().getFullYear(), month: new Date().getMonth() + 1}}">
          <v-list-item-icon>
            <v-icon>{{king}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            Vorstand
          </v-list-item-title>
        </v-list-item>
        <v-list-item :disabled="lockedBar" v-if="isGastro" class="title" link :to="{name: 'gastroPricelist'}">
          <v-list-item-icon>
            <v-icon>{{gastro}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            Gastro
          </v-list-item-title>
        </v-list-item>
        <v-list-item :disabled="lockedBar" v-if="isFinanzer" class="title" link :to="{name: 'overview'}">
          <v-list-item-icon>
            <v-icon>{{attach_money}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Finanzer</v-list-item-title>
        </v-list-item>
      </v-list>
      <v-divider />
      <router-view name="nav" />
      <template v-slot:append>
        <v-list>
          <v-list-item>
            <v-list-item-icon>
              <v-icon>{{exit_to_app}}</v-icon>
            </v-list-item-icon>
            <v-list-item-title>
              <v-btn block text @click="logout">Logout</v-btn>
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </template>
    </v-navigation-drawer>
    <router-view />
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import {mdiAccount, mdiCurrencyEur, mdiExitToApp, mdiGlassCocktail, mdiChessKing, mdiFoodForkDrink} from '@mdi/js'
export default {
  name: 'MainView',
  data () {
    return {
      person: mdiAccount,
      attach_money: mdiCurrencyEur,
      exit_to_app: mdiExitToApp,
      glass_cocktail: mdiGlassCocktail,
      king: mdiChessKing,
      gastro: mdiFoodForkDrink
    }
  },
  components: {  },
  created() {
  },
  methods: {
    ...mapActions({
      logout: 'logout'
    })
  },
  computed: {
    ...mapGetters({
      group: 'group',
      isBar: 'isBar',
      isUser: 'isUser',
      isFinanzer: 'isFinanzer',
      isGastro: 'isGastro',
      isManagement: 'isManagement',
      isLoggedIn: 'isLoggedIn',
      isExtern: 'isExtern',
      user: 'user',
      lockedBar: 'barUsers/locked'
    })
  }
}
</script>

<style scoped></style>