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

add /inventory page

Browse source
This commit is contained in:
j3d1 2024-04-11 21:21:14 +02:00
parent 9770ca861a
commit 8716d3f692
8 changed files with 329 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

70
frontend/src/views/Inventory.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<div class="row">
<div class="col-12 col-xl-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">{{ user }}'s Inventory</h5>
</div>
<table class="table table-striped">
<thead>
<tr>
<th style="width:40%;">Name</th>
<th style="width:25%">Availability Policy</th>
<th class="d-none d-md-table-cell" style="width:25%">Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in inventory_items" :key="item.id">
<td>
{{ item.name }}
</td>
<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">
</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<button class="btn" @click="fetchInventoryItems">Refresh</button>
<router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
export default {
name: "Inventory",
components: {
BaseLayout,
...BIcons
},
computed: {
...mapGetters(["inventory_items", "loaded_items"]),
...mapState(["user"]),
},
methods: {
...mapActions(["fetchInventoryItems", "deleteInventoryItem"]),
},
async mounted() {
await this.fetchInventoryItems()
}
}
</script>
<style scoped>
</style>