stash
This commit is contained in:
parent
ebd0db4b43
commit
2bb6624d50
4 changed files with 156 additions and 216 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue