blob: 7615ec024494000fcc3beddbed296fe56923ea66 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
<script setup lang="js">
import { ref, toRaw, onMounted } from 'vue'
import axios from 'axios'
import { useToast } from 'vue-toast-notification'
import Item from './../classes/item'
const toast = useToast({
position: 'top-right'
})
const isLoading = ref(true)
const item = ref(new Item())
const itemBrand = ref({ id: 0, name: '' })
const allBrands = ref([])
const getAllBrands = async () => {
allBrands.value = []
isLoading.value = true
try {
const r = await axios.get('/brand')
if (r.status === 200) {
allBrands.value = r.data.data
} else if (r.status === 204) {
toast.warning('No brands found')
}
} catch (err) {
toast.error('An unhandled exception occoured. Please check logs')
console.error(err)
}
isLoading.value = false
}
const submit = async (e) => {
e.preventDefault()
try {
const i = toRaw(item.value)
i.brandid = toRaw(itemBrand.value).ID
i.unitprice = i.unitprice.toString()
i.gstpercentage = i.gstpercentage.toString()
await axios.post('/item', i)
toast.success('Successfully added a new item.')
// TODO: refresh items list
} catch (err) {
const statusCode = err.request.status
const res = JSON.parse(err.request.response)
switch (statusCode) {
case (400, 409):
toast.error(res.error)
break
default:
console.error(err)
toast.error('An unhandled exception occoured. Please check logs')
}
}
}
onMounted(() => {
getAllBrands()
})
</script>
<template>
<form class="row g-3" v-on:submit="submit">
<div class="col-md-4">
<label for="item-name-input" class="form-label">Item Name</label>
<input
type="text"
class="form-control"
id="item-name-input"
placeholder="Item Name"
v-model="item.name"
/>
</div>
<div class="col-md-6">
<label for="item-description-input" class="form-label">Description</label>
<input
type="text"
class="form-control"
id="item-description-input"
placeholder="Item Description"
v-model="item.description"
/>
</div>
<div class="col-md-2">
<label for="item-hsn-input" class="form-label">HSN</label>
<input
type="text"
class="form-control"
id="item-hsn-input"
placeholder="Item HSN"
v-model="item.hsn"
/>
</div>
<div class="col-md-3">
<label for="item-unitprice-input" class="form-label">Unit Price</label>
<input
type="number"
class="form-control"
id="item-unitprice-input"
placeholder="Unit Price"
v-model="item.unitprice"
/>
</div>
<div class="col-md-3">
<label for="item-gst-input" class="form-label">GST %</label>
<input
type="number"
class="form-control"
id="item-gst-input"
placeholder="Default GST %"
v-model="item.gstpercentage"
/>
</div>
<div class="col-md-3">
<label for="item-uom-input" class="form-label">Unit of Measurement (UOM)</label>
<input
type="text"
class="form-control"
id="item-uom-input"
placeholder="Unit of Measurement"
v-model="item.unitofmeasure"
/>
</div>
<div class="col-md-3">
<label for="item-brand-input" class="form-label">Brand</label>
<select
class="form-select"
aria-label="Select Brand"
id="item-brand-input"
v-model="itemBrand"
>
<option selected disabled value="0">Select Brand</option>
<option v-for="brand in allBrands" :value="brand" :key="brand.id">
{{ brand.Name }}
</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="gridCheck"
v-model="item.hasdecimalquantity"
/>
<label class="form-check-label" for="gridCheck">
Quantity can contain decimal places
</label>
</div>
</div>
<div class="col-12">
<input type="submit" value="Add New Item" class="btn btn-primary" />
</div>
</form>
</template>
|
