stash
This commit is contained in:
parent
ad9109a8e0
commit
02e41214d2
2 changed files with 123 additions and 58 deletions
|
|
@ -4,38 +4,48 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">Inventory</div>
|
<div class="card-header">Edit Item</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<table class="table table-striped">
|
<div class="mb-3">
|
||||||
<thead>
|
<span class="badge bg-dark" v-for="(tag, index) in item.tags" :key="index">
|
||||||
<tr>
|
{{ tag }}
|
||||||
<th>Item</th>
|
</span>
|
||||||
<th>Quantity</th>
|
|
||||||
<th>Owner</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="item in inventory_items" :key="item.id">
|
|
||||||
<td>{{ item.name }}</td>
|
|
||||||
<td>{{ item.quantity }}</td>
|
|
||||||
<td>{{ item.owner }}</td>
|
|
||||||
<td>
|
|
||||||
<a href="#">
|
|
||||||
<b-icon-pencil-square></b-icon-pencil-square>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<b-icon-trash></b-icon-trash>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="mb-3">
|
||||||
<button class="btn" @click="getInventoryItems">Refresh</button>
|
<span class="badge bg-dark" v-for="(property, index) in item.properties" :key="index">
|
||||||
<router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
|
{{ property.name }}={{ property.value }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<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="quantity" class="form-label">Quantity</label>
|
||||||
|
<input type="number" class="form-control" id="quantity" name="quantity"
|
||||||
|
placeholder="Enter quantity" v-model="item.quantity">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="price" class="form-label">Price</label>
|
||||||
|
<input type="number" class="form-control" id="price" name="price"
|
||||||
|
placeholder="Enter price" v-model="item.price">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="image" class="form-label">Image</label>
|
||||||
|
<input type="text" class="form-control" id="image" name="image"
|
||||||
|
placeholder="Enter image" v-model="item.image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--div class="card">
|
||||||
|
<button type="submit" class="btn btn-primary" @click="updateInventoryItem(item)">Update
|
||||||
|
</button>
|
||||||
|
</div-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -46,10 +56,26 @@
|
||||||
<script>
|
<script>
|
||||||
import * as BIcons from "bootstrap-icons-vue";
|
import * as BIcons from "bootstrap-icons-vue";
|
||||||
import BaseLayout from "@/components/BaseLayout.vue";
|
import BaseLayout from "@/components/BaseLayout.vue";
|
||||||
|
import TagField from "@/components/TagField.vue";
|
||||||
|
import PropertyField from "@/components/PropertyField.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "InventoryDetail",
|
name: "InventoryDetail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
item: {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
quantity: 0,
|
||||||
|
price: 0,
|
||||||
|
image: "",
|
||||||
|
tags: [],
|
||||||
|
properties: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
|
PropertyField, TagField,
|
||||||
BaseLayout,
|
BaseLayout,
|
||||||
...BIcons
|
...BIcons
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -4,37 +4,55 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">Inventory</div>
|
<div class="card-header">Edit Item</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<table class="table table-striped">
|
<div class="mb-3">
|
||||||
<thead>
|
<ul>
|
||||||
<tr>
|
<li v-for="tag in item.tags" :key="tag">
|
||||||
<th>Item</th>
|
{{ tag }}
|
||||||
<th>Quantity</th>
|
</li>
|
||||||
<th>Owner</th>
|
</ul>
|
||||||
<th>Actions</th>
|
<label for="tags" class="form-label">Tags</label>
|
||||||
</tr>
|
<tag-field :value="item.tags"></tag-field>
|
||||||
</thead>
|
</div>
|
||||||
<tbody>
|
<div class="mb-3">
|
||||||
<tr v-for="item in inventory_items" :key="item.id">
|
<ul>
|
||||||
<td>{{ item.name }}</td>
|
<li v-for="property in item.properties" :key="property">
|
||||||
<td>{{ item.quantity }}</td>
|
{{ property.name }}: {{ property.value }}
|
||||||
<td>{{ item.owner }}</td>
|
</li>
|
||||||
<td>
|
</ul>
|
||||||
<a href="#">
|
<label for="property" class="form-label">Property</label>
|
||||||
<b-icon-pencil-square></b-icon-pencil-square>
|
<property-field :value="item.properties"></property-field>
|
||||||
</a>
|
</div>
|
||||||
<a href="#">
|
<div class="mb-3">
|
||||||
<b-icon-trash></b-icon-trash>
|
<label for="name" class="form-label">Name</label>
|
||||||
</a>
|
<input type="text" class="form-control" id="name" name="name"
|
||||||
</td>
|
placeholder="Enter item name" v-model="item.name">
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
<div class="mb-3">
|
||||||
</table>
|
<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="quantity" class="form-label">Quantity</label>
|
||||||
|
<input type="number" class="form-control" id="quantity" name="quantity"
|
||||||
|
placeholder="Enter quantity" v-model="item.quantity">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="price" class="form-label">Price</label>
|
||||||
|
<input type="number" class="form-control" id="price" name="price"
|
||||||
|
placeholder="Enter price" v-model="item.price">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="image" class="form-label">Image</label>
|
||||||
|
<input type="text" class="form-control" id="image" name="image"
|
||||||
|
placeholder="Enter image" v-model="item.image">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<button class="btn" @click="getInventoryItems">Refresh</button>
|
<button type="submit" class="btn btn-primary" @click="updateInventoryItem(item)">Update
|
||||||
<router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -45,14 +63,35 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as BIcons from "bootstrap-icons-vue";
|
import * as BIcons from "bootstrap-icons-vue";
|
||||||
|
import {mapActions} from "vuex";
|
||||||
import BaseLayout from "@/components/BaseLayout.vue";
|
import BaseLayout from "@/components/BaseLayout.vue";
|
||||||
|
import TagField from "@/components/TagField.vue";
|
||||||
|
import PropertyField from "@/components/PropertyField.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "InventoryEdit",
|
name: "InventoryEdit",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
item: {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
quantity: 0,
|
||||||
|
price: 0,
|
||||||
|
image: "",
|
||||||
|
tags: [],
|
||||||
|
properties: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
BaseLayout,
|
BaseLayout,
|
||||||
|
TagField,
|
||||||
|
PropertyField,
|
||||||
...BIcons
|
...BIcons
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(["updateInventoryItem"]),
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue