From 4c48edc7905d6fb16b01ea707ee7e730dff78ced Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Thu, 7 Dec 2023 05:01:08 +0530
Subject: added view invoice page with print button!

---
 src/views/EditInvoice.vue | 31 +++-----------------
 src/views/HomeView.vue    |  2 +-
 src/views/ViewInvoice.vue | 72 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+), 28 deletions(-)
 create mode 100644 src/views/ViewInvoice.vue

(limited to 'src/views')

diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue
index adc172b..69afc7e 100644
--- a/src/views/EditInvoice.vue
+++ b/src/views/EditInvoice.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, toRaw } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRoute } from "vue-router"
 import { useToast } from 'vue-toast-notification'
 import axios from 'axios'
-import currency from "currency.js"
 
 import Invoice from "./../classes/invoice"
-import InvoiceItem from "./../classes/invoice_item"
+import { calculate } from "./../classes/invoice_item"
 
 import invoiceHeader from './../components/invoice_header.vue'
 import itemSelector from './../components/item_selector.vue'
@@ -25,28 +24,6 @@ const items = ref<any[]>([])
 const invoiceIsLoading = ref(true)
 const itemsTableIsLoading = ref(true)
 
-const processItems = (items: InvoiceItem[]) => items.map((x: InvoiceItem) => {
-  const quantity = currency(x.Quantity)
-  const unitPrice = currency(x.UnitPrice)
-  const gstPercentage = currency(x.GSTPercentage)
-  const gstValue = unitPrice.multiply(gstPercentage).divide(100)
-  const totalGSTValue = gstValue.multiply(quantity)
-  const amountWithoutGST = unitPrice.multiply(quantity)
-
-  return({
-    ...x
-    , Quantity: quantity
-    , UnitPrice: unitPrice
-    , GSTValue: gstValue
-    , TotalGSTValue: totalGSTValue
-    , AmountWithoutGST: amountWithoutGST
-    , TotalAmount: amountWithoutGST.add(totalGSTValue)
-  })
-})
-          //{{ currency(item.UnitPrice).add(currency(item.UnitPrice).multiply(currency(item.GSTPercentage)).divide(100)).multiply(currency(item.Quantity)) }}
-          //  {{ currency(item.UnitPrice).multiply(currency(item.Quantity)) }}
-          //  {{ currency(item.UnitPrice).multiply(currency(item.GSTPercentage)).divide(100).multiply(item.Quantity) }}
-
 const getInvoice = async () => {
   invoiceIsLoading.value = true
   itemsTableIsLoading.value = true
@@ -54,7 +31,7 @@ const getInvoice = async () => {
   try {
     const r = await axios.get(`/invoice/${invoiceId}`)
     invoice.value = r.data.data
-    items.value = processItems(r.data.data.Items)
+    items.value = calculate(r.data.data.Items)
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
     console.error(err)
@@ -71,7 +48,7 @@ const refreshItems = async () => {
   try {
     const res = await axios.get(`/invoice/${invoiceId}/item`)
     if (res.status === 200) {
-      items.value = processItems(res.data.data)
+      items.value = calculate(res.data.data)
     }
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6ef6440..2092e6b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -33,7 +33,7 @@ onMounted(() => {
   <h2>Draft Invoices:</h2>
   <ul>
     <li v-for="draft in allDrafts" :key="draft['ID']">
-      <RouterLink :to="{path: `/invoice/edit-draft/${draft['ID']}`}">Invoice Number {{ draft["InvoiceNumber"] }}</RouterLink>
+      <RouterLink :to="{path: `/invoice/edit/${draft['ID']}`}">Invoice Number {{ draft["InvoiceNumber"] }}</RouterLink>
     </li>
   </ul>
 </template>
diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue
new file mode 100644
index 0000000..c2a6558
--- /dev/null
+++ b/src/views/ViewInvoice.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+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 invoiceHeader from './../components/invoice_header.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 invoiceId = route.params.id
+const invoice = ref(new Invoice())
+const items = ref<any[]>([])
+
+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)
+  } catch (err) {
+    toast.error('An unhandled exception occoured. Please check logs')
+    console.error(err)
+  }
+
+  invoiceIsLoading.value = false
+  itemsTableIsLoading.value = false
+}
+
+const handlePrint = () => {
+  print()
+}
+
+onMounted(() => {
+  getInvoice()
+})
+</script>
+
+<template>
+  <invoiceHeader
+    :invoice="invoice" />
+  <invoiceItemsTable
+    :items="items"
+    :isLoading="itemsTableIsLoading" />
+  <invoiceSummary
+    :items="items"
+    :isLoading="itemsTableIsLoading"
+  />
+  <button id="print-button" class="btn btn-primary" @click="handlePrint">Print</button>
+</template>
+
+<style>
+@media print {
+  #sidebar, #navbar, #print-button, .btn {
+    display: none !important;
+  }
+}
+</style>
-- 
cgit v1.2.3