This commit is contained in:
j3d1 2026-08-27 19:41:52 +02:00
parent ebd0db4b43
commit 2bb6624d50
4 changed files with 156 additions and 216 deletions

View file

@ -3,11 +3,22 @@
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Storage Locations</h1>
<div class="row mb-3">
<div class="col-12 col-md-4">
<label for="ownerSelect" class="form-label">Viewing storage locations for</label>
<select id="ownerSelect" class="form-select" v-model="selectedOwner">
<option :value="user">{{ user }} (you)</option>
<option v-for="group in ownerGroups" :value="group.handle" :key="group.handle">
{{ group.handle }}
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">{{ user }}'s Storage Locations</h5>
<h5 class="card-title">{{ selectedOwner }}'s Storage Locations</h5>
<button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
<b-icon-list></b-icon-list>
</button>
@ -25,7 +36,7 @@
</tr>
</thead>
<tbody>
<tr v-for="location in storage_locations" :key="location.id">
<tr v-for="location in locations" :key="location.id">
<td>
<router-link :to="locationRoute(location)">{{ location.name }}</router-link>
</td>
@ -40,7 +51,7 @@
<router-link :to="`${locationRoute(location)}/edit`">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link>
<a :href="`${locationRoute(location)}/delete`" @click.prevent="deleteStorageLocation(location)">
<a :href="`${locationRoute(location)}/delete`" @click.prevent="tryDeleteLocation(location)">
<b-icon-trash></b-icon-trash>
</a>
<router-link v-if="shortIdLink(location)" :to="shortIdLink(location)">
@ -55,7 +66,7 @@
</table>
<div class="card-body" v-else>
<div class="row">
<div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in storage_locations"
<div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in locations"
:key="location.id">
<div class="card">
<div class="card-body">
@ -73,7 +84,7 @@
</div>
<div class="btn-group mt-2">
<button class="btn btn-danger btn-sm"
@click="deleteStorageLocation(location)">Delete
@click="tryDeleteLocation(location)">Delete
</button>
<router-link :to="`${locationRoute(location)}/edit`"
class="btn btn-primary btn-sm">Edit
@ -95,8 +106,8 @@
</div>
<div class="card">
<button class="btn" @click="fetchStorageLocations">Refresh</button>
<router-link to="/storage-locations/new" class="btn btn-primary">Add</router-link>
<button class="btn" @click="fetchLocationsForOwner">Refresh</button>
<router-link :to="addLocationRoute" class="btn btn-primary">Add</router-link>
</div>
</div>
</div>
@ -116,6 +127,7 @@ export default {
data() {
return {
layout: "grid",
selectedOwner: null,
}
},
components: {
@ -123,14 +135,37 @@ export default {
...BIcons
},
computed: {
...mapGetters(["identityIdByHandle", "groupIdByHandle"]),
...mapState(["user", "storage_locations"]),
...mapGetters(["identityIdByHandle", "groupIdByHandle", "groupStorageLocations"]),
...mapState(["user", "storage_locations", "groups", "groupMemberships"]),
// Groups hosted here plus groups only known via a GroupMembership pointer - see
// Groups.vue's allGroups and Inventory.vue's ownerGroups 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))
},
locations() {
return this.selectedOwner === this.user ? this.storage_locations : this.groupStorageLocations(this.selectedOwner)
},
addLocationRoute() {
return this.selectedOwner === this.user
? '/storage-locations/new'
: `/storage-locations/new?group=${encodeHandleForUrl(this.selectedOwner)}`
}
},
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.
...mapActions(["fetchStorageLocations", "fetchGroupStorageLocations", "deleteStorageLocation",
"fetchIdMap", "fetchGroups", "fetchGroupMemberships"]),
fetchLocationsForOwner() {
return this.selectedOwner === this.user
? this.fetchStorageLocations()
: this.fetchGroupStorageLocations({groupHandle: this.selectedOwner})
},
tryDeleteLocation(location) {
this.deleteStorageLocation(location).then(() => {
this.fetchLocationsForOwner()
})
},
locationRoute(location) {
return `/storage-locations/${encodeHandleForUrl(location.owner_group || location.owner)}/${location.id}`
},
@ -153,9 +188,20 @@ export default {
return {path: '/print', query: {kind: 'storage-location', userHandle, location: location.id}}
},
},
watch: {
selectedOwner() {
this.fetchLocationsForOwner()
}
},
created() {
// Set before the first render so addLocationRoute/locations never see selectedOwner=null
// while user is already populated (which would misroute to the group branch).
this.selectedOwner = this.user
},
async mounted() {
await this.fetchStorageLocations()
await this.fetchIdMap()
await this.fetchGroups()
await this.fetchGroupMemberships()
}
}
</script>