stash

frontend/src/views/StorageLocationDetail.vue

@@ -0,0 +1,80 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="row">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header">{{ location.name }}</div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label for="path" class="form-label">Path</label>
+                                <div>{{ location.path }}</div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                <div>{{ location.description || '-' }}</div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="category" class="form-label">Category</label>
+                                <div>
+                                    <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
+                                    <span class="text-muted" v-else>-</span>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="owner" class="form-label">Owner</label>
+                                <div>{{ location.owner?.username || '-' }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <button class="btn btn-primary" @click="$router.push('/storage-locations/' + 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'))">
+                            <b-icon-trash></b-icon-trash>
+                            Delete
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+import {mapActions, mapState} from "vuex";
+
+export default {
+    name: "StorageLocationDetail",
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    props: {
+        id: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        ...mapState(["storage_locations"]),
+        location() {
+            return this.storage_locations.find(loc => loc.id === parseInt(this.id)) || {}
+        }
+    },
+    methods: {
+        ...mapActions(["fetchStorageLocations", "deleteStorageLocation"]),
+    },
+    async mounted() {
+        await this.fetchStorageLocations()
+    }
+}
+</script>
+
+<style scoped>
+</style>