populated items list and total in print preview

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>