github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/components/AccountButton.vue (about)

     1  <template>
     2    <v-menu left bottom offset-y>
     3      <template v-slot:activator="{ on, attrs }">
     4        <v-btn class="mr-5" v-bind="attrs" v-on="on" icon>
     5          <v-avatar size="36">
     6            <v-icon v-if="avatar===''">mdi-account</v-icon>
     7            <img :src="avatar" :alt="`${name}-avatar`" v-else />
     8          </v-avatar>
     9        </v-btn>
    10      </template>
    11      <v-list>
    12        <v-list-item v-for="(item, index) in actions" :key="index" dense @click="actionClick(item)">
    13          <v-list-item-icon>
    14            <v-icon>{{item.icon}}</v-icon>
    15          </v-list-item-icon>
    16          <v-list-item-title>{{ item.name }}</v-list-item-title>
    17        </v-list-item>
    18      </v-list>
    19    </v-menu>
    20  </template>
    21  
    22  <script lang="ts">
    23  import { Component } from 'vue-property-decorator';
    24  import Vue from '@/vue';
    25  
    26  type actionItem = {
    27    name: string;
    28    icon: string;
    29    to: string;
    30  };
    31  
    32  @Component({
    33    name: 'account-button'
    34  })
    35  export default class AccountButton extends Vue {
    36    get user(): User | undefined {
    37      return this.$store.state.user.current;
    38    }
    39  
    40    get avatar(): string {
    41      return this.user && this.user.avatar ? this.user.avatar : '';
    42    }
    43  
    44    get name(): string {
    45      return this.user && this.user.login ? this.user.login : 'user';
    46    }
    47  
    48    get actions(): actionItem[] {
    49      const items = [] as actionItem[];
    50      if (this.user) {
    51        items.push({
    52          name: 'Setting',
    53          icon: 'mdi-cog',
    54          to: '/user'
    55        });
    56        items.push({
    57          name: 'Logout',
    58          icon: 'mdi-logout',
    59          to: '/logoff'
    60        });
    61      } else {
    62        items.push({
    63          name: 'Login',
    64          icon: 'mdi-login',
    65          to: '/login'
    66        });
    67      }
    68      return items;
    69    }
    70  
    71    actionClick(item: actionItem) {
    72      if (item.name === 'Logout') {
    73        const base = this.$store.state.base;
    74        window.location.href = `${base}${item.to}`;
    75      } else {
    76        this.$router.push(item.to);
    77      }
    78    }
    79  }
    80  </script>