populated items list and total in print preview

2 files changed, 19 insertions, 13 deletions

diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue
index 0b6fa97..1ea9664 100644
--- a/src/views/EditInvoice.vue
+++ b/src/views/EditInvoice.vue
@@ -5,7 +5,7 @@ import { useToast } from 'vue-toast-notification'
 import axios from 'axios'
 
 import Invoice from "./../classes/invoice"
-import { calculate } from "./../classes/invoice_item"
+import { calculateArr } from "./../classes/invoice_item"
 
 import invoiceHeader from './../components/invoice_header.vue'
 import itemSelector from './../components/item_selector.vue'
@@ -33,7 +33,7 @@ const getInvoice = async () => {
   try {
     const r = await axios.get(`/invoice/${invoiceId}`)
     invoice.value = r.data.data
-    items.value = calculate(r.data.data.Items)
+    items.value = calculateArr(r.data.data.Items)
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
     console.error(err)
@@ -50,7 +50,7 @@ const refreshItems = async () => {
   try {
     const res = await axios.get(`/invoice/${invoiceId}/item`)
     if (res.status === 200) {
-      items.value = calculate(res.data.data)
+      items.value = calculateArr(res.data.data)
     }
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue
index b8b7f2d..e35f9d5 100644
--- a/src/views/ViewInvoice.vue
+++ b/src/views/ViewInvoice.vue
@@ -4,8 +4,8 @@ import { useRoute } from "vue-router"
 import { useToast } from 'vue-toast-notification'
 import axios from 'axios'
 
-import Invoice from "./../classes/invoice"
-import { calculate } from "./../classes/invoice_item"
+import Invoice, { InvoiceTotal } from "./../classes/invoice"
+import { calculateArr, calculateTotal } from "./../classes/invoice_item"
 
 import invoiceHeader from './../components/invoice_header.vue'
 import invoiceItemsTable from './../components/invoice_items_table.vue'
@@ -21,26 +21,29 @@ const route = useRoute()
 
 const invoiceId = route.params.id
 const invoice = ref(new Invoice())
-const items = ref<any[]>([])
+const total = ref(new InvoiceTotal())
 
 const invoiceIsLoading = ref(true)
-const itemsTableIsLoading = ref(true)
 
 const getInvoice = async () => {
   invoiceIsLoading.value = true
-  itemsTableIsLoading.value = true
 
   try {
     const r = await axios.get(`/invoice/${invoiceId}`)
-    invoice.value = r.data.data
-    items.value = calculate(r.data.data.Items)
+    const items = calculateArr(r.data.data.Items)
+
+    invoice.value = {
+      ...r.data.data, 
+      Items: items
+    }
+
+    total.value = calculateTotal(items)
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
     console.error(err)
   }
 
   invoiceIsLoading.value = false
-  itemsTableIsLoading.value = false
 }
 
 const handlePrint = () => {
@@ -54,7 +57,7 @@ onMounted(() => {
 
 <template>
   <div id="print-preview" class="bg-white text-black">
-    <PrintPreview :invoice="invoice"/>
+    <PrintPreview :invoice="invoice" :total="total"/>
   </div>
   <button id="print-button" class="btn btn-primary" @click="handlePrint">Print</button>
 </template>
@@ -62,10 +65,13 @@ onMounted(() => {
 <style>
 #print-preview {
   max-height: 90vh;
-  /*display: none;*/
+  display: none;
   aspect-ratio: 1 / 1.414;
 }
 @media print {
+  @page {
+    size: A4 portrait;
+  }
   body {
     background-color: white;
   }