diff options
Diffstat (limited to 'src/components/PrintPreviewItemsList.vue')
| -rw-r--r-- | src/components/PrintPreviewItemsList.vue | 51 |
1 files changed, 40 insertions, 11 deletions
diff --git a/src/components/PrintPreviewItemsList.vue b/src/components/PrintPreviewItemsList.vue index 72f0fc1..2e81e9a 100644 --- a/src/components/PrintPreviewItemsList.vue +++ b/src/components/PrintPreviewItemsList.vue @@ -12,20 +12,32 @@ <div class="cell">Unit Price</div> <div class="cell">Discount</div> <div class="cell">Taxable Value</div> - <div class="cell">GST</div> + <div class="cell nested-col-header"> + <div>GST</div> + <div class="nested-col"> + <div class="nested-cell">%</div> + <div class="nested-cell">cgst</div> + <div class="nested-cell nested-cell-last">sgst</div> + </div> + </div> <div class="cell">Total</div> </div> <div class="item-list"> <div v-for="(item, index) in props.items" :key="item['id']" class="item-list-row"> - <div class="cell">{{ index + 1 }}</div> - <div class="cell">{{ item.Name }}</div> + <div class="cell text-center">{{ index + 1 }}</div> + <div class="cell">{{ item.Brand }} {{ item.Name }}</div> <div class="cell">{{ item.HSN }}</div> - <div class="cell">1</div> - <div class="cell">100</div> - <div class="cell">0</div> - <div class="cell">10</div> - <div class="cell">18</div> - <div class="cell">1000</div> + <div class="cell">{{ item.Quantity }}</div> + <div class="cell">{{ item.UnitPrice }}</div> + <div class="cell">null</div> + <div class="cell">{{ item.AmountWithoutGST }}</div> + <div class="cell nested-col"> + <!-- TODO: check if cgst+sgst or igst needs to be calculated --> + <div class="nested-cell">{{ item.GSTPercentage }}%</div> + <div class="nested-cell">{{ item.TotalGSTValue.distribute(2)[0] }}</div> + <div class="nested-cell nested-cell-last">{{ item.TotalGSTValue.distribute(2)[1] }}</div> + </div> + <div class="cell">{{ item.TotalAmount }}</div> </div> </div> </div> @@ -33,7 +45,6 @@ <style> .items-list-wrapper { - margin-top: 1em; border-top: 1px solid gray; border-left: 1px solid gray; } @@ -43,7 +54,13 @@ } .items-list-header, .item-list-row { display: grid; - grid-template-columns: 0.3in 2in 0.5in 0.5in 0.5in 0.6in 0.77in 1.5in 0.6in; + grid-template-columns: 0.3fr 3fr 0.8fr 0.8fr 1fr 1fr 1.1fr 2fr 0.8fr; +} +.nested-cell { + border-right: 1px solid gray; +} +.nested-cell-last { + border-right: none; } .items-list-header .cell { font-weight: bold; @@ -56,4 +73,16 @@ display: flex; flex-direction: column; } +.items-list-header .nested-col-header { + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr; +} +.items-list-header .nested-col { + border-top: 1px solid gray; +} +.nested-col { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </style> |