You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.6 KiB
135 lines
3.6 KiB
<template>
|
|
<v-card dark class="pa-5" max-width="600px">
|
|
<v-card-title class="text-h3 mb-1">
|
|
{{this.item.name}}
|
|
</v-card-title>
|
|
<v-card-subtitle>
|
|
Size: {{this.item.size}}
|
|
<br/>
|
|
Unit: {{this.units[this.item.unit]}}
|
|
</v-card-subtitle>
|
|
|
|
<v-card-text>
|
|
<p>
|
|
{{this.item.description}}
|
|
</p>
|
|
<p>
|
|
Barcode: {{this.item.barcode}}
|
|
</p>
|
|
</v-card-text>
|
|
|
|
<v-list>
|
|
<v-subheader>LOCATIONS</v-subheader>
|
|
<v-list-item
|
|
v-for="location in locations"
|
|
:key="location.name + location.count"
|
|
>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{location.name}} - {{location.count}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
<v-btn fab dark small @click="addItem(item.id, location.id)">
|
|
<v-icon>mdi-plus</v-icon>
|
|
</v-btn>
|
|
<v-btn fab dark small @click="removeItem(item.id, location.id)">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { API } from '../utils/api_common';
|
|
|
|
export default {
|
|
name: "ItemCard",
|
|
props: ["item"],
|
|
data: () => ({
|
|
units: [
|
|
"Teaspoon",
|
|
"Tablespoon",
|
|
"Cup",
|
|
"Ounce",
|
|
"Gram",
|
|
"Pound",
|
|
"Individual",
|
|
],
|
|
locations: [],
|
|
}),
|
|
created() {
|
|
this.getLocations()
|
|
},
|
|
methods: {
|
|
async getLocations() {
|
|
let response = await API.get("api/v1/items/" + this.item.id + "/getLocationCount",
|
|
{
|
|
headers: {
|
|
Authorization: localStorage.getItem("token"),
|
|
}
|
|
}
|
|
)
|
|
if (response.status == 200) {
|
|
let locs = []
|
|
for (const locID in response.data) {
|
|
let count = response.data[locID]
|
|
let locResp = await API.get("api/v1/locations/" + locID,
|
|
{
|
|
headers: {
|
|
Authorization: localStorage.getItem("token"),
|
|
}
|
|
}
|
|
)
|
|
if (locResp.status == 200) {
|
|
locs.push({
|
|
id: locResp.data.id,
|
|
name: locResp.data.name,
|
|
count: count,
|
|
})
|
|
}
|
|
}
|
|
locs.sort(function(a,b) {
|
|
if (a.name < b.name) {
|
|
return -1
|
|
} else if (a.name > b.name) {
|
|
return 1
|
|
}
|
|
return 0
|
|
})
|
|
|
|
this.locations = locs
|
|
}
|
|
},
|
|
addItem(id, loc) {
|
|
API
|
|
.post("api/v1/locations/" + loc + "/addItem/" + id, {},
|
|
{
|
|
headers: {
|
|
Authorization: localStorage.getItem("token"),
|
|
}
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.status == 201) {
|
|
this.getLocations()
|
|
}
|
|
})
|
|
},
|
|
removeItem(id, loc) {
|
|
API
|
|
.post("api/v1/locations/" + loc + "/removeItem/" + id, {},
|
|
{
|
|
headers: {
|
|
Authorization: localStorage.getItem("token"),
|
|
}
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.status == 201) {
|
|
this.getLocations()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|