2017-11-29 13:51:51 +00:00
|
|
|
<template>
|
|
|
|
<div v-if="user.authenticated">
|
|
|
|
<h1>{{ item.title }}</h1>
|
|
|
|
|
|
|
|
<div class="ui info message" v-if="loading">
|
|
|
|
<icon name="refresh" spin></icon>
|
|
|
|
<span v-lang.general.loading></span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="!loading">
|
|
|
|
|
|
|
|
<router-link :to="{ name: 'item-edit', params: { id: itemID} }" class="ui teal labeled icon button" style="float: right;">
|
|
|
|
<i class="edit icon"></i>
|
|
|
|
<span v-lang.general.edit></span>
|
|
|
|
</router-link>
|
|
|
|
|
|
|
|
<list :infos="itemList"/>
|
2017-11-30 14:26:28 +00:00
|
|
|
<p class="grey">
|
|
|
|
<span v-lang.general.created="this.createdTime"></span><br/>
|
|
|
|
<span v-if="this.item.created !== this.item.updated" v-lang.general.lastEdit="this.editedTime"></span>
|
|
|
|
</p>
|
2017-11-29 13:51:51 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import auth from '../auth'
|
|
|
|
import {HTTP} from '../http-common'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Item',
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
user: auth.user,
|
|
|
|
item: {},
|
|
|
|
itemID: this.$route.params.id,
|
2017-11-30 14:26:28 +00:00
|
|
|
itemList: [],
|
|
|
|
createdTime: {
|
|
|
|
date: '',
|
|
|
|
time: ''
|
|
|
|
},
|
|
|
|
editedTime: {
|
|
|
|
date: '',
|
|
|
|
time: ''
|
|
|
|
}
|
2017-11-29 13:51:51 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.loadItem()
|
2017-12-05 14:55:56 +00:00
|
|
|
|
|
|
|
// Set the title
|
|
|
|
document.title = this.translate('nav').items
|
2017-11-29 13:51:51 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
// call again the method if the route changes
|
|
|
|
'$route': 'loadItem'
|
|
|
|
},
|
2017-12-05 14:55:56 +00:00
|
|
|
computed: {
|
|
|
|
langGeneral () {
|
|
|
|
return this.translate('general')
|
|
|
|
}
|
|
|
|
},
|
2017-11-29 13:51:51 +00:00
|
|
|
methods: {
|
|
|
|
loadItem () {
|
|
|
|
this.loading = true
|
|
|
|
this.item = {}
|
|
|
|
HTTP.get(`items/` + this.itemID)
|
|
|
|
.then(response => {
|
|
|
|
this.item = response.data
|
|
|
|
|
|
|
|
// Make a list
|
|
|
|
this.itemList = [
|
|
|
|
{
|
|
|
|
header: this.translate('items').gridColumns.title,
|
|
|
|
content: this.item.title
|
|
|
|
},
|
|
|
|
{
|
|
|
|
header: this.translate('items').gridColumns.price,
|
|
|
|
content: this.item.price
|
|
|
|
},
|
|
|
|
{
|
|
|
|
header: this.translate('items').description,
|
|
|
|
content: this.item.description
|
|
|
|
},
|
|
|
|
{
|
|
|
|
header: this.translate('items').gridColumns.quantity,
|
|
|
|
content: this.item.quantity
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2017-11-30 14:26:28 +00:00
|
|
|
// Beautify the date
|
|
|
|
let c = new Date(this.item.created * 1000)
|
|
|
|
// c.setSeconds()
|
|
|
|
this.createdTime = {
|
|
|
|
date: ('0' + c.getDate()).slice(-2) + '.' + ('0' + (c.getMonth() + 1)).slice(-2) + '.' + c.getFullYear(),
|
|
|
|
time: ('0' + c.getHours()).slice(-2) + ':' + ('0' + c.getMinutes()).slice(-2)
|
|
|
|
}
|
|
|
|
|
|
|
|
let e = new Date(this.item.updated * 1000)
|
|
|
|
// e.setSeconds()
|
|
|
|
this.editedTime = {
|
|
|
|
date: ('0' + e.getDate()).slice(-2) + '.' + ('0' + (e.getMonth() + 1)).slice(-2) + '.' + e.getFullYear(),
|
|
|
|
time: ('0' + e.getHours()).slice(-2) + ':' + ('0' + e.getMinutes()).slice(-2)
|
|
|
|
}
|
|
|
|
|
2017-12-05 14:55:56 +00:00
|
|
|
// Set the title
|
|
|
|
document.title = this.item.title + ' | ' + this.translate('nav').items
|
|
|
|
|
2017-11-29 13:51:51 +00:00
|
|
|
this.loading = false
|
|
|
|
})
|
|
|
|
.catch(e => {
|
|
|
|
this.loading = false
|
|
|
|
// Build the notification text from error response
|
|
|
|
let err = e.message
|
2017-12-07 09:45:33 +00:00
|
|
|
if (e.response.data.message) {
|
|
|
|
err += '<br/>' + e.response.data.message
|
2017-11-29 13:51:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Fire a notification
|
|
|
|
this.$notify({
|
|
|
|
type: 'error',
|
|
|
|
title: this.translate('general').error,
|
|
|
|
text: err
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|