80 lines
2.9 KiB
Vue
80 lines
2.9 KiB
Vue
<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>
|