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

add item edit page

Browse source
This commit is contained in:
j3d1 2024-08-30 23:05:01 +02:00
parent b8f1942ab1
commit f01d513803
12 changed files with 707 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,12 @@
<td class="d-none d-md-table-cell">{{ item.availability_policy }}</td>
<td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
<td class="table-action">
<router-link :to="`/inventory/${item.id}/edit`">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link>
<a :href="`/inventory/${item.id}/delete`" @click.prevent="deleteInventoryItem(item)">
<b-icon-trash></b-icon-trash>
</a>
</td>
</tr>
</tbody>

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

@ -28,6 +28,18 @@
</div>
</div>
</div>
<div class="card">
<button class="btn btn-primary" @click="$router.push('/inventory/' + id + '/edit')">
<b-icon-pencil-square></b-icon-pencil-square>
Edit
</button>
<button type="submit" class="btn btn-danger"
@click="deleteInventoryItem(item).then(() => $router.push('/inventory'))">
<b-icon-trash></b-icon-trash>
Delete
</button>
</div>
</div>
</div>
</main>

104
frontend/src/views/InventoryEdit.vue Normal file
View file

@ -0,0 +1,104 @@
<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">
<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";
export default {
name: "InventoryEdit",
components: {
BaseLayout,
TagField,
PropertyField,
...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"]),
},
async mounted() {
await this.fetchInfo();
await this.fetchInventoryItems();
}
}
</script>
<style scoped>
</style>