113 lines
No EOL
4.6 KiB
Vue
113 lines
No EOL
4.6 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<main class="content">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">{{ item.name }}</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
{{ item.description }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="tags" class="form-label">Tags</label>
|
|
<span class="badge bg-dark" v-for="(tag, index) in item.tags" :key="index">
|
|
{{ getNameFromHandle(tag) }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="property" class="form-label">Properties</label>
|
|
<span class="badge bg-dark" v-for="(property, index) in item.properties" :key="index">
|
|
{{ property.name }}={{ property.value }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="quantity" class="form-label">Quantity</label>
|
|
{{ item.owned_quantity }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="image" class="form-label">Image</label>
|
|
<div>
|
|
<authenticated-image v-for="file in item.files" :key="file.id" :src="file.name"
|
|
:owner="file.owner" class="img-thumbnail border-info"></authenticated-image>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<button class="btn btn-primary" @click="$router.push('/inventory/' + id + '/edit')">
|
|
<b-icon-pencil-square></b-icon-pencil-square>
|
|
Edit
|
|
</button>
|
|
<button type="submit" class="btn btn-danger"
|
|
@click="deleteInventoryItem(item).then(() => $router.push('/inventory'))">
|
|
<b-icon-trash></b-icon-trash>
|
|
Delete
|
|
</button>
|
|
<button class="btn btn-secondary"
|
|
@click="$router.push({path: '/print', query: {text: itemUrl}})">
|
|
<b-icon-printer></b-icon-printer>
|
|
Print label
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import * as BIcons from "bootstrap-icons-vue";
|
|
import BaseLayout from "@/components/BaseLayout.vue";
|
|
import {mapActions, mapGetters, mapState} from "vuex";
|
|
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
|
|
|
export default {
|
|
name: "InventoryDetail",
|
|
components: {
|
|
AuthenticatedImage,
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["loaded_items", "getNameFromHandle"]),
|
|
...mapState(["storage_locations", "user"]),
|
|
item() {
|
|
return this.loaded_items.find(item => item.id === parseInt(this.id)) || {}
|
|
},
|
|
location() {
|
|
return this.storage_locations.find(loc => loc.id === this.item.storage_location) || null
|
|
},
|
|
itemUrl() {
|
|
// The self-contained Item URL (see docs/design-in-progress/items-labels.md) - what
|
|
// a printed label actually encodes, since scanning it has to resolve the right
|
|
// frontend/backend/item with no other context, not just this browser's history.
|
|
return `${window.location.origin}/i/${this.user}/${this.id}`
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(["fetchInventoryItems", "deleteInventoryItem", "fetchFilesByItem", "fetchStorageLocations"]),
|
|
},
|
|
async mounted() {
|
|
await this.fetchInventoryItems()
|
|
await this.fetchStorageLocations()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
width: 190px;
|
|
height: 107px;
|
|
object-fit: contain;
|
|
}
|
|
</style> |