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>

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

@ -26,6 +26,14 @@
<label for="quantity" class="form-label">Quantity</label>
{{ item.owned_quantity }}
</div>
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<div>
<authenticated-image v-for="file in item.files" :key="file.id" :src="file.name"
:owner="file.owner" class="img-thumbnail border-info"></authenticated-image>
</div>
</div>
</div>
</div>
<div class="card">
@ -50,10 +58,15 @@
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import {mapActions, mapGetters} from "vuex";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
import PropertyField from "../components/PropertyField.vue";
import TagField from "../components/TagField.vue";
export default {
name: "InventoryDetail",
components: {
AuthenticatedImage,
PropertyField, TagField,
BaseLayout,
...BIcons
},

10
frontend/src/views/InventoryEdit.vue
View file

@ -39,6 +39,11 @@
</option>
</select>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<combined-file-field :item_files="item.files" :item_id="item.id"
@change="changeFiles"></combined-file-field>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary" style="width: 100%"
@click="updateInventoryItem(item)">Update
@ -58,6 +63,7 @@ import {mapActions, mapGetters, mapState} from "vuex";
import BaseLayout from "@/components/BaseLayout.vue";
import TagField from "@/components/TagField.vue";
import PropertyField from "@/components/PropertyField.vue";
import CombinedFileField from "@/components/CombinedFileField.vue";
export default {
name: "InventoryEdit",
@ -65,6 +71,7 @@ export default {
BaseLayout,
TagField,
PropertyField,
CombinedFileField,
...BIcons
},
props: {
@ -91,6 +98,9 @@ export default {
},
methods: {
...mapActions(["fetchInventoryItems", "updateInventoryItem", "fetchInfo"]),
changeFiles(files) {
this.inventory_items.find(item => item.id === parseInt(this.id)).files = files
},
},
async mounted() {
await this.fetchInfo();

7
frontend/src/views/InventoryNew.vue
View file

@ -39,6 +39,11 @@
</option>
</select>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<combined-file-field :item_files="item.files" create
@change="item.files = $event"></combined-file-field>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary" style="width: 100%"
@click="createInventoryItem(item).then(() => $router.push('/inventory'))">Add
@ -58,6 +63,7 @@ import {mapActions, mapState} from "vuex";
import BaseLayout from "@/components/BaseLayout.vue";
import TagField from "@/components/TagField.vue";
import PropertyField from "@/components/PropertyField.vue";
import CombinedFileField from "@/components/CombinedFileField.vue";
export default {
name: "InventoryNew",
@ -65,6 +71,7 @@ export default {
BaseLayout,
TagField,
PropertyField,
CombinedFileField,
...BIcons
},
data() {