Profile.vue 1.98 KB
Newer Older
1
<template>
Agate's avatar
Agate committed
2
  <div class="main pusher" v-title="labels.usernameProfile">
3 4 5
    <div v-if="isLoading" class="ui vertical segment">
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
Agate's avatar
Agate committed
6
    <template v-if="profile">
7 8
      <div :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']">
        <h2 class="ui center aligned icon header">
Agate's avatar
Agate committed
9 10
          <i v-if="!profile.avatar.square_crop" class="circular inverted user green icon"></i>
          <img class="ui big circular image" v-else :src="$store.getters['instance/absoluteUrl'](profile.avatar.square_crop)" />
11
          <div class="content">
Agate's avatar
Agate committed
12
            {{ profile.username }}
Agate's avatar
Agate committed
13
            <div class="sub header" v-translate="{date: signupDate}">Registered since %{ date }</div>
14 15
          </div>
        </h2>
Agate's avatar
Agate committed
16
        <div class="ui basic green label">
17
          <translate>This is you!</translate>
Agate's avatar
Agate committed
18
        </div>
Renon's avatar
Renon committed
19 20 21 22
        <a v-if="profile.is_staff"
          class="ui yellow label"
          :href="$store.getters['instance/absoluteUrl']('/api/admin')"
          target="_blank">
23
          <i class="star icon"></i>
24
          <translate>Staff member</translate>
Renon's avatar
Renon committed
25
        </a>
26 27 28 29 30 31
      </div>
    </template>
  </div>
</template>

<script>
Agate's avatar
Agate committed
32 33
import {mapState} from 'vuex'

34
const dateFormat = require('dateformat')
35 36 37 38

export default {
  props: ['username'],
  created () {
39
    this.$store.dispatch('auth/fetchProfile')
40 41
  },
  computed: {
Agate's avatar
Agate committed
42 43 44 45

    ...mapState({
      profile: state => state.auth.profile
    }),
Agate's avatar
Agate committed
46 47 48 49 50 51 52
    labels () {
      let msg = this.$gettext('%{ username }\'s profile')
      let usernameProfile = this.$gettextInterpolate(msg, {username: this.username})
      return {
        usernameProfile
      }
    },
53
    signupDate () {
Agate's avatar
Agate committed
54
      let d = new Date(this.profile.date_joined)
55 56 57
      return dateFormat(d, 'longDate')
    },
    isLoading () {
Agate's avatar
Agate committed
58
      return !this.profile
59 60 61 62 63 64 65
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
Agate's avatar
Agate committed
66 67 68
.ui.header > img.image {
  width: 8em;
}
69
</style>