diff options
author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2024-04-06 10:26:44 +0530 |
---|---|---|
committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2024-04-06 10:26:44 +0530 |
commit | 63823d41addec00556a93eabffa455630d169ca6 (patch) | |
tree | 2b548e2a6b00ae7ef3859e4a4cb807329a62a4a2 /src/components/PrintPreviewRecipientDetails.vue | |
parent | a26ab9f60314420aad1c7d2a328d299f503532fa (diff) |
added basic (and incomplete) print preview template
Diffstat (limited to 'src/components/PrintPreviewRecipientDetails.vue')
-rw-r--r-- | src/components/PrintPreviewRecipientDetails.vue | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/src/components/PrintPreviewRecipientDetails.vue b/src/components/PrintPreviewRecipientDetails.vue new file mode 100644 index 0000000..6f1f5b7 --- /dev/null +++ b/src/components/PrintPreviewRecipientDetails.vue @@ -0,0 +1,146 @@ +<script setup lang="ts"> + const props = defineProps(["invoice"]) +</script> + +<template> + <div class="print-preview-recipient-info"> + <div class="recipient-info--row1"> + <div class="recipient-info--col1"> + </div> + <div class="recipient-info--col2"> + <span class="invoice-label"> + <span><strong>INVOICE</strong></span> + <span>Original for Recipient</span> + </span> + </div> + </div> + <div class="recipient-info--row2"> + <div class="recipient-info--col1 recipient-contact"> + <div class="label"> + <span><strong>Bill To</strong></span> + <span>{{ props.invoice.CustomerName }}</span> + </div> + <div class="label"> + <span><strong>Address</strong></span> + <span> + {{ props.invoice.BillingAddress.AddressText }}<br> + {{ props.invoice.BillingAddress.City }} + ({{ props.invoice.BillingAddress.PostalCode }}), + {{ props.invoice.BillingAddress.State }}, + {{ props.invoice.BillingAddress.Country }} + </span> + </div> + <div class="label"> + <span><strong>Contact</strong></span> + <span>{{ props.invoice.CustomerContactName }}</span> + </div> + <div class="label"> + <span><strong>Phone</strong></span> + <span>{{ props.invoice.CustomerPhone }}</span> + </div> + <div class="label"> + <span><strong>Email</strong></span> + <span>{{ props.invoice.CustomerEmail }}</span> + </div> + <div class="label"> + <span><strong>Website</strong></span> + <span>{{ props.invoice.CustomerWebsite }}</span> + </div> + <div class="label"> + <span><strong>GSTIN</strong></span> + <span>{{ props.invoice.CustomerGstin }}</span> + </div> + </div> + <div class="recipient-info--col2"> + <div class="invoice-meta"> + <div class="label"> + <span><strong>Invoice Number: </strong></span> + <span>{{ props.invoice.InvoiceNumber }}</span> + </div> + <div class="label"> + <span><strong>Invoice Date: </strong></span> + <span>{{ new Date(props.invoice.InvoiceDate).toLocaleDateString() }}</span> + </div> + </div> + <div class="shipping-address"> + <div class="label"> + <span><strong>Shipping Address</strong></span> + <span> + {{ props.invoice.ShippingAddress.AddressText }}<br> + {{ props.invoice.ShippingAddress.City }} + ({{ props.invoice.ShippingAddress.PostalCode }}), + {{ props.invoice.ShippingAddress.State }}, + {{ props.invoice.ShippingAddress.Country }} + </span> + + <span><strong>City</strong></span> + <span>{{ props.invoice.ShippingAddress.City }}</span> + + <span><strong>State</strong></span> + <span>{{ props.invoice.ShippingAddress.State }}</span> + + <span><strong>ZIP Code</strong></span> + <span>{{ props.invoice.ShippingAddress.PostalCode }}</span> + + <span><strong>Country</strong></span> + <span>{{ props.invoice.ShippingAddress.Country }}</span> + </div> + </div> + </div> + </div> + </div> +</template> + +<style> +.print-preview-recipient-info { + border: 1px solid gray; + display: grid; + grid-template-rows: 2em auto; + width: 100%; +} +.recipient-info--row1, +.recipient-info--row2 { + display: grid; + grid-template-columns: 3fr 4fr; +} +.recipient-info--row1 { + border-bottom: 1px solid gray; +} +.recipient-info--col1 { + border-right: 1px solid gray; +} +.recipient-info--col1 { + padding: 0.1em 0.3em; +} +.invoice-label { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 0.3em; +} +.recipient-contact { + display: flex; + flex-direction: column; +} +.recipient-contact .label { + display: grid; + grid-template-columns: 5em auto; +} +.invoice-meta { + width: 100%; + border-bottom: 1px solid gray; + padding: 0.3em 0.3em; + display: grid; + grid-template-columns: 1fr 1fr; +} +.invoice-meta .label, .shipping-address .label { + display: grid; + grid-template-columns: 9em auto; +} +.shipping-address { + width: 100%; + padding: 0.1em 0.3em; +} +</style> |