diff options
author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-12-02 15:54:44 +0530 |
---|---|---|
committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-12-02 15:54:44 +0530 |
commit | 511e5f3badb871a4407a1cfef2d17a8c99660d30 (patch) | |
tree | 8542fa15620c5e671b3e42e6bb3b0ad50635ed39 /src | |
parent | e60be6e3bd64abf11a4995a07c98bb875bae0134 (diff) |
added new invoice page
Diffstat (limited to 'src')
-rw-r--r-- | src/classes/customer.ts | 28 | ||||
-rw-r--r-- | src/components/invoice_header.vue | 118 | ||||
-rw-r--r-- | src/router/index.ts | 9 | ||||
-rw-r--r-- | src/views/NewInvoice.vue | 7 |
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> |