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-26 22:18:02 +02:00
parent 4c9e8f942e
commit 23185e1721
13 changed files with 365 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/router.js
View file

@ -51,6 +51,11 @@ function itemDetailRoute(handle, item_local_id) {
return handle ? `/inventory/${encodeHandleForUrl(handle)}/${item_local_id}` : null;
}
// storage_location/group_storage_location share this /storage-locations/:handle/:id shape, same idea as itemDetailRoute above.
function storageLocationDetailRoute(handle, storage_location_id) {
return handle ? `/storage-locations/${encodeHandleForUrl(handle)}/${storage_location_id}` : null;
}
export function ownerOverviewRoute(item) {
return item.owner_group ? `/groups/${encodeHandleForUrl(item.owner_group)}` : '/inventory';
}
@ -64,12 +69,15 @@ const EXPANDED_ROUTE_BUILDERS = {
const handle = store.getters.groupHandleById[group_id];
return handle ? `/groups/${encodeHandleForUrl(handle)}` : null;
},
storage_location: ({storage_location_id}) => `/storage-locations/${storage_location_id}`,
storage_location: ({owner_identity_id, storage_location_id}) =>
storageLocationDetailRoute(store.getters.identityHandleById[owner_identity_id], storage_location_id),
group_storage_location: ({owner_group_id, storage_location_id}) =>
storageLocationDetailRoute(store.getters.groupHandleById[owner_group_id], storage_location_id),
workflow: ({workflow_id}) => `/workflows/${workflow_id}`,
};
// Kinds whose route needs identityHandleById/groupHandleById (from state.idmap); ShortId.vue only waits on an idmap fetch for these.
export const NEEDS_IDMAP = new Set(['item', 'group_item', 'group']);
export const NEEDS_IDMAP = new Set(['item', 'group_item', 'group', 'storage_location', 'group_storage_location']);
export function expandedRoute({kind, ...fields}) {
const buildRoute = EXPANDED_ROUTE_BUILDERS[kind];
@ -188,12 +196,12 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
component: StorageLocation,
meta: {requiresAuth: true}
}, {
path: '/storage-locations/:id',
path: '/storage-locations/:handle/:id',
component: StorageLocationDetail,
meta: {requiresAuth: true},
props: true
}, {
path: '/storage-locations/:id/edit',
path: '/storage-locations/:handle/:id/edit',
component: StorageLocationEdit,
meta: {requiresAuth: true},
props: true

6
frontend/src/short-id.js
View file

@ -40,6 +40,12 @@ const SCHEMAS = {
fields: ['category_id'],
interpret: ([category_id]) => ({kind: 'category', category_id})
},
'4-2': {
name: 'group_storage_location',
fields: ['owner_group_id', 'storage_location_id'],
interpret: ([owner_group_id, storage_location_id]) =>
({kind: 'group_storage_location', owner_group_id, storage_location_id})
},
}
const BASE64URL_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'

99
frontend/src/store.js
View file

@ -83,6 +83,7 @@ export default createStore({
idmap: {identities: [], groups: []},
idmapLoaded: false,
item_map: {},
location_map: {},
home_servers: null,
all_friends_servers: null,
messages: [],
@ -105,6 +106,9 @@ export default createStore({
setInventoryItems(state, {url, items}) {
state.item_map[url] = items;
},
setLocationsForKey(state, {url, locations}) {
state.location_map[url] = locations;
},
setFriends(state, friends) {
state.friends = friends;
},
@ -397,16 +401,17 @@ export default createStore({
return items
},
async createInventoryItem({state, dispatch, getters}, item) {
const servers = await dispatch('getHomeServers')
const data = {availability_policy: 'private', ...item}
const servers = item.owner_group
? await dispatch('getFriendServers', {username: 'x@' + splitGroupHandle(item.owner_group).domain})
: await dispatch('getHomeServers')
const data = {
availability_policy: 'private', ...item,
owner_group: item.owner_group ? item.owner_group.slice(1) : null
}
const reply = await servers.post(getters.signAuth, '/api/inventory_items/', data)
state.last_load.files = 0
return reply
},
// A group-owned item lives on its owning group's own backend, not necessarily the
// caller's home one (see the group actions below) - item.owner_group ("#name@domain")
// already carries that domain, so update/delete resolve it the same way rather than
// needing the caller to track it separately.
async updateInventoryItem({state, dispatch, getters}, item) {
const servers = item.owner_group
? await dispatch('getFriendServers', {username: 'x@' + splitGroupHandle(item.owner_group).domain})
@ -465,16 +470,10 @@ export default createStore({
return null;
}
},
// A group handle resolves via fetchGroup (itself domain-routed, see below), so a group
// hosted elsewhere works exactly like one hosted on the caller's own backend - no idmap
// detour needed here. ServerSet.get() never checks response.ok, so a 404 (nonexistent or
// non-member group) surfaces as a JSON-parse rejection rather than resolving falsy - same
// try/catch shape as fetchForeignItem.
async fetchItemByHandle({dispatch, getters}, {handle, id}) {
if (handle.startsWith('#')) {
try {
const group = await dispatch('fetchGroup', {handle})
const items = await dispatch('fetchGroupInventoryItems', {groupId: group.id, domain: group.domain})
const items = await dispatch('fetchGroupInventoryItems', {groupHandle: handle})
return items.find(item => item.id === parseInt(id)) || null
} catch (error) {
console.error(`Failed to fetch group item ${id} for ${handle}:`, error);
@ -530,14 +529,6 @@ export default createStore({
const servers = await dispatch('getHomeServers')
return await servers.delete(getters.signAuth, '/api/friends/' + id + '/')
},
// Listing/creating a group is inherently home-scoped - it's this backend's own view of
// "groups I host you in" - but every action below that acts on an *existing* group
// (found via its handle, e.g. from a GroupMembership pointer to a group hosted
// elsewhere - see GroupMembership/docs/design-in-progress/groups-mvp.md) resolves that
// group's own domain and talks to it directly, the same way requestFriend/
// fetchForeignItem resolve a friend's domain, rather than assuming home. A group hosted
// on the caller's own domain goes through exactly the same code path - there's nothing
// to special-case.
async fetchGroups({commit, dispatch, getters}) {
const servers = await dispatch('getHomeServers')
const data = await servers.get(getters.signAuth, '/api/groups/')
@ -552,17 +543,19 @@ export default createStore({
},
// handle is "#name@domain".
async fetchGroup({dispatch, getters}, {handle}) {
const {name, domain} = splitGroupHandle(handle)
const {domain} = splitGroupHandle(handle)
const servers = await dispatch('getFriendServers', {username: 'x@' + domain})
return await servers.get(getters.signAuth, `/api/groups/handle/${name}/${domain}/`)
return await servers.get(getters.signAuth, `/api/groups/${handle.slice(1)}/`)
},
async createGroup({dispatch, getters}, {name}) {
const servers = await dispatch('getHomeServers')
return await servers.post(getters.signAuth, '/api/groups/', {name})
},
async removeGroupMember({dispatch, getters}, {groupId, domain, identityId}) {
async removeGroupMember({dispatch, getters}, {groupHandle, identityId}) {
const {domain} = splitGroupHandle(groupHandle)
const servers = await dispatch('getFriendServers', {username: 'x@' + domain})
return await servers.delete(getters.signAuth, '/api/groups/' + groupId + '/members/' + identityId + '/')
return await servers.delete(
getters.signAuth, '/api/groups/' + groupHandle.slice(1) + '/members/' + identityId + '/')
},
async fetchGroupInvites({commit, dispatch, getters}) {
const servers = await dispatch('getHomeServers')
@ -576,10 +569,11 @@ export default createStore({
commit('setGroupMemberships', data)
return data
},
async inviteToGroup({state, dispatch, getters}, {groupId, domain, groupHandle, invitee}) {
async inviteToGroup({state, dispatch, getters}, {groupHandle, invitee}) {
const {domain} = splitGroupHandle(groupHandle)
const group_servers = await dispatch('getFriendServers', {username: 'x@' + domain})
const group_reply = await group_servers.post(
getters.signAuth, '/api/groups/' + groupId + '/invites/', {invitee})
getters.signAuth, '/api/groups/' + groupHandle.slice(1) + '/invites/', {invitee})
if (!group_reply.secret) {
return false
}
@ -610,13 +604,14 @@ export default createStore({
const servers = await dispatch('getHomeServers')
return await servers.delete(getters.signAuth, '/api/groupinvites/' + invite.id + '/')
},
async fetchGroupInventoryItems({commit, dispatch, getters}, {groupId, domain}) {
async fetchGroupInventoryItems({commit, dispatch, getters}, {groupHandle}) {
const {domain} = splitGroupHandle(groupHandle)
const servers = await dispatch('getFriendServers', {username: 'x@' + domain})
const items = await servers.get(getters.signAuth, '/api/inventory_items/?group=' + groupId)
// Namespaced by domain, not just groupId: that pk is only unique within its own
const items = await servers.get(getters.signAuth, '/api/inventory_items/?group=' + groupHandle.slice(1))
// Keyed by the full handle, not a bare id: a group pk is only unique within its own
// backend's database, so two different domains could otherwise collide on the same
// item_map key.
commit('setInventoryItems', {url: '/group/' + domain + '/' + groupId, items})
// item_map key - the handle already carries the domain, so no separate namespacing is needed.
commit('setInventoryItems', {url: '/group/' + groupHandle, items})
return items
},
async fetchFiles({state, commit, dispatch, getters}) {
@ -722,23 +717,50 @@ export default createStore({
commit('setStorageLocations', data)
state.last_load.storage_locations = Date.now()
return data
},async fetchGroupStorageLocations({commit, dispatch, getters}, {groupHandle}) {
const {domain} = splitGroupHandle(groupHandle)
const servers = await dispatch('getFriendServers', {username: 'x@' + domain})
const locations = await servers.get(getters.signAuth, '/api/storage_locations/?group=' + groupHandle.slice(1))
commit('setLocationsForKey', {url: '/group/' + groupHandle, locations})
return locations
},
async fetchStorageLocationByHandle({dispatch, getters}, {handle, id}) {
if (handle.startsWith('#')) {
try {
const locations = await dispatch('fetchGroupStorageLocations', {groupHandle: handle})
return locations.find(location => location.id === parseInt(id)) || null
} catch (error) {
console.error(`Failed to fetch group storage location ${id} for ${handle}:`, error);
return null;
}
}
const locations = await dispatch('fetchStorageLocations')
return locations.find(location => location.id === parseInt(id)) || null
},
async deleteStorageLocation({state, dispatch, getters}, location) {
const servers = await dispatch('getHomeServers')
const servers = location.owner_group
? await dispatch('getFriendServers', {username: 'x@' + splitGroupHandle(location.owner_group).domain})
: await dispatch('getHomeServers')
const ret = await servers.delete(getters.signAuth, '/api/storage_locations/' + location.id + '/')
dispatch('fetchStorageLocations')
return ret
},
// location.owner_group is the group's own "#name@domain" handle - see
// createInventoryItem's own comment.
async createStorageLocation({state, dispatch, getters}, location) {
const servers = await dispatch('getHomeServers')
const data = {...location}
const servers = location.owner_group
? await dispatch('getFriendServers', {username: 'x@' + splitGroupHandle(location.owner_group).domain})
: await dispatch('getHomeServers')
const data = {...location, owner_group: location.owner_group ? location.owner_group.slice(1) : null}
if (data.parent === '') data.parent = null
const reply = await servers.post(getters.signAuth, '/api/storage_locations/', data)
state.last_load.storage_locations = 0
return reply
},
async updateStorageLocation({state, dispatch, getters}, location) {
const servers = await dispatch('getHomeServers')
const servers = location.owner_group
? await dispatch('getFriendServers', {username: 'x@' + splitGroupHandle(location.owner_group).domain})
: await dispatch('getHomeServers')
const data = {...location}
if (data.parent === '') data.parent = null
const reply = await servers.patch(getters.signAuth, '/api/storage_locations/' + location.id + '/', data)
@ -848,15 +870,14 @@ export default createStore({
inventory_items(state) {
return state.item_map['/'] || []
},
groupInventoryItems: (state) => (groupId, domain) => state.item_map['/group/' + domain + '/' + groupId] || [],
groupInventoryItems: (state) => (groupHandle) => state.item_map['/group/' + groupHandle] || [],
groupStorageLocations: (state) => (groupHandle) => state.location_map['/group/' + groupHandle] || [],
identityIdByHandle(state) {
return Object.fromEntries(state.idmap.identities.map(i => [i.username, i.id]))
},
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 EXPANDED_ROUTE_BUILDERS), no backend lookup needed.
identityHandleById(state) {
return Object.fromEntries(state.idmap.identities.map(i => [i.id, i.username]))
},

1
frontend/src/tests/short-id.js
View file

@ -21,6 +21,7 @@ test('every kind round-trips through serialize/encode/decode/deserialize', () =>
{kind: 'group_item', owner_group_id: 5, item_local_id: 42},
{kind: 'group', group_id: 11},
{kind: 'storage_location', owner_identity_id: 3, storage_location_id: 1000},
{kind: 'group_storage_location', owner_group_id: 5, storage_location_id: 1000},
{kind: 'file', file_id: 123},
{kind: 'workflow', owner_identity_id: 2, workflow_id: 9},
]

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

@ -127,7 +127,55 @@
</div>
<div class="card">
<button class="btn" @click="fetchItems">Refresh</button>
<router-link v-if="isOwnDomain" :to="`/inventory/new?group=${group.id}`"
<router-link :to="`/inventory/new?group=${encodeHandleForUrl(group.handle)}`"
class="btn btn-primary">Add
</router-link>
</div>
</div>
<div class="col-12 col-xl-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Group storage locations</h5>
</div>
<table class="table table-striped">
<thead>
<tr>
<th style="width:40%;">Name</th>
<th style="width:25%">Path</th>
<th class="d-none d-md-table-cell" style="width:25%">Category</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="location in storageLocations" :key="location.id">
<td>
<router-link :to="locationRoute(location)">{{ location.name }}</router-link>
</td>
<td class="d-none d-md-table-cell">
<span class="text-muted">{{ location.path }}</span>
</td>
<td class="d-none d-md-table-cell">
<span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
<span class="text-muted" v-else>-</span>
</td>
<td class="table-action">
<router-link :to="`${locationRoute(location)}/edit`">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link>
<a :href="`${locationRoute(location)}/delete`" @click.prevent="tryDeleteLocation(location)">
<b-icon-trash></b-icon-trash>
</a>
<router-link v-if="locationPrintLinkFor(location)" :to="locationPrintLinkFor(location)">
<b-icon-qr-code></b-icon-qr-code>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<button class="btn" @click="fetchLocations">Refresh</button>
<router-link :to="`/storage-locations/new?group=${encodeHandleForUrl(group.handle)}`"
class="btn btn-primary">Add
</router-link>
</div>
@ -139,7 +187,7 @@
</template>
<script>
import {mapActions, mapGetters, mapState} from "vuex";
import {mapActions, mapGetters} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import UserNameTag from "@/components/UserNameTag.vue";
@ -167,21 +215,21 @@ export default {
}
},
computed: {
...mapState(['user']),
decodedHandle() {
return decodeHandleFromUrl(this.handle)
},
items() {
return this.group ? this.groupInventoryItems(this.group.id, this.group.domain) : []
return this.group ? this.groupInventoryItems(this.group.handle) : []
},
isOwnDomain() {
return this.group && this.group.domain === this.user.split('@')[1]
storageLocations() {
return this.group ? this.groupStorageLocations(this.group.handle) : []
},
...mapGetters(['groupInventoryItems'])
...mapGetters(['groupInventoryItems', 'groupStorageLocations'])
},
methods: {
encodeHandleForUrl,
...mapActions(['fetchGroup', 'removeGroupMember', 'inviteToGroup', 'fetchGroupInventoryItems',
'deleteInventoryItem']),
'deleteInventoryItem', 'fetchGroupStorageLocations', 'deleteStorageLocation']),
// Loads by handle regardless of which backend actually hosts the group - see
// store.js's fetchGroup.
refresh() {
@ -191,7 +239,7 @@ export default {
},
fetchItems() {
if (this.group) {
this.fetchGroupInventoryItems({groupId: this.group.id, domain: this.group.domain})
this.fetchGroupInventoryItems({groupHandle: this.group.handle})
}
},
itemRoute(item) {
@ -200,11 +248,24 @@ export default {
printLinkFor(item) {
return {path: '/print', query: {kind: 'item', userHandle: this.group.handle, item: item.id}}
},
fetchLocations() {
if (this.group) {
this.fetchGroupStorageLocations({groupHandle: this.group.handle})
}
},
locationRoute(location) {
return `/storage-locations/${encodeHandleForUrl(this.group.handle)}/${location.id}`
},
locationPrintLinkFor(location) {
return {path: '/print', query: {kind: 'storage-location', userHandle: this.group.handle, location: location.id}}
},
tryDeleteLocation(location) {
this.deleteStorageLocation(location).then(() => {
this.fetchLocations()
})
},
tryInvite() {
this.inviteToGroup({
groupId: this.group.id, domain: this.group.domain, groupHandle: this.group.handle,
invitee: this.invitee
}).then((ok) => {
this.inviteToGroup({groupHandle: this.group.handle, invitee: this.invitee}).then((ok) => {
if (ok) {
this.show_invite = false
this.invitee = ""
@ -213,7 +274,7 @@ export default {
})
},
tryRemoveMember(member) {
this.removeGroupMember({groupId: this.group.id, domain: this.group.domain, identityId: member.id})
this.removeGroupMember({groupHandle: this.group.handle, identityId: member.id})
.then(() => {
this.refresh()
}).catch(() => {
@ -226,7 +287,10 @@ export default {
}
},
mounted() {
this.refresh().then(() => this.fetchItems())
this.refresh().then(() => {
this.fetchItems()
this.fetchLocations()
})
}
}
</script>

21
frontend/src/views/InventoryNew.vue
View file

@ -28,7 +28,7 @@
<label for="owner" class="form-label">Owner</label>
<select class="form-select" id="owner" name="owner" v-model="item.owner_group">
<option :value="null">Myself</option>
<option v-for="group in groups" :value="group.id" :key="group.id">
<option v-for="group in ownerGroups" :value="group.handle" :key="group.handle">
{{ group.handle }}
</option>
</select>
@ -84,7 +84,7 @@ 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 {ownerOverviewRoute} from "@/router";
import {decodeHandleFromUrl, ownerOverviewRoute} from "@/router";
export default {
name: "InventoryNew",
@ -107,23 +107,34 @@ export default {
properties: [],
files: [],
storage_location: null,
// The group's own "#name@domain" handle once picked, or null for a personal
// item - createInventoryItem resolves the target domain from it directly.
owner_group: null
}
}
},
methods: {
ownerOverviewRoute,
...mapActions(['createInventoryItem', 'fetchInfo', 'fetchStorageLocations', 'fetchGroups'])
...mapActions(['createInventoryItem', 'fetchInfo', 'fetchStorageLocations', 'fetchGroups',
'fetchGroupMemberships'])
},
computed: {
...mapState(["availability_policies", "storage_locations", "groups"]),
...mapState(["availability_policies", "storage_locations", "groups", "groupMemberships"]),
// Groups hosted here plus groups only known via a GroupMembership pointer (see
// Groups.vue's allGroups for the same merge/dedupe).
ownerGroups() {
const hostedHandles = new Set(this.groups.map(group => group.handle))
const foreign = this.groupMemberships.filter(m => !hostedHandles.has(m.handle))
return [...this.groups, ...foreign].sort((a, b) => a.handle.localeCompare(b.handle))
}
},
async mounted() {
await this.fetchInfo();
await this.fetchStorageLocations();
await this.fetchGroups();
await this.fetchGroupMemberships();
if (this.$route.query.group) {
this.item.owner_group = parseInt(this.$route.query.group, 10)
this.item.owner_group = decodeHandleFromUrl(this.$route.query.group)
}
}
}

10
frontend/src/views/Print.vue
View file

@ -464,11 +464,19 @@ export default {
}
if (f.userHandle.startsWith("#")) {
const owner_group_id = this.groupIdByHandle[f.userHandle];
if (owner_group_id === undefined || !f.itemId) {
if (owner_group_id === undefined) {
return null;
}
if (f.itemId) {
return shortenedRoute({kind: "group_item", owner_group_id, item_local_id: f.itemId}).slice(1);
}
if (f.locationId) {
return shortenedRoute({
kind: "group_storage_location", owner_group_id, storage_location_id: f.locationId
}).slice(1);
}
return null;
}
const owner_identity_id = this.identityIdByHandle[f.userHandle];
if (owner_identity_id === undefined) {
return null;

24
frontend/src/views/Scan.vue
View file

@ -154,7 +154,7 @@ export default {
};
},
methods: {
...mapActions(["fetchItemByHandle", "fetchStorageLocations", "fetchIdMap"]),
...mapActions(["fetchItemByHandle", "fetchStorageLocationByHandle", "fetchIdMap"]),
resolveDescription(entry) {
const {link, text} = entry;
@ -219,12 +219,19 @@ export default {
}
return handle === undefined ? null : handle;
}
if (decoded.kind === "storage_location") {
if (!this.$store.state.storage_locations.length) {
await this.fetchStorageLocations();
if (decoded.kind === "storage_location" || decoded.kind === "group_storage_location") {
const byId = decoded.kind === "storage_location"
? this.$store.getters.identityHandleById
: this.$store.getters.groupHandleById;
const ownerId = decoded.kind === "storage_location" ? decoded.owner_identity_id : decoded.owner_group_id;
let handle = byId[ownerId];
if (handle === undefined) {
await this.fetchIdMap();
handle = (decoded.kind === "storage_location"
? this.$store.getters.identityHandleById
: this.$store.getters.groupHandleById)[ownerId];
}
const location = this.$store.state.storage_locations.find(l => l.id === decoded.storage_location_id);
return location ? `[#${location.id}] ${location.name}` : null;
return handle === undefined ? null : this.describeLocation(handle, decoded.storage_location_id);
}
return null; // workflow, category, file: no per-item title lookup wired up yet
},
@ -234,6 +241,11 @@ export default {
return item ? `[#${item.id}] ${item.name}` : null;
},
async describeLocation(handle, id) {
const location = await this.fetchStorageLocationByHandle({handle, id});
return location ? `[#${location.id}] ${location.name}` : null;
},
// Handler for CameraScanner's "scan" event - logs every code from the batch it decoded.
onCameraScan(codes) {
codes.forEach(this.logDecode);

1
frontend/src/views/ShortId.vue
View file

@ -73,6 +73,7 @@ const EXAMPLES = [
{kind: 'group_item', owner_group_id: 5, item_local_id: 42},
{kind: 'file', file_id: 123},
{kind: 'storage_location', owner_identity_id: 3, storage_location_id: 1000},
{kind: 'group_storage_location', owner_group_id: 5, storage_location_id: 1000},
{kind: 'category', category_id: 5},
{kind: 'workflow', owner_identity_id: 2, workflow_id: 9},
];

30
frontend/src/views/StorageLocation.vue
View file

@ -27,7 +27,7 @@
<tbody>
<tr v-for="location in storage_locations" :key="location.id">
<td>
<router-link :to="`/storage-locations/${location.id}`">{{ location.name }}</router-link>
<router-link :to="locationRoute(location)">{{ location.name }}</router-link>
</td>
<td class="d-none d-md-table-cell">
<span class="text-muted">{{ location.path }}</span>
@ -37,10 +37,10 @@
<span class="text-muted" v-else>-</span>
</td>
<td class="table-action">
<router-link :to="`/storage-locations/${location.id}/edit`">
<router-link :to="`${locationRoute(location)}/edit`">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link>
<a :href="`/storage-locations/${location.id}/delete`" @click.prevent="deleteStorageLocation(location)">
<a :href="`${locationRoute(location)}/delete`" @click.prevent="deleteStorageLocation(location)">
<b-icon-trash></b-icon-trash>
</a>
<router-link v-if="shortIdLink(location)" :to="shortIdLink(location)">
@ -60,7 +60,7 @@
<div class="card">
<div class="card-body">
<h5 class="card-title mb-0">
<router-link :to="`/storage-locations/${location.id}`">
<router-link :to="locationRoute(location)">
{{ location.name }}
</router-link>
</h5>
@ -75,7 +75,7 @@
<button class="btn btn-danger btn-sm"
@click="deleteStorageLocation(location.id)">Delete
</button>
<router-link :to="`/storage-locations/${location.id}/edit`"
<router-link :to="`${locationRoute(location)}/edit`"
class="btn btn-primary btn-sm">Edit
</router-link>
<router-link v-if="shortIdLink(location)" :to="shortIdLink(location)"
@ -109,7 +109,7 @@
import {mapActions, mapGetters, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import {shortenedRoute} from "@/router";
import {shortenedRoute, encodeHandleForUrl} from "@/router";
export default {
name: "StorageLocation",
@ -123,12 +123,25 @@ export default {
...BIcons
},
computed: {
...mapGetters(["identityIdByHandle"]),
...mapGetters(["identityIdByHandle", "groupIdByHandle"]),
...mapState(["user", "storage_locations"]),
},
methods: {
...mapActions(["fetchStorageLocations", "deleteStorageLocation", "fetchIdMap"]),
// This list is always the caller's own personal locations (fetchStorageLocations has no
// group content), so the owner_group branches below are currently unreachable here - kept
// for parity with Inventory.vue's shortIdLink/printLinkFor in case that ever changes.
locationRoute(location) {
return `/storage-locations/${encodeHandleForUrl(location.owner_group || location.owner)}/${location.id}`
},
shortIdLink(location) {
if (location.owner_group) {
const owner_group_id = this.groupIdByHandle[location.owner_group]
if (owner_group_id === undefined) return null
return shortenedRoute({
kind: 'group_storage_location', owner_group_id, storage_location_id: location.id
})
}
const owner_identity_id = this.identityIdByHandle[location.owner]
if (owner_identity_id === undefined) return null
return shortenedRoute({kind: 'storage_location', owner_identity_id, storage_location_id: location.id})
@ -136,7 +149,8 @@ export default {
// Routes to Print.vue with this location's raw identity, same shape as Inventory.vue's
// printLinkFor. See docs/implementation.md#print-link-shape-for-storage-locations.
printLinkFor(location) {
return {path: '/print', query: {kind: 'storage-location', userHandle: location.owner, location: location.id}}
const userHandle = location.owner_group || location.owner
return {path: '/print', query: {kind: 'storage-location', userHandle, location: location.id}}
},
},
async mounted() {

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

@ -23,20 +23,25 @@
</div>
<div class="mb-3">
<label for="owner" class="form-label">Owner</label>
<div>{{ location.owner?.username || '-' }}</div>
<div>{{ location.owner || location.owner_group || '-' }}</div>
</div>
</div>
</div>
<div class="card">
<button class="btn btn-primary" @click="$router.push('/storage-locations/' + id + '/edit')">
<div class="card" v-if="canEdit">
<button class="btn btn-primary" @click="$router.push(`/storage-locations/${handle}/${id}/edit`)">
<b-icon-pencil-square></b-icon-pencil-square>
Edit
</button>
<button type="submit" class="btn btn-danger"
@click="deleteStorageLocation(location).then(() => $router.push('/storage-location'))">
@click="deleteStorageLocation(location).then(() => $router.push(ownerOverviewRoute(location)))">
<b-icon-trash></b-icon-trash>
Delete
</button>
<button class="btn btn-secondary"
@click="$router.push({path: '/print', query: {kind: 'storage-location', userHandle: decodedHandle, location: id}})">
<b-icon-printer></b-icon-printer>
Print label
</button>
</div>
</div>
</div>
@ -47,7 +52,8 @@
<script>
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import {mapActions, mapState} from "vuex";
import {mapActions, mapGetters, mapState} from "vuex";
import {decodeHandleFromUrl, ownerOverviewRoute} from "@/router";
export default {
name: "StorageLocationDetail",
@ -56,22 +62,52 @@ export default {
...BIcons
},
props: {
handle: {
type: String,
required: true
},
id: {
type: String,
required: true
}
},
data() {
return {
location: {}
}
},
computed: {
...mapState(["storage_locations"]),
location() {
return this.storage_locations.find(loc => loc.id === parseInt(this.id)) || {}
...mapGetters(["groupIdByHandle"]),
...mapState(["user", "groupMemberships"]),
decodedHandle() {
return decodeHandleFromUrl(this.handle)
},
// Am I a member of this group, hosted here or elsewhere - see InventoryDetail.vue's
// isGroupMember for the same check on the item side.
isGroupMember() {
return this.decodedHandle in this.groupIdByHandle
|| this.groupMemberships.some(m => m.handle === this.decodedHandle)
},
canEdit() {
return this.decodedHandle === this.user || this.isGroupMember
}
},
methods: {
...mapActions(["fetchStorageLocations", "deleteStorageLocation"]),
ownerOverviewRoute,
...mapActions(["fetchStorageLocationByHandle", "deleteStorageLocation", "fetchGroupMemberships"]),
async loadLocation() {
this.location = await this.fetchStorageLocationByHandle({handle: this.decodedHandle, id: this.id}) || {}
}
},
async mounted() {
await this.fetchStorageLocations()
watch: {
handle: 'loadLocation',
id: 'loadLocation'
},
mounted() {
this.loadLocation()
if (this.decodedHandle.startsWith('#')) {
this.fetchGroupMemberships()
}
}
}
</script>

47
frontend/src/views/StorageLocationEdit.vue
View file

@ -55,6 +55,7 @@
import * as BIcons from "bootstrap-icons-vue";
import {mapActions, mapState} from "vuex";
import BaseLayout from "@/components/BaseLayout.vue";
import {decodeHandleFromUrl, ownerOverviewRoute} from "@/router";
export default {
name: "StorageLocationEdit",
@ -63,32 +64,56 @@ export default {
...BIcons
},
props: {
handle: {
type: String,
required: true
},
id: {
type: String,
required: true
}
},
computed: {
...mapState(["storage_locations", "categories"]),
location() {
data() {
return {
location: {
name: "",
description: "",
category: null,
parent: null,
...this.storage_locations.find(loc => loc.id === parseInt(this.id))
},
// The location's own owner's full location list, for the parent dropdown - own
// personal locations, or the owning group's own (see loadLocation).
siblingLocations: []
}
},
computed: {
...mapState(["categories"]),
decodedHandle() {
return decodeHandleFromUrl(this.handle)
},
availableParents() {
// Filter out self and children to prevent circular references
return this.storage_locations.filter(loc =>
return this.siblingLocations.filter(loc =>
loc.id !== parseInt(this.id) &&
!this.isChildOf(loc, parseInt(this.id))
)
}
},
methods: {
...mapActions(["fetchStorageLocations", "updateStorageLocation", "fetchInfo"]),
ownerOverviewRoute,
...mapActions(["fetchStorageLocationByHandle", "updateStorageLocation", "fetchInfo",
"fetchStorageLocations", "fetchGroupStorageLocations"]),
async loadLocation() {
const loaded = await this.fetchStorageLocationByHandle({handle: this.decodedHandle, id: this.id})
if (loaded) {
this.location = {...this.location, ...loaded}
}
if (this.decodedHandle.startsWith('#')) {
this.siblingLocations = await this.fetchGroupStorageLocations({groupHandle: this.decodedHandle})
} else {
this.siblingLocations = await this.fetchStorageLocations()
}
},
submitForm() {
// Convert empty strings to null for ForeignKey fields
const locationData = {
@ -96,21 +121,25 @@ export default {
category: this.location.category === "" ? null : this.location.category,
parent: this.location.parent === "" ? null : this.location.parent
};
this.updateStorageLocation(locationData);
this.updateStorageLocation(locationData).then(updated => this.$router.push(ownerOverviewRoute(updated)));
},
isChildOf(location, parentId) {
// Simple check to prevent circular references
let current = location;
while (current && current.parent) {
if (current.parent === parentId) return true;
current = this.storage_locations.find(loc => loc.id === current.parent);
current = this.siblingLocations.find(loc => loc.id === current.parent);
}
return false;
}
},
watch: {
handle: 'loadLocation',
id: 'loadLocation'
},
async mounted() {
await this.fetchInfo();
await this.fetchStorageLocations();
await this.loadLocation();
}
}
</script>

59
frontend/src/views/StorageLocationNew.vue
View file

@ -26,12 +26,21 @@
</option>
</select>
</div>
<div class="mb-3">
<label for="owner" class="form-label">Owner</label>
<select class="form-select" id="owner" name="owner" v-model="location.owner_group">
<option :value="null">Myself</option>
<option v-for="group in ownerGroups" :value="group.handle" :key="group.handle">
{{ group.handle }}
</option>
</select>
</div>
<div class="mb-3">
<label for="parent" class="form-label">Parent Location</label>
<select class="form-select" id="parent" name="parent"
v-model="location.parent">
<option value="">No Parent</option>
<option v-for="parent in storage_locations" :value="parent.id">
<option v-for="parent in availableParents" :value="parent.id">
{{ parent.path }}
</option>
</select>
@ -53,6 +62,7 @@
import * as BIcons from "bootstrap-icons-vue";
import {mapActions, mapState} from "vuex";
import BaseLayout from "@/components/BaseLayout.vue";
import {decodeHandleFromUrl, ownerOverviewRoute} from "@/router";
export default {
name: "StorageLocationNew",
@ -66,12 +76,27 @@ export default {
name: "",
description: "",
category: null,
parent: null
}
parent: null,
// The group's own "#name@domain" handle once picked, or null for a personal
// location - createStorageLocation resolves the target domain from it directly.
owner_group: null
},
// The selected owner's own location list, for the parent dropdown - own personal
// locations, or the chosen group's own (see loadParentOptionsForOwner).
groupLocations: []
}
},
methods: {
...mapActions(['createStorageLocation', 'fetchInfo', 'fetchStorageLocations']),
ownerOverviewRoute,
...mapActions(['createStorageLocation', 'fetchInfo', 'fetchStorageLocations', 'fetchGroups',
'fetchGroupMemberships', 'fetchGroupStorageLocations']),
async loadParentOptionsForOwner() {
if (!this.location.owner_group) {
this.groupLocations = []
return
}
this.groupLocations = await this.fetchGroupStorageLocations({groupHandle: this.location.owner_group})
},
submitForm() {
// Convert empty strings to null for ForeignKey fields
const locationData = {
@ -79,15 +104,37 @@ export default {
category: this.location.category === "" ? null : this.location.category,
parent: this.location.parent === "" ? null : this.location.parent
};
this.createStorageLocation(locationData).then(() => this.$router.push('/storage-location'));
this.createStorageLocation(locationData).then(created => this.$router.push(ownerOverviewRoute(created)));
}
},
computed: {
...mapState(["categories", "storage_locations"]),
...mapState(["categories", "storage_locations", "groups", "groupMemberships"]),
// Groups hosted here plus groups only known via a GroupMembership pointer (see
// Groups.vue's allGroups for the same merge/dedupe).
ownerGroups() {
const hostedHandles = new Set(this.groups.map(group => group.handle))
const foreign = this.groupMemberships.filter(m => !hostedHandles.has(m.handle))
return [...this.groups, ...foreign].sort((a, b) => a.handle.localeCompare(b.handle))
},
availableParents() {
return this.location.owner_group ? this.groupLocations : this.storage_locations
}
},
watch: {
'location.owner_group'() {
// Previously-selected parent likely doesn't belong to the newly-chosen owner.
this.location.parent = null
this.loadParentOptionsForOwner()
}
},
async mounted() {
await this.fetchInfo();
await this.fetchStorageLocations();
await this.fetchGroups();
await this.fetchGroupMemberships();
if (this.$route.query.group) {
this.location.owner_group = decodeHandleFromUrl(this.$route.query.group)
}
}
}
</script>