j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2026-08-23 15:55:08 +02:00
parent 54374abf86
commit 8f3236b5b4
8 changed files with 156 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/router.js
View file

@ -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}`,
group_item: ({item_local_id}) => `/inventory/${item_local_id}`,
item: ({owner_identity_id, 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',
component: InventoryDetailForeign,
meta: {requiresAuth: true, foreign: true},
props: true
}, {
// The self-contained label/short-link entry point (see label.js's LABEL_CONTENT_BUILDERS
// and docs/design-in-progress/items-labels.md) - :handle is already URL-escaped the same
// way /inventory/:handle/:id expects it, so this is just a shorter alias for that route,
// 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 => {
const handle = decodeHandleFromUrl(to.params.handle)
const {id} = to.params
return handle === store.state.user ? '/inventory/' + id : '/inventory/shared/' + encodeHandleForUrl(handle) + '/' + id
}
redirect: to => `/inventory/${to.params.handle}/${to.params.id}`
}, {
path: '/:short_id',
redirect: to => {

34
frontend/src/store.js
View file

@ -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)

14
frontend/src/views/GroupDetail.vue
View file

@ -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) => {

18
frontend/src/views/Inventory.vue
View file

@ -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/"));
},

58
frontend/src/views/InventoryDetail.vue
View file

@ -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">
<button class="btn btn-primary" @click="$router.push('/inventory/' + id + '/edit')">
<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>
@ -46,8 +50,8 @@
<b-icon-trash></b-icon-trash>
Delete
</button>
<button class="btn btn-secondary"
@click="$router.push({path: '/print', query: {kind: 'item', userHandle: user, id}})">
<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>
@ -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
}
},
data() {
return {
item: {}
}
},
computed: {
...mapGetters(["loaded_items", "getNameFromHandle"]),
...mapState(["storage_locations", "user"]),
item() {
return this.loaded_items.find(item => item.id === parseInt(this.id)) || {}
...mapGetters(["getNameFromHandle", "groupIdByHandle"]),
...mapState(["user"]),
decodedHandle() {
return decodeHandleFromUrl(this.handle)
},
location() {
return this.storage_locations.find(loc => loc.id === this.item.storage_location) || null
// 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() {
await this.fetchInventoryItems()
await this.fetchStorageLocations()
watch: {
handle: 'loadItem',
id: 'loadItem'
},
mounted() {
this.loadItem()
}
}
</script>

102
frontend/src/views/InventoryDetailForeign.vue
View file

@ -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>

37
frontend/src/views/InventoryEdit.vue
View file

@ -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: {
...mapGetters(["loaded_items"]),
...mapState(["availability_policies", "storage_locations"]),
item() {
return {
data() {
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();
}
}

16
frontend/src/views/Search.vue
View file

@ -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,