aboutsummaryrefslogtreecommitdiff
path: root/src/components/PrintPreviewItemsList.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/PrintPreviewItemsList.vue')
-rw-r--r--src/components/PrintPreviewItemsList.vue51
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>