UserTools.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template lang="html">
  2. <div id="user-tools">
  3. <h4
  4. class="mdi mdi-account"
  5. >{{ mail }}</h4>
  6. <a href="/admin/content/materials"
  7. v-if="isAdmin"
  8. class="mdi mdi-settings"
  9. title="admin"
  10. ></a>
  11. <a href="/user/logout"
  12. @click.prevent="onLogout()"
  13. class="mdi mdi-logout"
  14. title="logout"
  15. ></a>
  16. <UserFlags/>
  17. </div>
  18. </template>
  19. <script>
  20. import { mapState, mapActions } from 'vuex'
  21. import UserFlags from 'vuejs/components/User/UserFlags'
  22. export default {
  23. components: {
  24. UserFlags
  25. },
  26. // data () {
  27. // return {
  28. // mail: "Hello User!"
  29. // }
  30. // },
  31. computed: {
  32. ...mapState({
  33. mail: state => state.User.mail,
  34. isAdmin: state => state.User.isAdmin,
  35. flags: state => state.User.flags
  36. })
  37. },
  38. methods: {
  39. ...mapActions({
  40. userLogout: 'User/userLogout'
  41. }),
  42. onLogout () {
  43. console.log("UserTools onLogout")
  44. this.userLogout()
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="css" scoped>
  50. #user-tools{
  51. margin-right:0.5em;
  52. /* padding-right:0.5em; */
  53. /* border-right:1px solid #222; */
  54. }
  55. h4{
  56. margin:0;
  57. display:inline-block;
  58. font-size:inherited;
  59. }
  60. </style>