cubash-archive/frontend/src/components/TeamIcon.vue

<template>
  <info-tooltip class='avatar_icon' :noEvents='user === null'>

    <template slot='content'>

      <template v-if='userData'>
        <div class='avatar_icon__header'>
          <figure class="avatar_icon__icon--small picture_circle">
            <img
              :src = userPicture
            >
          </figure>&nbsp;
          <div class='avatar_icon__header_info'>
						<span class='avatar_icon__username' @click.stop='goToUser'>
							{{proxyUser.username}}
						</span>
            <span class='avatar_icon__date'>Created: {{proxyUser.createdAt | formatDate('date') }}</span>
          </div>
        </div>
        <div class='avatar_icon__description' v-if='proxyUser.description'>
          {{proxyUser.description | stripTags | truncate(30)}}
        </div>
      </template>

      <template v-else>Loading...</template>
    </template>
    <figure
      slot="display"
      class='avatar_icon__icon picture_circle'
      :class='{
				"avatar_icon__icon--small": size === "small",
				"avatar_icon__icon--tiny": size === "tiny"
			}'
      @click.stop="goToUser">
      <img
        :src = userPicture
      >
    </figure>
  </info-tooltip>
</template>

<script>
import InfoTooltip from './InfoTooltip'
import AjaxErrorHandler from '../assets/js/errorHandler'

export default {
  name: 'AvatarIcon',
  props: ['user', 'size'],
  components: { InfoTooltip },
  data () {
    return {
      userData: null
    }
  },
  computed: {
    //So that you never access a null variable
    proxyUser () {
      if(this.userData) {
        //Data loaded via api
        return this.userData;
      } else if (this.user) {
        //Data provided as a prop
        return this.user;
      }

      return {};
    },
    letter () {
      if(this.proxyUser.username && !this.proxyUser.picture) {
        return this.proxyUser.username[0].toUpperCase();
      } else {
        return '';
      }
    },
    userPicture () {
      if(this.user && this.user.approved && !this.user.banned && this.user.picture !== 'default') {
        return this.user.picture
      } else if(this.user && this.user.banned) {
        return "https://cdn.kaverti.com/teams/unknown-light.png"
      } else if(this.user && !this.user.banned && !this.user.approved && this.$store.state.theme === 'light') {
        return "https://cdn.kaverti.com/teams/pending-light.png"
      } else if(this.user && !this.user.banned && !this.user.approved && this.$store.state.theme === 'dark') {
        return "https://cdn.kaverti.com/teams/pending-dark.png"
      } else if(this.user && !this.user.banned && !this.user.approved) {
        return "https://cdn.kaverti.com/teams/pending-light.png"
      } else {
        return "https://cdn.kaverti.com/teams/unknown-light.png"
      }
    }
  },
  methods: {
    loadUser () {
      //If user is already loaded or no user provided as a prop
      if(this.userData || this.user === null) return;

      this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/view/' + this.proxyUser.username)
        .then((res) => {
          this.userData = res.data;
        })
        .catch(AjaxErrorHandler(this.$store));
    },
    goToUser () {
      if(this.user === null) return;

      this.$router.push('/user/' + this.user.username)
    }
  },
  mounted() { this.loadUser(); }
}
</script>

<style lang='scss'>
@import '../assets/scss/variables.scss';

.avatar_icon {
  @at-root #{&}__icon {
    font-size: 0.7rem;
    margin-right: 0.25rem;
    color: rgba(0, 0, 0, 0.87);
  }

  @at-root #{&}__header {
    display: flex;
    align-items: center;
  }

  @at-root #{&}__icon {
    height: 3rem;
    width: 3rem;
    line-height: 3rem;
    cursor: pointer;
    @include text($font--role-emphasis, 2rem);
    text-align: center;
    border-radius: 100%;
    color: #fff;

    @at-root #{&}--small {
      height: 3rem;
      width: 3rem;
      font-size: 1.75rem;
      line-height: 2.5rem;
    }
    @at-root #{&}--tiny {
      height: 1.5rem;
      width: 1.5rem;
      font-size: 1rem;
      line-height: 1.5rem;
    }
  }
  @at-root #{&}__header_info {
    display: flex;
    flex-direction: column;
    height: 2.5rem;
  }
  @at-root #{&}__username {
    cursor: pointer;
  }
  @at-root #{&}__date {
    color: $color__darkgray--primary;
    font-size: 0.9rem;
  }
  @at-root #{&}__description {
    margin-top: 0.25rem;
    font-size: 0.9rem;
  }
}
</style>