stash

frontend/src/views/StorageLocationDetail.vue

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