aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.com>2024-07-09 06:10:12 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.com>2024-07-09 06:10:12 +0530
commitac8996cefaa27359a6f62cc570484b501903e6e2 (patch)
tree7bafe66c4b2297d45bc1171a3c95e44450631ec5
parent4cab86849f1739d001593a54790e9531bd54092a (diff)
added invoice note and total in words
-rw-r--r--src/classes/user.ts6
-rw-r--r--src/components/InvoiceHeaderEditor.vue1
-rw-r--r--src/components/PrintPreview.vue4
-rw-r--r--src/components/PrintPreviewFooter.vue37
-rw-r--r--src/components/PrintPreviewRecipientDetails.vue24
-rw-r--r--src/views/ViewInvoice.vue6
6 files changed, 55 insertions, 23 deletions
diff --git a/src/classes/user.ts b/src/classes/user.ts
index dc18717..d2fb3c4 100644
--- a/src/classes/user.ts
+++ b/src/classes/user.ts
@@ -6,7 +6,9 @@ export default class User {
Email: string
Website: string
Username: string
- IsVerified: bool
+ DefaultInvoiceNote: string
+ Details: string
+ IsVerified: boolean
constructor() {
this.FullName = ''
@@ -16,6 +18,8 @@ export default class User {
this.Email = ''
this.Website = ''
this.Username = ''
+ this.DefaultInvoiceNote = ''
+ this.Details = ''
this.IsVerified = false
}
}
diff --git a/src/components/InvoiceHeaderEditor.vue b/src/components/InvoiceHeaderEditor.vue
index d0bf81e..5b1f925 100644
--- a/src/components/InvoiceHeaderEditor.vue
+++ b/src/components/InvoiceHeaderEditor.vue
@@ -96,6 +96,7 @@ const submit = async (e: Event) => {
"issuerfirmemail": u.Email,
"issuerfirmwebsite": u.Website,
"issuerfirmdetails": u.Details,
+ "note": u.DefaultInvoiceNote,
})
route.push({ name: "edit-invoice", params: { id: res.data.data.ID }})
diff --git a/src/components/PrintPreview.vue b/src/components/PrintPreview.vue
index b733310..a4344b7 100644
--- a/src/components/PrintPreview.vue
+++ b/src/components/PrintPreview.vue
@@ -14,8 +14,10 @@
<PrintPreviewRecipientDetails
:invoice="props.invoice"/>
<PrintPreviewItemsList
- :items="props.invoice.Items"/>
+ :items="props.invoice.Items"
+ :total="props.total"/>
<PrintPreviewFooter
+ :invoice="props.invoice"
:total="props.total"/>
</div>
</template>
diff --git a/src/components/PrintPreviewFooter.vue b/src/components/PrintPreviewFooter.vue
index 48c9e51..61837ed 100644
--- a/src/components/PrintPreviewFooter.vue
+++ b/src/components/PrintPreviewFooter.vue
@@ -1,14 +1,30 @@
<script setup lang="ts">
import Converter from "number-to-words"
- const props = defineProps(["total"])
+ const props = defineProps(["invoice", "total"])
</script>
<template>
<div class="print-preview-footer">
<div class="footer--col1">
- <div class="total-words-label"></div>
- <div class="total-words">{{ Number.isFinite(props.total.TotalWithGST.value) && `${Converter.toWords(props.total.TotalWithGST.value)} only` }}</div>
+ <div class="footer--col1--row1">
+ <p class="total-words">
+ <strong>Total (in words):</strong>
+ {{ Number.isFinite(props.total.TotalWithGST.value) && `${Converter.toWords(props.total.TotalWithGST.value)} only` }}
+ </p>
+ </div>
+
+ <div class="footer--col1--row2">
+ </div>
+
+ <div class="footer--col1--row3">
+ <div>
+ <strong>Note:</strong>
+ </div>
+ <div>
+ {{ props.invoice.Note }}
+ </div>
+ </div>
</div>
<div class="footer--col2">
<div class="total-summary">
@@ -38,6 +54,10 @@
.total-words {
text-transform: capitalize;
}
+.footer--col1--row1 {
+ border-bottom: 1px solid gray;
+ padding: 0.1em 0.3em;
+}
.print-preview-footer {
border: 1px solid gray;
display: grid;
@@ -47,7 +67,7 @@
.footer--col1 {
border-right: 1pt solid gray;
display: grid;
- grid-template-rows: 2fr 8fr;
+ grid-template-rows: 2fr 4fr 6fr;
}
.firm-signature-wrapper {
display: flex;
@@ -62,9 +82,18 @@
.total-summary {
display: grid;
grid-template-columns: 1fr;
+ padding: 0.1em 0.3em;
}
.total-summary-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
+.footer--col1--row3 {
+ display: grid;
+ grid-template-rows: 1.3em 1fr;
+ white-space: pre-wrap;
+ line-height: 1.3;
+ padding: 0.1em 0.3em;
+ border-top: 1px solid gray;
+}
</style>
diff --git a/src/components/PrintPreviewRecipientDetails.vue b/src/components/PrintPreviewRecipientDetails.vue
index 6f1f5b7..f7733c9 100644
--- a/src/components/PrintPreviewRecipientDetails.vue
+++ b/src/components/PrintPreviewRecipientDetails.vue
@@ -17,11 +17,11 @@
<div class="recipient-info--row2">
<div class="recipient-info--col1 recipient-contact">
<div class="label">
- <span><strong>Bill To</strong></span>
+ <span><strong>Bill To:</strong></span>
<span>{{ props.invoice.CustomerName }}</span>
</div>
<div class="label">
- <span><strong>Address</strong></span>
+ <span><strong>Address:</strong></span>
<span>
{{ props.invoice.BillingAddress.AddressText }}<br>
{{ props.invoice.BillingAddress.City }}
@@ -31,23 +31,23 @@
</span>
</div>
<div class="label">
- <span><strong>Contact</strong></span>
+ <span><strong>Contact:</strong></span>
<span>{{ props.invoice.CustomerContactName }}</span>
</div>
<div class="label">
- <span><strong>Phone</strong></span>
+ <span><strong>Phone:</strong></span>
<span>{{ props.invoice.CustomerPhone }}</span>
</div>
<div class="label">
- <span><strong>Email</strong></span>
+ <span><strong>Email:</strong></span>
<span>{{ props.invoice.CustomerEmail }}</span>
</div>
<div class="label">
- <span><strong>Website</strong></span>
+ <span><strong>Website:</strong></span>
<span>{{ props.invoice.CustomerWebsite }}</span>
</div>
<div class="label">
- <span><strong>GSTIN</strong></span>
+ <span><strong>GSTIN:</strong></span>
<span>{{ props.invoice.CustomerGstin }}</span>
</div>
</div>
@@ -64,7 +64,7 @@
</div>
<div class="shipping-address">
<div class="label">
- <span><strong>Shipping Address</strong></span>
+ <span><strong>Shipping Address:</strong></span>
<span>
{{ props.invoice.ShippingAddress.AddressText }}<br>
{{ props.invoice.ShippingAddress.City }}
@@ -73,16 +73,16 @@
{{ props.invoice.ShippingAddress.Country }}
</span>
- <span><strong>City</strong></span>
+ <span><strong>City:</strong></span>
<span>{{ props.invoice.ShippingAddress.City }}</span>
- <span><strong>State</strong></span>
+ <span><strong>State:</strong></span>
<span>{{ props.invoice.ShippingAddress.State }}</span>
- <span><strong>ZIP Code</strong></span>
+ <span><strong>ZIP Code:</strong></span>
<span>{{ props.invoice.ShippingAddress.PostalCode }}</span>
- <span><strong>Country</strong></span>
+ <span><strong>Country:</strong></span>
<span>{{ props.invoice.ShippingAddress.Country }}</span>
</div>
</div>
diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue
index e35f9d5..20982d0 100644
--- a/src/views/ViewInvoice.vue
+++ b/src/views/ViewInvoice.vue
@@ -7,10 +7,6 @@ import axios from 'axios'
import Invoice, { InvoiceTotal } from "./../classes/invoice"
import { calculateArr, calculateTotal } 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'
-
import PrintPreview from './../components/PrintPreview.vue'
const toast = useToast({
@@ -80,7 +76,7 @@ onMounted(() => {
width: 100% !important;
height: 100% !important;
}
- #sidebar, #navbar, #print-button, .btn {
+ #sidebar, #navbar, #print-button, .btn, .v-toast {
display: none !important;
}
::-webkit-scrollbar {