aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.com>2023-12-02 15:54:44 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.com>2023-12-02 15:54:44 +0530
commit511e5f3badb871a4407a1cfef2d17a8c99660d30 (patch)
tree8542fa15620c5e671b3e42e6bb3b0ad50635ed39 /src
parente60be6e3bd64abf11a4995a07c98bb875bae0134 (diff)
added new invoice page
Diffstat (limited to 'src')
-rw-r--r--src/classes/customer.ts28
-rw-r--r--src/components/invoice_header.vue118
-rw-r--r--src/router/index.ts9
-rw-r--r--src/views/NewInvoice.vue7
4 files changed, 147 insertions, 15 deletions
diff --git a/src/classes/customer.ts b/src/classes/customer.ts
index e5d0fff..b1c2df3 100644
--- a/src/classes/customer.ts
+++ b/src/classes/customer.ts
@@ -1,21 +1,21 @@
import Address from './address'
export default class Customer {
- name: string
- gstin: string
- contactname: string
- phone: string
- email: string
- website: string
- billingaddress: Address
+ Name: string
+ Gstin: string
+ ContactName: string
+ Phone: string
+ Email: string
+ Website: string
+ BillingAddress: Address
constructor() {
- this.name = ''
- this.gstin = ''
- this.contactname = ''
- this.phone = ''
- this.email = ''
- this.website = ''
- this.billingaddress = new Address()
+ this.Name = ''
+ this.Gstin = ''
+ this.ContactName = ''
+ this.Phone = ''
+ this.Email = ''
+ this.Website = ''
+ this.BillingAddress = new Address()
}
}
diff --git a/src/components/invoice_header.vue b/src/components/invoice_header.vue
new file mode 100644
index 0000000..2c62f15
--- /dev/null
+++ b/src/components/invoice_header.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, toRaw, onMounted } from 'vue'
+import axios from 'axios'
+import { useToast } from 'vue-toast-notification'
+
+const toast = useToast({
+ position: 'top-right'
+})
+
+const isLoading = ref(true)
+const allCustomers = ref([])
+
+const invoiceCustomer = ref(null)
+const invoiceNumber = ref(0)
+const invoiceDate = ref(new Date().toISOString().substr(0, 10))
+
+const handleDateChange = e => {
+ invoiceDate.value = e
+}
+
+const getAllCustomers = async () => {
+ allCustomers.value = []
+ isLoading.value = true
+
+ try {
+ const r = await axios.get('/customer')
+ if (r.status === 200) {
+ allCustomers.value = r.data.data
+ } else if (r.status === 204) {
+ toast.warning('No customers found')
+ }
+ } catch (err) {
+ toast.error('An unhandled exception occoured. Please check logs')
+ console.error(err)
+ }
+
+ isLoading.value = false
+}
+
+const submit = async (e) => {
+ e.preventDefault()
+ isLoading.value = true
+
+ try {
+ const c = toRaw(invoiceCustomer.value)
+
+ await axios.post('/invoice', {
+ "invoicenumber": toRaw(invoiceNumber.value),
+ "invoicedate": new Date(toRaw(invoiceDate.value)).toISOString(),
+ "isdraft": true,
+ "billingaddress": c.BillingAddress,
+ "shippingaddress": c.BillingAddress, // TODO
+ "customername": c.Name,
+ "customergstin": c.Gstin,
+ "customercontactname": c.ContactName,
+ "customerphone": c.Phone,
+ "customeremail": c.Email,
+ "customerwebsite": c.Website,
+ })
+ } 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')
+ }
+ }
+
+ isLoading.value = false
+}
+
+onMounted(() => {
+ getAllCustomers()
+})
+</script>
+
+<template>
+ <form class="row g-12" v-on:submit="submit">
+ <div class="col-md-4">
+ <label for="item-brand-input" class="form-label">Customer</label>
+ <select
+ v-model="invoiceCustomer"
+ class="form-select"
+ aria-label="Select Brand"
+ id="item-brand-input"
+ >
+ <option selected disabled value="null">Select Customer</option>
+ <option v-for="customer in allCustomers" :value="customer" :key="customer.id">
+ {{ customer.Name }}
+ </option>
+ </select>
+ </div>
+
+ <div class="col-md-4">
+ <label for="invoice-number" class="form-label">Invoice Number</label>
+ <input id="invoice-number" class="form-control" type="number" v-model="invoiceNumber" min="0"/>
+ </div>
+
+ <div class="col-md-4">
+ <label for="invoice-date" class="form-label">Invoice Date</label>
+ <input
+ type="date"
+ id="invoice-date"
+ class="form-control"
+ :value="new Date().toISOString().substr(0, 10)"
+ @input="handleDateChange($event.target.value)" />
+ </div>
+
+ <div class="col-12">
+ <input type="submit" value="Continue" class="btn btn-primary" />
+ </div>
+ </form>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 568bad8..7719220 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,7 @@ import AllCustomers from '../views/AllCustomers.vue'
import NewCustomer from '../views/NewCustomer.vue'
import AllItems from '../views/AllItems.vue'
import NewItem from '../views/NewItem.vue'
+import NewInvoice from '../views/NewInvoice.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -59,7 +60,13 @@ const router = createRouter({
name: 'new item',
component: NewItem,
meta: { isAuth: true }
- }
+ },
+ {
+ path: '/invoice/new',
+ name: 'new invoice',
+ component: NewInvoice,
+ meta: { isAuth: true }
+ },
]
})
diff --git a/src/views/NewInvoice.vue b/src/views/NewInvoice.vue
new file mode 100644
index 0000000..b2f32e2
--- /dev/null
+++ b/src/views/NewInvoice.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import invoiceHeader from './../components/invoice_header.vue'
+</script>
+
+<template>
+ <invoiceHeader />
+</template>