stash

frontend/src/router.js

@@ -13,7 +13,6 @@ import GroupDetail from '@/views/GroupDetail.vue';
 import Inventory from '@/views/Inventory.vue';
 import Search from '@/views/Search.vue';
 import InventoryDetail from '@/views/InventoryDetail.vue';
-import InventoryDetailForeign from '@/views/InventoryDetailForeign.vue';
 import InventoryNew from '@/views/InventoryNew.vue';
 import InventoryEdit from '@/views/InventoryEdit.vue';
 import StorageLocation from '@/views/StorageLocation.vue';
@@ -47,9 +46,18 @@ export function decodeHandleFromUrl(segment) {
     return segment.replace(/\+/g, "#");
 }
 
+// Both item-ish kinds land on the same /inventory/:handle/:id shape - only how they resolve
+// their owner's handle differs (a personal owner vs. a group, see identityHandleById/
+// groupHandleById in store.js), so that resolution is the only part that stays separate.
+function itemDetailRoute(handle, item_local_id) {
+    return handle ? `/inventory/${encodeHandleForUrl(handle)}/${item_local_id}` : null;
+}
+
 const EXPANDED_ROUTE_BUILDERS = {
-    item: ({item_local_id}) => `/inventory/${item_local_id}`,
+    item: ({owner_identity_id, item_local_id}) =>
-    group_item: ({item_local_id}) => `/inventory/${item_local_id}`,
+        itemDetailRoute(store.getters.identityHandleById[owner_identity_id], item_local_id),
+    group_item: ({owner_group_id, item_local_id}) =>
+        itemDetailRoute(store.getters.groupHandleById[owner_group_id], item_local_id),
     group: ({group_id}) => `/groups/${group_id}`,
     storage_location: ({storage_location_id}) => `/storage-locations/${storage_location_id}`,
     workflow: ({workflow_id}) => `/workflows/${workflow_id}`,
@@ -69,27 +77,24 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     component: Inventory,
     meta: {requiresAuth: true}
 }, {
-    path: '/inventory/:id',
+    path: '/inventory/:handle/:id',
     component: InventoryDetail,
     meta: {requiresAuth: true},
     props: true
 }, {
-    path: '/inventory/:id/edit',
+    path: '/inventory/:handle/:id/edit',
     component: InventoryEdit,
     meta: {requiresAuth: true},
     props: true
 }, {
-    path: '/inventory/shared/:user/:id',
+    // The self-contained label/short-link entry point (see label.js's LABEL_CONTENT_BUILDERS
-    component: InventoryDetailForeign,
+    // and docs/design-in-progress/items-labels.md) - :handle is already URL-escaped the same
-    meta: {requiresAuth: true, foreign: true},
+    // way /inventory/:handle/:id expects it, so this is just a shorter alias for that route,
-    props: true
+    // with no owner-is-the-viewer special case: get_shared_item (and friends_or_self()) already
-}, {
+    // treat "it's the viewer's own item" as one case of "the viewer may see this owner's item",
+    // not a separate path.
     path: '/i/:handle/:id',
-    redirect: to => {
+    redirect: to => `/inventory/${to.params.handle}/${to.params.id}`
-        const handle = decodeHandleFromUrl(to.params.handle)
-        const {id} = to.params
-        return handle === store.state.user ? '/inventory/' + id : '/inventory/shared/' + encodeHandleForUrl(handle) + '/' + id
-    }
 }, {
     path: '/:short_id',
     redirect: to => {

frontend/src/store.js

@@ -444,6 +444,31 @@ export default createStore({
                 return null;
             }
         },
+        // A group handle (leading '#') has no working owner-handle GET route yet
+        // (get_shared_item, which fetchForeignItem calls, only resolves a personal
+        // ToolshedUser handle) - resolve it instead via the already-correct, already-
+        // authenticated group listing (?group=<id>, see fetchGroupInventoryItems) and pick the
+        // matching item out of that, which only ever contains this one group's own items, so an
+        // id collision with anything else can't happen. A personal/friend handle still goes
+        // through fetchForeignItem as before.
+        async fetchItemByHandle({dispatch, getters}, {handle, id}) {
+            if (handle.startsWith('#')) {
+                // groupIdByHandle is derived from state.idmap (see store.js's getters), which
+                // nothing guarantees is loaded yet at this point - unlike Inventory.vue/
+                // StorageLocation.vue/Print.vue, a direct or refreshed visit to an item's own
+                // detail/edit page never fetched it. Loading it here, every time, is simplest;
+                // fetchIdMap is cheap and already called unconditionally (no cache check) by
+                // every other caller too.
+                await dispatch('fetchIdMap')
+                const groupId = getters.groupIdByHandle[handle]
+                if (groupId === undefined) {
+                    return null
+                }
+                const items = await dispatch('fetchGroupInventoryItems', groupId)
+                return items.find(item => item.id === parseInt(id)) || null
+            }
+            return dispatch('fetchForeignItem', {owner: handle, id})
+        },
         async fetchFriendRequests({state, dispatch, getters}) {
             const servers = await dispatch('getHomeServers')
             return await servers.get(getters.signAuth, '/api/friendrequests/')
@@ -802,6 +827,15 @@ export default createStore({
         groupIdByHandle(state) {
             return Object.fromEntries(state.idmap.groups.map(g => [g.handle, g.id]))
         },
+        // Reverse of the two getters above - turns a short-id's raw owner_identity_id/
+        // owner_group_id back into a handle (see router.js's EXPANDED_ROUTE_BUILDERS), without
+        // a separate backend lookup since the idmap already has both directions of this data.
+        identityHandleById(state) {
+            return Object.fromEntries(state.idmap.identities.map(i => [i.id, i.username]))
+        },
+        groupHandleById(state) {
+            return Object.fromEntries(state.idmap.groups.map(g => [g.id, g.handle]))
+        },
         loaded_items(state) {
             return Object.entries(state.item_map).reduce((acc, [url, items]) => {
                 return acc.concat(items)

frontend/src/views/GroupDetail.vue

@@ -73,17 +73,17 @@
                                 <tbody>
                                 <tr v-for="item in items" :key="item.id">
                                     <td>
-                                        <router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
+                                        <router-link :to="itemRoute(item)">{{ item.name }}</router-link>
                                     </td>
                                     <td class="d-none d-md-table-cell">
                                         <span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
                                     </td>
                                     <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                     <td class="table-action">
-                                        <router-link :to="`/inventory/${item.id}/edit`">
+                                        <router-link :to="`${itemRoute(item)}/edit`">
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                         </router-link>
-                                        <a :href="`/inventory/${item.id}/delete`" @click.prevent="tryDeleteItem(item)">
+                                        <a :href="`${itemRoute(item)}/delete`" @click.prevent="tryDeleteItem(item)">
                                             <b-icon-trash></b-icon-trash>
                                         </a>
                                     </td>
@@ -96,7 +96,7 @@
                                         <div class="card">
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
-                                                    <router-link :to="`/inventory/${item.id}`">
+                                                    <router-link :to="itemRoute(item)">
                                                         {{ item.name }}
                                                     </router-link>
                                                 </h5>
@@ -108,7 +108,7 @@
                                                     <button class="btn btn-danger btn-sm" @click="tryDeleteItem(item)">
                                                         Delete
                                                     </button>
-                                                    <router-link :to="`/inventory/${item.id}/edit`"
+                                                    <router-link :to="`${itemRoute(item)}/edit`"
                                                                 class="btn btn-primary btn-sm">Edit
                                                     </router-link>
                                                 </div>
@@ -134,6 +134,7 @@ import {mapActions, mapGetters, mapState} from "vuex";
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import UserNameTag from "@/components/UserNameTag.vue";
+import {encodeHandleForUrl} from "@/router";
 
 export default {
     name: 'GroupDetail',
@@ -174,6 +175,9 @@ export default {
         fetchItems() {
             this.fetchGroupInventoryItems(this.id)
         },
+        itemRoute(item) {
+            return `/inventory/${encodeHandleForUrl(this.group.handle)}/${item.id}`
+        },
         tryInvite() {
             this.inviteToGroup({groupId: this.id, groupHandle: this.group.handle, invitee: this.invitee})
                 .then((ok) => {

frontend/src/views/Inventory.vue

@@ -27,17 +27,17 @@
                                 <tbody>
                                 <tr v-for="item in inventory_items" :key="item.id">
                                     <td>
-                                        <router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
+                                        <router-link :to="itemRoute(item)">{{ item.name }}</router-link>
                                     </td>
                                     <td class="d-none d-md-table-cell">
                                         <span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
                                     </td>
                                     <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                     <td class="table-action">
-                                        <router-link :to="`/inventory/${item.id}/edit`">
+                                        <router-link :to="`${itemRoute(item)}/edit`">
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                         </router-link>
-                                        <a :href="`/inventory/${item.id}/delete`" @click.prevent="deleteInventoryItem(item)">
+                                        <a :href="`${itemRoute(item)}/delete`" @click.prevent="deleteInventoryItem(item)">
                                             <b-icon-trash></b-icon-trash>
                                         </a>
                                         <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)">
@@ -62,7 +62,7 @@
                                                                  class="card-img-top img-preview"/>
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
-                                                    <router-link :to="`/inventory/${item.id}`">
+                                                    <router-link :to="itemRoute(item)">
                                                         {{ item.name }}
                                                     </router-link></h5>
                                                 <div class="card-text text-black-50">
@@ -73,7 +73,7 @@
                                                     <button class="btn btn-danger btn-sm"
                                                             @click="deleteInventoryItem(item)">Delete
                                                     </button>
-                                                    <router-link :to="`/inventory/${item.id}/edit`"
+                                                    <router-link :to="`${itemRoute(item)}/edit`"
                                                                  class="btn btn-primary btn-sm">Edit
                                                     </router-link>
                                                     <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
@@ -108,7 +108,7 @@ import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import AuthenticatedImage from "../components/AuthenticatedImage.vue";
-import {shortenedRoute} from "@/router";
+import {shortenedRoute, encodeHandleForUrl} from "@/router";
 
 export default {
     name: "Inventory",
@@ -128,6 +128,12 @@ export default {
     },
     methods: {
         ...mapActions(["fetchInventoryItems", "deleteInventoryItem", "fetchStorageLocations", "fetchIdMap"]),
+        // This list is always the viewer's own personal items (fetchInventoryItems has no
+        // group filter) - the owner handle is always their own, but it's always included
+        // rather than special-cased, so /inventory/:handle/:id has exactly one shape.
+        itemRoute(item) {
+            return `/inventory/${encodeHandleForUrl(this.user)}/${item.id}`
+        },
         only_images(files) {
             return files.filter(file => file.mime_type.startsWith("image/"));
         },

frontend/src/views/InventoryDetail.vue

@@ -6,6 +6,10 @@
                     <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 }}
@@ -36,8 +40,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="card">
+                    <div class="card" v-if="canEdit">
-                        <button class="btn btn-primary" @click="$router.push('/inventory/' + id + '/edit')">
+                        <button class="btn btn-primary" @click="$router.push(`/inventory/${handle}/${id}/edit`)">
                             <b-icon-pencil-square></b-icon-pencil-square>
                             Edit
                         </button>
@@ -46,8 +50,8 @@
                             <b-icon-trash></b-icon-trash>
                             Delete
                         </button>
-                        <button class="btn btn-secondary"
+                        <button v-if="canPrint" class="btn btn-secondary"
-                                @click="$router.push({path: '/print', query: {kind: 'item', userHandle: user, id}})">
+                                @click="$router.push({path: '/print', query: {kind: 'item', userHandle: decodedHandle, id}})">
                             <b-icon-printer></b-icon-printer>
                             Print label
                         </button>
@@ -64,6 +68,7 @@ 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",
@@ -73,27 +78,52 @@ export default {
         ...BIcons
     },
     props: {
+        handle: {
+            type: String,
+            required: true
+        },
         id: {
             type: String,
             required: true
         }
     },
-    computed: {
+    data() {
-        ...mapGetters(["loaded_items", "getNameFromHandle"]),
+        return {
-        ...mapState(["storage_locations", "user"]),
+            item: {}
-        item() {
+        }
-            return this.loaded_items.find(item => item.id === parseInt(this.id)) || {}
     },
-        location() {
+    computed: {
-            return this.storage_locations.find(loc => loc.id === this.item.storage_location) || null
+        ...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(["fetchInventoryItems", "deleteInventoryItem", "fetchFilesByItem", "fetchStorageLocations"]),
+        ...mapActions(["fetchItemByHandle", "deleteInventoryItem"]),
+        async loadItem() {
+            this.item = await this.fetchItemByHandle({handle: this.decodedHandle, id: this.id}) || {}
+        }
     },
-    async mounted() {
+    watch: {
-        await this.fetchInventoryItems()
+        handle: 'loadItem',
-        await this.fetchStorageLocations()
+        id: 'loadItem'
+    },
+    mounted() {
+        this.loadItem()
     }
 }
 </script>

frontend/src/views/InventoryDetailForeign.vue

@@ -1,102 +0,0 @@
-<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 }}
-                            </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>
-            </div>
-        </main>
-    </BaseLayout>
-</template>
-
-<script>
-import * as BIcons from "bootstrap-icons-vue";
-import BaseLayout from "@/components/BaseLayout.vue";
-import {mapActions, mapGetters} from "vuex";
-import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
-
-export default {
-    name: "InventoryDetailForeign",
-    components: {
-        AuthenticatedImage,
-        BaseLayout,
-        ...BIcons
-    },
-    props: {
-        user: {
-            type: String,
-            required: true
-        },
-        id: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            item: {}
-        }
-    },
-    computed: {
-        ...mapGetters(["getNameFromHandle"]),
-    },
-    methods: {
-        ...mapActions(["fetchForeignItem"]),
-        async loadItem() {
-            this.item = await this.fetchForeignItem({owner: this.user, id: this.id}) || {}
-        }
-    },
-    watch: {
-        user: 'loadItem',
-        id: 'loadItem'
-    },
-    mounted() {
-        this.loadItem()
-    }
-}
-</script>
-
-<style scoped>
-img {
-    width: 190px;
-    height: 107px;
-    object-fit: contain;
-}
-</style>

frontend/src/views/InventoryEdit.vue

@@ -70,11 +70,12 @@
 
 <script>
 import * as BIcons from "bootstrap-icons-vue";
-import {mapActions, mapGetters, mapState} from "vuex";
+import {mapActions, mapState} from "vuex";
 import BaseLayout from "@/components/BaseLayout.vue";
 import TagField from "@/components/TagField.vue";
 import PropertyField from "@/components/PropertyField.vue";
 import CombinedFileField from "@/components/CombinedFileField.vue";
+import {decodeHandleFromUrl} from "@/router";
 
 export default {
     name: "InventoryEdit",
@@ -86,16 +87,21 @@ export default {
         ...BIcons
     },
     props: {
+        handle: {
+            type: String,
+            required: true
+        },
         id: {
             type: String,
             required: true
         }
     },
-    computed: {
+    data() {
-        ...mapGetters(["loaded_items"]),
-        ...mapState(["availability_policies", "storage_locations"]),
-        item() {
         return {
+            // Fetched fresh by {handle, id} on mount rather than found by id alone in whatever
+            // happens to already be cached (loaded_items mixes personal, group and search
+            // fetches, and id is only unique within one owner's own items - see InventoryDetail.vue).
+            item: {
                 tags: [],
                 properties: [],
                 name: "",
@@ -104,19 +110,30 @@ export default {
                 image: "",
                 files: [],
                 storage_location: null,
-                ...this.loaded_items.find(item => item.id === parseInt(this.id))
             }
         }
     },
+    computed: {
+        ...mapState(["availability_policies", "storage_locations"]),
+        decodedHandle() {
+            return decodeHandleFromUrl(this.handle)
+        }
+    },
     methods: {
-        ...mapActions(["fetchInventoryItems", "updateInventoryItem", "fetchInfo", "fetchStorageLocations"]),
+        ...mapActions(["fetchItemByHandle", "updateInventoryItem", "fetchInfo", "fetchStorageLocations"]),
         changeFiles(files) {
-            this.loaded_items.find(item => item.id === parseInt(this.id)).files = files
+            this.item.files = files
         },
+        async loadItem() {
+            const loaded = await this.fetchItemByHandle({handle: this.decodedHandle, id: this.id})
+            if (loaded) {
+                this.item = {...this.item, ...loaded}
+            }
+        }
     },
     async mounted() {
         await this.fetchInfo();
-        await this.fetchInventoryItems();
+        await this.loadItem();
         await this.fetchStorageLocations();
     }
 }

frontend/src/views/Search.vue

@@ -27,7 +27,7 @@
                                 <tbody>
                                 <tr v-for="item in search_results" :key="item.id">
                                     <td>
-                                        <router-link :to="`/inventory/${item.handle}`">{{ item.name }}</router-link>
+                                        <router-link :to="item.route">{{ item.name }}</router-link>
                                     </td>
                                     <td>
                                         <user-name-tag :user="item"/>
@@ -49,7 +49,7 @@
                                                                  class="card-img-top img-preview"/>
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
-                                                    <router-link :to="`/inventory/${item.handle}`">
+                                                    <router-link :to="item.route">
                                                         {{ item.name }}
                                                     </router-link></h5>
                                                 <div class="card-text text-black-50">
@@ -71,12 +71,13 @@
 </template>
 
 <script>
-import {mapActions, mapState} from 'vuex';
+import {mapActions} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import UserNameTag from "@/components/UserNameTag.vue";
+import {encodeHandleForUrl} from "@/router";
 
 export default {
     name: 'Search',
@@ -106,14 +107,15 @@ export default {
             return files.filter(file => file.mime_type.startsWith("image/"));
         },
         loadResults() {
+            // Search results are always personal-or-friend (see inventory_items() in
+            // toolshed/api/inventory.py - it never yields a group's items), so the owner is
+            // always a plain user handle - one route shape, no owner-is-me special case.
             this.fetchSearchResults({query: this.query}).then((results) => {
-                this.search_results = results.map(e=>({...e, handle: e.owner==this.user?e.id:"shared/"+e.owner+"/"+e.id}));
+                this.search_results = results.map(e => (
+                    {...e, route: `/inventory/${encodeHandleForUrl(e.owner)}/${e.id}`}))
             });
         }
     },
-    computed: {
-        ...mapState(['user'])
-    },
     watch: {
         query: {
             immediate: false,