137 lines
5.3 KiB
Vue
137 lines
5.3 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="owner" class="form-label">Owner</label>
|
|
{{ item.owner || item.owner_group }}
|
|
</div>
|
|
<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" v-if="canEdit">
|
|
<button class="btn btn-primary" @click="$router.push(`/inventory/${handle}/${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 v-if="canPrint" class="btn btn-secondary"
|
|
@click="$router.push({path: '/print', query: {kind: 'item', userHandle: decodedHandle, id}})">
|
|
<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";
|
|
import {decodeHandleFromUrl} from "@/router";
|
|
|
|
export default {
|
|
name: "InventoryDetail",
|
|
components: {
|
|
AuthenticatedImage,
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
props: {
|
|
handle: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
item: {}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["getNameFromHandle", "groupIdByHandle"]),
|
|
...mapState(["user"]),
|
|
decodedHandle() {
|
|
return decodeHandleFromUrl(this.handle)
|
|
},
|
|
// Edit/Delete apply once the viewer is actually authorized to act on this item - their
|
|
// own item, or a group they belong to - not just anyone who can view it
|
|
// (get_shared_item's friends_or_self() also lets a friend view a shared item, but never
|
|
// act on it).
|
|
canEdit() {
|
|
return this.decodedHandle === this.user || this.decodedHandle in this.groupIdByHandle
|
|
},
|
|
// Printed labels only support a personal owner handle so far (see label.js's
|
|
// splitUserHandle/Inventory.vue's printLinkFor) - group items don't get a print link
|
|
// until that's supported too.
|
|
canPrint() {
|
|
return this.decodedHandle === this.user
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(["fetchItemByHandle", "deleteInventoryItem"]),
|
|
async loadItem() {
|
|
this.item = await this.fetchItemByHandle({handle: this.decodedHandle, id: this.id}) || {}
|
|
}
|
|
},
|
|
watch: {
|
|
handle: 'loadItem',
|
|
id: 'loadItem'
|
|
},
|
|
mounted() {
|
|
this.loadItem()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
width: 190px;
|
|
height: 107px;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|