changed print format a bit

1 files changed, 21 insertions, 9 deletions

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>