diff options
| -rw-r--r-- | src/classes/invoice_item.ts | 2 | ||||
| -rw-r--r-- | src/components/invoice_items_table.vue | 30 | ||||
| -rw-r--r-- | src/views/ViewInvoice.vue | 8 |
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; |