ouatterrir-app/src/components/block/UserTools.vue

<script>

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiAccount } from '@mdi/js';
import { mdiLogout } from '@mdi/js';
import { mdiCogOutline } from '@mdi/js';


import { mapState } from 'pinia'
import { UserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = UserStore()

    return { userStore }
  },
  data() {
    return {
      account_path: mdiAccount,
      cogoutline_path: mdiCogOutline,
      logout_path: mdiLogout
    }
  },
  computed: {
    ...mapState(UserStore,['isloggedin', 'isAdmin', 'mail', 'name', 'uid'])
  },
  methods: {
    // ...mapActions({
    //   userLogout: 'User/userLogout'
    // }),
    onLogout () {
      console.log('UserTools onLogout')
      this.userStore.userLogout().then(() => {
        console.log('UserTools user logged-out then')
      })
    }
  },
  components: {
    SvgIcon
  }
}
</script>

<template>
  <div id="user-tools">
    <a class="mdi mdi-account" :href="'/api/user/'+uid+'/edit'">
      <svg-icon type="mdi" :path="account_path"></svg-icon>
      <span>{{ name }}</span>
      <!-- <span v-else>{{ mail }}</span> -->
    </a><br/>
    <a
      v-if="isAdmin"
      class="api" 
      href="/api/admin/content/concernements">
      <svg-icon type="mdi" :path="cogoutline_path"></svg-icon>
      <span>API</span>
    </a><br/>
    <a href="/user/logout"
      @click.prevent="onLogout()"
      class="mdi mdi-logout"
      title="logout"
    >
      <svg-icon type="mdi" :path="logout_path"></svg-icon>
    </a>
  </div>
</template>


<style lang="scss" scoped>
  #user-tools{
    display: flex;
    flex-direction: row;
    gap: 0em;
    a{
      padding: $pad_btn;
      svg{
        height:0.8em;
      }
    }
  }
</style>