aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json13
-rw-r--r--package.json3
-rw-r--r--src/App.vue10
-rw-r--r--src/components/invoice_items_table.vue16
-rw-r--r--src/views/EditInvoice.vue32
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')
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-19 22:00:49 +0000