add item creation page
This commit is contained in:
parent
f01d513803
commit
0af1f40b07
4 changed files with 155 additions and 5 deletions
|
|
@ -3,10 +3,11 @@ import Dashboard from '@/views/Dashboard.vue';
|
|||
import Login from '@/views/Login.vue';
|
||||
import Register from '@/views/Register.vue';
|
||||
import store from '@/store';
|
||||
import Friends from "@/views/Friends.vue";
|
||||
import Friends from '@/views/Friends.vue';
|
||||
import Inventory from '@/views/Inventory.vue';
|
||||
import InventoryDetail from "@/views/InventoryDetail.vue";
|
||||
import InventoryEdit from "./views/InventoryEdit.vue";
|
||||
import InventoryDetail from '@/views/InventoryDetail.vue';
|
||||
import InventoryNew from '@/views/InventoryNew.vue';
|
||||
import InventoryEdit from '@/views/InventoryEdit.vue';
|
||||
|
||||
|
||||
const routes = [
|
||||
|
|
@ -14,6 +15,7 @@ const routes = [
|
|||
{path: '/inventory', component: Inventory, meta: {requiresAuth: true}},
|
||||
{path: '/inventory/:id', component: InventoryDetail, meta: {requiresAuth: true}, props: true},
|
||||
{path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}, props: true},
|
||||
{path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}},
|
||||
{path: '/friends', component: Friends, meta: {requiresAuth: true}},
|
||||
{path: '/login', component: Login, meta: {requiresAuth: false}},
|
||||
{path: '/register', component: Register, meta: {requiresAuth: false}},
|
||||
|
|
|
|||
|
|
@ -160,6 +160,13 @@ export default createStore({
|
|||
commit('setInventoryItems', {url: '/', items})
|
||||
return items
|
||||
},
|
||||
async createInventoryItem({state, dispatch, getters}, item) {
|
||||
const servers = await dispatch('getHomeServers')
|
||||
const data = {availability_policy: 'private', ...item}
|
||||
const reply = await servers.post(getters.signAuth, '/api/inventory_items/', data)
|
||||
state.last_load.files = 0
|
||||
return reply
|
||||
},
|
||||
async updateInventoryItem({state, dispatch, getters}, item) {
|
||||
const servers = await dispatch('getHomeServers')
|
||||
const data = {availability_policy: 'friends', ...item}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,14 @@
|
|||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">{{ user }}'s Inventory</h5>
|
||||
<button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
|
||||
<b-icon-list></b-icon-list>
|
||||
</button>
|
||||
<button v-else @click="layout = 'grid'" class="btn">
|
||||
<b-icon-grid></b-icon-grid>
|
||||
</button>
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<table class="table table-striped" v-if="layout === 'table'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40%;">Name</th>
|
||||
|
|
@ -22,7 +28,9 @@
|
|||
<td>
|
||||
<router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">{{ item.availability_policy }}</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
|
||||
<td class="table-action">
|
||||
<router-link :to="`/inventory/${item.id}/edit`">
|
||||
|
|
@ -35,6 +43,36 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-body" v-else>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3" v-for="item in inventory_items"
|
||||
:key="item.id">
|
||||
<div class="card">
|
||||
<img :src="item.image" class="card-img-top" :alt="item.image || '...'">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">{{ item.name }}</h5>
|
||||
<div class="card-text text-black-50">
|
||||
<span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
|
||||
<span class="float-right">{{ item.owned_quantity }}</span>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<!--router-link :to="`/inventory/${item.id}`"
|
||||
class="btn btn-primary btn-sm">
|
||||
View
|
||||
</router-link>
|
||||
<button class="btn btn-danger btn-sm"
|
||||
@click="deleteInventoryItem(item.id)">Delete
|
||||
</button>
|
||||
<router-link :to="`/inventory/${item.id}/edit`"
|
||||
class="btn btn-primary btn-sm">Edit
|
||||
</router-link-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card">
|
||||
<button class="btn" @click="fetchInventoryItems">Refresh</button>
|
||||
|
|
@ -54,6 +92,11 @@ import BaseLayout from "@/components/BaseLayout.vue";
|
|||
|
||||
export default {
|
||||
name: "Inventory",
|
||||
data() {
|
||||
return {
|
||||
layout: "grid",
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BaseLayout,
|
||||
...BIcons
|
||||
|
|
|
|||
98
frontend/src/views/InventoryNew.vue
Normal file
98
frontend/src/views/InventoryNew.vue
Normal 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>
|
||||
Loading…
Reference in a new issue