frontend/src/views/UserInventory.vue

53 lines
1.9 KiB
Vue

<template>
<main>
<div class="columns is-multiline">
<div class="column" v-if="!inventory.length">
<NoItems type="inventory items"></NoItems>
</div>
<div class="column is-4" v-for='(item) in inventory' :key='"item-" + item.id'>
<h1 class="subtitle">{{item.Item.name}}</h1>
<div class="box">
<img v-if="item.Item.approved" width="128px" height="128px" :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.Item.previewFile + '.png'">
<b-button class="is-info" v-if="!item.Item.offSale && !item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.Item.price}} Koins</b-button>
<b-button class="is-success" v-if="item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.Item.salePrice}} Koins <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
<b-button disabled v-if="item.Item.offSale">{{$t('user.inventoryTab.unavailable')}}</b-button>
</div>
</div>
</div>
</main>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import NoItems from "../components/NoItems"
export default {
name: 'UserInventory',
props: ['username'],
components: {
NoItems
},
data() {
return {
inventory: []
}
},
mounted() {
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?sort=username&order=desc&offset=234243&inventory=true`)
.then(res => {
this.inventory = res.data.Inventories
})
.catch(e => {
let invalidId = e.response.data.errors.find(error => {
return error.name === 'accountDoesNotExist'
})
if (invalidId) {
this.$store.commit('set404Page', true)
} else {
AjaxErrorHandler(this.$store)(e)
}
})
}
}
</script>