diff options
author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2024-07-09 06:10:12 +0530 |
---|---|---|
committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2024-07-09 06:10:12 +0530 |
commit | ac8996cefaa27359a6f62cc570484b501903e6e2 (patch) | |
tree | 7bafe66c4b2297d45bc1171a3c95e44450631ec5 /src/components/PrintPreviewFooter.vue | |
parent | 4cab86849f1739d001593a54790e9531bd54092a (diff) |
added invoice note and total in words
Diffstat (limited to 'src/components/PrintPreviewFooter.vue')
-rw-r--r-- | src/components/PrintPreviewFooter.vue | 37 |
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> |