122 lines
No EOL
4.7 KiB
Vue
122 lines
No EOL
4.7 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>
|
|
<!-- TODO -->
|
|
<!--div class="mb-3">
|
|
<label for="image" class="form-label">Image</label>
|
|
<input type="text" class="form-control" id="image" name="image"
|
|
placeholder="Enter image" v-model="item.image">
|
|
</div-->
|
|
<div class="mb-3">
|
|
<label for="image" class="form-label">Image</label>
|
|
<div>
|
|
<img v-for="file in files" :key="file.id" :alt="file.name"
|
|
:src="'https://toolshed.j3d1.de'+file.name" class="img-thumbnail border-info">
|
|
<!-- TODO replace dirty hack with proper solution -->
|
|
</div>
|
|
<div>
|
|
<authenticated-image v-for="file in files" :key="file.id" :src="file.name"
|
|
:owner="file.owner"></authenticated-image>
|
|
</div>
|
|
|
|
</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";
|
|
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
|
|
|
export default {
|
|
name: "InventoryDetail",
|
|
components: {
|
|
AuthenticatedImage,
|
|
PropertyField, TagField,
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
data() {
|
|
return {
|
|
files: []
|
|
}
|
|
},
|
|
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()
|
|
console.log(this.id, typeof this.id)
|
|
const files = await this.fetchFilesByItem({id: this.id})
|
|
this.files = files.map(file => {
|
|
return {
|
|
...file,
|
|
owner: this.item.owner
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
width: 190px;
|
|
height: 107px;
|
|
object-fit: contain;
|
|
}
|
|
</style> |