diff options
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/EditInvoice.vue | 31 | ||||
-rw-r--r-- | src/views/HomeView.vue | 2 | ||||
-rw-r--r-- | src/views/ViewInvoice.vue | 72 |
3 files changed, 77 insertions, 28 deletions
diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue index adc172b..69afc7e 100644 --- a/src/views/EditInvoice.vue +++ b/src/views/EditInvoice.vue @@ -1,12 +1,11 @@ <script setup lang="ts"> -import { ref, onMounted, toRaw } from 'vue' +import { ref, onMounted } from 'vue' import { useRoute } from "vue-router" import { useToast } from 'vue-toast-notification' import axios from 'axios' -import currency from "currency.js" import Invoice from "./../classes/invoice" -import InvoiceItem from "./../classes/invoice_item" +import { calculate } from "./../classes/invoice_item" import invoiceHeader from './../components/invoice_header.vue' import itemSelector from './../components/item_selector.vue' @@ -25,28 +24,6 @@ const items = ref<any[]>([]) const invoiceIsLoading = ref(true) const itemsTableIsLoading = ref(true) -const processItems = (items: InvoiceItem[]) => items.map((x: InvoiceItem) => { - const quantity = currency(x.Quantity) - const unitPrice = currency(x.UnitPrice) - const gstPercentage = currency(x.GSTPercentage) - const gstValue = unitPrice.multiply(gstPercentage).divide(100) - const totalGSTValue = gstValue.multiply(quantity) - const amountWithoutGST = unitPrice.multiply(quantity) - - return({ - ...x - , Quantity: quantity - , UnitPrice: unitPrice - , GSTValue: gstValue - , TotalGSTValue: totalGSTValue - , AmountWithoutGST: amountWithoutGST - , TotalAmount: amountWithoutGST.add(totalGSTValue) - }) -}) - //{{ currency(item.UnitPrice).add(currency(item.UnitPrice).multiply(currency(item.GSTPercentage)).divide(100)).multiply(currency(item.Quantity)) }} - // {{ currency(item.UnitPrice).multiply(currency(item.Quantity)) }} - // {{ currency(item.UnitPrice).multiply(currency(item.GSTPercentage)).divide(100).multiply(item.Quantity) }} - const getInvoice = async () => { invoiceIsLoading.value = true itemsTableIsLoading.value = true @@ -54,7 +31,7 @@ const getInvoice = async () => { try { const r = await axios.get(`/invoice/${invoiceId}`) invoice.value = r.data.data - items.value = processItems(r.data.data.Items) + items.value = calculate(r.data.data.Items) } catch (err) { toast.error('An unhandled exception occoured. Please check logs') console.error(err) @@ -71,7 +48,7 @@ const refreshItems = async () => { try { const res = await axios.get(`/invoice/${invoiceId}/item`) if (res.status === 200) { - items.value = processItems(res.data.data) + items.value = calculate(res.data.data) } } catch (err) { toast.error('An unhandled exception occoured. Please check logs') diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 6ef6440..2092e6b 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -33,7 +33,7 @@ onMounted(() => { <h2>Draft Invoices:</h2> <ul> <li v-for="draft in allDrafts" :key="draft['ID']"> - <RouterLink :to="{path: `/invoice/edit-draft/${draft['ID']}`}">Invoice Number {{ draft["InvoiceNumber"] }}</RouterLink> + <RouterLink :to="{path: `/invoice/edit/${draft['ID']}`}">Invoice Number {{ draft["InvoiceNumber"] }}</RouterLink> </li> </ul> </template> diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue new file mode 100644 index 0000000..c2a6558 --- /dev/null +++ b/src/views/ViewInvoice.vue @@ -0,0 +1,72 @@ +<script setup lang="ts"> +import { ref, onMounted } from 'vue' +import { useRoute } from "vue-router" +import { useToast } from 'vue-toast-notification' +import axios from 'axios' + +import Invoice from "./../classes/invoice" +import { calculate } from "./../classes/invoice_item" + +import invoiceHeader from './../components/invoice_header.vue' +import invoiceItemsTable from './../components/invoice_items_table.vue' +import invoiceSummary from './../components/invoice_summary.vue' + +const toast = useToast({ + position: 'top-right' +}) + +const route = useRoute() + +const invoiceId = route.params.id +const invoice = ref(new Invoice()) +const items = ref<any[]>([]) + +const invoiceIsLoading = ref(true) +const itemsTableIsLoading = ref(true) + +const getInvoice = async () => { + invoiceIsLoading.value = true + itemsTableIsLoading.value = true + + try { + const r = await axios.get(`/invoice/${invoiceId}`) + invoice.value = r.data.data + items.value = calculate(r.data.data.Items) + } catch (err) { + toast.error('An unhandled exception occoured. Please check logs') + console.error(err) + } + + invoiceIsLoading.value = false + itemsTableIsLoading.value = false +} + +const handlePrint = () => { + print() +} + +onMounted(() => { + getInvoice() +}) +</script> + +<template> + <invoiceHeader + :invoice="invoice" /> + <invoiceItemsTable + :items="items" + :isLoading="itemsTableIsLoading" /> + <invoiceSummary + :items="items" + :isLoading="itemsTableIsLoading" + /> + <button id="print-button" class="btn btn-primary" @click="handlePrint">Print</button> +</template> + +<style> +@media print { + #sidebar, #navbar, #print-button, .btn { + display: none !important; + } +} +</style> |