88 lines
No EOL
3.1 KiB
Vue
88 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<main class="content">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">{{ item.name }}</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
{{ item.description }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="tags" class="form-label">Tags</label>
|
|
<span class="badge bg-dark" v-for="(tag, index) in item.tags" :key="index">
|
|
{{ tag }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="property" class="form-label">Properties</label>
|
|
<span class="badge bg-dark" v-for="(property, index) in item.properties" :key="index">
|
|
{{ property.name }}={{ property.value }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="quantity" class="form-label">Quantity</label>
|
|
{{ item.owned_quantity }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<button class="btn btn-primary" @click="$router.push('/inventory/' + id + '/edit')">
|
|
<b-icon-pencil-square></b-icon-pencil-square>
|
|
Edit
|
|
</button>
|
|
<button type="submit" class="btn btn-danger"
|
|
@click="deleteInventoryItem(item).then(() => $router.push('/inventory'))">
|
|
<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, mapGetters} from "vuex";
|
|
|
|
export default {
|
|
name: "InventoryDetail",
|
|
components: {
|
|
PropertyField, TagField,
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["loaded_items"]),
|
|
item() {
|
|
return this.loaded_items.find(item => item.id === parseInt(this.id)) || {}
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(["fetchInventoryItems", "deleteInventoryItem", "fetchFilesByItem"]),
|
|
},
|
|
async mounted() {
|
|
await this.fetchInventoryItems()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
width: 190px;
|
|
height: 107px;
|
|
object-fit: contain;
|
|
}
|
|
</style> |