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

add item creation page

Browse source
This commit is contained in:
j3d1 2024-08-31 00:21:01 +02:00
parent f01d513803
commit 0af1f40b07
4 changed files with 155 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

98
frontend/src/views/InventoryNew.vue Normal file
View file

@ -0,0 +1,98 @@
<template>
<BaseLayout>
<main class="content">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Create New 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">
<button type="submit" class="btn btn-primary" style="width: 100%"
@click="createInventoryItem(item).then(() => $router.push('/inventory'))">Add
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import * as BIcons from "bootstrap-icons-vue";
import {mapActions, mapState} from "vuex";
import BaseLayout from "@/components/BaseLayout.vue";
import TagField from "@/components/TagField.vue";
import PropertyField from "@/components/PropertyField.vue";
export default {
name: "InventoryNew",
components: {
BaseLayout,
TagField,
PropertyField,
...BIcons
},
data() {
return {
item: {
name: "",
description: "",
owned_quantity: 0,
availability_policy: "",
image: "",
tags: [],
properties: [],
files: []
}
}
},
methods: {
...mapActions(['createInventoryItem', 'fetchInfo'])
},
computed: {
...mapState(["availability_policies"]),
},
async mounted() {
await this.fetchInfo();
}
}
</script>
<style scoped>
</style>