diff options
author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-12-07 04:22:03 +0530 |
---|---|---|
committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-12-07 04:22:03 +0530 |
commit | 464dac56714f4fb187785abda04bf3f2170af2a2 (patch) | |
tree | 83421741c7a5f4633f927d5b424fdf6fbd2257c6 | |
parent | 95d531c8c356cc8e8011b7995b6ef4419c9dc383 (diff) |
showing more useful information in invoice items table
-rw-r--r-- | package-lock.json | 13 | ||||
-rw-r--r-- | package.json | 3 | ||||
-rw-r--r-- | src/App.vue | 10 | ||||
-rw-r--r-- | src/components/invoice_items_table.vue | 16 | ||||
-rw-r--r-- | src/views/EditInvoice.vue | 32 |
5 files changed, 59 insertions, 15 deletions
diff --git a/package-lock.json b/package-lock.json index f051c37..5413b8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,18 @@ { "name": "openbills-web", - "version": "0.1.1", + "version": "0.2.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "openbills-web", - "version": "0.1.1", + "version": "0.2.3", "dependencies": { "axios": "^1.5.1", "bootstrap": "^5.3.2", "bootstrap-icons": "^1.11.1", "bootstrap-icons-vue": "^1.11.1", + "currency.js": "^2.0.4", "vue": "^3.3.4", "vue-router": "^4.2.4", "vue-toast-notification": "^3.1.1" @@ -2115,6 +2116,14 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "node_modules/currency.js": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/currency.js/-/currency.js-2.0.4.tgz", + "integrity": "sha512-6/OplJYgJ0RUlli74d93HJ/OsKVBi8lB1+Z6eJYS1YZzBuIp4qKKHpJ7ad+GvTlWmLR/hLJOWTykN5Nm8NJ7+w==", + "engines": { + "node": ">=4" + } + }, "node_modules/de-indent": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", diff --git a/package.json b/package.json index 9a80ec7..9daaba8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openbills-web", - "version": "0.2.3", + "version": "0.2.4", "private": false, "scripts": { "dev": "vite", @@ -16,6 +16,7 @@ "bootstrap": "^5.3.2", "bootstrap-icons": "^1.11.1", "bootstrap-icons-vue": "^1.11.1", + "currency.js": "^2.0.4", "vue": "^3.3.4", "vue-router": "^4.2.4", "vue-toast-notification": "^3.1.1" diff --git a/src/App.vue b/src/App.vue index c637566..478a2c7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,7 +9,7 @@ import sidebar from './components/sidebar.vue' <navbar /> --> <sidebar /> - <main class="m-3"> + <main> <RouterView /> </main> </template> @@ -17,9 +17,17 @@ import sidebar from './components/sidebar.vue' <style> main { width: 100%; + overflow-x: scroll; + padding: 1rem 1.5rem 0 1.5rem; } #app { display: flex; flex-direction: row; + overflow-y: hidden; + max-height: 100vh; +} +.sup { + vertical-align: super; + font-size: 0.9em; } </style> diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue index 8d6ea6a..865ade2 100644 --- a/src/components/invoice_items_table.vue +++ b/src/components/invoice_items_table.vue @@ -11,11 +11,7 @@ const toast = useToast({ const handleDelete = async (id) => { try { - const res = await axios.delete(`/invoice/item/${id}`) - if (res.status === 200) { - toast.success('Successfully deleted item') - } - + await axios.delete(`/invoice/item/${id}`) emit("refresh") } catch (err) { toast.error('An unhandled exception occoured. Please check logs') @@ -40,7 +36,9 @@ const handleDelete = async (id) => { <th scope="col">Brand</th> <th scope="col">HSN</th> <th scope="col">Unit Price</th> - <th scope="col">UOM</th> + <th scope="col">GST <span class="sup text-muted">%</span></th> + <th scope="col">Quantity <span class="sup text-muted">Unit</span></th> + <th scope="col">Amount</th> <th scope="col" class="table-action-column"> <div class="wrapper"> @@ -60,7 +58,11 @@ const handleDelete = async (id) => { <td>{{ item.BrandName }}</td> <td>{{ item.HSN }}</td> <td>{{ item.UnitPrice }}</td> - <td>{{ item.UnitOfMeasure }}</td> + <td> + {{ item.GSTValue }} <span class="sup text-muted">{{ item.GSTPercentage }}%</span> + </td> + <td>{{ item.Quantity }} <span class="sup text-muted">{{ item.UnitOfMeasure }}</span></td> + <td>{{ item.TotalAmount }} <span class="sup text-muted">{{ item.AmountWithoutGST }} + {{ item.TotalGSTValue }}</span> </td> <td class="table-action-column"> <div class="wrapper"> diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue index 958846e..adc172b 100644 --- a/src/views/EditInvoice.vue +++ b/src/views/EditInvoice.vue @@ -3,8 +3,10 @@ import { ref, onMounted, toRaw } 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 invoiceHeader from './../components/invoice_header.vue' import itemSelector from './../components/item_selector.vue' @@ -18,11 +20,33 @@ const route = useRoute() const invoiceId = route.params.id const invoice = ref(new Invoice()) -const items = ref([]) +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 @@ -30,7 +54,7 @@ const getInvoice = async () => { try { const r = await axios.get(`/invoice/${invoiceId}`) invoice.value = r.data.data - items.value = r.data.data.Items + items.value = processItems(r.data.data.Items) } catch (err) { toast.error('An unhandled exception occoured. Please check logs') console.error(err) @@ -41,13 +65,13 @@ const getInvoice = async () => { } const refreshItems = async () => { - items.value = [] + //items.value = [] itemsTableIsLoading.value = true try { const res = await axios.get(`/invoice/${invoiceId}/item`) if (res.status === 200) { - items.value = res.data.data + items.value = processItems(res.data.data) } } catch (err) { toast.error('An unhandled exception occoured. Please check logs') |