diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/components/invoice_items_table.vue | 8 | ||||
| -rw-r--r-- | src/components/invoice_summary.vue | 4 | ||||
| -rw-r--r-- | src/views/EditInvoice.vue | 12 | ||||
| -rw-r--r-- | src/views/ViewInvoice.vue | 56 |
5 files changed, 66 insertions, 16 deletions
diff --git a/package.json b/package.json index 523d4d9..bf34509 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openbills-web", - "version": "0.3.1", + "version": "0.3.2", "private": false, "scripts": { "dev": "vite", diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue index 865ade2..285f990 100644 --- a/src/components/invoice_items_table.vue +++ b/src/components/invoice_items_table.vue @@ -2,7 +2,7 @@ import axios from 'axios' import { useToast } from 'vue-toast-notification' -const props = defineProps(["items", "isLoading"]) +const props = defineProps(["items", "isLoading", "preview"]) const emit = defineEmits(["refresh"]) const toast = useToast({ @@ -27,7 +27,7 @@ const handleDelete = async (id) => { </div> </div> - <table v-else class="table table-striped table-hover"> + <table v-else :class="`invoice-items-table table table-striped table-hover ${props.preview ? 'table-light' : ''}`"> <thead> <tr> <th scope="col">#</th> @@ -40,7 +40,7 @@ const handleDelete = async (id) => { <th scope="col">Quantity <span class="sup text-muted">Unit</span></th> <th scope="col">Amount</th> - <th scope="col" class="table-action-column"> + <th v-if="!props.preview" scope="col" class="table-action-column"> <div class="wrapper"> <button class="btn btn-dark" v-on:click="emit('refresh')"> <i class="bi bi-arrow-clockwise"></i> @@ -64,7 +64,7 @@ const handleDelete = async (id) => { <td>{{ item.Quantity }} <span class="sup text-muted">{{ item.UnitOfMeasure }}</span></td> <td>{{ item.TotalAmount }} <span class="sup text-muted">{{ item.AmountWithoutGST }} + {{ item.TotalGSTValue }}</span> </td> - <td class="table-action-column"> + <td v-if="!props.preview" class="table-action-column"> <div class="wrapper"> <button class="btn" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-caret-down-fill"></i> diff --git a/src/components/invoice_summary.vue b/src/components/invoice_summary.vue index 6ca7907..31fb7a5 100644 --- a/src/components/invoice_summary.vue +++ b/src/components/invoice_summary.vue @@ -5,5 +5,7 @@ const props = defineProps(["items", "isLoading"]) </script> <template> - Total: {{ props.items.reduce((t, c) => t.add(c.TotalAmount), currency(0)) }} + <div class="invoice-summary"> + Total: {{ props.items.reduce((t, c) => t.add(c.TotalAmount), currency(0)) }} + </div> </template> 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> |