changed print format a bit

3 files changed, 29 insertions, 11 deletions

diff --git a/src/classes/invoice_item.ts b/src/classes/invoice_item.ts
index dcb917a..c3da433 100644
--- a/src/classes/invoice_item.ts
+++ b/src/classes/invoice_item.ts
@@ -37,6 +37,6 @@ export const calculate = (items: InvoiceItem[]) => items.map((x: InvoiceItem) =>
     , GSTValue: gstValue
     , TotalGSTValue: totalGSTValue
     , AmountWithoutGST: amountWithoutGST
-    , TotalAmount: amountWithoutGST.add(totalGSTValue)
+    , TotalAmount: amountWithoutGST.multiply(gstPercentage).divide(100).add(amountWithoutGST)
   })
 })
diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue
index 285f990..ad1bf94 100644
--- a/src/components/invoice_items_table.vue
+++ b/src/components/invoice_items_table.vue
@@ -32,12 +32,12 @@ const handleDelete = async (id) => {
       <tr>
         <th scope="col">#</th>
         <th scope="col">Item Name</th>
-        <th scope="col">Description</th>
-        <th scope="col">Brand</th>
+        <th v-if="!props.preview" scope="col">Brand</th>
         <th scope="col">HSN</th>
         <th scope="col">Unit Price</th>
-        <th scope="col">GST <span class="sup text-muted">%</span></th>
-        <th scope="col">Quantity <span class="sup text-muted">Unit</span></th>
+        <th v-if="props.preview" scope="col">Taxable Value</th>
+        <th scope="col">GST</th>
+        <th scope="col">Quantity</th>
         <th scope="col">Amount</th>
 
         <th v-if="!props.preview" scope="col" class="table-action-column">
@@ -53,16 +53,24 @@ const handleDelete = async (id) => {
     <tbody>
       <tr v-for="(item, index) in props.items" :key="item['id']">
         <td scope="row">{{ index + 1 }}</td>
-        <td>{{ item.Name }}</td>
-        <td>{{ item.Description }}</td>
-        <td>{{ item.BrandName }}</td>
+        <td class="item-name-cell multi-row">
+          <span>{{ item.Name }}</span>
+          <span class="text-muted">
+            <span v-if="props.preview">{{ item.BrandName }}</span>
+            {{ item.Description }}
+          </span>
+        </td>
+        <td v-if="!props.preview">{{ item.BrandName }}</td>
         <td>{{ item.HSN }}</td>
         <td>{{ item.UnitPrice }}</td>
+        <td v-if="props.preview">{{ item.AmountWithoutGST }}</td>
         <td>
           {{ item.GSTValue }} <span class="sup text-muted">{{ item.GSTPercentage }}%</span>
         </td>
-        <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>
+          {{ item.Quantity }} <span class="sup text-muted">{{ item.UnitOfMeasure }}</span>
+        </td>
+        <td>{{ item.TotalAmount }}</td>
 
         <td v-if="!props.preview" class="table-action-column">
           <div class="wrapper">
@@ -110,4 +118,8 @@ tbody tr:hover .table-action-column .btn {
   opacity: 1;
   transition: opacity 300ms;
 }
+td.multi-row {
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue
index 68857b4..5f2a783 100644
--- a/src/views/ViewInvoice.vue
+++ b/src/views/ViewInvoice.vue
@@ -74,7 +74,6 @@ onMounted(() => {
   font-size: 12pt !important;
 }
 #print-preview .sup {
-  display: none;
 }
 #print-preview table {
   width: 100%;
@@ -88,9 +87,16 @@ onMounted(() => {
 #print-preview .invoice-summary {
   margin-top: auto !important;
 }
+#print-preview .item-name-cell span {
+  max-width: 150pt !important;
+}
 @media print {
+  body {
+    background-color: white;
+  }
   #print-preview {
     width: auto !important;
+    height: 100% !important;
   }
   #sidebar, #navbar, #print-button, .btn {
     display: none !important;