126 lines
No EOL
5 KiB
Vue
126 lines
No EOL
5 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<main class="content">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">Edit Item</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" name="name"
|
|
placeholder="Enter item name" v-model="item.name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
<textarea class="form-control" id="description" name="description"
|
|
placeholder="Enter description" v-model="item.description"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="tags" class="form-label">Tags</label>
|
|
<tag-field :value="item.tags"></tag-field>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="property" class="form-label">Property</label>
|
|
<property-field :value="item.properties"></property-field>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="quantity" class="form-label">Quantity</label>
|
|
<input type="number" class="form-control" id="quantity" name="quantity"
|
|
placeholder="Enter quantity" v-model="item.owned_quantity">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="availablity_policy" class="form-label">Availablity Policy</label>
|
|
<select class="form-select" id="availablity_policy" name="availablity_policy"
|
|
v-model="item.availability_policy">
|
|
<option v-for="policy in availability_policies" :value="policy.slug"
|
|
:selected="policy.slug === item.availability_policy">
|
|
{{ policy.text }}
|
|
</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
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import * as BIcons from "bootstrap-icons-vue";
|
|
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",
|
|
data() {
|
|
return {
|
|
item: {
|
|
name: "",
|
|
description: "",
|
|
quantity: 0,
|
|
price: 0,
|
|
image: "",
|
|
tags: [],
|
|
properties: []
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
BaseLayout,
|
|
TagField,
|
|
PropertyField,
|
|
CombinedFileField,
|
|
...BIcons
|
|
},
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["inventory_items"]),
|
|
...mapState(["availability_policies"]),
|
|
item() {
|
|
return {
|
|
tags: [],
|
|
properties: [],
|
|
name: "",
|
|
description: "",
|
|
owned_quantity: 0,
|
|
image: "",
|
|
files: [],
|
|
...this.inventory_items.find(item => item.id === parseInt(this.id))
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(["fetchInventoryItems", "updateInventoryItem", "fetchInfo"]),
|
|
addFiles(files) {
|
|
this.inventory_items.find(item => item.id === parseInt(this.id)).files = files
|
|
},
|
|
},
|
|
async mounted() {
|
|
await this.fetchInfo();
|
|
await this.fetchInventoryItems();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |