frontend/src/views/Avatar.vue

<template>
  <main>
    <div class="section">
      <div class="columns">
        <div class="column is-3 has-text-centered">
          <h1 class="title">{{$store.state.user.username}}</h1>
          <div class="box has-text-centered">
            <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'"><br>
            <b-button :loading="refreshAvatarLoading" class="is-info" @click="refresh()">{{$t('avatar.reRender')}}</b-button>
          </div>
        </div>
        <div class="column">
          <h1 class="title has-text-centered">{{name}} ({{count}})</h1>
          <div class="box">
            <div class="tabs is-centered">
              <ul>
                <router-link tag="li" :to="'/avatar/hats'" exact><a>{{ $t('avatar.hats') }}</a></router-link>
                <router-link tag="li" :to="'/avatar/faces'" exact><a>{{ $t('avatar.faces') }}</a></router-link>
                <router-link tag="li" :to="'/avatar/shirts'" exact><a>{{ $t('avatar.shirts') }}</a></router-link>
                <router-link tag="li" :to="'/avatar/pants'" exact><a>{{ $t('avatar.pants') }}</a></router-link>
                <router-link tag="li" :to="'/avatar/collections'" exact><a>{{ $t('avatar.collections') }}</a></router-link>
              </ul>
            </div>
            <div class="columns is-multiline">
              <div class="column is-4 has-text-centered" v-for='(item) in items' :key='"inventory-item-" + item.id'>
                <h1 class="subtitle">{{item.Item.name}}</h1>
                <div class="box">
                  <img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.Item.previewFile + '.png'">
                  <br>
                  <b-button>Apply</b-button>
                </div>
              </div>
              <div class="box" v-if="!items.length">
                <NoItems type="items"></NoItems>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";

export default {
  name: "Avatar",
  data() {
    return {
      name: 'Hats',
      loading: true,
      items: [],
      count: 0,
      coreCategory: 0,
      refreshAvatarLoading: false,
      user: []
    }
  },
  methods: {
    refresh() {
      this.refreshAvatarLoading = true
      this.axios
          .post(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'users/render/refresh')
          .then(() => {
            this.refreshAvatarLoading = false
          })
          .catch(e => {
            this.refreshAvatarLoading = false

            AjaxErrorHandler(this.$store)(e, error => {
              this.refreshAvatar.error = error.message
            })
          })
    },
    getItems() {
      this.loading = true;
      this.axios
          .get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'inventory/' + this.category)
          .then(res => {
            this.items = res.data.rows;
            this.count = res.data.count
            this.loading = false;
          })
          .catch(e => {
            AjaxErrorHandler(this.$store)(e);
            this.loading = false;
          });
    }
  },
  mounted() {
    this.loading = true
    this.items = []
    this.category = this.$route.params.category
    if(this.category === 'hats') {
      this.name = "Hats"
      this.coreCategory = 0
    } else if(this.category === 'shirts') {
      this.name = "Shirts"
      this.coreCategory = 1
    } else if(this.category === 'faces') {
      this.name = "Faces"
      this.coreCategory = 2
    } else if(this.category === 'pants') {
      this.name = "Pants"
      this.coreCategory = 3
    } else if(this.category === 'collections') {
      this.name = "Collections"
      this.coreCategory = 4
    } else {
      this.name = "Unknown"
      this.coreCategory = 0
    }
    this.getItems()
  },
  watch: {
    $route () {
      this.loading = true
      this.items = []
      this.category = this.$route.params.category
      if(this.category === 'hats') {
        this.name = "Hats"
        this.coreCategory = 0
      } else if(this.category === 'shirts') {
        this.name = "Shirts"
        this.coreCategory = 1
      } else if(this.category === 'faces') {
        this.name = "Faces"
        this.coreCategory = 2
      } else if(this.category === 'pants') {
        this.name = "Pants"
        this.coreCategory = 3
      } else if(this.category === 'collections') {
        this.name = "Collections"
        this.coreCategory = 4
      } else {
        this.name = "Unknown"
        this.coreCategory = 0
      }
      this.getItems()
    }
  },
}
</script>

<style scoped>

</style>