diff options
author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-12-07 16:17:28 +0530 |
---|---|---|
committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2023-12-07 16:17:28 +0530 |
commit | 3ebd619d89aa20b57542888ac1dac47451c4b1a9 (patch) | |
tree | 56e7376bc70bb11365e8842d5b8717aaed7ea29d /src/views | |
parent | 06a157b8cd0bcd0bba0f6a7f81693c3cfa27d74d (diff) |
making print preview slightly better0.3.2
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/EditInvoice.vue | 12 | ||||
-rw-r--r-- | src/views/ViewInvoice.vue | 56 |
2 files changed, 58 insertions, 10 deletions
diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue index 69afc7e..0b6fa97 100644 --- a/src/views/EditInvoice.vue +++ b/src/views/EditInvoice.vue @@ -1,6 +1,6 @@ <script setup lang="ts"> import { ref, onMounted } from 'vue' -import { useRoute } from "vue-router" +import { useRoute, useRouter } from "vue-router" import { useToast } from 'vue-toast-notification' import axios from 'axios' @@ -10,12 +10,14 @@ import { calculate } from "./../classes/invoice_item" import invoiceHeader from './../components/invoice_header.vue' import itemSelector from './../components/item_selector.vue' import invoiceItemsTable from './../components/invoice_items_table.vue' +import invoiceSummary from './../components/invoice_summary.vue' const toast = useToast({ position: 'top-right' }) const route = useRoute() +const router = useRouter() const invoiceId = route.params.id const invoice = ref(new Invoice()) @@ -58,6 +60,10 @@ const refreshItems = async () => { itemsTableIsLoading.value = false } +const handleSubmit = () => { + router.push({path: `/invoice/view/${invoiceId}`}) +} + onMounted(() => { getInvoice() }) @@ -73,4 +79,8 @@ onMounted(() => { :items="items" :isLoading="itemsTableIsLoading" @refresh="refreshItems()" /> + <invoiceSummary + :items="items" + :isLoading="itemsTableIsLoading"/> + <button class="btn btn-primary" @click="handleSubmit">Preview (Danger)</button> </template> diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue index 5cc04b8..4ac8325 100644 --- a/src/views/ViewInvoice.vue +++ b/src/views/ViewInvoice.vue @@ -51,25 +51,63 @@ onMounted(() => { </script> <template> - <invoiceHeader - :invoice="invoice" /> - <invoiceItemsTable - :items="items" - :isLoading="itemsTableIsLoading" /> - <invoiceSummary - :items="items" - :isLoading="itemsTableIsLoading" - /> + <div id="print-preview" class="bg-light text-black"> + <invoiceHeader + :invoice="invoice" /> + <invoiceItemsTable + preview=true + :items="items" + :isLoading="itemsTableIsLoading" /> + <invoiceSummary + :items="items" + :isLoading="itemsTableIsLoading" + /> + </div> <button id="print-button" class="btn btn-primary" @click="handlePrint">Print</button> </template> <style> +#print-preview { + width: 670px; +} +#print-preview * { + font-size: 12pt !important; +} +#print-preview .sup { + display: none; +} +#print-preview table { + width: 100%; +} +#print-preview table * { + font-size: 10pt !important; +} +#print-preview .invoice-items-table { + margin-bottom: auto !important; +} +#print-preview .invoice-summary { + margin-top: auto !important; +} @media print { + #print-preview { + width: auto !important; + } #sidebar, #navbar, #print-button, .btn { display: none !important; } ::-webkit-scrollbar { display: none; } + main { + width: 100% !important; + overflow-x: visible !important; + margin: 0 !important; + padding: 0 !important; + } + #app { + display: block; + max-height: auto !important; + overflow-y: visible !important; + } } </style> |