j3d1/toolshed
1
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2023-11-01 01:39:58 +01:00
parent b5d079c9d9
commit c8fdfbb09a
5 changed files with 97 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/views/InventoryDetail.vue
View file

@ -32,6 +32,19 @@
<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>
<!-- actions -->
@ -59,14 +72,21 @@ import BaseLayout from "@/components/BaseLayout.vue";
import TagField from "@/components/TagField.vue";
import PropertyField from "@/components/PropertyField.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,
@ -80,14 +100,26 @@ export default {
}
},
methods: {
...mapActions(["fetchInventoryItems", "deleteInventoryItem"])
...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>