aboutsummaryrefslogtreecommitdiff
path: root/src/components/PrintPreviewFooter.vue
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 /src/components/PrintPreviewFooter.vue
parent4cab86849f1739d001593a54790e9531bd54092a (diff)
added invoice note and total in words
Diffstat (limited to 'src/components/PrintPreviewFooter.vue')
-rw-r--r--src/components/PrintPreviewFooter.vue37
1 files changed, 33 insertions, 4 deletions
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>