diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/InvoiceHeaderEditor.vue | 1 | ||||
| -rw-r--r-- | src/components/PrintPreview.vue | 4 | ||||
| -rw-r--r-- | src/components/PrintPreviewFooter.vue | 37 | ||||
| -rw-r--r-- | src/components/PrintPreviewRecipientDetails.vue | 24 |
4 files changed, 49 insertions, 17 deletions
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> |