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

add item images

Browse source
This commit is contained in:
j3d1 2024-08-31 02:50:08 +02:00
parent 0af1f40b07
commit 448c166507
18 changed files with 826 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/views/Inventory.vue
View file

@ -48,24 +48,27 @@
<div class="col-12 col-md-6 col-lg-4 col-xl-3" v-for="item in inventory_items"
:key="item.id">
<div class="card">
<img :src="item.image" class="card-img-top" :alt="item.image || '...'">
<img :src="item.image" class="" :alt="item.image">
<authenticated-image v-if="only_images(item.files).length > 0"
:src="only_images(item.files)[0].name"
:owner="only_images(item.files)[0].owner"
class="card-img-top img-preview"/>
<div class="card-body">
<h5 class="card-title mb-0">{{ item.name }}</h5>
<h5 class="card-title mb-0">
<router-link :to="`/inventory/${item.id}`">
{{ item.name }}
</router-link></h5>
<div class="card-text text-black-50">
<span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
<span class="float-right">{{ item.owned_quantity }}</span>
</div>
<div class="btn-group">
<!--router-link :to="`/inventory/${item.id}`"
class="btn btn-primary btn-sm">
View
</router-link>
<button class="btn btn-danger btn-sm"
@click="deleteInventoryItem(item.id)">Delete
</button>
<router-link :to="`/inventory/${item.id}/edit`"
class="btn btn-primary btn-sm">Edit
</router-link-->
</router-link>
</div>
</div>
</div>
@ -89,6 +92,7 @@
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import AuthenticatedImage from "../components/AuthenticatedImage.vue";
export default {
name: "Inventory",
@ -98,6 +102,7 @@ export default {
}
},
components: {
AuthenticatedImage,
BaseLayout,
...BIcons
},
@ -107,6 +112,9 @@ export default {
},
methods: {
...mapActions(["fetchInventoryItems", "deleteInventoryItem"]),
only_images(files) {
return files.filter(file => file.mime_type.startsWith("image/"));
},
},
async mounted() {
await this.fetchInventoryItems()
@ -115,5 +123,7 @@ export default {
</script>
<style scoped>
.img-preview {
object-fit: cover;
}
</style>