toolshed/frontend/src/views/InventoryDetail.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(ownerOverviewRoute(item)))">
                            <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, item: 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, ownerOverviewRoute} 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", "groupMemberships"]),
        decodedHandle() {
            return decodeHandleFromUrl(this.handle)
        },
        // Am I a member of this group, hosted here (groupIdByHandle, from idmap) or elsewhere
        // (groupMemberships - see GroupMembership/docs/design-in-progress/groups-mvp.md)? Either
        // way the backend actually hosting the group is what authorizes the write - this is just
        // enough of a client-side hint to show/hide the buttons for it.
        isGroupMember() {
            return this.decodedHandle in this.groupIdByHandle
                || this.groupMemberships.some(m => m.handle === this.decodedHandle)
        },
        // Edit/Delete require actual authorization (own item or member group), not just view
        // access - get_shared_item's friends_or_self() lets a friend view but never act.
        canEdit() {
            return this.decodedHandle === this.user || this.isGroupMember
        },
        canPrint() {
            return this.decodedHandle === this.user || this.isGroupMember
        }
    },
    methods: {
        ownerOverviewRoute,
        ...mapActions(["fetchItemByHandle", "deleteInventoryItem", "fetchGroupMemberships"]),
        async loadItem() {
            this.item = await this.fetchItemByHandle({handle: this.decodedHandle, id: this.id}) || {}
        }
    },
    watch: {
        handle: 'loadItem',
        id: 'loadItem'
    },
    mounted() {
        this.loadItem()
        if (this.decodedHandle.startsWith('#')) {
            this.fetchGroupMemberships()
        }
    }
}
</script>

<style scoped>
img {
    width: 190px;
    height: 107px;
    object-fit: contain;
}
</style>